@worktile/theia 3.0.3 → 3.0.6

package/fesm2015/worktile-theia.js

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Injectable, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Inject, ViewChild, Directive, ElementRef, TemplateRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
 import * as i10 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
 import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, ELEMENT_TO_COMPONENT, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, isComponentType, EDITOR_TO_ELEMENT, withAngular, SlateModule } from 'slate-angular';
@@ -13,7 +13,7 @@ import { HistoryEditor, withHistory } from 'slate-history';
 import { fromEvent, timer, Subject, combineLatest, Observable, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopover } from 'ngx-tethys/popover';
-import * as i4 from 'ngx-tethys/icon';
+import * as i3 from 'ngx-tethys/icon';
 import { ThyIconModule } from 'ngx-tethys/icon';
 import * as i5 from 'ngx-tethys/input';
 import { ThyInputModule } from 'ngx-tethys/input';
@@ -33,7 +33,7 @@ import { ThyUploadStatus } from 'ngx-tethys/uploader';
 import * as i1$3 from '@angular/platform-browser';
 import * as i6 from 'ngx-tethys/progress';
 import { ThyProgressModule } from 'ngx-tethys/progress';
-import * as i3 from 'ngx-tethys/nav';
+import * as i3$1 from 'ngx-tethys/nav';
 import { ThyNavModule } from 'ngx-tethys/nav';
 import * as i5$1 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
