@worktile/theia 16.4.0-next.5 → 16.4.0-next.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/plugins/color/toolbar-item.component.mjs +30 -17
- package/fesm2022/worktile-theia.mjs +27 -15
- package/fesm2022/worktile-theia.mjs.map +1 -1
- package/package.json +1 -1
- package/plugins/color/toolbar-item.component.d.ts +5 -6
- package/plugins/color/toolbar-item.component.scss +18 -0
- package/styles/index.scss +1 -0
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Component } from '@angular/core';
|
|
2
2
|
import { Transforms } from 'slate';
|
|
3
|
+
import { AngularEditor } from 'slate-angular';
|
|
4
|
+
import { MarkTypes } from '../../constants/node-types';
|
|
3
5
|
import { TheBaseToolbarItem } from '../../core/toolbar-item/base-toolbar-item';
|
|
4
6
|
import { reSelection } from '../../utils/refocus';
|
|
5
7
|
import { ColorEditor } from './color.editor';
|
|
6
|
-
import { AngularEditor } from 'slate-angular';
|
|
7
8
|
import * as i0 from "@angular/core";
|
|
8
9
|
import * as i1 from "@angular/common";
|
|
9
10
|
import * as i2 from "@angular/forms";
|
|
@@ -12,13 +13,10 @@ import * as i4 from "ngx-tethys/tooltip";
|
|
|
12
13
|
import * as i5 from "ngx-tethys/action";
|
|
13
14
|
import * as i6 from "ngx-tethys/color-picker";
|
|
14
15
|
export class TheColorToolbarItemComponent extends TheBaseToolbarItem {
|
|
15
|
-
get type() {
|
|
16
|
-
return this.toolbarItem.key;
|
|
17
|
-
}
|
|
18
16
|
constructor() {
|
|
19
17
|
super();
|
|
20
|
-
this.
|
|
21
|
-
this.
|
|
18
|
+
this.lastTextColor = '#FF0100';
|
|
19
|
+
this.lastBackgroundColor = '#FFDA00';
|
|
22
20
|
this.pickerActive = false;
|
|
23
21
|
}
|
|
24
22
|
ngOnInit() {
|
|
@@ -35,34 +33,49 @@ export class TheColorToolbarItemComponent extends TheBaseToolbarItem {
|
|
|
35
33
|
event.preventDefault();
|
|
36
34
|
event.stopPropagation();
|
|
37
35
|
}
|
|
38
|
-
|
|
36
|
+
getDefaultColor() {
|
|
37
|
+
if (this.toolbarItem.key === MarkTypes.color) {
|
|
38
|
+
return this.lastTextColor;
|
|
39
|
+
}
|
|
40
|
+
else if (this.toolbarItem.key === MarkTypes.backgroundColor) {
|
|
41
|
+
return this.lastBackgroundColor;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
selectColor(event) {
|
|
45
|
+
const color = this.selectedColor || this.getDefaultColor();
|
|
39
46
|
this.preventDefault(event);
|
|
40
|
-
this.changeColor(
|
|
47
|
+
this.changeColor(color);
|
|
41
48
|
}
|
|
42
|
-
changeColor(
|
|
49
|
+
changeColor(color) {
|
|
43
50
|
if (!this.editor.selection) {
|
|
44
51
|
reSelection(this.editor);
|
|
45
52
|
}
|
|
46
53
|
// 无填充色
|
|
47
|
-
if (
|
|
48
|
-
this.active = false;
|
|
54
|
+
if (color === 'transparent') {
|
|
49
55
|
this.selectedColor = '';
|
|
50
56
|
}
|
|
51
57
|
else {
|
|
52
|
-
this.selectedColor =
|
|
58
|
+
this.selectedColor = color;
|
|
59
|
+
}
|
|
60
|
+
if (this.toolbarItem.key === MarkTypes.color) {
|
|
61
|
+
this.lastTextColor = this.selectedColor;
|
|
62
|
+
}
|
|
63
|
+
else if (this.toolbarItem.key === MarkTypes.backgroundColor) {
|
|
64
|
+
this.lastBackgroundColor = this.selectedColor;
|
|
53
65
|
}
|
|
54
|
-
this.lastSelectedColor = this.selectedColor;
|
|
55
66
|
setTimeout(() => {
|
|
56
67
|
AngularEditor.focus(this.editor);
|
|
57
68
|
Transforms.select(this.editor, this.editor.selection);
|
|
58
|
-
ColorEditor.setColor(this.editor, this.selectedColor, this.
|
|
69
|
+
ColorEditor.setColor(this.editor, this.selectedColor, this.toolbarItem.key);
|
|
59
70
|
}, 0);
|
|
60
71
|
}
|
|
61
72
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", usesInheritance: true, ngImport: i0, template: "<
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-color-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<thy-actions\n thySize=\"zero\"\n [thyTooltip]=\"toolbarItem.name\"\n thyTooltipPlacement=\"top\"\n class=\"d-flex p-0\"\n [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n <thy-icon\n thyIconType=\"twotone\"\n [thyIconName]=\"toolbarItem.icon\"\n [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n (mousedown)=\"selectColor($event)\"\n ></thy-icon>\n </a>\n <a\n class=\"pl-0 pr-0 caret-down\"\n href=\"javascript:;\"\n thyAction\n thyColorPicker\n thyPlacement=\"bottomLeft\"\n [(ngModel)]=\"selectedColor\"\n (thyPanelOpen)=\"pickerActive = true\"\n (thyPanelClose)=\"pickerActive = false\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"preventDefault($event)\"\n >\n <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i4.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: i6.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
|
|
63
74
|
}
|
|
64
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
|
|
65
76
|
type: Component,
|
|
66
|
-
args: [{ selector: 'the-color-toolbar-item',
|
|
77
|
+
args: [{ selector: 'the-color-toolbar-item', host: {
|
|
78
|
+
class: 'the-color-toolbar-item'
|
|
79
|
+
}, template: "<thy-actions\n thySize=\"zero\"\n [thyTooltip]=\"toolbarItem.name\"\n thyTooltipPlacement=\"top\"\n class=\"d-flex p-0\"\n [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n <thy-icon\n thyIconType=\"twotone\"\n [thyIconName]=\"toolbarItem.icon\"\n [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n (mousedown)=\"selectColor($event)\"\n ></thy-icon>\n </a>\n <a\n class=\"pl-0 pr-0 caret-down\"\n href=\"javascript:;\"\n thyAction\n thyColorPicker\n thyPlacement=\"bottomLeft\"\n [(ngModel)]=\"selectedColor\"\n (thyPanelOpen)=\"pickerActive = true\"\n (thyPanelClose)=\"pickerActive = false\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"preventDefault($event)\"\n >\n <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n</thy-actions>\n" }]
|
|
67
80
|
}], ctorParameters: function () { return []; } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
81
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbGJhci1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL3NyYy9wbHVnaW5zL2NvbG9yL3Rvb2xiYXItaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9zcmMvcGx1Z2lucy9jb2xvci90b29sYmFyLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQ25DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7Ozs7O0FBUzdDLE1BQU0sT0FBTyw0QkFBNkIsU0FBUSxrQkFBa0I7SUFTaEU7UUFDSSxLQUFLLEVBQUUsQ0FBQztRQVBaLGtCQUFhLEdBQVcsU0FBUyxDQUFDO1FBRWxDLHdCQUFtQixHQUFXLFNBQVMsQ0FBQztRQUV4QyxpQkFBWSxHQUFHLEtBQUssQ0FBQztJQUlyQixDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxlQUFlO1FBQ1gsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxnQkFBZ0I7UUFDWixJQUFJLENBQUMsYUFBYSxHQUFHLFdBQVcsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQWtELENBQUMsQ0FBQztJQUN0SSxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQVk7UUFDdkIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRU8sZUFBZTtRQUNuQixJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxLQUFLLFNBQVMsQ0FBQyxLQUFLLEVBQUU7WUFDMUMsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO1NBQzdCO2FBQU0sSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsS0FBSyxTQUFTLENBQUMsZUFBZSxFQUFFO1lBQzNELE9BQU8sSUFBSSxDQUFDLG1CQUFtQixDQUFDO1NBQ25DO0lBQ0wsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFZO1FBQ3BCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQzNELElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDckIsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxFQUFFO1lBQ3hCLFdBQVcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDNUI7UUFDRCxPQUFPO1FBQ1AsSUFBSSxLQUFLLEtBQUssYUFBYSxFQUFFO1lBQ3pCLElBQUksQ0FBQyxhQUFhLEdBQUcsRUFBRSxDQUFDO1NBQzNCO2FBQU07WUFDSCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztTQUM5QjtRQUVELElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLEtBQUssU0FBUyxDQUFDLEtBQUssRUFBRTtZQUMxQyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7U0FDM0M7YUFBTSxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxLQUFLLFNBQVMsQ0FBQyxlQUFlLEVBQUU7WUFDM0QsSUFBSSxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7U0FDakQ7UUFDRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ1osYUFBYSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDakMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDdEQsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFrRCxDQUFDLENBQUM7UUFDL0gsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ1YsQ0FBQzsrR0FsRVEsNEJBQTRCO21HQUE1Qiw0QkFBNEIseUlDZnpDLDIvQkE4QkE7OzRGRGZhLDRCQUE0QjtrQkFQeEMsU0FBUzsrQkFDSSx3QkFBd0IsUUFFNUI7d0JBQ0YsS0FBSyxFQUFFLHdCQUF3QjtxQkFDbEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVHJhbnNmb3JtcyB9IGZyb20gJ3NsYXRlJztcbmltcG9ydCB7IEFuZ3VsYXJFZGl0b3IgfSBmcm9tICdzbGF0ZS1hbmd1bGFyJztcbmltcG9ydCB7IE1hcmtUeXBlcyB9IGZyb20gJy4uLy4uL2NvbnN0YW50cy9ub2RlLXR5cGVzJztcbmltcG9ydCB7IFRoZUJhc2VUb29sYmFySXRlbSB9IGZyb20gJy4uLy4uL2NvcmUvdG9vbGJhci1pdGVtL2Jhc2UtdG9vbGJhci1pdGVtJztcbmltcG9ydCB7IHJlU2VsZWN0aW9uIH0gZnJvbSAnLi4vLi4vdXRpbHMvcmVmb2N1cyc7XG5pbXBvcnQgeyBDb2xvckVkaXRvciB9IGZyb20gJy4vY29sb3IuZWRpdG9yJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0aGUtY29sb3ItdG9vbGJhci1pdGVtJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdG9vbGJhci1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAndGhlLWNvbG9yLXRvb2xiYXItaXRlbSdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIFRoZUNvbG9yVG9vbGJhckl0ZW1Db21wb25lbnQgZXh0ZW5kcyBUaGVCYXNlVG9vbGJhckl0ZW0gaW1wbGVtZW50cyBPbkluaXQge1xuICAgIHNlbGVjdGVkQ29sb3I6IHN0cmluZztcblxuICAgIGxhc3RUZXh0Q29sb3I6IHN0cmluZyA9ICcjRkYwMTAwJztcblxuICAgIGxhc3RCYWNrZ3JvdW5kQ29sb3I6IHN0cmluZyA9ICcjRkZEQTAwJztcblxuICAgIHBpY2tlckFjdGl2ZSA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIHN1cGVyKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2V0U2VsZWN0ZWRDb2xvcigpO1xuICAgIH1cblxuICAgIHNlbGVjdGlvbkNoYW5nZSgpIHtcbiAgICAgICAgc3VwZXIuc2VsZWN0aW9uQ2hhbmdlKCk7XG4gICAgICAgIHRoaXMuc2V0U2VsZWN0ZWRDb2xvcigpO1xuICAgIH1cblxuICAgIHNldFNlbGVjdGVkQ29sb3IoKSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRDb2xvciA9IENvbG9yRWRpdG9yLmdldEFjdGl2ZUNvbG9yKHRoaXMuZWRpdG9yLCB0aGlzLnRvb2xiYXJJdGVtLmtleSBhcyBNYXJrVHlwZXMuY29sb3IgJiBNYXJrVHlwZXMuYmFja2dyb3VuZENvbG9yKTtcbiAgICB9XG5cbiAgICBwcmV2ZW50RGVmYXVsdChldmVudDogRXZlbnQpIHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXREZWZhdWx0Q29sb3IoKSB7XG4gICAgICAgIGlmICh0aGlzLnRvb2xiYXJJdGVtLmtleSA9PT0gTWFya1R5cGVzLmNvbG9yKSB7XG4gICAgICAgICAgICByZXR1cm4gdGhpcy5sYXN0VGV4dENvbG9yO1xuICAgICAgICB9IGVsc2UgaWYgKHRoaXMudG9vbGJhckl0ZW0ua2V5ID09PSBNYXJrVHlwZXMuYmFja2dyb3VuZENvbG9yKSB7XG4gICAgICAgICAgICByZXR1cm4gdGhpcy5sYXN0QmFja2dyb3VuZENvbG9yO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgc2VsZWN0Q29sb3IoZXZlbnQ6IEV2ZW50KSB7XG4gICAgICAgIGNvbnN0IGNvbG9yID0gdGhpcy5zZWxlY3RlZENvbG9yIHx8IHRoaXMuZ2V0RGVmYXVsdENvbG9yKCk7XG4gICAgICAgIHRoaXMucHJldmVudERlZmF1bHQoZXZlbnQpO1xuICAgICAgICB0aGlzLmNoYW5nZUNvbG9yKGNvbG9yKTtcbiAgICB9XG5cbiAgICBjaGFuZ2VDb2xvcihjb2xvcjogc3RyaW5nKSB7XG4gICAgICAgIGlmICghdGhpcy5lZGl0b3Iuc2VsZWN0aW9uKSB7XG4gICAgICAgICAgICByZVNlbGVjdGlvbih0aGlzLmVkaXRvcik7XG4gICAgICAgIH1cbiAgICAgICAgLy8g5peg5aGr5YWF6ImyXG4gICAgICAgIGlmIChjb2xvciA9PT0gJ3RyYW5zcGFyZW50Jykge1xuICAgICAgICAgICAgdGhpcy5zZWxlY3RlZENvbG9yID0gJyc7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLnNlbGVjdGVkQ29sb3IgPSBjb2xvcjtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLnRvb2xiYXJJdGVtLmtleSA9PT0gTWFya1R5cGVzLmNvbG9yKSB7XG4gICAgICAgICAgICB0aGlzLmxhc3RUZXh0Q29sb3IgPSB0aGlzLnNlbGVjdGVkQ29sb3I7XG4gICAgICAgIH0gZWxzZSBpZiAodGhpcy50b29sYmFySXRlbS5rZXkgPT09IE1hcmtUeXBlcy5iYWNrZ3JvdW5kQ29sb3IpIHtcbiAgICAgICAgICAgIHRoaXMubGFzdEJhY2tncm91bmRDb2xvciA9IHRoaXMuc2VsZWN0ZWRDb2xvcjtcbiAgICAgICAgfVxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIEFuZ3VsYXJFZGl0b3IuZm9jdXModGhpcy5lZGl0b3IpO1xuICAgICAgICAgICAgVHJhbnNmb3Jtcy5zZWxlY3QodGhpcy5lZGl0b3IsIHRoaXMuZWRpdG9yLnNlbGVjdGlvbik7XG4gICAgICAgICAgICBDb2xvckVkaXRvci5zZXRDb2xvcih0aGlzLmVkaXRvciwgdGhpcy5zZWxlY3RlZENvbG9yLCB0aGlzLnRvb2xiYXJJdGVtLmtleSBhcyBNYXJrVHlwZXMuY29sb3IgJiBNYXJrVHlwZXMuYmFja2dyb3VuZENvbG9yKTtcbiAgICAgICAgfSwgMCk7XG4gICAgfVxufVxuIiwiPHRoeS1hY3Rpb25zXG4gIHRoeVNpemU9XCJ6ZXJvXCJcbiAgW3RoeVRvb2x0aXBdPVwidG9vbGJhckl0ZW0ubmFtZVwiXG4gIHRoeVRvb2x0aXBQbGFjZW1lbnQ9XCJ0b3BcIlxuICBjbGFzcz1cImQtZmxleCBwLTBcIlxuICBbbmdDbGFzc109XCJ7ICd0aHktZGVmYXVsdC1waWNrZXItYWN0aXZlJzogcGlja2VyQWN0aXZlIH1cIlxuPlxuICA8YSBocmVmPVwiamF2YXNjcmlwdDo7XCIgY2xhc3M9XCJjb2xvclwiIHRoeUFjdGlvbiAobW91c2Vkb3duKT1cInNlbGVjdENvbG9yKCRldmVudClcIj5cbiAgICA8dGh5LWljb25cbiAgICAgIHRoeUljb25UeXBlPVwidHdvdG9uZVwiXG4gICAgICBbdGh5SWNvbk5hbWVdPVwidG9vbGJhckl0ZW0uaWNvblwiXG4gICAgICBbdGh5VHdvdG9uZUNvbG9yXT1cInRvb2xiYXJJdGVtLmtleSA9PT0gJ2NvbG9yJyA/IGxhc3RUZXh0Q29sb3IgOiBsYXN0QmFja2dyb3VuZENvbG9yXCJcbiAgICAgIChtb3VzZWRvd24pPVwic2VsZWN0Q29sb3IoJGV2ZW50KVwiXG4gICAgPjwvdGh5LWljb24+XG4gIDwvYT5cbiAgPGFcbiAgICBjbGFzcz1cInBsLTAgcHItMCBjYXJldC1kb3duXCJcbiAgICBocmVmPVwiamF2YXNjcmlwdDo7XCJcbiAgICB0aHlBY3Rpb25cbiAgICB0aHlDb2xvclBpY2tlclxuICAgIHRoeVBsYWNlbWVudD1cImJvdHRvbUxlZnRcIlxuICAgIFsobmdNb2RlbCldPVwic2VsZWN0ZWRDb2xvclwiXG4gICAgKHRoeVBhbmVsT3Blbik9XCJwaWNrZXJBY3RpdmUgPSB0cnVlXCJcbiAgICAodGh5UGFuZWxDbG9zZSk9XCJwaWNrZXJBY3RpdmUgPSBmYWxzZVwiXG4gICAgKG5nTW9kZWxDaGFuZ2UpPVwiY2hhbmdlQ29sb3IoJGV2ZW50KVwiXG4gICAgKG1vdXNlZG93bik9XCJwcmV2ZW50RGVmYXVsdCgkZXZlbnQpXCJcbiAgPlxuICAgIDx0aHktaWNvbiBjbGFzcz1cImxpbmstZG93bi1pY29uIGZvbnQtc2l6ZS1zbSB0ZXh0LWRlc2NcIiB0aHlJY29uTmFtZT1cImNhcmV0LWRvd25cIj48L3RoeS1pY29uPlxuICA8L2E+XG48L3RoeS1hY3Rpb25zPlxuIl19
|
|
@@ -7892,13 +7892,10 @@ const createCodePlugin = createPluginFactory({
|
|
|
7892
7892
|
});
|
|
7893
7893
|
|
|
7894
7894
|
class TheColorToolbarItemComponent extends TheBaseToolbarItem {
|
|
7895
|
-
get type() {
|
|
7896
|
-
return this.toolbarItem.key;
|
|
7897
|
-
}
|
|
7898
7895
|
constructor() {
|
|
7899
7896
|
super();
|
|
7900
|
-
this.
|
|
7901
|
-
this.
|
|
7897
|
+
this.lastTextColor = '#FF0100';
|
|
7898
|
+
this.lastBackgroundColor = '#FFDA00';
|
|
7902
7899
|
this.pickerActive = false;
|
|
7903
7900
|
}
|
|
7904
7901
|
ngOnInit() {
|
|
@@ -7915,35 +7912,50 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
|
|
|
7915
7912
|
event.preventDefault();
|
|
7916
7913
|
event.stopPropagation();
|
|
7917
7914
|
}
|
|
7918
|
-
|
|
7915
|
+
getDefaultColor() {
|
|
7916
|
+
if (this.toolbarItem.key === MarkTypes.color) {
|
|
7917
|
+
return this.lastTextColor;
|
|
7918
|
+
}
|
|
7919
|
+
else if (this.toolbarItem.key === MarkTypes.backgroundColor) {
|
|
7920
|
+
return this.lastBackgroundColor;
|
|
7921
|
+
}
|
|
7922
|
+
}
|
|
7923
|
+
selectColor(event) {
|
|
7924
|
+
const color = this.selectedColor || this.getDefaultColor();
|
|
7919
7925
|
this.preventDefault(event);
|
|
7920
|
-
this.changeColor(
|
|
7926
|
+
this.changeColor(color);
|
|
7921
7927
|
}
|
|
7922
|
-
changeColor(
|
|
7928
|
+
changeColor(color) {
|
|
7923
7929
|
if (!this.editor.selection) {
|
|
7924
7930
|
reSelection(this.editor);
|
|
7925
7931
|
}
|
|
7926
7932
|
// 无填充色
|
|
7927
|
-
if (
|
|
7928
|
-
this.active = false;
|
|
7933
|
+
if (color === 'transparent') {
|
|
7929
7934
|
this.selectedColor = '';
|
|
7930
7935
|
}
|
|
7931
7936
|
else {
|
|
7932
|
-
this.selectedColor =
|
|
7937
|
+
this.selectedColor = color;
|
|
7938
|
+
}
|
|
7939
|
+
if (this.toolbarItem.key === MarkTypes.color) {
|
|
7940
|
+
this.lastTextColor = this.selectedColor;
|
|
7941
|
+
}
|
|
7942
|
+
else if (this.toolbarItem.key === MarkTypes.backgroundColor) {
|
|
7943
|
+
this.lastBackgroundColor = this.selectedColor;
|
|
7933
7944
|
}
|
|
7934
|
-
this.lastSelectedColor = this.selectedColor;
|
|
7935
7945
|
setTimeout(() => {
|
|
7936
7946
|
AngularEditor.focus(this.editor);
|
|
7937
7947
|
Transforms.select(this.editor, this.editor.selection);
|
|
7938
|
-
ColorEditor.setColor(this.editor, this.selectedColor, this.
|
|
7948
|
+
ColorEditor.setColor(this.editor, this.selectedColor, this.toolbarItem.key);
|
|
7939
7949
|
}, 0);
|
|
7940
7950
|
}
|
|
7941
7951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7942
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", usesInheritance: true, ngImport: i0, template: "<
|
|
7952
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-color-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<thy-actions\n thySize=\"zero\"\n [thyTooltip]=\"toolbarItem.name\"\n thyTooltipPlacement=\"top\"\n class=\"d-flex p-0\"\n [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n <thy-icon\n thyIconType=\"twotone\"\n [thyIconName]=\"toolbarItem.icon\"\n [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n (mousedown)=\"selectColor($event)\"\n ></thy-icon>\n </a>\n <a\n class=\"pl-0 pr-0 caret-down\"\n href=\"javascript:;\"\n thyAction\n thyColorPicker\n thyPlacement=\"bottomLeft\"\n [(ngModel)]=\"selectedColor\"\n (thyPanelOpen)=\"pickerActive = true\"\n (thyPanelClose)=\"pickerActive = false\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"preventDefault($event)\"\n >\n <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i4.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: i6$2.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
|
|
7943
7953
|
}
|
|
7944
7954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
|
|
7945
7955
|
type: Component,
|
|
7946
|
-
args: [{ selector: 'the-color-toolbar-item',
|
|
7956
|
+
args: [{ selector: 'the-color-toolbar-item', host: {
|
|
7957
|
+
class: 'the-color-toolbar-item'
|
|
7958
|
+
}, template: "<thy-actions\n thySize=\"zero\"\n [thyTooltip]=\"toolbarItem.name\"\n thyTooltipPlacement=\"top\"\n class=\"d-flex p-0\"\n [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n <thy-icon\n thyIconType=\"twotone\"\n [thyIconName]=\"toolbarItem.icon\"\n [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n (mousedown)=\"selectColor($event)\"\n ></thy-icon>\n </a>\n <a\n class=\"pl-0 pr-0 caret-down\"\n href=\"javascript:;\"\n thyAction\n thyColorPicker\n thyPlacement=\"bottomLeft\"\n [(ngModel)]=\"selectedColor\"\n (thyPanelOpen)=\"pickerActive = true\"\n (thyPanelClose)=\"pickerActive = false\"\n (ngModelChange)=\"changeColor($event)\"\n (mousedown)=\"preventDefault($event)\"\n >\n <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n </a>\n</thy-actions>\n" }]
|
|
7947
7959
|
}], ctorParameters: function () { return []; } });
|
|
7948
7960
|
|
|
7949
7961
|
const createColorPlugin = createPluginFactory({
|