@worktile/theia 3.0.2 → 3.0.5

package/bundles/worktile-theia.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('slate-angular'), require('ngx-tethys/core'), require('is-hotkey'), require('slate'), require('slate-history'), require('rxjs'), require('ngx-tethys/popover'), require('ngx-tethys/icon'), require('ngx-tethys/input'), require('@atinc/selene'), require('lodash'), require('ngx-tethys/util'), require('@angular/cdk/overlay'), require('marked'), require('ngx-tethys'), require('ngx-tethys/alert'), require('rxjs/operators'), require('ngx-tethys/uploader'), require('@angular/platform-browser'), require('ngx-tethys/progress'), require('ngx-tethys/nav'), require('ngx-tethys/tooltip'), require('ng-codemirror'), require('ngx-tethys/notify'), require('ngx-tethys/action-menu'), require('ngx-tethys/switch'), require('ngx-tethys/resizable'), require('is-url'), require('ngx-tethys/button'), require('ngx-tethys/form'), require('ngx-tethys/shared'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('ngx-tethys/list'), require('ngx-tethys/autocomplete'), require('ngx-tethys/avatar'), require('ngx-tethys/select')) :
     typeof define === 'function' && define.amd ? define('@worktile/theia', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'slate-angular', 'ngx-tethys/core', 'is-hotkey', 'slate', 'slate-history', 'rxjs', 'ngx-tethys/popover', 'ngx-tethys/icon', 'ngx-tethys/input', '@atinc/selene', 'lodash', 'ngx-tethys/util', '@angular/cdk/overlay', 'marked', 'ngx-tethys', 'ngx-tethys/alert', 'rxjs/operators', 'ngx-tethys/uploader', '@angular/platform-browser', 'ngx-tethys/progress', 'ngx-tethys/nav', 'ngx-tethys/tooltip', 'ng-codemirror', 'ngx-tethys/notify', 'ngx-tethys/action-menu', 'ngx-tethys/switch', 'ngx-tethys/resizable', 'is-url', 'ngx-tethys/button', 'ngx-tethys/form', 'ngx-tethys/shared', '@angular/cdk/coercion', '@angular/cdk/portal', 'ngx-tethys/list', 'ngx-tethys/autocomplete', 'ngx-tethys/avatar', 'ngx-tethys/select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.theia = {}), global.ng.core, global.ng.common, global.ng.forms, global.i1, global.core, global.isHotkey, global.slate, global.slateHistory, global.rxjs, global.i1$1, global.i4, global.i5, global.selene, global._lodash, global.util, global.ng.cdk.overlay, global.marked, global.i1$2, global.i1$3, global.rxjs.operators, global.uploader, global.ng.platformBrowser, global.i6, global.i3, global.i5$1, global.i8, global.i1$5, global.i2$1, global.i5$2, global.i9, global.isUrl, global.i1$6, global.i2$2, global.i5$3, global.ng.cdk.coercion, global.ng.cdk.portal, global.i1$7, global.autocomplete, global.avatar, global.select));
-})(this, (function (exports, i0, i10, i4$1, i1, core, isHotkey, slate, slateHistory, rxjs, i1$1, i4, i5, selene, _lodash, util, i2, marked, i1$2, i1$3, operators, uploader, i1$4, i6, i3, i5$1, i8, i1$5, i2$1, i5$2, i9, isUrl, i1$6, i2$2, i5$3, coercion, portal, i1$7, autocomplete, avatar, select) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.theia = {}), global.ng.core, global.ng.common, global.ng.forms, global.i1, global.core, global.isHotkey, global.slate, global.slateHistory, global.rxjs, global.i1$1, global.i3, global.i5, global.selene, global._lodash, global.util, global.ng.cdk.overlay, global.marked, global.i1$2, global.i1$3, global.rxjs.operators, global.uploader, global.ng.platformBrowser, global.i6, global.i3$1, global.i5$1, global.i8, global.i1$5, global.i2$1, global.i5$2, global.i9, global.isUrl, global.i1$6, global.i2$2, global.i5$3, global.ng.cdk.coercion, global.ng.cdk.portal, global.i1$7, global.autocomplete, global.avatar, global.select));
+})(this, (function (exports, i0, i10, i4, i1, core, isHotkey, slate, slateHistory, rxjs, i1$1, i3, i5, selene, _lodash, util, i2, marked, i1$2, i1$3, operators, uploader, i1$4, i6, i3$1, i5$1, i8, i1$5, i2$1, i5$2, i9, isUrl, i1$6, i2$2, i5$3, coercion, portal, i1$7, autocomplete, avatar, select) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,11 +26,11 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var _lodash__namespace = /*#__PURE__*/_interopNamespace(_lodash);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
@@ -39,7 +39,7 @@
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$4);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$5);
@@ -510,7 +510,8 @@
     var CONTAINER_BLOCKS = [exports.ElementKinds.blockquote, exports.ElementKinds.tableCell];
     var LIST_BLOCK_TYPES = [exports.ElementKinds.numberedList, exports.ElementKinds.bulletedList];
     var VOID_BLOCK_TYPES = [exports.ElementKinds.image, exports.ElementKinds.hr];