@@ -202,7 +202,8 @@ const ALIGN_BLOCK_TYPES = [ElementKinds.default, ElementKinds.listItem, ElementK
 const CONTAINER_BLOCKS = [ElementKinds.blockquote, ElementKinds.tableCell];
 const LIST_BLOCK_TYPES = [ElementKinds.numberedList, ElementKinds.bulletedList];
 const VOID_BLOCK_TYPES = [ElementKinds.image, ElementKinds.hr];
-const BLOCK_DELETEBACKWARD_TYPES = [ElementKinds.tableCell];
+const BLOCK_DELETE_BACKWARD_TYPES = [ElementKinds.tableCell];
+const DISABLED_OPERATE_TYPES = [ElementKinds.code, ElementKinds.hr];
 
 var ErrorCodes;
 (function (ErrorCodes) {
@@ -482,7 +483,7 @@ const THE_MODE_PROVIDER = {
 var ToolbarItemType;
 (function (ToolbarItemType) {
     ToolbarItemType["default"] = "default";
-    ToolbarItemType["toolDropdown"] = "tool-dropdown";
+    ToolbarItemType["dropdown"] = "dropdown";
 })(ToolbarItemType || (ToolbarItemType = {}));
 var ToolbarAlignment;
 (function (ToolbarAlignment) {
@@ -700,7 +701,7 @@ class TheColorSelectComponent {
     }
 }
 TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵ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, 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.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheColorSelectComponent.ɵcmp = i0.ɵɵ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, 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.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -1001,10 +1002,10 @@ function deleteElementKey(nodes, key) {
     return nodes;
 }
 /**
- * 删除 text 节点的 颜色/背景色
+ * 过滤文本格式：颜色/背景色/字体大小
  * @param node
  */
-function deleteColorAndBackgroundColorOfText(node) {
+function filterTextFormat(node) {
     node.children.forEach((child) => {
         if (Text.isText(child)) {
             if (child['color']) {
@@ -1013,9 +1014,12 @@ function deleteColorAndBackgroundColorOfText(node) {
             if (child['background-color']) {
                 delete child['background-color'];
             }
+            if (child['font-size']) {
+                delete child['font-size'];
+            }
         }
         else {
-            deleteColorAndBackgroundColorOfText(child);
+            filterTextFormat(child);
         }
     });
 }
@@ -2029,6 +2033,31 @@ const isContainNestedType = (editor, types) => {
     return false;
 };
 
+const getToolbarItemDisabled = (editor, key, customTypes) => {
+    var _a, _b;
+    if (editor.selection) {
+        let 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([...disabledOperateTypes, ...customTypes]));
+        }
+        const anchorNode = anchorBlock(editor);
+        return anchorNode && disabledOperateTypes.includes(anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.type);
+    }
+};
+
+const getPluginByToolbarItem = (editor, toolbarItem) => {
+    const pluginKey = toolbarItem.pluginKey;
+    if (pluginKey) {
+        return editor.pluginsByKey[pluginKey];
+    }
+    for (let key in editor.pluginsByKey) {
+        const toolbarItems = editor.pluginsByKey[key].toolbarItems;
+        if (toolbarItems && toolbarItems.some(item => item.key === toolbarItem.key)) {
+            return editor.pluginsByKey[key];
+        }
+    }
+};
+
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     getLastNode: getLastNode,
@@ -2085,7 +2114,9 @@ var index$1 = /*#__PURE__*/Object.freeze({
     findPath: findPath,
     findNode: findNode,
     findDescendant: findDescendant,
-    someNode: someNode
+    someNode: someNode,
+    getToolbarItemDisabled: getToolbarItemDisabled,
+    getPluginByToolbarItem: getPluginByToolbarItem
 });
 
 const insertElements = (editor, elements) => {
@@ -2612,7 +2643,7 @@ const withResetType = (editor) => {
     editor.onKeydown = (event) => {
         const { selection } = editor;
         if (IS_SAFARI && selection && Range.isCollapsed(selection) && hotkeys.isDeleteBackward(event)) {
-            const blockEntry = getAboveByType(editor, BLOCK_DELETEBACKWARD_TYPES);
+            const blockEntry = getAboveByType(editor, BLOCK_DELETE_BACKWARD_TYPES);
             if (blockEntry && blockEntry[0]) {
                 const isStart = Editor.isStart(editor, selection.anchor, blockEntry[1]);
                 if (isStart) {
@@ -3045,7 +3076,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -5375,12 +5406,7 @@ const AlignEditor = {
         var _a;
         const contextService = (_a = editor === null || editor === void 0 ? void 0 : editor.injector) === null || _a === void 0 ? void 0 : _a.get(TheContextService);
         const { theOptions: { richMedia } } = contextService.getOptions();
-        if (richMedia && editor.selection) {
-            const disableGroup = [ElementKinds.image];
-            const 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, PluginKeys.align, richMedia ? [ElementKinds.image] : []);
     },
     setAlign(editor, alignment) {
         if (TableEditor.setAlign(editor, alignment)) {
@@ -5420,7 +5446,7 @@ const createAlignPlugin = createPluginFactory({
     toolbarItems: [
         {
             key: ToolbarActionTypes.alignType,
-            type: ToolbarItemType.toolDropdown,
+            type: ToolbarItemType.dropdown,
             dropdownMode: DropdownMode.icon,
             dropdownItemKey: ToolbarActionTypes.alignLeft,
             includes: [ToolbarActionTypes.alignLeft, ToolbarActionTypes.alignCenter, ToolbarActionTypes.alignRight],
@@ -5448,11 +5474,15 @@ const createAlignPlugin = createPluginFactory({
             execute: editor => AlignEditor.setAlign(editor, Alignment.right),
             active: editor => AlignEditor.isActive(editor, Alignment.right)
         }
-    ]
+    ],
+    options: {
+        disabledOperateTypes: [...DISABLED_OPERATE_TYPES]
+    }
 });
 
 const headingOptions = {
     allowParentTypes: [ElementKinds.tableCell, ElementKinds.blockquote],
+    disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES],
     cleanupTypes: [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.listItem]
 };
 const HeadingEditor = {
@@ -5530,7 +5560,7 @@ const createHeadingPlugin = createPluginFactory({
         {
             key: ElementKinds.headingList,
             name: '正文',
-            type: ToolbarItemType.toolDropdown,
+            type: ToolbarItemType.dropdown,
             dropdownItemKey: ElementKinds.paragraph,
             includes: [ElementKinds.paragraph, ...STANDARD_HEADING_TYPES]
         },
@@ -5694,7 +5724,10 @@ const createMarkPlugin = createPluginFactory({
             execute: editor => MarkEditor.toggleMark(editor, MarkTypes.underline),
             active: editor => MarkEditor.isMarkActive(editor, MarkTypes.underline)
         }
-    ]
+    ],
+    options: {
+        disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
+    }
 });
 
 const withNodeID = (e) => {
@@ -6775,7 +6808,19 @@ const createRemoveVoidPlugin = createPluginFactory({
     withOverrides: withRemoveVoid
 });
 
-class TheToolbarBaseItemComponent {
+class TheBaseToolbarItem {
+    set toolbarItem(value) {
+        this._toolbarItem = value;
+    }
+    get toolbarItem() {
+        return this._toolbarItem;
+    }
+    get disabledState() {
+        return this.disabled;
+    }
+    get activeState() {
+        return this.active;
+    }
     execute(event) {
         var _a;
         event.preventDefault();
@@ -6787,30 +6832,76 @@ class TheToolbarBaseItemComponent {
             AngularEditor.focus(this.editor);
         }
     }
+    selectionChange(editor) {
+        var _a, _b, _c, _d, _e;
+        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 {
+                const thePlugin = getPluginByToolbarItem(editor, this._toolbarItem);
+                this.disabled = thePlugin && getToolbarItemDisabled(editor, thePlugin.key);
+            }
+        }
+    }
 }
-TheToolbarBaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarBaseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TheToolbarBaseItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarBaseItemComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarBaseItemComponent, decorators: [{
+TheBaseToolbarItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TheBaseToolbarItem.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { toolbarItem: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], disabledState: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], activeState: [{
+                type: HostBinding,
+                args: ['class.active']
+            }] } });
+class TheBaseToolbarDropdown extends TheBaseToolbarItem {
+    constructor() {
+        super(...arguments);
+        this.mode = DropdownMode.text;
+    }
+    get defaultDropdownItem() {
+        const activeItem = this.dropdownItemKey && this.menus.find((item) => item.key === this.dropdownItemKey);
+        return activeItem ? activeItem : this.menus[0];
+    }
+    selectionChange(editor) {
+        super.selectionChange(editor);
+        const activeItem = this.menus.find(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;
+        }
+    }
+}
+TheBaseToolbarDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TheBaseToolbarDropdown.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
+            type: Directive
+        }], propDecorators: { menus: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], dropdownItemKey: [{
+                type: Input
+            }] } });
 
-class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
+class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
     constructor(elementRef, thyPopover, viewContainerRef, overlay) {
         super();
         this.elementRef = elementRef;
         this.thyPopover = thyPopover;
         this.viewContainerRef = viewContainerRef;
         this.overlay = overlay;
-        this.mode = DropdownMode.text;
         this.dropdownMode = DropdownMode;
-        this.disabled = false;
-    }
-    set item(i) {
-        this._item = i;
-        this.activeMenu = i;
-    }
-    get item() {
-        return this._item;
     }
     get isOpen() {
         return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
@@ -6828,34 +6919,24 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
             this.closeDropdownPopover();
         }
     }
-    get disabledState() {
-        return this.disabled;
-    }
     ngOnInit() {
         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}`);
         }
     }
-    statusChange(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;
-        const activeItem = this.menus.find(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;
-    }
     itemMousedown(event, item) {
         super.execute(event);
         this.closeDropdownPopover();
+        if (!this.toolbarItem.dropdownFixedIcon) {
+            this.activeMenuItem = item;
+        }
         if (this.itemMousedownHandle) {
             this.itemMousedownHandle(item);
             return;
@@ -6905,7 +6986,7 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵ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, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵ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, 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$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -6915,15 +6996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                         class: 'the-toolbar-dropdown-container'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { toolbarItem: [{
-                type: Input
-            }], menus: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], itemMousedownHandle: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { itemMousedownHandle: [{
                 type: Input
             }], iconModeTemplate: [{
                 type: ViewChild,
@@ -6940,9 +7013,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             }], handleDocumentMouseDown: [{
                 type: HostListener,
                 args: ['document: mousedown', ['$event']]
-            }], disabledState: [{
-                type: HostBinding,
-                args: ['class.disabled']
             }] } });
 
 class TheCodeComponent extends TheBaseElementComponent {
@@ -6973,11 +7043,11 @@ class TheCodeComponent extends TheBaseElementComponent {
             lineWrapping: this.config.mode === TheMode.default ? false : true,
             cursorBlinkRate: 500
         };
-        this.actives = this.menus[0];
+        this.activeLanguage = this.menus[0];
         this.resizeBounds = null;
-        this.onChangeLangulage = item => {
+        this.onChangeLanguage = 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 });
         };
     }
@@ -7114,7 +7184,10 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
     useMode() {
         this.options = Object.assign(Object.assign({}, this.options), { mode: this.element.language });
-        this.actives = this.menus.find(i => i.key === this.element.language);
+        const menuItem = this.menus.find(i => i.key === this.element.language);
+        if (menuItem) {
+            this.activeLanguage = menuItem;
+        }
     }
     useAutoWrap() {
         this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: this.element.autoWrap || false });
@@ -7147,7 +7220,7 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, 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.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i5$2.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, 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$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }, { type: i5$2.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -7393,7 +7466,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵ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, 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$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵ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, 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$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4.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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{
@@ -7617,7 +7690,10 @@ const createLinkPlugin = createPluginFactory({
             execute: editor => LinkEditor.insertLink(editor),
             active: editor => LinkEditor.isLinkActive(editor)
         }
-    ]
+    ],
+    options: {
+        disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
+    }
 });
 
 /**
@@ -8427,7 +8503,7 @@ TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 </a>
             </ng-container>
         </thy-action-menu>
-    `, isInline: true, components: [{ type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    `, isInline: true, components: [{ type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -8581,7 +8657,7 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, 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.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, 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$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -8644,7 +8720,7 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵ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, 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$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵ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, 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$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -9356,6 +9432,9 @@ class TheTableComponent extends TheBaseElementComponent {
                     image.onload = () => {
                         resolve(true);
                     };
+                    image.onerror = () => {
+                        resolve(true);
+                    };
                     image.src = item.getAttribute('src');
                 });
                 imageResolves.push(imageLoad);
@@ -10738,27 +10817,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 args: ['document: mousedown', ['$event']]
             }] } });
 
-class TheTableToolbarItemComponent extends TheToolbarBaseItemComponent {
+class TheTableToolbarItemComponent extends TheBaseToolbarItem {
     constructor(thyPopover, overlay) {
         super();
         this.thyPopover = thyPopover;
         this.overlay = overlay;
-        this.active = false;
     }
     get isOpenTableSelect() {
         return this.tableSelectRef && this.tableSelectRef.componentInstance;
     }
-    statusChange(editor) {
-        var _a;
-        this.active = (_a = this.item) === null || _a === void 0 ? void 0 : _a.active(editor);
-    }
     execute(event) {
         var _a;
         super.execute(event);
         if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) {
             return;
         }
-        const type = this.item.key;
         this.toggleTableSelect(event);
     }
     toggleTableSelect(event, optionsParam) {
@@ -10784,19 +10857,19 @@ class TheTableToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$6.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarItemComponent.ɵcmp = i0.ɵɵ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, template: `
+TheTableToolbarItemComponent.ɵcmp = i0.ɵɵ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, template: `
         <a
             thyIconNavLink
             class="link-with-down"
-            [thyTooltip]="item?.name"
+            [thyTooltip]="toolbarItem?.name"
             thyTooltipPlacement="top"
             [thyIconNavLinkActive]="active"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="item.icon"></thy-icon>
+            <thy-icon [thyIconName]="toolbarItem.icon"></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -10805,12 +10878,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
         <a
             thyIconNavLink
             class="link-with-down"
-            [thyTooltip]="item?.name"
+            [thyTooltip]="toolbarItem?.name"
             thyTooltipPlacement="top"
             [thyIconNavLinkActive]="active"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="item.icon"></thy-icon>
+            <thy-icon [thyIconName]="toolbarItem.icon"></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
     `,
@@ -10818,11 +10891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                         class: 'the-toolbar-dropdown-container'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i1$6.ThyPopover }, { type: i2.Overlay }]; }, propDecorators: { item: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$6.ThyPopover }, { type: i2.Overlay }]; } });
 
 const withTable = (editor) => {
     const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange } = editor;
@@ -11267,7 +11336,7 @@ const withDeserializeHMTL = (editor) => {
                 return;
             }
             // 过滤 text 节点的 color/background-color 属性
-            fragment.forEach(node => deleteColorAndBackgroundColorOfText(node));
+            fragment.forEach(node => filterTextFormat(node));
             Transforms.insertFragment(editor, fragment);
             return;
         }
@@ -11280,73 +11349,63 @@ const createDeserializeHMTLPlugin = createPluginFactory({
     withOverrides: withDeserializeHMTL
 });
 
-class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
+class TheToolbarItemComponent extends TheBaseToolbarItem {
     constructor(ngZone, cfr) {
         super();
         this.ngZone = ngZone;
         this.cfr = cfr;
         this.itemMode = ToolbarItemMode.horizontal;
         this.ToolbarItemMode = ToolbarItemMode;
-        this.active = false;
-        this.disabled = false;
     }
     toggleDropdown(event) {
         super.execute(event);
     }
-    get disabledState() {
-        return this.disabled;
-    }
     ngOnInit() {
         var _a, _b;
-        if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && isComponentType((_b = this.item) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
+        if (((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && isComponentType((_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
             this.renderToolbarItem();
         }
     }
-    statusChange(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;
-    }
     execute(event) {
         var _a, _b, _c;
         super.execute(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);
     }
     renderToolbarItem() {
         this.ngZone.run(() => {
-            const toolbarItemFactory = this.cfr.resolveComponentFactory(this.item.quickItemComponent);
-            const tollbarItemRef = this.toolbarContainer.createComponent(toolbarItemFactory);
-            tollbarItemRef.instance.editor = this.editor;
-            tollbarItemRef.instance.item = this.item;
-            tollbarItemRef.instance.itemMode = ToolbarItemMode.vertical;
+            const toolbarItemFactory = this.cfr.resolveComponentFactory(this.toolbarItem.quickItemComponent);
+            const toolbarItemRef = this.toolbarContainer.createComponent(toolbarItemFactory);
+            toolbarItemRef.instance.editor = this.editor;
+            toolbarItemRef.instance.item = this.toolbarItem;
+            toolbarItemRef.instance.itemMode = ToolbarItemMode.vertical;
         });
     }
 }
 TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarItemComponent, deps: [{ token: i0.NgZone }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+TheToolbarItemComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
             <a
                 thyIconNavLink
-                [thyIconNavLinkIcon]="item.icon"
+                [thyIconNavLinkIcon]="toolbarItem.icon"
                 [thyTooltip]="tooltip"
-                [thyTooltipTemplateContext]="{ name: item.name, shortcutKey: item.shortcutKey }"
+                [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
                 thyTooltipPlacement="top"
                 [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
             ></a>
         </ng-container>
         <ng-template #selectionItem>
-            <ng-container *ngIf="!item?.quickItemComponent">
-                <thy-icon [thyIconName]="item?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
-                <span class="quick-toolbar-name">{{ item?.name }}</span>
+            <ng-container *ngIf="!toolbarItem?.quickItemComponent">
+                <thy-icon [thyIconName]="toolbarItem?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
+                <span class="quick-toolbar-name">{{ toolbarItem?.name }}</span>
             </ng-container>
         </ng-template>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
-    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -11355,18 +11414,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
         <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
             <a
                 thyIconNavLink
-                [thyIconNavLinkIcon]="item.icon"
+                [thyIconNavLinkIcon]="toolbarItem.icon"
                 [thyTooltip]="tooltip"
-                [thyTooltipTemplateContext]="{ name: item.name, shortcutKey: item.shortcutKey }"
+                [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
                 thyTooltipPlacement="top"
                 [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
             ></a>
         </ng-container>
         <ng-template #selectionItem>
-            <ng-container *ngIf="!item?.quickItemComponent">
-                <thy-icon [thyIconName]="item?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
-                <span class="quick-toolbar-name">{{ item?.name }}</span>
+            <ng-container *ngIf="!toolbarItem?.quickItemComponent">
+                <thy-icon [thyIconName]="toolbarItem?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
+                <span class="quick-toolbar-name">{{ toolbarItem?.name }}</span>
             </ng-container>
         </ng-template>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
@@ -11376,11 +11435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                         class: 'the-toolbar-item'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { editor: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], itemMode: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { itemMode: [{
                 type: Input
             }], toolbarContainer: [{
                 type: ViewChild,
@@ -11388,9 +11443,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             }], toggleDropdown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
-            }], disabledState: [{
-                type: HostBinding,
-                args: ['class.disabled']
             }] } });
 
 class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
@@ -11441,7 +11493,7 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
 }
 TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickToolbarComponent.ɵcmp = i0.ɵɵ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, 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$7.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵ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, 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$7.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -11681,112 +11733,11 @@ const createInlineCodePlugin = createPluginFactory({
             execute: editor => InlineCodeEditor.toggleInlineCode(editor),
             active: editor => InlineCodeEditor.isInlineCodeActive(editor)
         }
-    ]
-});
-
-class TheIndentToolbarComponent extends TheToolbarBaseItemComponent {
-    constructor(elementRef, thyPopover, viewContainerRef, overlay) {
-        super();
-        this.elementRef = elementRef;
-        this.thyPopover = thyPopover;
-        this.viewContainerRef = viewContainerRef;
-        this.overlay = overlay;
-        this.mode = DropdownMode.text;
-        this.dropdownMode = DropdownMode;
-        this.disabled = false;
-    }
-    get isOpen() {
-        return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
-    }
-    toggleDropdown(event) {
-        var _a;
-        super.execute(event);
-        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
-            return;
-        }
-        this.openDropdownPopover();
-    }
-    handleDocumentMouseDown(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.closeDropdownPopover();
-        }
-    }
-    get disabledState() {
-        return this.disabled;
-    }
-    ngOnInit() {
-        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}`);
-        }
-    }
-    statusChange(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;
-    }
-    itemMousedown(event, item) {
-        super.execute(event);
-        this.closeDropdownPopover();
-        if (item === null || item === void 0 ? void 0 : item.execute) {
-            item === null || item === void 0 ? void 0 : item.execute(this.editor);
-        }
-    }
-    openDropdownPopover() {
-        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()
-        });
-    }
-    closeDropdownPopover() {
-        var _a;
-        if (this.dropdownPopoverRef) {
-            (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
-        }
+    ],
+    options: {
+        disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
     }
-}
-TheIndentToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheIndentToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheIndentToolbarComponent.ɵcmp = i0.ɵɵ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, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheIndentToolbarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'the-indent-toolbar-item',
-                    templateUrl: './toolbar-item.component.html',
-                    host: {
-                        class: 'the-toolbar-dropdown-container'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { toolbarItem: [{
-                type: Input
-            }], menus: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], dropdownTemplate: [{
-                type: ViewChild,
-                args: ['dropdownTemplate', { static: true }]
-            }], toggleDropdown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
-            }], disabledState: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }] } });
+});
 
 const IndentEditor = {
     getAllowedTypes(editor) {
@@ -11855,14 +11806,6 @@ const IndentEditor = {
             return true;
         }
         return false;
-    },
-    isDisabled(editor) {
-        if (editor.selection) {
-            const allowedTypes = IndentEditor.getAllowedTypes(editor);
-            const anchorBlock$1 = anchorBlock(editor);
-            return anchorBlock$1 && !allowedTypes.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
-        }
-        return false;
     }
 };
 
@@ -11936,8 +11879,10 @@ const createIndentPlugin = createPluginFactory({
         {
             key: ElementKinds.indent,
             includes: [Indents.indentRight, Indents.indentLeft],
-            iconComponent: TheIndentToolbarComponent,
-            disable: editor => IndentEditor.isDisabled(editor)
+            type: ToolbarItemType.dropdown,
+            dropdownMode: DropdownMode.icon,
+            dropdownItemKey: Indents.indentRight,
+            dropdownFixedIcon: true
         },
         {
             key: Indents.indentRight,
@@ -11951,7 +11896,6 @@ const createIndentPlugin = createPluginFactory({
             name: '减少缩进',
             icon: 'float-right',
             shortcutKey: 'Shift+Tab/BackSpace',
-            type: ToolbarItemType.toolDropdown,
             execute: editor => IndentEditor.cancelIndent(editor)
         }
     ],
@@ -11964,7 +11908,8 @@ const createIndentPlugin = createPluginFactory({
             ElementKinds.paragraph,
             ...HEADING_TYPES
         ],
-        disableIndentTypes: [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem]
+        disableIndentTypes: [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem],
+        disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
     }
 });
 
@@ -12029,14 +11974,6 @@ const FontSizeEditor = {
             }
         }
         return false;
-    },
-    isDisabled(editor) {
-        if (editor.selection) {
-            const disableGroup = HEADING_TYPES;
-            const anchorBlock$1 = anchorBlock(editor);
-            return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
-        }
-        return false;
     }
 };
 const sizeOptions = () => {
@@ -12055,23 +11992,24 @@ const createFontSizePlugin = createPluginFactory({
         {
             key: MarkTypes.fontSize,
             name: '字号',
-            type: ToolbarItemType.toolDropdown,
+            type: ToolbarItemType.dropdown,
             dropdownItemKey: FontSizes.fontSize14,
-            includes: FontSizeTypes,
-            disable: editor => FontSizeEditor.isDisabled(editor)
+            includes: FontSizeTypes
         },
         ...sizeOptions()
-    ]
+    ],
+    options: {
+        disabledOperateTypes: [...HEADING_TYPES, ElementKinds.image, ...DISABLED_OPERATE_TYPES]
+    }
 });
 
-class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
+class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
     constructor(elementRef, thyPopover, viewContainerRef) {
         super();
         this.elementRef = elementRef;
         this.thyPopover = thyPopover;
         this.viewContainerRef = viewContainerRef;
         this.isHide = true;
-        this.active = false;
     }
     get isOpened() {
         return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
@@ -12082,11 +12020,6 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
         }
     }
     ngOnInit() { }
-    statusChange(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);
-    }
     menusActive(editor) {
         return this.menus.find(i => {
             var _a;
@@ -12131,7 +12064,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, 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$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -12142,15 +12075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                         '[class.hide]': '!active'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$6.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { item: [{
-                type: Input
-            }], menus: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }], toolbarItem: [{
-                type: Input
-            }], template: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$6.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
             }], handleDocumentMouseDown: [{
@@ -12178,7 +12103,7 @@ const createVerticalAlignPlugin = createPluginFactory({
         {
             key: ToolbarActionTypes.verticalAlign,
             name: '垂直对齐',
-            type: ToolbarItemType.toolDropdown,
+            type: ToolbarItemType.dropdown,
             dropdownMode: DropdownMode.icon,
             iconComponent: TheVerticalToolbarItemComponent,
             includes: [ToolbarActionTypes.verticalAlignTop, ToolbarActionTypes.verticalAlignMiddle, ToolbarActionTypes.verticalAlignBottom],
@@ -12359,26 +12284,21 @@ const ColorEditor = {
     }
 };
 
-class TheColorToolbarItemComponent extends TheToolbarBaseItemComponent {
+class TheColorToolbarItemComponent extends TheBaseToolbarItem {
     constructor(thyPopover) {
         super();
         this.thyPopover = thyPopover;
-        this.active = false;
     }
     get isOpenColorSelect() {
         return this.colorSelectRef && this.colorSelectRef.componentInstance;
     }
-    statusChange(editor) {
-        var _a;
-        this.active = (_a = this.item) === null || _a === void 0 ? void 0 : _a.active(editor);
-    }
     execute(event) {
         var _a;
         super.execute(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;
         }
-        const type = this.item.key;
+        const type = this.toolbarItem.key;
         this.toggleColorSelect(event, type);
     }
     toggleColorSelect(event, type) {
@@ -12418,19 +12338,19 @@ class TheColorToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Component });
-TheColorToolbarItemComponent.ɵcmp = i0.ɵɵ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, template: `
+TheColorToolbarItemComponent.ɵcmp = i0.ɵɵ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, template: `
         <a
             class="link-width-down"
             thyIconNavLink
             [ngStyle]="{
-                width: item.key === 'color' ? '42px' : 'auto'
+                width: toolbarItem.key === 'color' ? '42px' : 'auto'
             }"
-            [thyTooltip]="item.name"
+            [thyTooltip]="toolbarItem.name"
             [thyIconNavLinkActive]="active"
             thyTooltipPlacement="top"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="item.icon" thyIconType="twotone" [thyTwotoneColor]="active"></thy-icon>
+            <thy-icon [thyIconName]="toolbarItem.icon" thyIconType="twotone" [thyTwotoneColor]="active"></thy-icon>
             <thy-icon
                 [ngClass]="{
                     'link-down-icon': true,
@@ -12440,7 +12360,7 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 thyIconName="caret-down"
             ></thy-icon>
         </a>
-    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -12450,14 +12370,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             class="link-width-down"
             thyIconNavLink
             [ngStyle]="{
-                width: item.key === 'color' ? '42px' : 'auto'
+                width: toolbarItem.key === 'color' ? '42px' : 'auto'
             }"
-            [thyTooltip]="item.name"
+            [thyTooltip]="toolbarItem.name"
             [thyIconNavLinkActive]="active"
             thyTooltipPlacement="top"
             (mousedown)="execute($event)"
         >
-            <thy-icon [thyIconName]="item.icon" thyIconType="twotone" [thyTwotoneColor]="active"></thy-icon>
+            <thy-icon [thyIconName]="toolbarItem.icon" thyIconType="twotone" [thyTwotoneColor]="active"></thy-icon>
             <thy-icon
                 [ngClass]="{
                     'link-down-icon': true,
@@ -12472,11 +12392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                         class: 'the-toolbar-item'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }]; }, propDecorators: { item: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }]; } });
 
 const createColorPlugin = createPluginFactory({
     key: PluginKeys.color,
@@ -12495,7 +12411,10 @@ const createColorPlugin = createPluginFactory({
             iconComponent: TheColorToolbarItemComponent,
             active: editor => ColorEditor.getActiveColor(editor, MarkTypes.backgroundColor)
         }
-    ]
+    ],
+    options: {
+        disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
+    }
 });
 
 const internalPlugins = () => [
@@ -12577,7 +12496,7 @@ class TheToolbarComponent {
     ngOnInit() {
         this.setToolbarClass();
         this.renderToolbarView();
-        this.statusChange(this.editor);
+        this.selectionChange(this.editor);
         if (this.isMore) {
             this.resizeElement();
         }
@@ -12612,13 +12531,13 @@ class TheToolbarComponent {
         });
         this.resizeObserver.observe(editableElement);
     }
-    statusChange(editor) {
+    selectionChange(editor) {
         const toolbarItems = [...this.toolbarItems, this.moreGroupMenu];
         for (const item of toolbarItems) {
             if (item.key !== ToolbarActionTypes.split) {
                 const itemComponent = this.components.get(item.key);
-                if (itemComponent) {
-                    itemComponent.instance.statusChange(editor);
+                if (itemComponent && itemComponent.instance.selectionChange) {
+                    itemComponent.instance.selectionChange(editor);
                 }
             }
         }
@@ -12686,7 +12605,7 @@ class TheToolbarComponent {
                 elementWidth -= headingWidth;
                 continue;
             }
-            const isCustomComponent = (item === null || item === void 0 ? void 0 : item.type) === ToolbarItemType.toolDropdown || !!(item === null || item === void 0 ? void 0 : item.iconComponent);
+            const isCustomComponent = (item === null || item === void 0 ? void 0 : item.type) === ToolbarItemType.dropdown || !!(item === null || item === void 0 ? void 0 : item.iconComponent);
             elementWidth -= isCustomComponent ? maxItemWidth : defaultItemWidth;
         }
         return {
@@ -12732,15 +12651,17 @@ class TheToolbarComponent {
     createToolbarItem(item) {
         const { iconComponent, type, dropdownMode, dropdownItemKey, includes } = item, args = __rest(item, ["iconComponent", "type", "dropdownMode", "dropdownItemKey", "includes"]);
         const viewComponent = this.viewComponentType(type);
-        const dropdownItem = this.getDropdownItem(item);
         const factory = this.cfr.resolveComponentFactory(iconComponent ? iconComponent : viewComponent);
         const 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 === ToolbarItemType.dropdown) {
+            const dropdownRef = compRef;
+            dropdownRef.instance.dropdownItemKey = item.dropdownItemKey;
+            dropdownRef.instance.menus = includes;
+            dropdownRef.instance.mode = dropdownMode;
+        }
     }
     createToolbarSplit() {
         const navSplitLineFactory = this.cfr.resolveComponentFactory(NavSplitLineComponent);
@@ -12760,25 +12681,14 @@ class TheToolbarComponent {
         if (type === ToolbarItemType.default) {
             return TheToolbarItemComponent;
         }
-        if (type === ToolbarItemType.toolDropdown) {
+        if (type === ToolbarItemType.dropdown) {
             return TheToolbarDropdownComponent;
         }
         return TheToolbarItemComponent;
     }
-    getDropdownItem(item) {
-        var _a, _b, _c;
-        let dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
-        // modify the fontsize option externally
-        const contextService = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.injector) === null || _b === void 0 ? void 0 : _b.get(TheContextService);
-        const fontSize = contextService === null || contextService === void 0 ? void 0 : contextService.getDefaultFontSize();
-        if (contextService && item.key === MarkTypes.fontSize && fontSize) {
-            dropdownKey = fontSize;
-        }
-        return (_c = item === null || item === void 0 ? void 0 : item.includes) === null || _c === void 0 ? void 0 : _c.find((item) => item.key === dropdownKey);
-    }
 }
 TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, 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.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+TheToolbarComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, 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$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -12831,7 +12741,7 @@ class TheInlineToolbarComponent {
                 .subscribe(() => {
                 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();
             });
         });
@@ -13004,7 +12914,7 @@ class TheQuickInsertComponent {
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
             args: [{
@@ -13344,7 +13254,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
     valueChange(value) {
         var _a, _b, _c, _d, _e, _f;
         const 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();
@@ -13479,7 +13389,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => 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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -13565,7 +13475,7 @@ class TheToolbarGroupComponent {
     }
     set item(i) {
         this._item = i;
-        this.activeMenu = i;
+        this.activeMenuItem = i;
     }
     get item() {
         return this._item;
@@ -13596,9 +13506,9 @@ class TheToolbarGroupComponent {
             this.openGroup(event);
         }
     }
-    statusChange(editor) {
+    selectionChange(editor) {
         const activeItem = this.menusActive(editor);
-        this.activeMenu = activeItem ? activeItem : null;
+        this.activeMenuItem = activeItem ? activeItem : null;
         this.activeChange();
         this.colseGroup();
     }
@@ -13640,7 +13550,7 @@ class TheToolbarGroupComponent {
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], ngImport: i0, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], ngImport: i0, 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$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -13703,7 +13613,6 @@ const COMPONENTS = [
     TheTableToolbarItemComponent,
     TheConversionHintComponent,
     TheVerticalToolbarItemComponent,
-    TheIndentToolbarComponent,
     TheTableOptionsComponent
 ];
 const PLUGIN_COMPONENTS = [
@@ -13747,7 +13656,6 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
         TheVerticalToolbarItemComponent,
-        TheIndentToolbarComponent,
         TheTableOptionsComponent, TheImageComponent,
         TheTemplateComponent,
         TheHrComponent,
@@ -13858,5 +13766,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheIndentToolbarComponent, TheMode, TheModeConfig, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, autoScrollViewHandle, coercePixelsFromCssValue, combinePlugins, createEmptyParagraph, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteColorAndBackgroundColorOfText, deleteElementKey, extractFragment, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, internalPlugins, isCleanEmptyParagraph, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, setEditorUUID, useElementStyle, withTheia };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, TheModeConfig, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, autoScrollViewHandle, coercePixelsFromCssValue, combinePlugins, createEmptyParagraph, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, internalPlugins, isCleanEmptyParagraph, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, setEditorUUID, useElementStyle, withTheia };
 //# sourceMappingURL=worktile-theia.js.map