@worktile/theia 1.2.9 → 1.2.13

package/fesm2015/worktile-theia.js

@@ -5,7 +5,7 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4$2 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, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, withAngular, SlateModule } from 'slate-angular';
+import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, EDITOR_TO_ELEMENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
 import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
 import isHotkey from 'is-hotkey';
 import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, createEditor } from 'slate';
@@ -50,9 +50,10 @@ import { ThySharedModule } from 'ngx-tethys/shared';
 import * as i1$6 from 'ngx-tethys';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
+import * as i2$3 from 'ngx-tethys/list';
+import { ThyListModule } from 'ngx-tethys/list';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
-import { ThyListModule } from 'ngx-tethys/list';
 import { ThySelectModule } from 'ngx-tethys/select';
 
 const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
@@ -121,7 +122,6 @@ var MarkTypes;
 var ToolbarActionTypes;
 (function (ToolbarActionTypes) {
     ToolbarActionTypes["split"] = "split";
-    ToolbarActionTypes["save"] = "save";
     ToolbarActionTypes["undo"] = "undo";
     ToolbarActionTypes["redo"] = "redo";
     ToolbarActionTypes["paintformat"] = "paintformat";
@@ -163,12 +163,17 @@ const VOID_BLOCK_TYPES = [ElementKinds.image, ElementKinds.hr];
 const BLOCK_DELETEBACKWARD_TYPES = [ElementKinds.tableCell];
 
 const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
-const BLOCK_TOOLBAR_HOTKEY = '/';
+const QUICK_TOOLBAR_HOTKEY = '/';
 var DropdownMode;
 (function (DropdownMode) {
     DropdownMode["icon"] = "icon-mode";
     DropdownMode["text"] = "text-mode";
 })(DropdownMode || (DropdownMode = {}));
+var ToolbarItemMode;
+(function (ToolbarItemMode) {
+    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
+    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
+})(ToolbarItemMode || (ToolbarItemMode = {}));
 const DefaultGlobalToolbarDefinition = [
     ElementKinds.headingList,
     ToolbarActionTypes.split,
@@ -193,8 +198,35 @@ const DefaultGlobalToolbarDefinition = [
     ElementKinds.blockquote,
     ElementKinds.code
 ];
-const DefaultInlineToolbarDefinition = [];
-const DefaultBlockToolbarDefinition = [ElementKinds.image];
+const DefaultInlineToolbarDefinition = [
+    ToolbarActionTypes.clean,
+    ToolbarActionTypes.split,
+    MarkTypes.bold,
+    MarkTypes.italic,
+    MarkTypes.underline,
+    MarkTypes.strike,
+    MarkTypes.codeLine,
+    MarkTypes.color,
+    MarkTypes.backgroundColor,
+    ToolbarActionTypes.split,
+    ToolbarActionTypes.alignType,
+    ToolbarActionTypes.split,
+    ElementKinds.link
+];
+const DefaultQuickToolbarDefinition = [
+    ...STANDARD_HEADING_TYPES,
+    ToolbarActionTypes.split,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ElementKinds.checkItem,
+    ToolbarActionTypes.split,
+    ElementKinds.link,
+    ElementKinds.image,
+    ElementKinds.table,
+    ElementKinds.blockquote,
+    ElementKinds.hr,
+    ElementKinds.code
+];
 const ToolbarMoreGroup = {
     key: 'more',
     icon: 'more'
@@ -1008,7 +1040,10 @@ const extractFragment = (data, deleteKey = ELEMENT_UNIQUE_ID) => {
     const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
     if (fragment) {
         const decoded = decodeURIComponent(window.atob(fragment));
-        const nodes = JSON.parse(decoded);
+        let nodes = JSON.parse(decoded);
+        if (!Array.isArray(nodes)) {
+            nodes = [nodes];
+        }
         // delete key to avoid duplicate keys
         if (deleteKey) {
             deleteElementKey(nodes, deleteKey);
@@ -1028,6 +1063,25 @@ function deleteElementKey(nodes, key) {
     });
     return nodes;
 }
+/**
+ * 删除 text 节点的 颜色/背景色
+ * @param node
+ */
+function deleteColorAndBackgroundColorOfText(node) {
+    node.children.forEach((child) => {
+        if (Text.isText(child)) {
+            if (child['color']) {
+                delete child['color'];
+            }
+            if (child['background-color']) {
+                delete child['background-color'];
+            }
+        }
+        else {
+            deleteColorAndBackgroundColorOfText(child);
+        }
+    });
+}
 
 const isAcrossBlocks = (editor, fragment) => {
     const startBlock = getStartBlock(editor, fragment[0]);
@@ -1140,7 +1194,7 @@ const getSelectionMarks = (editor) => {
     return marks;
 };
 
-const isContainer = (editor, value) => Element$1.isElement(value) && editor.isContainer(value);
+const isContainer = (editor, value) => Element$1.isElement(value) && editor.isContainer && editor.isContainer(value);
 
 const getContainerBlocks = (editor) => {
     const containerNode = Editor.above(editor, {
@@ -1409,28 +1463,9 @@ const setEndSelection = (editor) => {
     AngularEditor.focus(editor);
 };
 
-const insertTheElements = (editor, nodes) => {
-    if (Range.isExpanded(editor.selection)) {
-        Editor.deleteFragment(editor);
-    }
-    const isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
-    const parentPath = Path.parent(editor.selection.anchor.path);
-    Editor.withoutNormalizing(editor, () => {
-        Transforms.insertNodes(editor, nodes);
-        if (parentPath.length && isEmptyParagraph$1) {
-            Transforms.delete(editor, { at: parentPath });
-            const lastPath = parentPath.pop();
-            Transforms.select(editor, Editor.end(editor, [...parentPath, lastPath + nodes.length - 1]));
-        }
-        else {
-            const lastPath = parentPath.pop();
-            Transforms.select(editor, Editor.end(editor, [...parentPath, lastPath + nodes.length]));
-        }
-    });
-};
-
 const THE_EDITOR_UUID = new WeakMap();
 const THE_EDITOR_CONVERSION_HINT_REF = new WeakMap();
+const THE_EDITOR_QUICK_TOOLBAR_REF = new WeakMap();
 
 const closeConversionHint = (editor) => {
     const hintRef = THE_EDITOR_CONVERSION_HINT_REF.get(editor);
@@ -1492,7 +1527,6 @@ var index = /*#__PURE__*/Object.freeze({
     splitNode: splitNode,
     deleteElement: deleteElement,
     setEndSelection: setEndSelection,
-    insertTheElements: insertTheElements,
     closeConversionHint: closeConversionHint,
     handleContinualDeleteBackward: handleContinualDeleteBackward,
     handleContinualInsertBreak: handleContinualInsertBreak
@@ -1958,7 +1992,7 @@ const withDeserializeMd = (options) => (editor) => {
                                     editor.undo();
                                     setTimeout(() => {
                                         Transforms.select(editor, oldRange);
-                                        insertTheElements(editor, fragment);
+                                        Transforms.insertFragment(editor, fragment);
                                         AngularEditor.focus(editor);
                                     });
                                     return;
@@ -2199,10 +2233,18 @@ class TheContextService {
     }
     getOptions() {
         if (!this.options.width) {
-            this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').offsetWidth - 30;
+            const firstElementChild = this.getFirstElementChild();
+            this.options.width = firstElementChild.offsetWidth;
         }
         return this.options;
     }
+    getEditableElement() {
+        return this.options.nativeElement.querySelector('.the-editor-typo');
+    }
+    getFirstElementChild() {
+        const editableElement = this.getEditableElement();
+        return editableElement === null || editableElement === void 0 ? void 0 : editableElement.firstElementChild;
+    }
     setUploadFileList(file) {
         this.fileList.push(file);
     }
@@ -2468,7 +2510,6 @@ const withImage = (editor) => {
         return element.type === ElementKinds.image || isVoid(element);
     };
     editor.insertData = (data) => {
-        // TODO:: 底层有点问题,粘贴多张图片时只能识别一张
         if (data.files.length) {
             const imageFiles = [];
             for (const file of data.files) {
@@ -2597,13 +2638,19 @@ const getListTypes = () => {
     return [ElementKinds.bulletedList, ElementKinds.numberedList];
 };
 
+/**
+ * 获取 List 中 ListItems，过滤掉空列表嵌套
+ * @param node
+ * @param initialValue
+ * @returns
+ */
 const getStartListItem = (node, initialValue) => {
     if (!initialValue) {
         initialValue = [];
     }
     if (node) {
         return node.reduce((result, current) => {
-            if (current.type == ElementKinds.listItem && current.children[0].type === ElementKinds.default) {
+            if ((current.type === ElementKinds.listItem && !getListTypes().includes(current.children[0].type))) {
                 result.push(current);
             }
             else {
@@ -3257,6 +3304,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
+/**
+ * Is the selection in same li
+ */
+const isSelectionInSameListItem = (editor) => {
+    const { selection } = editor;
+    if (!selection) {
+        return false;
+    }
+    const [start, end] = Range.edges(selection);
+    const startListItemEntry = getAboveByType(editor, ElementKinds.listItem, { at: start.path });
+    const endListItemEntry = getAboveByType(editor, ElementKinds.listItem, { at: end.path });
+    return startListItemEntry && endListItemEntry && Path.equals(startListItemEntry[1], endListItemEntry[1]);
+};
+
 const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
     const { insertBreak, deleteBackward, onKeydown, insertData, setFragmentData, renderElement } = editor;
     const resetBlockTypesListRule = {
@@ -3339,15 +3400,14 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
             const fragmentElement = fragmentData[0];
             if (getListTypes().includes(fragmentElement.type)) {
                 const startNodes = getStartListItem([fragmentElement.children[0]]);
-                // 复制列表中的图片时startNodes长度为零
-                if (startNodes.length === 0) {
-                    setFragmentData(unit);
-                    return;
-                }
                 const children = startNodes.concat(fragmentElement.children.slice(1));
-                const fragmentNodes = [
+                let fragmentNodes = [
                     Object.assign(Object.assign({}, fragmentElement), { children })
                 ];
+                if (isSelectionInSameListItem(editor)) {
+                    // 仅仅复制列表中的内容
+                    fragmentNodes = children[0].children;
+                }
                 const fragment = fragmentNodes.concat(fragmentData.slice(1));
                 const domRange = AngularEditor.toDOMRange(editor, selection);
                 const contents = domRange.cloneContents();
@@ -5614,6 +5674,7 @@ class TheColorSelectComponent {
         }
     }
     _selectColor(event, color) {
+        event.preventDefault();
         event.stopPropagation();
         if (this.option.specialColor && color === this.option.specialColor) {
             color = '';
@@ -5644,7 +5705,7 @@ class TheColorSelectComponent {
     }
 }
 TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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\n                        thyIconName=\"check\"\n                        [ngStyle]=\"{ color: row.tickColor }\"\n                    ></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div\n        *ngIf=\"option.showCustom\"\n        class=\"select-color\"\n    >\n        <span\n            class=\"color\"\n            [ngStyle]=\"{ background: selectedColor }\"\n        ></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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.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.7", 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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.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.7", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -5760,9 +5821,10 @@ const ColorEditor = {
 
 class TheToolbarBaseItemComponent {
     execute(event) {
+        var _a;
         event.preventDefault();
         event.stopPropagation();
-        if (!this.itemMousedownHandle && !this.editor.selection) {
+        if (!this.itemMousedownHandle && !((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection)) {
             const lastNode = getLastNode(this.editor, 1);
             const end = Editor.end(this.editor, lastNode[1]);
             Transforms.select(this.editor, end);
@@ -6717,6 +6779,7 @@ const withLink = (editor) => {
     editor.insertText = text => {
         if (text && isUrl(text)) {
             LinkEditor.wrapLink(editor, text, text);
+            Transforms.move(editor, { distance: 1, unit: "offset" });
         }
         else {
             insertText(text);
@@ -6724,8 +6787,10 @@ const withLink = (editor) => {
     };
     editor.insertData = data => {
         const text = data.getData('text/plain');
-        if (text && isUrl(text)) {
+        const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
+        if (text && isUrl(text) && !fragment) {
             LinkEditor.wrapLink(editor, text, text);
+            Transforms.move(editor, { distance: 1, unit: "offset" });
         }
         else {
             insertData(data);
@@ -7557,18 +7622,38 @@ function setCellMenuInvisibility(editor, menuList, selectedCells, isActiveSelect
 }
 
 class NavSplitLineComponent {
-    constructor() { }
+    constructor() {
+        this.mode = ToolbarItemMode.vertical;
+        this.theNavSplitLine = true;
+    }
+    get horizontal() {
+        return this.mode === ToolbarItemMode.horizontal;
+    }
+    get vertical() {
+        return this.mode === ToolbarItemMode.vertical;
+    }
     ngOnInit() { }
 }
 NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", ngImport: i0, template: '', isInline: true });
+NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nav-split-line',
                     template: ''
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
+                type: Input
+            }], theNavSplitLine: [{
+                type: HostBinding,
+                args: ['class.the-nav-split-line']
+            }], horizontal: [{
+                type: HostBinding,
+                args: ['class.horizontal']
+            }], vertical: [{
+                type: HostBinding,
+                args: ['class.vertical']
+            }] } });
 
 class TheTableToolbarComponent {
     constructor(ngZone, colorSelectService, popoverRef) {
@@ -7680,7 +7765,7 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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=\"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: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line" }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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.7", 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=\"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: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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.7", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -8329,9 +8414,12 @@ class TheTableComponent extends TheBaseElementComponent {
     useRowControls() {
         if (this.selection) {
             this.rowControls = this.calculateRowControls();
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         }
     }
+    detectChanges() {
+        this.cdr.detectChanges();
+    }
     calculateMinRowSpanCellForRows() {
         const table = this.element;
         const cells = table.children.map((row, index) => {
@@ -8593,7 +8681,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: TheTableToken,
             useExisting: TheTableComponent
         }
-    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -8677,11 +8765,13 @@ class TheTableRowComponent extends TheBaseElementComponent {
         super.onContextChange();
         if (this.initialized) {
             this.useBackground();
+            this.useHeight();
         }
     }
     ngOnInit() {
         super.ngOnInit();
         this.useBackground();
+        this.useHeight();
     }
     useBackground() {
         if (this.element.header && !this.backgroundColor) {
@@ -9426,6 +9516,7 @@ class TheTdComponent extends TheBaseElementComponent {
             this.applyRowSize(deltaSize);
         }
         this.tableComponent.useRowControls();
+        this.tableComponent.detectChanges();
         this.updateOverlayHandleSizeAndOffset();
     }
     _createOverlayForHandle() {
@@ -9681,6 +9772,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['cellInner', { static: true }]
             }] } });
 
+const normalizeTable = (table) => {
+    const normalizedNodes = [];
+    const rowHeight = table.children.length;
+    const columnWidth = table.children[0].children.length;
+    table.children.forEach((row, rowIndex) => {
+        row.children.forEach((cell, columnIndex) => {
+            // case 1
+            if (cell.colspan || cell.rowspan) {
+                const rowspan = cell.rowspan || 1;
+                const colspan = cell.colspan || 1;
+                if (rowspan > rowHeight - rowIndex) {
+                    cell.rowspan = rowHeight - rowIndex;
+                }
+                if (colspan > columnWidth - columnIndex) {
+                    cell.colspan = columnWidth - columnIndex;
+                }
+                return;
+            }
+            // case 2
+            if (cell.hidden && !normalizedNodes.includes(cell)) {
+                const origin = calcOriginSpan(table, rowIndex, columnIndex);
+                if (!origin) {
+                    delete table.children[rowIndex].children[columnIndex].hidden;
+                }
+            }
+        });
+    });
+    return table;
+};
+
 const withTable = (editor) => {
     const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer } = editor;
     editor.deleteBackward = unit => {
@@ -9858,67 +9979,45 @@ const withTable = (editor) => {
             return;
         }
         const { selection } = editor;
-        const element = TablePosition.create(opts, editor, selection.anchor.path);
-        const tableComponent = ELEMENT_TO_COMPONENT.get(element.table);
+        const tablePosition = TablePosition.create(opts, editor, selection.anchor.path);
+        const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
         const cells = tableComponent.tableStore.selectedCells;
-        const tableContent = {};
-        let contents;
-        let cellNode;
-        let fragment;
-        if (cells.length > 0) {
-            const selectNodes = getSelectCellNode(editor, cells);
-            const selectedColumnsIndex = tableComponent.tableStore.selectedColumnsIndex || [];
-            const selectedRowsIndex = tableComponent.tableStore.selectedRowsIndex || [];
+        let tableFragment = null;
+        if (tableComponent.tableStore.selectedRowsIndex.length > 0) {
+            const rows = tablePosition.table.children.slice(tableComponent.tableStore.selectedRowsIndex[0], tableComponent.tableStore.selectedRowsIndex[tableComponent.tableStore.selectedRowsIndex.length - 1] + 1);
+            tableFragment = Object.assign(Object.assign({}, tablePosition.table), { children: rows });
+        }
+        else if (cells.length > 0) {
+            const tempRows = {};
             for (const cell of cells) {
                 const { row, col } = cell;
-                const cellPath = [...element.tableEntry[1], row, col];
-                cellNode = Node.get(editor, cellPath);
-                const cellRange = Editor.range(editor, cellPath);
-                const domRange = AngularEditor.toDOMRange(editor, cellRange);
-                if (!contents) {
-                    contents = domRange.cloneContents();
-                }
-                else {
-                    contents.append(domRange.cloneContents());
-                }
-                if ((selectedColumnsIndex.length === 1 && cellNode.colspan > 1) ||
-                    (selectedRowsIndex.length === 1 && cellNode.rowspan > 1)) {
-                    cellNode = Object.assign(Object.assign({}, cellNode), { colspan: selectedColumnsIndex.length === 1 ? null : cellNode.colspan, rowspan: selectedRowsIndex.length === 1 ? null : cellNode.rowspan });
-                }
-                if (cellNode.hidden) {
-                    const origin = calcOriginSpan(element.table, row, col);
-                    const selectedOrigin = origin && selectNodes.filter(item => item.node.key === origin.key);
-                    if (!selectedOrigin || !selectedOrigin.length) {
-                        cellNode = Object.assign(Object.assign({}, cellNode), { hidden: null });
-                    }
-                }
-                if (!tableContent[row]) {
-                    tableContent[row] = [];
+                const cellPath = [...tablePosition.tableEntry[1], row, col];
+                const cellNode = Node.get(editor, cellPath);
+                if (!tempRows[row]) {
+                    tempRows[row] = [];
                 }
-                tableContent[row].push(cellNode);
+                tempRows[row].push(cellNode);
             }
-            const tableFragment = [
+            const rows = Object.values(tempRows).map((item) => {
+                return {
+                    type: ElementKinds.tableRow,
+                    children: item
+                };
+            });
+            tableFragment =
                 {
                     type: ElementKinds.table,
-                    children: Object.values(tableContent).map((item) => {
-                        return {
-                            type: ElementKinds.tableRow,
-                            children: item
-                        };
-                    })
-                }
-            ];
-            fragment = tableFragment;
-            const stringObj = JSON.stringify(fragment);
+                    children: rows
+                };
+        }
+        if (tableFragment) {
+            tableFragment = normalizeTable(_.cloneDeep(tableFragment));
+            tableFragment = [tableFragment];
+            const stringObj = JSON.stringify(tableFragment);
             const encoded = window.btoa(encodeURIComponent(stringObj));
             unit.setData(`application/${CLIPBOARD_FORMAT_KEY}`, encoded);
-            const div = document.createElement('div');
-            div.appendChild(contents);
-            div.setAttribute('hidden', 'true');
-            document.body.appendChild(div);
-            unit.setData('text/html', div.innerHTML);
-            unit.setData('text/plain', getPlainText$1(div));
-            document.body.removeChild(div);
+            // unit.setData('text/html', div.innerHTML);
+            unit.setData('text/plain', Node.string(tableFragment));
             return;
         }
         setFragmentData(unit);
@@ -10077,7 +10176,14 @@ const withDeserializeHMTL = (editor) => {
         if (html && !slateFragment) {
             const htmlDom = new DOMParser().parseFromString(html, 'text/html');
             const fragment = TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
-            insertTheElements(editor, fragment);
+            // 无法识别HTML内容时后退一下：识别纯文本
+            if (fragment.length === 1 && Editor.isEmpty(editor, fragment[0]) && fragment[0].type === ElementKinds.paragraph) {
+                insertData(data);
+                return;
+            }
+            // 过滤 text 节点的 color/background-color 属性
+            fragment.forEach((node) => deleteColorAndBackgroundColorOfText(node));
+            Transforms.insertFragment(editor, fragment);
             return;
         }
         insertData(data);
@@ -10227,6 +10333,383 @@ const VerticalAlignOptions = [
     }
 ];
 
+const PaintFormatEditor = {
+    formatBrush(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        const obj = {};
+        for (const key of MarkProps) {
+            const k = contextService.paintFormatStatus.marks[key];
+            obj[key] = k || null;
+        }
+        const block = anchorBlock(editor);
+        if (block && Range.isCollapsed(editor.selection)) {
+            // TODO:: 在撤销时有bug, 临时使用withoutSaving处理
+            HistoryEditor.withoutSaving(editor, () => {
+                const path = TheEditor.findPath(editor, block);
+                setMarks(editor, obj, path);
+            });
+        }
+        else {
+            setMarks(editor, obj);
+        }
+        PaintFormatEditor.cancelFormatBrushStatus(editor);
+    },
+    isActive(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        const res = contextService.paintFormatStatus.isActive;
+        return res;
+    },
+    enableFormatBrush(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        if (contextService.paintFormatStatus.isActive) {
+            return PaintFormatEditor.cancelFormatBrushStatus(editor);
+        }
+        contextService.paintFormatStatus = {
+            isActive: true,
+            marks: getSelectionMarks(editor)
+        };
+        const element = EDITOR_TO_ELEMENT.get(editor);
+        element.classList.add('pointer-paint');
+        contextService.onMouseUp$
+            .pipe(skip(1), filter(event => element.contains(event.target)), take(1))
+            .subscribe((event) => {
+            if (contextService.paintFormatStatus.isActive) {
+                PaintFormatEditor.formatBrush(editor);
+            }
+        });
+        editor.onChange();
+    },
+    cancelFormatBrushStatus(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        contextService.paintFormatStatus = {
+            isActive: false,
+            marks: {}
+        };
+        const element = EDITOR_TO_ELEMENT.get(editor);
+        element.classList.remove('pointer-paint');
+        editor.onChange();
+    }
+};
+
+const PaintFormatOptions = [
+    {
+        key: ToolbarActionTypes.undo,
+        icon: 'undo',
+        name: '撤销',
+        execute: (editor) => editor.undo()
+    },
+    {
+        key: ToolbarActionTypes.redo,
+        icon: 'redo',
+        name: '重做',
+        execute: (editor) => editor.redo()
+    },
+    {
+        key: ToolbarActionTypes.paintformat,
+        icon: 'paintformat',
+        name: '格式刷',
+        execute: PaintFormatEditor.enableFormatBrush,
+        active: PaintFormatEditor.isActive
+    },
+    {
+        key: ToolbarActionTypes.clean,
+        icon: 'clean',
+        name: '清除格式',
+        execute: (editor) => {
+            const { selection } = editor;
+            if (!selection) {
+                return;
+            }
+            if (TableEditor.clearMark(editor)) {
+                return;
+            }
+            if (Range.isCollapsed(selection)) {
+                const marks = Editor.marks(editor);
+                for (const key of Object.keys(marks)) {
+                    Editor.removeMark(editor, key);
+                }
+            }
+            else {
+                const unsetMarks = {};
+                MarkProps.forEach(key => {
+                    unsetMarks[key] = null;
+                });
+                setMarks(editor, unsetMarks);
+            }
+        }
+    }
+];
+
+/**
+ * whether the current node is a clean paragraph
+ * @param editor
+ * @param text
+ * @returns boolean
+ */
+const isCleanEmptyParagraph = (editor) => {
+    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+    if (!isCollapsedCursor) {
+        return false;
+    }
+    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+    const textIndent = 'textIndent';
+    const align = 'align';
+    const hasTextIndent = block[textIndent];
+    const hasAlign = block[align];
+    if (Node.string(block) === '' &&
+        Element$1.isElement(block) &&
+        block.type === ElementKinds.paragraph &&
+        block.children.length === 1 &&
+        Text.isText(block.children[0]) &&
+        !Editor.isVoid(editor, block) &&
+        !hasTextIndent &&
+        !hasAlign) {
+        return true;
+    }
+    return false;
+};
+
+class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
+    constructor(ngZone, cfr) {
+        super();
+        this.ngZone = ngZone;
+        this.cfr = cfr;
+        this.itemMode = ToolbarItemMode.horizontal;
+        this.ToolbarItemMode = ToolbarItemMode;
+        this.active = false;
+    }
+    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)) {
+            this.renderToolbarItem();
+        }
+    }
+    statusChange(editor) {
+        var _a, _b;
+        this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
+    }
+    execute(event) {
+        var _a, _b, _c;
+        super.execute(event);
+        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            return;
+        }
+        (_c = this.item) === 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;
+        });
+    }
+}
+TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { 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"
+                [thyTooltip]="item.name"
+                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>
+        </ng-template>
+        <ng-container #toolbarContainer></ng-container>
+    `, isInline: true, components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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.7", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-toolbar-item',
+                    template: `
+        <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
+            <a
+                thyIconNavLink
+                [thyIconNavLinkIcon]="item.icon"
+                [thyTooltip]="item.name"
+                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>
+        </ng-template>
+        <ng-container #toolbarContainer></ng-container>
+    `,
+                    host: {
+                        class: 'the-toolbar-item'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { item: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], itemMode: [{
+                type: Input
+            }], toolbarContainer: [{
+                type: ViewChild,
+                args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
+    constructor(popoverRef, elementRef) {
+        super();
+        this.popoverRef = popoverRef;
+        this.elementRef = elementRef;
+        this.ToolbarItemMode = ToolbarItemMode;
+        this.ToolbarActionTypes = ToolbarActionTypes;
+    }
+    handleMouseDown(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.popoverRef.close();
+        }
+        else {
+            event.preventDefault();
+        }
+    }
+    handleEnter() {
+        this.popoverRef.close();
+    }
+    ngOnInit() {
+        this.editorElement = AngularEditor.toDOMNode(this.editor, this.editor);
+    }
+    stopPropagation(event) {
+        event.preventDefault();
+    }
+    selectionChange(event) {
+        this.removeHotKey();
+        const toolbarItem = this.quickToolbarItems.find(item => item.key === event.value);
+        if (toolbarItem === null || toolbarItem === void 0 ? void 0 : toolbarItem.execute) {
+            toolbarItem.execute(this.editor);
+        }
+    }
+    removeHotKey() {
+        const node = Node.get(this.editor, this.editor.selection.anchor.path);
+        if (node && Text.equals({ text: QUICK_TOOLBAR_HOTKEY }, node)) {
+            Editor.deleteBackward(this.editor);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i1$3.ThyPopoverRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()" } }, 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: i2$3.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: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-quick-toolbar',
+                    templateUrl: 'quick-toolbar.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.ThyPopoverRef }, { type: i0.ElementRef }]; }, propDecorators: { editor: [{
+                type: Input
+            }], quickToolbarItems: [{
+                type: Input
+            }], handleMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }], handleEnter: [{
+                type: HostListener,
+                args: ['document: keydown.enter']
+            }] } });
+
+const OperationTypes = ['insert_text', 'remove_node', 'merge_node'];
+const QuickInsertEditor = {
+    openQuickToolbar(editor, toolbarItems, origin) {
+        const overlay = editor.injector.get(Overlay);
+        const viewContainerRef = editor.injector.get(ViewContainerRef);
+        const thyPopover = editor.injector.get(ThyPopover);
+        const quickToolbarRef = thyPopover.open(TheQuickToolbarComponent, {
+            initialState: {
+                editor,
+                quickToolbarItems: toolbarItems
+            },
+            origin,
+            viewContainerRef: viewContainerRef,
+            backdropClosable: true,
+            placement: 'bottomLeft',
+            offset: 4,
+            hasBackdrop: false,
+            insideClosable: true,
+            panelClass: 'the-quick-toolbar-container',
+            scrollStrategy: overlay.scrollStrategies.reposition(),
+            manualClosure: true
+        });
+        THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, quickToolbarRef);
+    },
+    closeQuickToolbar(editor) {
+        const quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
+        if (quickToolbarRef) {
+            quickToolbarRef.close();
+            THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, null);
+        }
+    },
+    isOpenToolbar(editor, opTypes = OperationTypes) {
+        const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+        if (!isCollapsedCursor) {
+            return false;
+        }
+        const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+        const { undos } = editor.history;
+        const lastBatch = undos[undos.length - 1];
+        const lastOp = lastBatch && lastBatch[lastBatch.length - 1];
+        if (lastOp &&
+            block.children.length === 1 &&
+            block.type === ElementKinds.paragraph &&
+            Node.string(block) === QUICK_TOOLBAR_HOTKEY &&
+            opTypes.includes(lastOp.type) &&
+            (lastOp.text === QUICK_TOOLBAR_HOTKEY || lastOp.text === undefined)) {
+            return true;
+        }
+        return false;
+    }
+};
+
+const withQuickInsert = (editor) => {
+    const { onKeydown, deleteBackward, onChange } = editor;
+    editor.onKeydown = (event) => {
+        if (event.key === QUICK_TOOLBAR_HOTKEY && isCleanEmptyParagraph(editor)) {
+            const rootNode = AngularEditor.toDOMNode(editor, Node.ancestor(editor, [editor.selection.anchor.path[0]]));
+            const theEditorComponent = editor.injector.get(TheEditorComponent);
+            const quickToolbars = theEditorComponent.quickToolbarItems;
+            QuickInsertEditor.openQuickToolbar(editor, quickToolbars, rootNode);
+        }
+        onKeydown(event);
+    };
+    editor.deleteBackward = unit => {
+        if (!QuickInsertEditor.isOpenToolbar(editor, ['remove_text'])) {
+            QuickInsertEditor.closeQuickToolbar(editor);
+        }
+        deleteBackward(unit);
+    };
+    editor.onChange = () => {
+        var _a;
+        onChange();
+        if (editor.selection) {
+            const editorComponent = editor.injector.get(TheEditorComponent);
+            (_a = editorComponent.quickInsertInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
+            const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+            if (!isCleanEmptyParagraph(editor) && Node.string(block) !== QUICK_TOOLBAR_HOTKEY) {
+                QuickInsertEditor.closeQuickToolbar(editor);
+            }
+        }
+    };
+    return editor;
+};
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -10234,7 +10717,6 @@ const internalPlugins = [
     withRemoveVoid,
     withBlockCard,
     withResetType,
-    withImage,
     withIndent([ElementKinds.checkItem, ElementKinds.numberedList, ElementKinds.bulletedList, ElementKinds.paragraph, ...HEADING_TYPES]),
     withList({ validLiChildrenTypes: [ElementKinds.image] }),
     withLink,
@@ -10254,7 +10736,9 @@ const internalPlugins = [
     withInsertParagraphNodes(),
     withGetFragment(),
     withDeserializeHMTL,
-    withDeserializeMd()
+    withDeserializeMd(),
+    withImage,
+    withQuickInsert
 ];
 const internalToolbarItems = [
     ...AlignOptions,
@@ -10269,7 +10753,8 @@ const internalToolbarItems = [
     ...CodeOptions,
     ...LinkOptions,
     ...TableOptions,
-    ...VerticalAlignOptions
+    ...VerticalAlignOptions,
+    ...PaintFormatOptions
 ];
 const toolbarCompose = (toolbarItems = []) => {
     return [...internalToolbarItems, ...toolbarItems];
@@ -10308,11 +10793,11 @@ const shortcuts = (editor, event) => {
 };
 
 class TheToolbarService {
-    initialize(toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition, block = DefaultBlockToolbarDefinition) {
+    initialize(toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition, quick = DefaultQuickToolbarDefinition) {
         const toolbarDefinition = {
             global,
-            block,
-            inline
+            inline,
+            quick
         };
         const toolbarOperations = new Map();
         toolbarItems.forEach(i => toolbarOperations.set(i.key, i));
@@ -10354,10 +10839,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 const autoFocus = (editor, isFocus) => {
     setTimeout(() => {
-        if (editor && isFocus) {
+        if (editor && editor.children.length > 0 && isFocus) {
             HistoryEditor.withoutMerging(editor, () => {
-                AngularEditor.focus(editor);
                 Transforms.select(editor, Editor.start(editor, [0]));
+                AngularEditor.focus(editor);
             });
         }
     });
@@ -10391,59 +10876,6 @@ const autoScrollViewHandle = (editor, scrollContainer) => {
     previousHeight = currentHeight;
 };
 
-class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
-    constructor() {
-        super();
-        this.active = false;
-    }
-    statusChange(editor) {
-        var _a, _b;
-        this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
-    }
-    execute(event) {
-        var _a, _b, _c;
-        super.execute(event);
-        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
-            return;
-        }
-        (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
-    }
-}
-TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
-        <a
-            thyIconNavLink
-            [thyIconNavLinkIcon]="item.icon"
-            [thyTooltip]="item.name"
-            thyTooltipPlacement="top"
-            [thyIconNavLinkActive]="active"
-            (mousedown)="execute($event)"
-        ></a>
-    `, isInline: true, components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }], directives: [{ type: i7.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.7", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'the-toolbar-item',
-                    template: `
-        <a
-            thyIconNavLink
-            [thyIconNavLinkIcon]="item.icon"
-            [thyTooltip]="item.name"
-            thyTooltipPlacement="top"
-            [thyIconNavLinkActive]="active"
-            (mousedown)="execute($event)"
-        ></a>
-    `,
-                    host: {
-                        class: 'the-toolbar-item'
-                    }
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }] } });
-
 class TheToolbarComponent {
     constructor(cfr, elementRef, ngZone, toolbarGroupComponent) {
         this.cfr = cfr;
@@ -10451,6 +10883,7 @@ class TheToolbarComponent {
         this.ngZone = ngZone;
         this.toolbarGroupComponent = toolbarGroupComponent;
         this.toolbarItems = [];
+        this.containerClass = [];
         this.isMore = true;
         this.components = new Map();
         this.moreGroupMenu = ToolbarMoreGroup;
@@ -10476,9 +10909,8 @@ class TheToolbarComponent {
         }
     }
     setToolbarClass() {
-        if (this.editor) {
-            const toolbarClass = getToolbarClass(this.editor);
-            this.elementRef.nativeElement.classList.add(toolbarClass);
+        if (this.editor && !!this.containerClass.length) {
+            this.elementRef.nativeElement.classList.add(...this.containerClass);
         }
     }
     resizeElement() {
@@ -10648,7 +11080,7 @@ class TheToolbarComponent {
     }
 }
 TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", 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: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -10667,6 +11099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: Input
             }], align: [{
                 type: Input
+            }], containerClass: [{
+                type: Input
             }], isMore: [{
                 type: Input
             }], afterTemplate: [{
@@ -10676,52 +11110,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
             }] } });
 
-class ThePlaceholderComponent {
-    constructor(renderer, elementRef) {
+class TheInlineToolbarComponent {
+    constructor(elementRef, scrollDispatcher, cdr, ngZone, contextService) {
+        this.elementRef = elementRef;
+        this.scrollDispatcher = scrollDispatcher;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.contextService = contextService;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.scrollDispatcher
+            .scrolled()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateInlineToolbar();
+            this.cdr.detectChanges();
+        });
+        this.ngZone.runOutsideAngular(() => {
+            merge(fromEvent(document, 'mouseup').pipe(filter((e) => e.button !== 2)), fromEvent(document, 'keyup').pipe(filter((e) => !e.shiftKey)))
+                .pipe(debounceTime(200), takeUntil(this.destroy$))
+                .subscribe(() => {
+                var _a;
+                this.updateInlineToolbar();
+                (_a = this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
+                this.cdr.detectChanges();
+            });
+        });
+    }
+    updateInlineToolbar() {
+        const inlineToolbar = this.elementRef.nativeElement.firstElementChild;
+        if (!this.editor.selection) {
+            inlineToolbar.removeAttribute('style');
+            return;
+        }
+        const anchorBlock$1 = anchorBlock(this.editor);
+        if (!inlineToolbar || !anchorBlock$1) {
+            return;
+        }
+        const { editor } = this;
+        const { selection } = editor;
+        if (!selection ||
+            !AngularEditor.isFocused(editor) ||
+            Range.isCollapsed(selection) ||
+            Editor.string(editor, selection) === '') {
+            inlineToolbar.removeAttribute('style');
+            return;
+        }
+        if (!THE_INLINE_TOOLBAR_TYPES.includes(anchorBlock$1.type)) {
+            return;
+        }
+        const native = window.getSelection();
+        if (native.type !== 'None') {
+            const range = native.getRangeAt(0);
+            this.updatePosition(inlineToolbar, range);
+        }
+    }
+    updatePosition(toolbarElement, range) {
+        let boundary = range.getBoundingClientRect();
+        if (!boundary || (boundary.height === 0 && boundary.width === 0 && range.startContainer === range.endContainer)) {
+            if (range.startContainer.nodeType === 1 && range.startContainer.querySelector('img')) {
+                boundary = range.startContainer.querySelector('img').getBoundingClientRect();
+            }
+            else {
+                boundary = range.startContainer.getBoundingClientRect();
+            }
+        }
+        const editableElement = this.contextService.getEditableElement();
+        const editableRect = editableElement.getBoundingClientRect();
+        const toolbarHeight = toolbarElement.offsetHeight;
+        const toolbarWidth = toolbarElement.offsetWidth;
+        const halfOffsetWidth = toolbarWidth / 2;
+        const defaultLeft = -halfOffsetWidth;
+        const offsetLeft = boundary.left - editableRect.left;
+        const isTopLeft = offsetLeft - 30 > halfOffsetWidth; // 30: editable padding left
+        const isTopRight = editableRect.width - offsetLeft - boundary.width / 2 < halfOffsetWidth;
+        const positions = {};
+        positions.top = boundary.top - toolbarHeight;
+        positions.right = 'initial';
+        positions.left = boundary.left;
+        if (isTopLeft) {
+            positions.left = boundary.left + boundary.width / 2 + defaultLeft;
+        }
+        if (isTopRight) {
+            positions.left = boundary.right - toolbarWidth;
+        }
+        for (let key of Object.keys(positions)) {
+            toolbarElement.style[key] = positions[key] + (isNaN(positions[key]) ? '' : 'px');
+        }
+        toolbarElement.style.opacity = '1';
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
+TheInlineToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0, template: `<the-toolbar
+        #inlineToolbar
+        class="the-inline-toolbar"
+        [editor]="editor"
+        [toolbarItems]="toolbarItems"
+        [isMore]="false"
+    ></the-toolbar> `, isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-inline-toolbar',
+                    template: `<the-toolbar
+        #inlineToolbar
+        class="the-inline-toolbar"
+        [editor]="editor"
+        [toolbarItems]="toolbarItems"
+        [isMore]="false"
+    ></the-toolbar> `,
+                    host: {
+                        '[class.hide]': 'toolbarItems.length === 0'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.ScrollDispatcher }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], toolbarItems: [{
+                type: Input
+            }], inlineToolbar: [{
+                type: ViewChild,
+                args: ['inlineToolbar']
+            }] } });
+
+class TheQuickInsertComponent {
+    constructor(renderer, elementRef, cdr) {
         this.renderer = renderer;
         this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.isHide = true;
+        this.defaultIconName = 'plus-circle-thin';
+        this.iconNameFill = 'plus-circle-thin-fill';
+        this.displayIconName = this.defaultIconName;
+    }
+    handleMousedownNativeElement(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    checkStatus() {
+        const { editor } = this;
+        if (isCleanEmptyParagraph(editor)) {
+            setTimeout(() => {
+                var _a;
+                const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                const rootNode = AngularEditor.toDOMNode(editor, block);
+                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+            });
+            return;
+        }
         this.isHide = true;
     }
-    get selection() {
-        return this.editor.selection;
+    updatePosition(left, top) {
+        this.isHide = false;
+        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
+    }
+    mouseEnter(event) {
+        this.displayIconName = this.iconNameFill;
+        this.cdr.markForCheck();
+    }
+    mouseLeave(event) {
+        this.displayIconName = this.defaultIconName;
+        this.cdr.markForCheck();
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        QuickInsertEditor.openQuickToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
+    }
+}
+TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, 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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[theQuickInsert]',
+                    templateUrl: './quick-insert.component.html',
+                    host: {
+                        class: 'the-quick-insert',
+                        '[class.hide]': 'isHide'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
+                type: Input
+            }], quickToolbarItems: [{
+                type: Input
+            }], iconElement: [{
+                type: ViewChild,
+                args: ['iconElement', { read: ElementRef, static: false }]
+            }], handleMousedownNativeElement: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class ThePlaceholderComponent {
+    constructor(renderer, elementRef, contextService) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.contextService = contextService;
+        this.isHide = true;
     }
     handleCompositionStart() {
-        this.hide();
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) {
+            this.hide();
+        }
     }
     handleCompositionEnd(event) {
         if (!event.data) {
             this.checkStatus();
         }
     }
-    checkStatus(value) {
+    checkStatus() {
         const { editor } = this;
-        const children = value ? value : editor.children;
         // empty content and no selection processing
-        if (this.autoFocus && !this.selection && isEmptyContent(children)) {
-            this.updatePosition(30, 51);
-            this.isHide = false;
+        if (!editor.selection && isEmptyContent(editor.children)) {
+            const firstElementChild = this.contextService.getFirstElementChild();
+            const offsetTop = firstElementChild.offsetTop;
+            const offsetLeft = firstElementChild.offsetLeft;
+            this.updatePosition(offsetLeft, offsetTop);
             return;
         }
-        if (AngularEditor.isFocused(editor) && this.selection && Range.isCollapsed(this.selection)) {
-            const block = Node.ancestor(editor, [this.selection.anchor.path[0]]);
-            const textIndent = 'textIndent';
-            const align = 'align';
-            const hasTextIndent = block[textIndent];
-            const hasAlign = block[align];
-            if (Node.string(block) === '' &&
-                Element$1.isElement(block) &&
-                block.type === ElementKinds.paragraph &&
-                block.children.length === 1 &&
-                Text.isText(block.children[0]) &&
-                !Editor.isVoid(editor, block) &&
-                !hasTextIndent &&
-                !hasAlign) {
-                const rootNode = AngularEditor.toDOMNode(this.editor, block);
+        if (isCleanEmptyParagraph(editor)) {
+            setTimeout(() => {
+                var _a;
+                const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                const rootNode = AngularEditor.toDOMNode(editor, block);
                 this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-                return;
-            }
+            });
+            return;
         }
-        this.hide();
+        this.isHide = true;
     }
     updatePosition(left, top) {
         this.isHide = false;
@@ -10732,8 +11356,8 @@ class ThePlaceholderComponent {
         this.isHide = true;
     }
 }
-ThePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ThePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", autoFocus: "autoFocus", placeholder: "placeholder" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ placeholder }}`, isInline: true });
+ThePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
+ThePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", placeholder: "placeholder" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ placeholder }}`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -10744,9 +11368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         '[class.hide]': 'isHide'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editor: [{
-                type: Input
-            }], autoFocus: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -10831,7 +11453,6 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.theOnDOMEvent = new EventEmitter();
         this.theEditorCreated = new EventEmitter();
         this._plugins = [];
-        this.globalToolbarItems = [];
         this.autoScrollView = _.debounce(function (editor, scrollContainer) {
             return autoScrollViewHandle(editor, scrollContainer);
         }, 80);
@@ -10922,8 +11543,11 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onSlaCompositionEnd = (event) => { };
         this.onSlaDragStart = (event) => { };
         this.onSlaDragOver = (event) => { };
-        this.trackBy = (element) => {
-            return element.key;
+        this.onDrop = (event) => {
+            event.stopPropagation();
+            this.theOnDOMEvent.emit({
+                nativeEvent: event
+            });
         };
     }
     get theGlobalToolbarInstance() {
@@ -10933,20 +11557,27 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         var _a, _b;
         return ((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.maxHeight) ? `${(_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.maxHeight}px` : null;
     }
+    get quickToolbarItems() {
+        var _a;
+        return (_a = this.toolbarEntity) === null || _a === void 0 ? void 0 : _a.quick;
+    }
     ngOnInit() {
         this.initialize();
         this.onErrorHandler();
     }
     ngOnChanges(changes) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const options = changes.theOptions;
         if (options) {
             this.initializeOptions();
         }
+        if (((_a = options.currentValue) === null || _a === void 0 ? void 0 : _a.readonly) !== ((_b = options.previousValue) === null || _b === void 0 ? void 0 : _b.readonly)) {
+            this.applyAutoFocus();
+        }
         if (changes['theDecorate']) {
             this.generateDecorate();
         }
-        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) && (((_b = options === null || options === void 0 ? void 0 : options.currentValue) === null || _b === void 0 ? void 0 : _b.readonly) || ((_c = options === null || options === void 0 ? void 0 : options.currentValue) === null || _c === void 0 ? void 0 : _c.disabled))) {
+        if (((_c = this.editor) === null || _c === void 0 ? void 0 : _c.selection) && (((_d = options === null || options === void 0 ? void 0 : options.currentValue) === null || _d === void 0 ? void 0 : _d.readonly) || ((_e = options === null || options === void 0 ? void 0 : options.currentValue) === null || _e === void 0 ? void 0 : _e.disabled))) {
             Transforms.deselect(this.editor);
         }
     }
@@ -10979,31 +11610,32 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         }
     }
     applyAutoFocus() {
-        var _a, _b, _c, _d;
-        if (((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.autoFocus) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.readonly) && !((_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.disabled)) {
-            autoFocus(this.editor, (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.autoFocus);
+        var _a, _b, _c;
+        if (!((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.readonly)) {
+            autoFocus(this.editor, (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.autoFocus);
         }
     }
     toolbarCalculate() {
         var _a;
         const toolbar = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar;
         const toolbarItems = toolbarCompose(toolbar === null || toolbar === void 0 ? void 0 : toolbar.toolbarItems);
-        const toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.block, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline);
-        this.globalToolbarItems = toolbarOption.toolbarEntity.global;
+        const toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
+        this.globalToolbarClass = ['the-global-toolbar', getToolbarClass(this.editor)];
+        this.toolbarEntity = toolbarOption.toolbarEntity;
         if (this.theGlobalToolbar) {
             this.theGlobalToolbarInstance.editor = this.editor;
             this.theGlobalToolbarInstance.toolbarItems = toolbarOption.toolbarEntity.global;
+            this.theGlobalToolbarInstance.containerClass = this.globalToolbarClass;
             this.theGlobalToolbarInstance.align = toolbar === null || toolbar === void 0 ? void 0 : toolbar.align;
             this.theGlobalToolbarInstance.setToolbarClass();
             this.theGlobalToolbarInstance.renderToolbarView();
         }
     }
     writeValue(value) {
-        var _a, _b;
+        var _a;
         const data = dataDeserialize((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.mode, value);
         // data-deserialize
         this.editorValue = data;
-        (_b = this.placeholderInstance) === null || _b === void 0 ? void 0 : _b.checkStatus(data);
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -11012,13 +11644,14 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onTouchedCallback = fn;
     }
     valueChange(value) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         (_a = this.theGlobalToolbarInstance) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
-        (_b = this.placeholderInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
+        (_b = this.quickInsertInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
+        (_c = this.placeholderInstance) === null || _c === void 0 ? void 0 : _c.checkStatus();
         // auto scroll view
-        const scrollContainer = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.scrollContainer;
-        const maxHeight = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.maxHeight;
-        if (!((_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.readonly) && (scrollContainer || maxHeight)) {
+        const scrollContainer = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.scrollContainer;
+        const maxHeight = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.maxHeight;
+        if (!((_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.readonly) && (scrollContainer || maxHeight)) {
             const container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
             this.autoScrollView(this.editor, container);
         }
@@ -11143,7 +11776,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: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: 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]=\"globalToolbarItems\"\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        [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        [trackBy]=\"trackBy\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <div\n        *ngIf=\"theOptions?.placeholder\"\n        #placeholder\n        thePlaceholder\n        [editor]=\"editor\"\n        [autoFocus]=\"theOptions?.placeholder?.autoFocus\"\n        [placeholder]=\"theOptions?.placeholder\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "isStrictDecorate", "trackBy", "readonly", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "autoFocus", "placeholder"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    ], 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 }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: 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        [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 *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [placeholder]=\"theOptions?.placeholder\"></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", "isStrictDecorate", "trackBy", "readonly", "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"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "placeholder"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -11186,6 +11819,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], globalToolbarInstance: [{
                 type: ViewChild,
                 args: ['globalToolbar']
+            }], quickInsertInstance: [{
+                type: ViewChild,
+                args: ['quickInsert', { static: true }]
             }], placeholderInstance: [{
                 type: ViewChild,
                 args: ['placeholder']
@@ -11304,7 +11940,7 @@ class TheToolbarGroupComponent {
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], directives: [{ type: i7.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.7", 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: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i7.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.7", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -11351,10 +11987,12 @@ const COMPONENTS = [
     TheToolbarDropdownComponent,
     TheToolbarGroupComponent,
     TheToolbarItemComponent,
+    TheInlineToolbarComponent,
     NavSplitLineComponent,
     TheTextComponent,
     TheDefaultElementComponent,
-    ThePlaceholderComponent,
+    TheQuickInsertComponent,
+    TheQuickToolbarComponent,
     TheColorSelectComponent,
     TheColorToolbarItemComponent,
     TheContextMenuComponent,
@@ -11381,7 +12019,8 @@ const PLUGIN_COMPONENTS = [
     TheTableToolbarComponent,
     TheTableComponent,
     TheTableRowComponent,
-    TheTdComponent
+    TheTdComponent,
+    ThePlaceholderComponent
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe];
 class TheEditorModule {
@@ -11391,10 +12030,12 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheToolbarDropdownComponent,
         TheToolbarGroupComponent,
         TheToolbarItemComponent,
+        TheInlineToolbarComponent,
         NavSplitLineComponent,
         TheTextComponent,
         TheDefaultElementComponent,
-        ThePlaceholderComponent,
+        TheQuickInsertComponent,
+        TheQuickToolbarComponent,
         TheColorSelectComponent,
         TheColorToolbarItemComponent,
         TheContextMenuComponent,
@@ -11418,7 +12059,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableToolbarComponent,
         TheTableComponent,
         TheTableRowComponent,
-        TheTdComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
+        TheTdComponent,
+        ThePlaceholderComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
         ThyAvatarModule,
         ThyNavModule,
         ThyFormModule,
@@ -11465,5 +12107,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BLOCK_INSERT_ORIGIN, BLOCK_TOOLBAR_HOTKEY, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultBlockToolbarDefinition, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, HEADING_TYPES, HeadingEditor, HrEditor, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeMode, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, plainToTheia, toolbarCompose, withTheEditor };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BLOCK_INSERT_ORIGIN, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, HEADING_TYPES, HeadingEditor, HrEditor, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeMode, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, 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, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, plainToTheia, toolbarCompose, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map