-    var BLOCK_DELETEBACKWARD_TYPES = [exports.ElementKinds.tableCell];
+    var BLOCK_DELETE_BACKWARD_TYPES = [exports.ElementKinds.tableCell];
+    var DISABLED_OPERATE_TYPES = [exports.ElementKinds.code, exports.ElementKinds.hr];
 
     exports.ErrorCodes = void 0;
     (function (ErrorCodes) {
@@ -810,7 +811,7 @@
     exports.ToolbarItemType = void 0;
     (function (ToolbarItemType) {
         ToolbarItemType["default"] = "default";
-        ToolbarItemType["toolDropdown"] = "tool-dropdown";
+        ToolbarItemType["dropdown"] = "dropdown";
     })(exports.ToolbarItemType || (exports.ToolbarItemType = {}));
     exports.ToolbarAlignment = void 0;
     (function (ToolbarAlignment) {
@@ -1034,7 +1035,7 @@
         return TheColorSelectComponent;
     }());
     TheColorSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, deps: [{ token: i1__namespace$1.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__namespace, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__namespace, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1342,10 +1343,10 @@
         return nodes;
     }
     /**
-     * 删除 text 节点的 颜色/背景色
+     * 过滤文本格式：颜色/背景色/字体大小
      * @param node
      */
-    function deleteColorAndBackgroundColorOfText(node) {
+    function filterTextFormat(node) {
         node.children.forEach(function (child) {
             if (slate.Text.isText(child)) {
                 if (child['color']) {
@@ -1354,9 +1355,12 @@
                 if (child['background-color']) {
                     delete child['background-color'];
                 }
+                if (child['font-size']) {
+                    delete child['font-size'];
+                }
             }
             else {
-                deleteColorAndBackgroundColorOfText(child);
+                filterTextFormat(child);
             }
         });
     }
@@ -1451,17 +1455,17 @@
 
     var mergeOptions = function (plugin, override) {
         var options = plugin.options;
-        var newOptions = {};
-        for (var option in options) {
-            if (Array.isArray(options[option]) && override.options[option]) {
-                newOptions[option] = mergeArray(options[option], override.options[option]);
+        var newOptions = options;
+        for (var option in override.options) {
+            if (Array.isArray(override.options[option]) && newOptions[option]) {
+                newOptions[option] = mergeArray(newOptions[option], override.options[option]);
                 continue;
             }
-            if (util.isObject(options[option])) {
-                newOptions[option] = _.assign(options[option], override.options[option]);
+            if (util.isObject(override.options[option]) && newOptions[option]) {
+                newOptions[option] = _.assign(newOptions[option], override.options[option]);
                 continue;
             }
-            newOptions[option] = override.options[option] ? override.options[option] : options[option];
+            newOptions[option] = override.options[option];
         }
         plugin.options = newOptions;
     };
@@ -2445,6 +2449,28 @@
         return false;
     };
 
+    var getToolbarItemDisabled = function (editor, key, customTypes) {
+        var _a, _b;
+        if (editor.selection) {
+            var disabledOperateTypes = (_b = (_a = getPluginOptions(editor, key)) === null || _a === void 0 ? void 0 : _a.disabledOperateTypes) !== null && _b !== void 0 ? _b : [];
+            if (customTypes === null || customTypes === void 0 ? void 0 : customTypes.length) {
+                disabledOperateTypes = Array.from(new Set(__spreadArray(__spreadArray([], __read(disabledOperateTypes)), __read(customTypes))));
+            }
+            var anchorNode = anchorBlock(editor);
+            return anchorNode && disabledOperateTypes.includes(anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.type);
+        }
+    };
+
+    var getPluginKeyByToolbarKey = function (editor, toolbarKey) {
+        for (var key in editor.pluginsByKey) {
+            var toolbarItems = editor.pluginsByKey[key].toolbarItems;
+            if (toolbarItems && toolbarItems.some(function (item) { return item.key === toolbarKey; })) {
+                toolbarKey = key;
+            }
+        }
+        return toolbarKey;
+    };
+
     var index$1 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getLastNode: getLastNode,
@@ -2501,7 +2527,9 @@
         findPath: findPath,
         findNode: findNode,
         findDescendant: findDescendant,
-        someNode: someNode
+        someNode: someNode,
+        getToolbarItemDisabled: getToolbarItemDisabled,
+        getPluginKeyByToolbarKey: getPluginKeyByToolbarKey
     });
 
     var insertElements = function (editor, elements) {
@@ -3037,7 +3065,7 @@
         editor.onKeydown = function (event) {
             var selection = editor.selection;
             if (i1.IS_SAFARI && selection && slate.Range.isCollapsed(selection) && i1.hotkeys.isDeleteBackward(event)) {
-                var blockEntry = getAboveByType(editor, BLOCK_DELETEBACKWARD_TYPES);
+                var blockEntry = getAboveByType(editor, BLOCK_DELETE_BACKWARD_TYPES);
                 if (blockEntry && blockEntry[0]) {
                     var isStart = slate.Editor.isStart(editor, selection.anchor, blockEntry[1]);
                     if (isStart) {
@@ -3513,7 +3541,7 @@
         return TheImageComponent;
     }(TheBaseElementComponent));
     TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }, { token: i1__namespace$1.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5964,12 +5992,7 @@
             var _a;
             var contextService = (_a = editor === null || editor === void 0 ? void 0 : editor.injector) === null || _a === void 0 ? void 0 : _a.get(TheContextService);
             var richMedia = contextService.getOptions().theOptions.richMedia;
-            if (richMedia && editor.selection) {
-                var disableGroup = [exports.ElementKinds.image];
-                var anchorBlock$1 = anchorBlock(editor);
-                return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
-            }
-            return false;
+            return getToolbarItemDisabled(editor, exports.PluginKeys.align, richMedia ? [exports.ElementKinds.image] : []);
         },
         setAlign: function (editor, alignment) {
             if (TableEditor.setAlign(editor, alignment)) {
@@ -6009,7 +6032,7 @@
         toolbarItems: [
             {
                 key: exports.ToolbarActionTypes.alignType,
-                type: exports.ToolbarItemType.toolDropdown,
+                type: exports.ToolbarItemType.dropdown,
                 dropdownMode: exports.DropdownMode.icon,
                 dropdownItemKey: exports.ToolbarActionTypes.alignLeft,
                 includes: [exports.ToolbarActionTypes.alignLeft, exports.ToolbarActionTypes.alignCenter, exports.ToolbarActionTypes.alignRight],
@@ -6037,11 +6060,15 @@
                 execute: function (editor) { return AlignEditor.setAlign(editor, exports.Alignment.right); },
                 active: function (editor) { return AlignEditor.isActive(editor, exports.Alignment.right); }
             }
-        ]
+        ],
+        options: {
+            disabledOperateTypes: __spreadArray([], __read(DISABLED_OPERATE_TYPES))
+        }
     });
 
     var headingOptions = {
         allowParentTypes: [exports.ElementKinds.tableCell, exports.ElementKinds.blockquote],
+        disabledOperateTypes: __spreadArray([exports.ElementKinds.image], __read(DISABLED_OPERATE_TYPES)),
         cleanupTypes: [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.listItem]
     };
     var HeadingEditor = {
@@ -6120,7 +6147,7 @@
             {
                 key: exports.ElementKinds.headingList,
                 name: '正文',
-                type: exports.ToolbarItemType.toolDropdown,
+                type: exports.ToolbarItemType.dropdown,
                 dropdownItemKey: exports.ElementKinds.paragraph,
                 includes: __spreadArray([exports.ElementKinds.paragraph], __read(STANDARD_HEADING_TYPES))
             },
@@ -6286,7 +6313,10 @@
                 execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.underline); },
                 active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.underline); }
             }
-        ]
+        ],
+        options: {
+            disabledOperateTypes: __spreadArray([exports.ElementKinds.image], __read(DISABLED_OPERATE_TYPES))
+        }
     });
 
     var withNodeID = function (e) {
@@ -6556,6 +6586,7 @@
 
     var defaultAutoFormatRules = [
         {
+            key: exports.ElementKinds.heading_1,
             type: exports.ElementKinds.heading_1,
             markup: '#',
             format: function (editor) {
@@ -6563,6 +6594,7 @@
             }
         },
         {
+            key: exports.ElementKinds.heading_2,
             type: exports.ElementKinds.heading_2,
             markup: '##',
             format: function (editor) {
@@ -6570,6 +6602,7 @@
             }
         },
         {
+            key: exports.ElementKinds.heading_3,
             type: exports.ElementKinds.heading_3,
             markup: '###',
             format: function (editor) {
@@ -6577,6 +6610,7 @@
             }
         },
         {
+            key: exports.ElementKinds.heading_4,
             type: exports.ElementKinds.heading_4,
             markup: '####',
             format: function (editor) {
@@ -6584,6 +6618,7 @@
             }
         },
         {
+            key: exports.ElementKinds.heading_5,
             type: exports.ElementKinds.heading_5,
             markup: '#####',
             format: function (editor) {
@@ -6591,6 +6626,7 @@
             }
         },
         {
+            key: exports.ElementKinds.heading_6,
             type: exports.ElementKinds.heading_6,
             markup: '######',
             format: function (editor) {
@@ -6598,6 +6634,7 @@
             }
         },
         {
+            key: exports.ElementKinds.blockquote,
             type: exports.ElementKinds.blockquote,
             markup: ['>'],
             format: function (editor) {
@@ -6605,30 +6642,35 @@
             }
         },
         {
+            key: exports.MarkTypes.bold,
             type: exports.MarkTypes.bold,
             between: ['**', '**'],
             mode: 'inline',
             insertTrigger: true
         },
         {
+            key: exports.MarkTypes.bold + "__",
             type: exports.MarkTypes.bold,
             between: ['__', '__'],
             mode: 'inline',
             insertTrigger: true
         },
         {
+            key: exports.MarkTypes.italic,
             type: exports.MarkTypes.italic,
             between: ['*', '*'],
             mode: 'inline',
             insertTrigger: true
         },
         {
+            key: exports.MarkTypes.italic + "_",
             type: exports.MarkTypes.italic,
             between: ['_', '_'],
             mode: 'inline',
             insertTrigger: true
         },
         {
+            key: exports.ElementKinds.inlineCode,
             type: exports.ElementKinds.inlineCode,
             between: ['`', '`'],
             mode: 'inline',
@@ -6638,12 +6680,14 @@
             }
         },
         {
+            key: exports.MarkTypes.strike,
             type: exports.MarkTypes.strike,
             between: ['~~', '~~'],
             mode: 'inline',
             insertTrigger: true
         },
         {
+            key: exports.ElementKinds.code,
             type: exports.ElementKinds.code,
             markup: '```',
             format: function (editor) {
@@ -6651,6 +6695,7 @@
             }
         },
         {
+            key: exports.ElementKinds.listItem,
             type: exports.ElementKinds.listItem,
             markup: [],
             match: function (editor) {
@@ -6661,8 +6706,8 @@
             }
         },
         {
-            type: exports.ElementKinds.listItem,
             key: exports.ElementKinds.numberedList,
+            type: exports.ElementKinds.listItem,
             markup: [],
             match: function (editor, textFromBlockStart) {
                 return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
@@ -6679,6 +6724,7 @@
             }
         },
         {
+            key: exports.ElementKinds.checkItem,
             type: exports.ElementKinds.checkItem,
             markup: [],
             match: function (editor) {
@@ -6689,6 +6735,7 @@
             }
         },
         {
+            key: exports.ElementKinds.hr,
             type: exports.ElementKinds.hr,
             markup: '---',
             insertTrigger: true
@@ -7379,10 +7426,34 @@
         withOverrides: withRemoveVoid
     });
 
-    var TheToolbarBaseItemComponent = /** @class */ (function () {
-        function TheToolbarBaseItemComponent() {
+    var TheBaseToolbarItem = /** @class */ (function () {
+        function TheBaseToolbarItem() {
         }
-        TheToolbarBaseItemComponent.prototype.execute = function (event) {
+        Object.defineProperty(TheBaseToolbarItem.prototype, "toolbarItem", {
+            get: function () {
+                return this._toolbarItem;
+            },
+            set: function (value) {
+                this._toolbarItem = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TheBaseToolbarItem.prototype, "disabledState", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TheBaseToolbarItem.prototype, "activeState", {
+            get: function () {
+                return this.active;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheBaseToolbarItem.prototype.execute = function (event) {
             var _a;
             event.preventDefault();
             event.stopPropagation();
@@ -7393,13 +7464,76 @@
                 i1.AngularEditor.focus(this.editor);
             }
         };
-        return TheToolbarBaseItemComponent;
+        TheBaseToolbarItem.prototype.selectionChange = function (editor) {
+            var _a, _b, _c, _d, _e, _f;
+            if (editor.selection) {
+                this.active = ((_a = this._toolbarItem) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this._toolbarItem) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
+                if ((_c = this._toolbarItem) === null || _c === void 0 ? void 0 : _c.disable) {
+                    this.disabled = ((_d = this._toolbarItem) === null || _d === void 0 ? void 0 : _d.disable) ? (_e = this._toolbarItem) === null || _e === void 0 ? void 0 : _e.disable(editor) : false;
+                }
+                else {
+                    var pluginKey = getPluginKeyByToolbarKey(editor, (_f = this._toolbarItem) === null || _f === void 0 ? void 0 : _f.key);
+                    this.disabled = pluginKey && getToolbarItemDisabled(editor, pluginKey);
+                }
+            }
+        };
+        return TheBaseToolbarItem;
     }());
-    TheToolbarBaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarBaseItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TheToolbarBaseItemComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarBaseItemComponent, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarBaseItemComponent, decorators: [{
+    TheBaseToolbarItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseToolbarItem, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TheBaseToolbarItem.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor" }, host: { properties: { "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseToolbarItem, decorators: [{
                 type: i0.Directive
-            }] });
+            }], propDecorators: { toolbarItem: [{
+                    type: i0.Input
+                }], editor: [{
+                    type: i0.Input
+                }], disabledState: [{
+                    type: i0.HostBinding,
+                    args: ['class.disabled']
+                }], activeState: [{
+                    type: i0.HostBinding,
+                    args: ['class.active']
+                }] } });
+    var TheBaseToolbarDropdown = /** @class */ (function (_super) {
+        __extends(TheBaseToolbarDropdown, _super);
+        function TheBaseToolbarDropdown() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.mode = exports.DropdownMode.text;
+            return _this;
+        }
+        Object.defineProperty(TheBaseToolbarDropdown.prototype, "defaultDropdownItem", {
+            get: function () {
+                var _this = this;
+                var activeItem = this.dropdownItemKey && this.menus.find(function (item) { return item.key === _this.dropdownItemKey; });
+                return activeItem ? activeItem : this.menus[0];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheBaseToolbarDropdown.prototype.selectionChange = function (editor) {
+            _super.prototype.selectionChange.call(this, editor);
+            var activeItem = this.menus.find(function (i) {
+                if (i === null || i === void 0 ? void 0 : i.active) {
+                    return i === null || i === void 0 ? void 0 : i.active(editor);
+                }
+            });
+            if (!this.toolbarItem.dropdownFixedIcon) {
+                this.activeMenuItem = activeItem ? activeItem : this.defaultDropdownItem;
+            }
+        };
+        return TheBaseToolbarDropdown;
+    }(TheBaseToolbarItem));
+    TheBaseToolbarDropdown.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseToolbarDropdown, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TheBaseToolbarDropdown.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseToolbarDropdown, decorators: [{
+                type: i0.Directive
+            }], propDecorators: { menus: [{
+                    type: i0.Input
+                }], mode: [{
+                    type: i0.Input
+                }], dropdownItemKey: [{
+                    type: i0.Input
+                }] } });
 
     var TheToolbarDropdownComponent = /** @class */ (function (_super) {
         __extends(TheToolbarDropdownComponent, _super);
@@ -7409,22 +7543,9 @@
             _this.thyPopover = thyPopover;
             _this.viewContainerRef = viewContainerRef;
             _this.overlay = overlay;
-            _this.mode = exports.DropdownMode.text;
             _this.dropdownMode = exports.DropdownMode;
-            _this.disabled = false;
             return _this;
         }
-        Object.defineProperty(TheToolbarDropdownComponent.prototype, "item", {
-            get: function () {
-                return this._item;
-            },
-            set: function (i) {
-                this._item = i;
-                this.activeMenu = i;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(TheToolbarDropdownComponent.prototype, "isOpen", {
             get: function () {
                 return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
@@ -7445,38 +7566,24 @@
                 this.closeDropdownPopover();
             }
         };
-        Object.defineProperty(TheToolbarDropdownComponent.prototype, "disabledState", {
-            get: function () {
-                return this.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
         TheToolbarDropdownComponent.prototype.ngOnInit = function () {
             var _a;
             if (!this.template) {
                 this.template = this.mode === this.dropdownMode.icon ? this.iconModeTemplate : this.textModeTemplate;
             }
-            if (!this.activeMenu) {
-                this.activeMenu = this.menus[0];
+            if (!this.activeMenuItem) {
+                this.activeMenuItem = this.defaultDropdownItem;
             }
             if (this.toolbarItem) {
                 this.elementRef.nativeElement.classList.add("" + ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key));
             }
         };
-        TheToolbarDropdownComponent.prototype.statusChange = function (editor) {
-            var _a, _b;
-            this.disabled = ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.disable) ? (_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.disable(editor) : false;
-            var activeItem = this.menus.find(function (i) {
-                if (i === null || i === void 0 ? void 0 : i.active) {
-                    return i === null || i === void 0 ? void 0 : i.active(editor);
-                }
-            });
-            this.activeMenu = activeItem ? activeItem : this.item;
-        };
         TheToolbarDropdownComponent.prototype.itemMousedown = function (event, item) {
             _super.prototype.execute.call(this, event);
             this.closeDropdownPopover();
+            if (!this.toolbarItem.dropdownFixedIcon) {
+                this.activeMenuItem = item;
+            }
             if (this.itemMousedownHandle) {
                 this.itemMousedownHandle(item);
                 return;
@@ -7525,9 +7632,9 @@
                 .withPositions([bottomPosition, topPosition]);
         };
         return TheToolbarDropdownComponent;
-    }(TheToolbarBaseItemComponent));
+    }(TheBaseToolbarDropdown));
     TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$1.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenuItem?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenuItem?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenuItem.key && !toolbarItem.dropdownFixedIcon\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7537,15 +7644,7 @@
                             class: 'the-toolbar-dropdown-container'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$1.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { toolbarItem: [{
-                    type: i0.Input
-                }], menus: [{
-                    type: i0.Input
-                }], mode: [{
-                    type: i0.Input
-                }], item: [{
-                    type: i0.Input
-                }], itemMousedownHandle: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$1.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { itemMousedownHandle: [{
                     type: i0.Input
                 }], iconModeTemplate: [{
                     type: i0.ViewChild,
@@ -7562,9 +7661,6 @@
                 }], handleDocumentMouseDown: [{
                     type: i0.HostListener,
                     args: ['document: mousedown', ['$event']]
-                }], disabledState: [{
-                    type: i0.HostBinding,
-                    args: ['class.disabled']
                 }] } });
 
     var TheCodeComponent = /** @class */ (function (_super) {
@@ -7596,11 +7692,11 @@
                 lineWrapping: _this.config.mode === exports.TheMode.default ? false : true,
                 cursorBlinkRate: 500
             };
-            _this.actives = _this.menus[0];
+            _this.activeLanguage = _this.menus[0];
             _this.resizeBounds = null;
-            _this.onChangeLangulage = function (item) {
+            _this.onChangeLanguage = function (item) {
                 _this.options = Object.assign(Object.assign({}, _this.options), { mode: item.key });
-                _this.actives = item;
+                _this.activeLanguage = item;
                 CodeEditor.setCodeAttribute(_this.editor, _this.element, { language: item.key });
             };
             return _this;
@@ -7746,7 +7842,7 @@
         TheCodeComponent.prototype.useMode = function () {
             var _this = this;
             this.options = Object.assign(Object.assign({}, this.options), { mode: this.element.language });
-            this.actives = this.menus.find(function (i) { return i.key === _this.element.language; });
+            this.activeLanguage = this.menus.find(function (i) { return i.key === _this.element.language; });
         };
         TheCodeComponent.prototype.useAutoWrap = function () {
             this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: this.element.autoWrap || false });
@@ -7781,7 +7877,7 @@
         return TheCodeComponent;
     }(TheBaseElementComponent));
     TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i5__namespace$2.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown\n            [menus]=\"menus\"\n            [toolbarItem]=\"activeLanguage\"\n            [dropdownItemKey]=\"activeLanguage.key\"\n            [itemMousedownHandle]=\"onChangeLanguage\"\n        >\n        </the-toolbar-dropdown>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }, { type: i5__namespace$2.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8033,7 +8129,7 @@
         return TheLinkEditComponent;
     }());
     TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, deps: [{ token: i1__namespace$1.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8269,7 +8365,10 @@
                 execute: function (editor) { return LinkEditor.insertLink(editor); },
                 active: function (editor) { return LinkEditor.isLinkActive(editor); }
             }
-        ]
+        ],
+        options: {
+            disabledOperateTypes: __spreadArray([exports.ElementKinds.image], __read(DISABLED_OPERATE_TYPES))
+        }
     });
 
     /**
@@ -9147,7 +9246,7 @@
         return TheTableOptionsComponent;
     }());
     TheTableOptionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableOptionsComponent, deps: [{ token: i1__namespace$6.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, template: "\n        <thy-action-menu class=\"table-drop-menu\">\n            <ng-container *ngFor=\"let option of tableDropdownList\">\n                <a thyActionMenuItem href=\"javascript:;\" (mousedown)=\"setTableOptions($event, option)\">\n                    <span thyActionMenuItemName>{{ option.name }}</span>\n                    <span thyActionMenuItemExtendIcon class=\"text-primary\" *ngIf=\"option.isActive\">\n                        <thy-icon thyIconName=\"check\"></thy-icon>\n                    </span>\n                </a>\n            </ng-container>\n        </thy-action-menu>\n    ", isInline: true, components: [{ type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    TheTableOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, template: "\n        <thy-action-menu class=\"table-drop-menu\">\n            <ng-container *ngFor=\"let option of tableDropdownList\">\n                <a thyActionMenuItem href=\"javascript:;\" (mousedown)=\"setTableOptions($event, option)\">\n                    <span thyActionMenuItemName>{{ option.name }}</span>\n                    <span thyActionMenuItemExtendIcon class=\"text-primary\" *ngIf=\"option.isActive\">\n                        <thy-icon thyIconName=\"check\"></thy-icon>\n                    </span>\n                </a>\n            </ng-container>\n        </thy-action-menu>\n    ", isInline: true, components: [{ type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableOptionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9301,7 +9400,7 @@
         return TheTableToolbarComponent;
     }());
     TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, deps: [{ token: i0__namespace.NgZone }, { token: TheColorSelectService }, { token: i1__namespace$1.ThyPopover }, { token: i1__namespace$1.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"tableStore.isSelectedTable\"></nav-split-line>\n    <button\n        thyButton=\"default\"\n        *ngIf=\"tableStore.isSelectedTable\"\n        class=\"mr-2\"\n        thySize=\"md\"\n        class=\"table-options\"\n        (mousedown)=\"openTableOptionMenu($event)\"\n    >\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"tableStore.isSelectedTable\"></nav-split-line>\n    <button\n        thyButton=\"default\"\n        *ngIf=\"tableStore.isSelectedTable\"\n        class=\"mr-2\"\n        thySize=\"md\"\n        class=\"table-options\"\n        (mousedown)=\"openTableOptionMenu($event)\"\n    >\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9365,7 +9464,7 @@
         return TheContextMenuComponent;
     }());
     TheContextMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$1.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__namespace, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__namespace, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10146,6 +10245,9 @@
                         image.onload = function () {
                             resolve(true);
                         };
+                        image.onerror = function () {
+                            resolve(true);
+                        };
                         image.src = item.getAttribute('src');
                     });
                     imageResolves_1.push(imageLoad);
@@ -11628,7 +11730,6 @@
             var _this = _super.call(this) || this;
             _this.thyPopover = thyPopover;
             _this.overlay = overlay;
-            _this.active = false;
             return _this;
         }
         Object.defineProperty(TheTableToolbarItemComponent.prototype, "isOpenTableSelect", {
@@ -11638,17 +11739,12 @@
             enumerable: false,
             configurable: true
         });
-        TheTableToolbarItemComponent.prototype.statusChange = function (editor) {
-            var _a;
-            this.active = (_a = this.item) === null || _a === void 0 ? void 0 : _a.active(editor);
-        };
         TheTableToolbarItemComponent.prototype.execute = function (event) {
             var _a;
             _super.prototype.execute.call(this, event);
             if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) {
                 return;
             }
-            var type = this.item.key;
             this.toggleTableSelect(event);
         };
         TheTableToolbarItemComponent.prototype.toggleTableSelect = function (event, optionsParam) {
@@ -11673,23 +11769,19 @@
             return this.tableSelectRef;
         };
         return TheTableToolbarItemComponent;
-    }(TheToolbarBaseItemComponent));
+    }(TheBaseToolbarItem));
     TheTableToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, deps: [{ token: i1__namespace$6.ThyPopover }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"toolbarItem?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"toolbarItem.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-table-toolbar-item',
-                        template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ",
+                        template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"toolbarItem?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"toolbarItem.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ",
                         host: {
                             class: 'the-toolbar-dropdown-container'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$6.ThyPopover }, { type: i2__namespace.Overlay }]; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], editor: [{
-                    type: i0.Input
-                }] } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$6.ThyPopover }, { type: i2__namespace.Overlay }]; } });
 
     var _a;
     var withTable = function (editor) {
@@ -12147,7 +12239,7 @@
                     return;
                 }
                 // 过滤 text 节点的 color/background-color 属性
-                fragment.forEach(function (node) { return deleteColorAndBackgroundColorOfText(node); });
+                fragment.forEach(function (node) { return filterTextFormat(node); });
                 slate.Transforms.insertFragment(editor, fragment);
                 return;
             }
@@ -12168,67 +12260,49 @@
             _this.cfr = cfr;
             _this.itemMode = exports.ToolbarItemMode.horizontal;
             _this.ToolbarItemMode = exports.ToolbarItemMode;
-            _this.active = false;
-            _this.disabled = false;
             return _this;
         }
         TheToolbarItemComponent.prototype.toggleDropdown = function (event) {
             _super.prototype.execute.call(this, event);
         };
-        Object.defineProperty(TheToolbarItemComponent.prototype, "disabledState", {
-            get: function () {
-                return this.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
         TheToolbarItemComponent.prototype.ngOnInit = function () {
             var _a, _b;
-            if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && i1.isComponentType((_b = this.item) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
+            if (((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && i1.isComponentType((_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
                 this.renderToolbarItem();
             }
         };
-        TheToolbarItemComponent.prototype.statusChange = function (editor) {
-            var _a, _b, _c, _d;
-            this.disabled = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disable) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.disable(editor) : false;
-            this.active = ((_c = this.item) === null || _c === void 0 ? void 0 : _c.active) ? (_d = this.item) === null || _d === void 0 ? void 0 : _d.active(editor) : false;
-        };
         TheToolbarItemComponent.prototype.execute = function (event) {
             var _a, _b, _c;
             _super.prototype.execute.call(this, event);
-            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled || !((_b = this.item) === null || _b === void 0 ? void 0 : _b.execute)) {
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled || !((_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.execute)) {
                 return;
             }
-            (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
+            (_c = this.toolbarItem) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
         };
         TheToolbarItemComponent.prototype.renderToolbarItem = function () {
             var _this = this;
             this.ngZone.run(function () {
-                var toolbarItemFactory = _this.cfr.resolveComponentFactory(_this.item.quickItemComponent);
-                var tollbarItemRef = _this.toolbarContainer.createComponent(toolbarItemFactory);
-                tollbarItemRef.instance.editor = _this.editor;
-                tollbarItemRef.instance.item = _this.item;
-                tollbarItemRef.instance.itemMode = exports.ToolbarItemMode.vertical;
+                var toolbarItemFactory = _this.cfr.resolveComponentFactory(_this.toolbarItem.quickItemComponent);
+                var toolbarItemRef = _this.toolbarContainer.createComponent(toolbarItemFactory);
+                toolbarItemRef.instance.editor = _this.editor;
+                toolbarItemRef.instance.item = _this.toolbarItem;
+                toolbarItemRef.instance.itemMode = exports.ToolbarItemMode.vertical;
             });
         };
         return TheToolbarItemComponent;
-    }(TheToolbarBaseItemComponent));
+    }(TheBaseToolbarItem));
     TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"toolbarItem.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!toolbarItem?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"toolbarItem?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ toolbarItem?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar-item',
-                        template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ",
+                        template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"toolbarItem.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!toolbarItem?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"toolbarItem?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ toolbarItem?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ",
                         host: {
                             class: 'the-toolbar-item'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { editor: [{
-                    type: i0.Input
-                }], item: [{
-                    type: i0.Input
-                }], itemMode: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { itemMode: [{
                     type: i0.Input
                 }], toolbarContainer: [{
                     type: i0.ViewChild,
@@ -12236,9 +12310,6 @@
                 }], toggleDropdown: [{
                     type: i0.HostListener,
                     args: ['mousedown', ['$event']]
-                }], disabledState: [{
-                    type: i0.HostBinding,
-                    args: ['class.disabled']
                 }] } });
 
     var TheQuickToolbarComponent = /** @class */ (function (_super) {
@@ -12292,7 +12363,7 @@
         return TheQuickToolbarComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
     TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i1__namespace$7.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i1__namespace$7.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12532,123 +12603,11 @@
                 execute: function (editor) { return InlineCodeEditor.toggleInlineCode(editor); },
                 active: function (editor) { return InlineCodeEditor.isInlineCodeActive(editor); }
             }
-        ]
-    });
-
-    var TheIndentToolbarComponent = /** @class */ (function (_super) {
-        __extends(TheIndentToolbarComponent, _super);
-        function TheIndentToolbarComponent(elementRef, thyPopover, viewContainerRef, overlay) {
-            var _this = _super.call(this) || this;
-            _this.elementRef = elementRef;
-            _this.thyPopover = thyPopover;
-            _this.viewContainerRef = viewContainerRef;
-            _this.overlay = overlay;
-            _this.mode = exports.DropdownMode.text;
-            _this.dropdownMode = exports.DropdownMode;
-            _this.disabled = false;
-            return _this;
+        ],
+        options: {
+            disabledOperateTypes: __spreadArray([exports.ElementKinds.image], __read(DISABLED_OPERATE_TYPES))
         }
-        Object.defineProperty(TheIndentToolbarComponent.prototype, "isOpen", {
-            get: function () {
-                return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TheIndentToolbarComponent.prototype.toggleDropdown = function (event) {
-            var _a;
-            _super.prototype.execute.call(this, event);
-            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
-                return;
-            }
-            this.openDropdownPopover();
-        };
-        TheIndentToolbarComponent.prototype.handleDocumentMouseDown = function (event) {
-            if (!this.elementRef.nativeElement.contains(event.target)) {
-                this.closeDropdownPopover();
-            }
-        };
-        Object.defineProperty(TheIndentToolbarComponent.prototype, "disabledState", {
-            get: function () {
-                return this.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TheIndentToolbarComponent.prototype.ngOnInit = function () {
-            var _a;
-            if (!this.activeMenu) {
-                this.activeMenu = this.menus[0];
-            }
-            if (this.toolbarItem) {
-                this.elementRef.nativeElement.classList.add("" + ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key));
-            }
-        };
-        TheIndentToolbarComponent.prototype.statusChange = function (editor) {
-            var _a, _b;
-            this.disabled = ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.disable) ? (_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.disable(editor) : false;
-        };
-        TheIndentToolbarComponent.prototype.itemMousedown = function (event, item) {
-            _super.prototype.execute.call(this, event);
-            this.closeDropdownPopover();
-            if (item === null || item === void 0 ? void 0 : item.execute) {
-                item === null || item === void 0 ? void 0 : item.execute(this.editor);
-            }
-        };
-        TheIndentToolbarComponent.prototype.openDropdownPopover = function () {
-            var _a;
-            this.dropdownPopoverRef = this.thyPopover.open(this.dropdownTemplate, {
-                origin: this.elementRef,
-                panelClass: ['the-toolbar-dropdown-popover', (_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key],
-                placement: 'bottomLeft',
-                insideClosable: false,
-                backdropClosable: true,
-                hasBackdrop: false,
-                offset: 10,
-                viewContainerRef: this.viewContainerRef,
-                scrollStrategy: this.overlay.scrollStrategies.reposition()
-            });
-        };
-        TheIndentToolbarComponent.prototype.closeDropdownPopover = function () {
-            var _a;
-            if (this.dropdownPopoverRef) {
-                (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
-            }
-        };
-        return TheIndentToolbarComponent;
-    }(TheToolbarBaseItemComponent));
-    TheIndentToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$1.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheIndentToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'the-indent-toolbar-item',
-                        templateUrl: './toolbar-item.component.html',
-                        host: {
-                            class: 'the-toolbar-dropdown-container'
-                        }
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$1.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { toolbarItem: [{
-                    type: i0.Input
-                }], menus: [{
-                    type: i0.Input
-                }], mode: [{
-                    type: i0.Input
-                }], item: [{
-                    type: i0.Input
-                }], dropdownTemplate: [{
-                    type: i0.ViewChild,
-                    args: ['dropdownTemplate', { static: true }]
-                }], toggleDropdown: [{
-                    type: i0.HostListener,
-                    args: ['mousedown', ['$event']]
-                }], handleDocumentMouseDown: [{
-                    type: i0.HostListener,
-                    args: ['document: mousedown', ['$event']]
-                }], disabledState: [{
-                    type: i0.HostBinding,
-                    args: ['class.disabled']
-                }] } });
+    });
 
     var IndentEditor = {
         getAllowedTypes: function (editor) {
@@ -12717,14 +12676,6 @@
                 return true;
             }
             return false;
-        },
-        isDisabled: function (editor) {
-            if (editor.selection) {
-                var allowedTypes = IndentEditor.getAllowedTypes(editor);
-                var anchorBlock$1 = anchorBlock(editor);
-                return anchorBlock$1 && !allowedTypes.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
-            }
-            return false;
         }
     };
 
@@ -12798,8 +12749,10 @@
             {
                 key: exports.ElementKinds.indent,
                 includes: [exports.Indents.indentRight, exports.Indents.indentLeft],
-                iconComponent: TheIndentToolbarComponent,
-                disable: function (editor) { return IndentEditor.isDisabled(editor); }
+                type: exports.ToolbarItemType.dropdown,
+                dropdownMode: exports.DropdownMode.icon,
+                dropdownItemKey: exports.Indents.indentRight,
+                dropdownFixedIcon: true
             },
             {
                 key: exports.Indents.indentRight,
@@ -12813,7 +12766,6 @@
                 name: '减少缩进',
                 icon: 'float-right',
                 shortcutKey: 'Shift+Tab/BackSpace',
-                type: exports.ToolbarItemType.toolDropdown,
                 execute: function (editor) { return IndentEditor.cancelIndent(editor); }
             }
         ],
@@ -12825,7 +12777,8 @@
                 exports.ElementKinds.bulletedList,
                 exports.ElementKinds.paragraph
             ], __read(HEADING_TYPES)),
-            disableIndentTypes: [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.checkItem]
+            disableIndentTypes: [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.checkItem],
+            disabledOperateTypes: __spreadArray([exports.ElementKinds.image], __read(DISABLED_OPERATE_TYPES))
         }
     });
 
@@ -12891,14 +12844,6 @@
                 }
             }
             return false;
-        },
-        isDisabled: function (editor) {
-            if (editor.selection) {
-                var disableGroup = HEADING_TYPES;
-                var anchorBlock$1 = anchorBlock(editor);
-                return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
-            }
-            return false;
         }
     };
     var sizeOptions = function () {
@@ -12917,12 +12862,14 @@
             {
                 key: exports.MarkTypes.fontSize,
                 name: '字号',
-                type: exports.ToolbarItemType.toolDropdown,
+                type: exports.ToolbarItemType.dropdown,
                 dropdownItemKey: exports.FontSizes.fontSize14,
-                includes: FontSizeTypes,
-                disable: function (editor) { return FontSizeEditor.isDisabled(editor); }
+                includes: FontSizeTypes
             }
-        ], __read(sizeOptions()))
+        ], __read(sizeOptions())),
+        options: {
+            disabledOperateTypes: __spreadArray(__spreadArray(__spreadArray([], __read(HEADING_TYPES)), [exports.ElementKinds.image]), __read(DISABLED_OPERATE_TYPES))
+        }
     });
 
     var TheVerticalToolbarItemComponent = /** @class */ (function (_super) {
@@ -12933,7 +12880,6 @@
             _this.thyPopover = thyPopover;
             _this.viewContainerRef = viewContainerRef;
             _this.isHide = true;
-            _this.active = false;
             return _this;
         }
         Object.defineProperty(TheVerticalToolbarItemComponent.prototype, "isOpened", {
@@ -12949,11 +12895,6 @@
             }
         };
         TheVerticalToolbarItemComponent.prototype.ngOnInit = function () { };
-        TheVerticalToolbarItemComponent.prototype.statusChange = function (editor) {
-            var _a, _b;
-            this.active = ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
-            this.activeMenu = this.menusActive(editor);
-        };
         TheVerticalToolbarItemComponent.prototype.menusActive = function (editor) {
             var _this = this;
             return this.menus.find(function (i) {
@@ -12998,9 +12939,9 @@
             }
         };
         return TheVerticalToolbarItemComponent;
-    }(TheToolbarBaseItemComponent));
+    }(TheBaseToolbarDropdown));
     TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$6.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenuItem?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13011,15 +12952,7 @@
                             '[class.hide]': '!active'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$6.ThyPopover }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], menus: [{
-                    type: i0.Input
-                }], editor: [{
-                    type: i0.Input
-                }], toolbarItem: [{
-                    type: i0.Input
-                }], template: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$6.ThyPopover }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { template: [{
                     type: i0.ViewChild,
                     args: ['VerticalAlignItems', { read: i0.TemplateRef, static: true }]
                 }], handleDocumentMouseDown: [{
@@ -13047,7 +12980,7 @@
             {
                 key: exports.ToolbarActionTypes.verticalAlign,
                 name: '垂直对齐',
-                type: exports.ToolbarItemType.toolDropdown,
+                type: exports.ToolbarItemType.dropdown,
                 dropdownMode: exports.DropdownMode.icon,
                 iconComponent: TheVerticalToolbarItemComponent,
                 includes: [exports.ToolbarActionTypes.verticalAlignTop, exports.ToolbarActionTypes.verticalAlignMiddle, exports.ToolbarActionTypes.verticalAlignBottom],
@@ -13255,7 +13188,6 @@
         function TheColorToolbarItemComponent(thyPopover) {
             var _this = _super.call(this) || this;
             _this.thyPopover = thyPopover;
-            _this.active = false;
             return _this;
         }
         Object.defineProperty(TheColorToolbarItemComponent.prototype, "isOpenColorSelect", {
@@ -13265,17 +13197,13 @@
             enumerable: false,
             configurable: true
         });
-        TheColorToolbarItemComponent.prototype.statusChange = function (editor) {
-            var _a;
-            this.active = (_a = this.item) === null || _a === void 0 ? void 0 : _a.active(editor);
-        };
         TheColorToolbarItemComponent.prototype.execute = function (event) {
             var _a;
             _super.prototype.execute.call(this, event);
-            if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) {
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
                 return;
             }
-            var type = this.item.key;
+            var type = this.toolbarItem.key;
             this.toggleColorSelect(event, type);
         };
         TheColorToolbarItemComponent.prototype.toggleColorSelect = function (event, type) {
@@ -13315,23 +13243,19 @@
             }
         };
         return TheColorToolbarItemComponent;
-    }(TheToolbarBaseItemComponent));
+    }(TheBaseToolbarItem));
     TheColorToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, deps: [{ token: i1__namespace$1.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: toolbarItem.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"toolbarItem.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"toolbarItem.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-color-toolbar-item',
-                        template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ",
+                        template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: toolbarItem.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"toolbarItem.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"toolbarItem.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ",
                         host: {
                             class: 'the-toolbar-item'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.ThyPopover }]; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], editor: [{
-                    type: i0.Input
-                }] } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.ThyPopover }]; } });
 
     var createColorPlugin = createPluginFactory({
         key: exports.PluginKeys.color,
@@ -13350,7 +13274,10 @@
                 iconComponent: TheColorToolbarItemComponent,
                 active: function (editor) { return ColorEditor.getActiveColor(editor, exports.MarkTypes.backgroundColor); }
             }
-        ]
+        ],
+        options: {
+            disabledOperateTypes: __spreadArray([exports.ElementKinds.image], __read(DISABLED_OPERATE_TYPES))
+        }
     });
 
     var internalPlugins = function () { return [
@@ -13432,7 +13359,7 @@
         TheToolbarComponent.prototype.ngOnInit = function () {
             this.setToolbarClass();
             this.renderToolbarView();
-            this.statusChange(this.editor);
+            this.selectionChange(this.editor);
             if (this.isMore) {
                 this.resizeElement();
             }
@@ -13449,9 +13376,9 @@
             }
         };
         TheToolbarComponent.prototype.setToolbarClass = function () {
-            var _d;
+            var _a;
             if (this.editor && !!this.containerClass.length) {
-                (_d = this.elementRef.nativeElement.classList).add.apply(_d, __spreadArray([], __read(this.containerClass)));
+                (_a = this.elementRef.nativeElement.classList).add.apply(_a, __spreadArray([], __read(this.containerClass)));
             }
         };
         TheToolbarComponent.prototype.resizeElement = function () {
@@ -13459,7 +13386,7 @@
             var editableElement = this.elementRef.nativeElement;
             // @ts-ignore
             this.resizeObserver = new ResizeObserver(function (entries) {
-                var e_1, _d;
+                var e_1, _a;
                 try {
                     for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
                         var entry = entries_1_1.value;
@@ -13473,23 +13400,23 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (entries_1_1 && !entries_1_1.done && (_d = entries_1.return)) _d.call(entries_1);
+                        if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
             });
             this.resizeObserver.observe(editableElement);
         };
-        TheToolbarComponent.prototype.statusChange = function (editor) {
-            var e_2, _d;
+        TheToolbarComponent.prototype.selectionChange = function (editor) {
+            var e_2, _a;
             var toolbarItems = __spreadArray(__spreadArray([], __read(this.toolbarItems)), [this.moreGroupMenu]);
             try {
                 for (var toolbarItems_1 = __values(toolbarItems), toolbarItems_1_1 = toolbarItems_1.next(); !toolbarItems_1_1.done; toolbarItems_1_1 = toolbarItems_1.next()) {
                     var item = toolbarItems_1_1.value;
                     if (item.key !== exports.ToolbarActionTypes.split) {
                         var itemComponent = this.components.get(item.key);
-                        if (itemComponent) {
-                            itemComponent.instance.statusChange(editor);
+                        if (itemComponent && itemComponent.instance.selectionChange) {
+                            itemComponent.instance.selectionChange(editor);
                         }
                     }
                 }
@@ -13497,7 +13424,7 @@
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_d = toolbarItems_1.return)) _d.call(toolbarItems_1);
+                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_a = toolbarItems_1.return)) _a.call(toolbarItems_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
@@ -13509,7 +13436,7 @@
             var toolbarItems = this.toolbarItemsCompose();
             var items = toolbarItems.items, group = toolbarItems.group;
             this.ngZone.run(function () {
-                var e_3, _d;
+                var e_3, _a;
                 try {
                     for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
                         var item = items_1_1.value;
@@ -13523,7 +13450,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (items_1_1 && !items_1_1.done && (_d = items_1.return)) _d.call(items_1);
+                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -13547,7 +13474,7 @@
          * set aside 50px
          */
         TheToolbarComponent.prototype.toolbarItemsCompose = function () {
-            var e_4, _d;
+            var e_4, _a;
             var elementWidth = this.isMore ? this.elementWidth : null;
             var maxItemWidth = 50;
             var defaultItemWidth = 35;
@@ -13557,8 +13484,8 @@
             var items = [];
             var group = [];
             try {
-                for (var _e = __values(this.toolbarItems), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var item = _f.value;
+                for (var _b = __values(this.toolbarItems), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var item = _c.value;
                     if (!this.isMore) {
                         items.push(item);
                         continue;
@@ -13580,14 +13507,14 @@
                         elementWidth -= headingWidth;
                         continue;
                     }
-                    var isCustomComponent = (item === null || item === void 0 ? void 0 : item.type) === exports.ToolbarItemType.toolDropdown || !!(item === null || item === void 0 ? void 0 : item.iconComponent);
+                    var isCustomComponent = (item === null || item === void 0 ? void 0 : item.type) === exports.ToolbarItemType.dropdown || !!(item === null || item === void 0 ? void 0 : item.iconComponent);
                     elementWidth -= isCustomComponent ? maxItemWidth : defaultItemWidth;
                 }
             }
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
                 finally { if (e_4) throw e_4.error; }
             }
@@ -13600,12 +13527,12 @@
          * externally designated more group
          */
         TheToolbarComponent.prototype.toolbarItemsAndMoreCompose = function () {
-            var e_5, _d;
+            var e_5, _a;
             var items = [];
             var group = [];
             try {
-                for (var _e = __values(this.toolbarItems), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var item = _f.value;
+                for (var _b = __values(this.toolbarItems), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var item = _c.value;
                     if (item.key === exports.ToolbarActionTypes.split) {
                         items.push(item);
                         continue;
@@ -13616,7 +13543,7 @@
             catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
                 finally { if (e_5) throw e_5.error; }
             }
@@ -13645,15 +13572,17 @@
         TheToolbarComponent.prototype.createToolbarItem = function (item) {
             var iconComponent = item.iconComponent, type = item.type, dropdownMode = item.dropdownMode, dropdownItemKey = item.dropdownItemKey, includes = item.includes, args = __rest(item, ["iconComponent", "type", "dropdownMode", "dropdownItemKey", "includes"]);
             var viewComponent = this.viewComponentType(type);
-            var dropdownItem = this.getDropdownItem(item);
             var factory = this.cfr.resolveComponentFactory(iconComponent ? iconComponent : viewComponent);
             var compRef = this.toolbarContainer.createComponent(factory);
             compRef.instance.editor = this.editor;
             compRef.instance.toolbarItem = item;
-            compRef.instance.menus = includes;
-            compRef.instance.item = includes && dropdownItem ? dropdownItem : args;
-            compRef.instance.mode = dropdownMode;
             this.components.set(item.key, compRef);
+            if (item.type === exports.ToolbarItemType.dropdown) {
+                var dropdownRef = compRef;
+                dropdownRef.instance.dropdownItemKey = item.dropdownItemKey;
+                dropdownRef.instance.menus = includes;
+                dropdownRef.instance.mode = dropdownMode;
+            }
         };
         TheToolbarComponent.prototype.createToolbarSplit = function () {
             var navSplitLineFactory = this.cfr.resolveComponentFactory(NavSplitLineComponent);
@@ -13673,26 +13602,15 @@
             if (type === exports.ToolbarItemType.default) {
                 return TheToolbarItemComponent;
             }
-            if (type === exports.ToolbarItemType.toolDropdown) {
+            if (type === exports.ToolbarItemType.dropdown) {
                 return TheToolbarDropdownComponent;
             }
             return TheToolbarItemComponent;
         };
-        TheToolbarComponent.prototype.getDropdownItem = function (item) {
-            var _a, _b, _c;
-            var dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
-            // modify the fontsize option externally
-            var contextService = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.injector) === null || _b === void 0 ? void 0 : _b.get(TheContextService);
-            var fontSize = contextService === null || contextService === void 0 ? void 0 : contextService.getDefaultFontSize();
-            if (contextService && item.key === exports.MarkTypes.fontSize && fontSize) {
-                dropdownKey = fontSize;
-            }
-            return (_c = item === null || item === void 0 ? void 0 : item.includes) === null || _c === void 0 ? void 0 : _c.find(function (item) { return item.key === dropdownKey; });
-        };
         return TheToolbarComponent;
     }());
     TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13748,7 +13666,7 @@
                     .subscribe(function () {
                     var _a;
                     _this.updateInlineToolbar();
-                    (_a = _this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.statusChange(_this.editor);
+                    (_a = _this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.selectionChange(_this.editor);
                     _this.cdr.detectChanges();
                 });
             });
@@ -13922,7 +13840,7 @@
         return TheQuickInsertComponent;
     }());
     TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14285,7 +14203,7 @@
         TheEditorComponent.prototype.valueChange = function (value) {
             var _a, _b, _c, _d, _e, _f;
             var isEditable = !((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.readonly) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.disabled);
-            (_c = this.theGlobalToolbarInstance) === null || _c === void 0 ? void 0 : _c.statusChange(this.editor);
+            (_c = this.theGlobalToolbarInstance) === null || _c === void 0 ? void 0 : _c.selectionChange(this.editor);
             // quick insert button
             if (isEditable) {
                 (_d = this.quickInsertInstance) === null || _d === void 0 ? void 0 : _d.checkStatus();
@@ -14421,11 +14339,11 @@
             TheContextService,
             TheColorSelectService,
             {
-                provide: i4$1.NG_VALUE_ACCESSOR,
+                provide: i4.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14435,7 +14353,7 @@
                             TheContextService,
                             TheColorSelectService,
                             {
-                                provide: i4$1.NG_VALUE_ACCESSOR,
+                                provide: i4.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                                 multi: true
                             }
@@ -14521,7 +14439,7 @@
             },
             set: function (i) {
                 this._item = i;
-                this.activeMenu = i;
+                this.activeMenuItem = i;
             },
             enumerable: false,
             configurable: true
@@ -14556,9 +14474,9 @@
                 this.openGroup(event);
             }
         };
-        TheToolbarGroupComponent.prototype.statusChange = function (editor) {
+        TheToolbarGroupComponent.prototype.selectionChange = function (editor) {
             var activeItem = this.menusActive(editor);
-            this.activeMenu = activeItem ? activeItem : null;
+            this.activeMenuItem = activeItem ? activeItem : null;
             this.activeChange();
             this.colseGroup();
         };
@@ -14603,7 +14521,7 @@
         return TheToolbarGroupComponent;
     }());
     TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$1.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14629,9 +14547,9 @@
                 }] } });
 
     var TETHYS = [
-        i4.ThyIconModule,
+        i3.ThyIconModule,
         avatar.ThyAvatarModule,
-        i3.ThyNavModule,
+        i3$1.ThyNavModule,
         i2$2.ThyFormModule,
         i5$3.ThySharedModule,
         i1$7.ThyListModule,
@@ -14666,7 +14584,6 @@
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
         TheVerticalToolbarItemComponent,
-        TheIndentToolbarComponent,
         TheTableOptionsComponent
     ];
     var PLUGIN_COMPONENTS = [
@@ -14713,7 +14630,6 @@
             TheTableToolbarItemComponent,
             TheConversionHintComponent,
             TheVerticalToolbarItemComponent,
-            TheIndentToolbarComponent,
             TheTableOptionsComponent, TheImageComponent,
             TheTemplateComponent,
             TheHrComponent,
@@ -14730,9 +14646,9 @@
             TheTableComponent,
             TheTableRowComponent,
             TheTdComponent,
-            TheInlineCodeComponent], imports: [i10.CommonModule, i1.SlateModule, i4$1.FormsModule, i4.ThyIconModule,
+            TheInlineCodeComponent], imports: [i10.CommonModule, i1.SlateModule, i4.FormsModule, i3.ThyIconModule,
             avatar.ThyAvatarModule,
-            i3.ThyNavModule,
+            i3$1.ThyNavModule,
             i2$2.ThyFormModule,
             i5$3.ThySharedModule,
             i1$7.ThyListModule,
@@ -14753,12 +14669,12 @@
                 useValue: TheToolbarGroupComponent
             },
             THE_MODE_PROVIDER
-        ], imports: [__spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4$1.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
+        ], imports: [__spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: __spreadArray(__spreadArray(__spreadArray([TheEditorComponent], __read(PIPES)), __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
-                        imports: __spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4$1.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
+                        imports: __spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
                         exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent],
                         entryComponents: __spreadArray(__spreadArray([], __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
                         providers: [
@@ -14834,7 +14750,7 @@
     exports.ALIGN_BLOCK_TYPES = ALIGN_BLOCK_TYPES;
     exports.A_TAG_REL_ATTR = A_TAG_REL_ATTR;
     exports.AlignEditor = AlignEditor;
-    exports.BLOCK_DELETEBACKWARD_TYPES = BLOCK_DELETEBACKWARD_TYPES;
+    exports.BLOCK_DELETE_BACKWARD_TYPES = BLOCK_DELETE_BACKWARD_TYPES;
     exports.BlockquoteEditor = BlockquoteEditor;
     exports.CLIPBOARD_FORMAT_KEY = CLIPBOARD_FORMAT_KEY;
     exports.CODEMIRROR_PADDING_TOP = CODEMIRROR_PADDING_TOP;
@@ -14846,6 +14762,7 @@
     exports.ColorEditor = ColorEditor;
     exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
     exports.DEFAULT_SCROLL_CONTAINER = DEFAULT_SCROLL_CONTAINER;
+    exports.DISABLED_OPERATE_TYPES = DISABLED_OPERATE_TYPES;
     exports.DefaultElementOptions = DefaultElementOptions;
     exports.DefaultGlobalToolbarDefinition = DefaultGlobalToolbarDefinition;
     exports.DefaultInlineToolbarDefinition = DefaultInlineToolbarDefinition;
@@ -14879,16 +14796,16 @@
     exports.THE_UPLOAD_SERVICE_TOKEN = THE_UPLOAD_SERVICE_TOKEN;
     exports.TableEditor = TableEditor;
     exports.TheBaseElementComponent = TheBaseElementComponent;
+    exports.TheBaseToolbarDropdown = TheBaseToolbarDropdown;
+    exports.TheBaseToolbarItem = TheBaseToolbarItem;
     exports.TheContextService = TheContextService;
     exports.TheDefaultElementComponent = TheDefaultElementComponent;
     exports.TheEditor = TheEditor;
     exports.TheEditorComponent = TheEditorComponent;
     exports.TheEditorModule = TheEditorModule;
     exports.TheImageComponent = TheImageComponent;
-    exports.TheIndentToolbarComponent = TheIndentToolbarComponent;
     exports.TheModeConfig = TheModeConfig;
     exports.TheQueries = index$1;
-    exports.TheToolbarBaseItemComponent = TheToolbarBaseItemComponent;
     exports.TheToolbarComponent = TheToolbarComponent;
     exports.TheToolbarDropdownComponent = TheToolbarDropdownComponent;
     exports.TheToolbarGroupComponent = TheToolbarGroupComponent;
@@ -14911,9 +14828,9 @@
     exports.createVerticalAlignPlugin = createVerticalAlignPlugin;
     exports.dataDeserialize = dataDeserialize;
     exports.dataSerializing = dataSerializing;
-    exports.deleteColorAndBackgroundColorOfText = deleteColorAndBackgroundColorOfText;
     exports.deleteElementKey = deleteElementKey;
     exports.extractFragment = extractFragment;
+    exports.filterTextFormat = filterTextFormat;
     exports.flattenDeepPlugins = flattenDeepPlugins;
     exports.getColsTotalWidth = getColsTotalWidth;
     exports.getEditorUUID = getEditorUUID;