@worktile/theia 1.2.13 → 1.2.18

package/fesm2015/worktile-theia.js

@@ -8,7 +8,7 @@ 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, 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';
+import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { __rest, __awaiter } from 'tslib';
 import * as _lodash from 'lodash';
@@ -16,7 +16,7 @@ import marked from 'marked';
 import { TheiaConverter } from '@atinc/selene';
 import * as i1$3 from 'ngx-tethys/popover';
 import { ThyPopover } from 'ngx-tethys/popover';
-import * as i2$1 from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$1 from 'ngx-tethys/alert';
 import { ThyAlertModule } from 'ngx-tethys/alert';
@@ -30,27 +30,31 @@ import * as i4$1 from 'ngx-tethys/icon';
 import { ThyIconModule } from 'ngx-tethys/icon';
 import * as i5 from 'ngx-tethys/input';
 import { ThyInputModule } from 'ngx-tethys/input';
-import * as i2 from 'ngx-tethys/nav';
+import * as i3 from 'ngx-tethys/nav';
 import { ThyNavModule } from 'ngx-tethys/nav';
-import * as i7 from 'ngx-tethys/tooltip';
+import * as i5$1 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
-import * as i5$2 from 'ng-codemirror';
+import * as i7 from 'ng-codemirror';
 import { CodeMirrorComponent, CodemirrorModule } from 'ng-codemirror';
 import * as i1$4 from 'ngx-tethys/notify';
 import { ThyNotifyModule } from 'ngx-tethys/notify';
-import * as i5$1 from 'ngx-tethys/action-menu';
+import * as i5$2 from 'ngx-tethys/action-menu';
 import { ThyActionMenuModule } from 'ngx-tethys/action-menu';
+import * as i5$3 from 'ngx-tethys/switch';
+import { ThySwitchModule } from 'ngx-tethys/switch';
+import * as i8 from 'ngx-tethys/resizable';
+import { ThyResizableModule } from 'ngx-tethys/resizable';
 import isUrl from 'is-url';
 import * as i1$5 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
-import * as i2$2 from 'ngx-tethys/form';
+import * as i2$1 from 'ngx-tethys/form';
 import { ThyFormModule } from 'ngx-tethys/form';
-import * as i5$3 from 'ngx-tethys/shared';
+import * as i5$4 from 'ngx-tethys/shared';
 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 * as i2$2 from 'ngx-tethys/list';
 import { ThyListModule } from 'ngx-tethys/list';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
@@ -64,7 +68,6 @@ const TAB_SPACE = '    ';
 const ZERO_WIDTH_CHAR = '\u200B';
 const CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
 const DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
-const BLOCK_INSERT_ORIGIN = 'block-insert';
 const ELEMENT_UNIQUE_ID = 'key';
 var TheMode;
 (function (TheMode) {
@@ -118,6 +121,7 @@ var MarkTypes;
     MarkTypes["color"] = "color";
     MarkTypes["backgroundColor"] = "background-color";
     MarkTypes["codeLine"] = "code-line";
+    MarkTypes["fontSize"] = "font-size";
 })(MarkTypes || (MarkTypes = {}));
 var ToolbarActionTypes;
 (function (ToolbarActionTypes) {
@@ -146,7 +150,8 @@ const MarkProps = [
     MarkTypes.color,
     MarkTypes.italic,
     MarkTypes.strike,
-    MarkTypes.underline
+    MarkTypes.underline,
+    MarkTypes.fontSize
 ];
 const THE_INLINE_TOOLBAR_TYPES = [ElementKinds.default, ElementKinds.listItem, ElementKinds.checkItem];
 const STANDARD_HEADING_TYPES = [
@@ -176,6 +181,7 @@ var ToolbarItemMode;
 })(ToolbarItemMode || (ToolbarItemMode = {}));
 const DefaultGlobalToolbarDefinition = [
     ElementKinds.headingList,
+    MarkTypes.fontSize,
     ToolbarActionTypes.split,
     MarkTypes.bold,
     MarkTypes.italic,
@@ -310,7 +316,7 @@ const CodeMode = {
     default: 'default',
     print: 'print'
 };
-class TheCodeMode {
+class TheCodeConfig {
 }
 const THE_CODE_MODE_TOKEN = new InjectionToken('the-code-mode');
 const THE_CODE_MODE_PROVIDER = {
@@ -326,7 +332,7 @@ class TheTextComponent extends BaseTextComponent {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.renderer2 = renderer2;
-        this.excludes = ['color', 'background-color', 'text'];
+        this.excludes = ['color', 'font-size', 'background-color', 'text'];
         this.attributes = [];
     }
     applyTextMark() {
@@ -341,6 +347,11 @@ class TheTextComponent extends BaseTextComponent {
                 this.attributes.push(attr);
             }
         }
+        const fontSize = this.text[MarkTypes.fontSize];
+        if (fontSize) {
+            const attr = `the-${MarkTypes.fontSize}`;
+            this.renderer2.setAttribute(this.elementRef.nativeElement, attr, fontSize);
+        }
         if (this.text[MarkTypes.color]) {
             this.renderer2.setStyle(this.elementRef.nativeElement, 'color', this.text[MarkTypes.color]);
         }
@@ -500,7 +511,11 @@ const getAnchorBlockEntry = (editor, at) => {
 };
 
 const isEmptyParagraph = (editor, at) => {
-    const [block] = getAnchorBlockEntry(editor, at);
+    const entry = getAnchorBlockEntry(editor, at);
+    if (!entry) {
+        return false;
+    }
+    const [block] = entry;
     return Editor.isEmpty(editor, block) && block.type === ElementKinds.paragraph;
 };
 
@@ -1145,7 +1160,7 @@ const isEmptyContent = (children) => {
     }
     if (children && children.length === 1) {
         const firstNode = children[0];
-        if (firstNode.type === ElementKinds.default && !Node.string(firstNode)) {
+        if (firstNode.type === ElementKinds.default && firstNode.children.length === 1 && !Node.string(firstNode)) {
             return true;
         }
     }
@@ -1957,6 +1972,9 @@ const getToolbarClass = (editor) => {
     return `the-toolbar-${uuid}`;
 };
 
+const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+const CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
+
 const withDeserializeMd = (options) => (editor) => {
     const { insertData, onKeydown } = editor;
     editor.onKeydown = (event) => {
@@ -1997,8 +2015,13 @@ const withDeserializeMd = (options) => (editor) => {
                                     });
                                     return;
                                 }
+                                else {
+                                    closeConversionHint(editor);
+                                }
+                            }
+                            catch (error) {
+                                closeConversionHint(editor);
                             }
-                            catch (error) { }
                         }
                     },
                     origin,
@@ -4197,20 +4220,66 @@ const withBlockCard = (editor) => {
         // block card cursor
         if (anchorNode && hasBlockCard(domSelection)) {
             const isCardLeftCursor = isCardLeft(anchorNode);
-            // ↓ + left-block-card 或者 → + right-block-card
-            if ((isMoveDown && isCardLeftCursor) || (isMoveForward && !isCardLeftCursor)) {
+            if (isMoveUp) {
+                const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const previousPath = Path.hasPrevious(path) && Path.previous(path);
+                const previousNode = previousPath && getNode(editor, previousPath);
+                if (previousNode && editor.isBlockCard(previousNode)) {
+                    AngularEditor.moveBlockCard(editor, previousNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                }
+                else {
+                    const before = Editor.before(editor, path);
+                    if (before) {
+                        Transforms.select(editor, before);
+                    }
+                }
+                nativeEvent.preventDefault();
+                return;
+            }
+            if (isMoveDown) {
+                const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const nextPath = Path.next(path);
+                const nextNode = getNode(editor, nextPath);
+                if (nextNode && editor.isBlockCard(nextNode)) {
+                    AngularEditor.moveBlockCard(editor, nextNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                }
+                else {
+                    const after = Editor.after(editor, path);
+                    if (after) {
+                        Transforms.select(editor, Editor.after(editor, path));
+                    }
+                }
+                nativeEvent.preventDefault();
+                return;
+            }
+            // → + right-block-card
+            if ((isMoveForward && !isCardLeftCursor)) {
                 nativeEvent.preventDefault();
                 const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const nextPath = Path.next(path);
+                const nextNode = getNode(editor, nextPath);
+                if (nextNode && editor.isBlockCard(nextNode)) {
+                    event.preventDefault();
+                    AngularEditor.moveBlockCard(editor, nextNode, { direction: 'left' });
+                    return;
+                }
                 const after = Editor.after(editor, path);
                 if (after) {
                     Transforms.select(editor, Editor.after(editor, path));
                 }
                 return;
             }
-            // ↑ + right-block-card 或者 ← + left-block-card
-            if ((isMoveUp && !isCardLeftCursor) || (isMoveBackward && isCardLeftCursor)) {
+            // ← + left-block-card
+            if (isMoveBackward && isCardLeftCursor) {
                 nativeEvent.preventDefault();
                 const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const previousPath = Path.hasPrevious(path) && Path.previous(path);
+                const previousNode = previousPath && getNode(editor, previousPath);
+                if (previousNode && editor.isBlockCard(previousNode)) {
+                    event.preventDefault();
+                    AngularEditor.moveBlockCard(editor, previousNode, { direction: 'right' });
+                    return;
+                }
                 const before = Editor.before(editor, path);
                 if (before) {
                     Transforms.select(editor, before);
@@ -4592,11 +4661,14 @@ class TablePosition {
                 columnIndex++;
                 nextCell = this.table.children[rowIndex].children[columnIndex];
             }
-            else {
+            else if (rowIndex + 1 < this.getHeight()) {
                 columnIndex = 0;
                 rowIndex++;
                 nextCell = this.table.children[rowIndex].children[columnIndex];
             }
+            else {
+                nextCell = null;
+            }
         }
         return nextCell;
     }
@@ -4747,7 +4819,7 @@ function calcSpanForColumn(table, targetIndex) {
         return rowspans.some(rowspan => isInside(rowspan, rowIndx, targetIndex));
     });
 }
-function calcOriginSpan(table, targetRowIndex, targetColumnIndex) {
+function getOriginCell(table, targetRowIndex, targetColumnIndex) {
     for (let rowIndex = 0; rowIndex <= targetRowIndex; rowIndex++) {
         const row = table.children[rowIndex];
         const originCell = row.children
@@ -5245,6 +5317,13 @@ const TableEditor = {
     isActiveHeader(editor) {
         const [tableRowEntry] = Editor.nodes(editor, { match: (n) => n.type === ElementKinds.tableRow });
         return tableRowEntry && tableRowEntry[0] && tableRowEntry[0].header;
+    },
+    selectOriginCell(editor, table, rowIndex, columnIndex, isStart) {
+        const origin = getOriginCell(table, rowIndex, columnIndex);
+        if (origin) {
+            const path = AngularEditor.findPath(editor, origin);
+            Transforms.select(editor, isStart ? Editor.start(editor, path) : Editor.end(editor, path));
+        }
     }
 };
 
@@ -5280,6 +5359,7 @@ const MarkOptions = [
         key: MarkTypes.bold,
         icon: 'bold',
         name: '加粗',
+        shortcutKey: `${CONTROL_KEY}+B`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.bold),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.bold)
     },
@@ -5287,6 +5367,7 @@ const MarkOptions = [
         key: MarkTypes.italic,
         icon: 'italic',
         name: '斜体',
+        shortcutKey: `${CONTROL_KEY}+I`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.italic),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.italic)
     },
@@ -5301,6 +5382,7 @@ const MarkOptions = [
         key: MarkTypes.underline,
         icon: 'underline',
         name: '下划线',
+        shortcutKey: `${CONTROL_KEY}+U`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.underline),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.underline)
     },
@@ -5308,6 +5390,7 @@ const MarkOptions = [
         key: MarkTypes.codeLine,
         icon: 'code',
         name: '行内代码',
+        shortcutKey: `${CONTROL_KEY}+E`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.codeLine),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.codeLine)
     }
@@ -5919,7 +6002,7 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 thyIconName="caret-down"
             ></thy-icon>
         </a>
-    `, 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -6021,15 +6104,9 @@ const withRemoveVoid = (editor) => {
 };
 
 const CodeEditor = {
-    setLanguage(editor, language, element) {
+    setCodeAttribute(editor, element, value) {
         const at = AngularEditor.findPath(editor, element);
-        Transforms.setNodes(editor, { language }, {
-            at
-        });
-    },
-    setCodeContent(editor, content, element) {
-        const at = AngularEditor.findPath(editor, element);
-        Transforms.setNodes(editor, { content }, {
+        Transforms.setNodes(editor, value, {
             at
         });
     },
@@ -6194,8 +6271,8 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
             .withPositions([bottomPosition, topPosition]);
     }
 }
-TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -6205,7 +6282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         class: 'the-toolbar-dropdown-container'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { toolbarItem: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { toolbarItem: [{
                 type: Input
             }], menus: [{
                 type: Input
@@ -6232,40 +6309,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['document: mousedown', ['$event']]
             }] } });
 
+class NavSplitLineComponent {
+    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", 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 []; }, 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 TheCodeComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, thyNotifyService, ngZone, mode) {
+    constructor(elementRef, cdr, thyNotifyService, ngZone, config) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.thyNotifyService = thyNotifyService;
         this.ngZone = ngZone;
-        this.mode = mode;
+        this.config = config;
         this.startRenderCodemirror = false;
         this.dropdownMode = DropdownMode;
-        this.maxHeight = this.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
         this.codeMirrorFocused = false;
+        this.maxHeight = this.config.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
         this.menus = CODE_MODES.map(item => {
             return { key: item.value, name: item.showName };
         });
+        this.ToolbarItemMode = ToolbarItemMode;
+        this.isAutoWrap = false;
+        this.isResizing = false;
+        this.resizeHeight = null;
         this.options = {
             mode: this.menus[0].key,
             lineNumbers: false,
             readOnly: false,
             autofocus: false,
             lineWiseCopyCut: true,
-            lineWrapping: this.mode === CodeMode.default ? false : true,
+            lineWrapping: this.config.mode === CodeMode.default ? false : true,
             cursorBlinkRate: 500
         };
         this.actives = this.menus[0];
         this.onChangeLangulage = item => {
             this.options = Object.assign(Object.assign({}, this.options), { mode: item.key });
             this.actives = item;
-            CodeEditor.setLanguage(this.editor, item.key, this.element);
+            CodeEditor.setCodeAttribute(this.editor, this.element, { langulage: item.key });
         };
     }
     get code() {
         return this.element.content;
     }
+    handleCodeMousedown(event) {
+        if (!(event.target instanceof HTMLElement && this.elementRef.nativeElement.contains(event.target))) {
+            this.codeMirrorFocused = false;
+        }
+    }
     onContextChange() {
         super.onContextChange();
         if (this.initialized) {
@@ -6275,6 +6395,9 @@ class TheCodeComponent extends TheBaseElementComponent {
             if (this.options.mode !== this.element.language) {
                 this.useMode();
             }
+            if (!this.readonly && this.isCollapsed) {
+                this.initializeCodemirrorFocus();
+            }
         }
     }
     ngOnInit() {
@@ -6294,9 +6417,15 @@ class TheCodeComponent extends TheBaseElementComponent {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.renderCodemirror();
                 this.initializeCodemirrorFocus();
+                this.useAutoWrap();
+                this.useHeight();
             });
         }
     }
+    focusChange(codeMirrorFocused) {
+        if (codeMirrorFocused)
+            this.codeMirrorFocused = codeMirrorFocused;
+    }
     renderCodemirror() {
         this.startRenderCodemirror = true;
         this.useReadonly();
@@ -6304,7 +6433,7 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.cdr.detectChanges();
     }
     initializeCodemirrorFocus() {
-        if (this.isCollapsed) {
+        if (this.isCollapsed && !this.isResizing) {
             setTimeout(() => {
                 if (this.isCollapsed && this.codemirror && this.codemirror.editor && !this.codemirror.editor.hasFocus()) {
                     AngularEditor.blur(this.editor);
@@ -6315,13 +6444,11 @@ class TheCodeComponent extends TheBaseElementComponent {
         }
     }
     codeChange($event) {
-        CodeEditor.setCodeContent(this.editor, $event, this.element);
-    }
-    focusChange(codeMirrorFocused) {
-        this.codeMirrorFocused = codeMirrorFocused;
+        CodeEditor.setCodeAttribute(this.editor, this.element, { content: $event });
     }
     onDelete(event) {
         event.preventDefault();
+        this.codeMirrorFocused = false;
         deleteElement(this.editor, this.element);
     }
     onCopy(event) {
@@ -6332,40 +6459,67 @@ class TheCodeComponent extends TheBaseElementComponent {
         if (selection.rangeCount > 0) {
             selection.removeAllRanges();
         }
-        // focus the element
-        setTimeout(() => {
-            AngularEditor.focus(this.editor);
-            Transforms.select(this.editor, AngularEditor.findPath(this.editor, this.element));
-        });
-        // copy the element
-        setTimeout(() => {
-            document.execCommand('copy');
-            this.thyNotifyService.success('复制成功');
-        }, 200);
+        AngularEditor.focus(this.editor);
+        Transforms.select(this.editor, AngularEditor.findPath(this.editor, this.element));
+        document.execCommand('copy');
+        this.thyNotifyService.success('复制成功');
+        AngularEditor.deselect(this.editor);
+        this.codeMirrorFocused = false;
     }
     useMode() {
         this.options = Object.assign(Object.assign({}, this.options), { mode: this.element.language });
         this.actives = this.menus.find(i => i.key === this.element.language);
     }
+    useAutoWrap() {
+        if (this.element.autoWrap) {
+            this.isAutoWrap = this.element.autoWrap;
+            this.codemirror.setOptionIfChanged('lineWrapping', this.element.autoWrap);
+        }
+    }
+    useHeight() {
+        if (this.element.height) {
+            this.resizeHeight = this.element.height;
+            this.maxHeight = this.element.height;
+        }
+    }
     useReadonly() {
         this.options = Object.assign(Object.assign({}, this.options), { readOnly: this.readonly, cursorBlinkRate: this.readonly ? -1 : 500 });
     }
+    onResize({ height }) {
+        this.resizeHeight = height;
+        Transforms.select(this.editor, AngularEditor.findPath(this.editor, this.element));
+        CodeEditor.setCodeAttribute(this.editor, this.element, { height });
+        this.maxHeight = height;
+    }
+    onStartResize() {
+        this.isResizing = true;
+    }
+    onEndResize() {
+        this.isResizing = false;
+    }
+    onChangeWrap(value) {
+        AngularEditor.deselect(this.editor);
+        this.codemirror.setOptionIfChanged('lineWrapping', value);
+        CodeEditor.setCodeAttribute(this.editor, this.element, { autoWrap: value ? value : null });
+    }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: i0.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"></the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n></ng-codemirror>\n", components: [{ type: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i5$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }], 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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", host: { listeners: { "document: mousedown": "handleCodeMousedown($event)" } }, viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"isAutoWrap\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div\n    thyResizable\n    [thyMinHeight]=\"42\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeStart)=\"onStartResize()\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"codeMirrorFocused && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i5$3.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i7.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i8.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { 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"] }, { type: i8.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theCode]',
-                    templateUrl: './code.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    templateUrl: './code.component.html'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: i0.NgZone }, { type: CodeMode, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: i0.NgZone }, { type: TheCodeConfig, decorators: [{
                     type: Inject,
                     args: [THE_CODE_MODE_TOKEN]
                 }] }]; }, propDecorators: { codemirror: [{
                 type: ViewChild,
                 args: ['codemirror', { read: CodeMirrorComponent, static: false }]
+            }], handleCodeMousedown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
             }] } });
 
 const withCode = (editor) => {
@@ -6576,7 +6730,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$4.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }, { type: i2$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{
@@ -6716,7 +6870,7 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         this.close(LinkCloseTypes.destroy);
     }
 }
-TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i1$6.ThyClickDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i1$6.ThyClickDispatcher }], target: i0.ɵɵFactoryTarget.Component });
 TheBaseLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
             type: Component,
@@ -6724,7 +6878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     selector: '[TheBaseLinkComponent]',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.ThyPopover }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i1$6.ThyClickDispatcher }]; }, propDecorators: { mousedownHandle: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.ThyPopover }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: i1$6.ThyClickDispatcher }]; }, propDecorators: { mousedownHandle: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -6897,7 +7051,7 @@ class TheTableToolbarItemComponent extends TheToolbarBaseItemComponent {
         return this.tableSelectRef;
     }
 }
-TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$6.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$6.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
 TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
             thyIconNavLink
@@ -6910,7 +7064,7 @@ TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             <thy-icon [thyIconName]="item.icon"></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, isInline: true, components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -6932,7 +7086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         class: 'the-toolbar-dropdown-container'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i1$6.ThyPopover }, { type: i2$1.Overlay }]; }, propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: i1$6.ThyPopover }, { type: i2.Overlay }]; }, propDecorators: { item: [{
                 type: Input
             }], editor: [{
                 type: Input
@@ -7621,40 +7775,6 @@ function setCellMenuInvisibility(editor, menuList, selectedCells, isActiveSelect
     });
 }
 
-class NavSplitLineComponent {
-    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", 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 []; }, 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) {
         this.ngZone = ngZone;
@@ -7765,7 +7885,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", 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"] }] });
+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: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.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: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7828,7 +7948,7 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -8117,11 +8237,11 @@ class TableService {
         });
     }
 }
-TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService, deps: [{ token: i1$3.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService, deps: [{ token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
 TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$3.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0.NgZone }, { type: TheContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.ThyPopover }, { type: i2.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
 const SLA_TABLE_SELECTOR = '.slate-element-table';
 const SLA_TABLE_CELL_SELECTOR = '.slate-element-table-cell';
@@ -8200,7 +8320,7 @@ class TheInsertMarkComponent {
     ngOnDestroy() { }
 }
 TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{
@@ -9746,7 +9866,7 @@ class TheTdComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTdComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2$1.Overlay }, { token: ColumnResizingStore }, { token: i2$1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTdComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.Overlay }, { token: ColumnResizingStore }, { token: i2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component });
 TheTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTdComponent, decorators: [{
             type: Component,
@@ -9755,7 +9875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     templateUrl: './td.component.html',
                     providers: [ColumnResizingStore]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2$1.Overlay }, { type: ColumnResizingStore }, { type: i2$1.ScrollDispatcher }]; }, propDecorators: { backgroundColor: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2.Overlay }, { type: ColumnResizingStore }, { type: i2.ScrollDispatcher }]; }, propDecorators: { backgroundColor: [{
                 type: HostBinding,
                 args: ['style.backgroundColor']
             }], colspan: [{
@@ -9792,7 +9912,7 @@ const normalizeTable = (table) => {
             }
             // case 2
             if (cell.hidden && !normalizedNodes.includes(cell)) {
-                const origin = calcOriginSpan(table, rowIndex, columnIndex);
+                const origin = getOriginCell(table, rowIndex, columnIndex);
                 if (!origin) {
                     delete table.children[rowIndex].children[columnIndex].hidden;
                 }
@@ -9803,7 +9923,7 @@ const normalizeTable = (table) => {
 };
 
 const withTable = (editor) => {
-    const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer } = editor;
+    const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange } = editor;
     editor.deleteBackward = unit => {
         const opts = new TableOptions$1();
         if (!isSelectionInTable(opts, editor)) {
@@ -9874,13 +9994,11 @@ const withTable = (editor) => {
                     const aboveCell = aboveRow && aboveRow.children[startPosition.getColumnIndex()];
                     if (aboveCell) {
                         if (aboveCell.hidden) {
-                            const originSpan = calcOriginSpan(endPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex());
-                            if (originSpan) {
-                                at = Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                            }
+                            TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex(), false);
+                            return;
                         }
                         else {
-                            at = Editor.start(editor, TheEditor.findPath(editor, aboveCell));
+                            at = Editor.end(editor, TheEditor.findPath(editor, aboveCell));
                         }
                     }
                     else {
@@ -9909,10 +10027,8 @@ const withTable = (editor) => {
                     const belowCell = belowRow && belowRow.children[startPosition.getColumnIndex()];
                     if (belowCell) {
                         if (belowCell.hidden) {
-                            const originSpan = calcOriginSpan(endPosition.table, belowRowIndex, startPosition.getColumnIndex());
-                            if (originSpan) {
-                                at = Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                            }
+                            TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() + 1, startPosition.getColumnIndex(), true);
+                            return;
                         }
                         else {
                             at = Editor.start(editor, TheEditor.findPath(editor, belowCell));
@@ -9931,18 +10047,27 @@ const withTable = (editor) => {
                 const beforePoint = Editor.before(editor, editor.selection);
                 const beforePosition = beforePoint && TablePosition.create(opts, editor, beforePoint.path);
                 if (beforePosition && beforePosition.cell && beforePosition.cell.hidden) {
+                    event.preventDefault();
                     const at = Editor.end(editor, TheEditor.findPath(editor, beforePosition.findPrevious()));
                     Transforms.select(editor, at);
-                    event.preventDefault();
                 }
             }
             if (isMoveForward) {
                 const afterPoint = Editor.after(editor, editor.selection);
                 const afterPosition = afterPoint && TablePosition.create(opts, editor, afterPoint.path);
                 if (afterPosition.cell && afterPosition.cell.hidden) {
-                    const at = Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
-                    Transforms.select(editor, at);
                     event.preventDefault();
+                    const nextCell = afterPosition.findNext();
+                    if (nextCell) {
+                        const at = Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
+                        Transforms.select(editor, at);
+                        event.preventDefault();
+                    }
+                    else {
+                        AngularEditor.moveBlockCard(editor, startPosition.tableEntry[0], { direction: 'right' });
+                        event.preventDefault();
+                    }
+                    return;
                 }
             }
             // Prevent deleting cells in the table
@@ -10012,12 +10137,12 @@ const withTable = (editor) => {
         }
         if (tableFragment) {
             tableFragment = normalizeTable(_.cloneDeep(tableFragment));
+            const plainText = Node.string(tableFragment);
             tableFragment = [tableFragment];
             const stringObj = JSON.stringify(tableFragment);
             const encoded = window.btoa(encodeURIComponent(stringObj));
             unit.setData(`application/${CLIPBOARD_FORMAT_KEY}`, encoded);
-            // unit.setData('text/html', div.innerHTML);
-            unit.setData('text/plain', Node.string(tableFragment));
+            unit.setData('text/plain', plainText);
             return;
         }
         setFragmentData(unit);
@@ -10042,7 +10167,7 @@ const withTable = (editor) => {
                     for (let j = selectColIndex; j <= lastColIndex; j++) {
                         const row = tablePosition.table.children[i];
                         if (row && row.children[j]) {
-                            const originCell = calcOriginSpan(tablePosition.table, i, j);
+                            const originCell = getOriginCell(tablePosition.table, i, j);
                             if (originCell && (originCell.colspan || originCell.rowspan)) {
                                 const path = TheEditor.findPath(editor, originCell).slice(-2);
                                 resetTableCell(editor, tablePosition.table, originCell, path[0], path[1]);
@@ -10100,6 +10225,21 @@ const withTable = (editor) => {
                 Transforms.setNodes(editor, { columns }, { at: entry[1] });
             }
         }
+        // adjust selection when selection is in hidden cell
+        if (Element$1.isElement(entry[0]) && entry[0].type === ElementKinds.tableCell && entry[0].hidden) {
+            if (editor.selection && Range.isCollapsed(editor.selection) && Path.isAncestor(entry[1], editor.selection.anchor.path)) {
+                setTimeout(() => {
+                    const opts = new TableOptions$1();
+                    const tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+                    const origin = getOriginCell(tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex());
+                    if (origin) {
+                        const path = AngularEditor.findPath(editor, origin);
+                        Transforms.select(editor, Editor.end(editor, path));
+                    }
+                }, 0);
+                return;
+            }
+        }
         normalizeNode(entry);
     };
     editor.isBlockCard = (element) => {
@@ -10147,6 +10287,20 @@ const withTable = (editor) => {
     editor.isContainer = (element) => {
         return element.type === ElementKinds.tableCell ? true : isContainer(element);
     };
+    editor.onChange = () => {
+        onChange();
+        // adujst selection when selection is in hidden cell
+        // just hook set_selection
+        const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
+        const isSelectionOperation = editor.operations.every(op => Operation.isSelectionOperation(op));
+        if (isCollapsed && isSelectionOperation) {
+            const opts = new TableOptions$1();
+            const tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+            if (tablePosition.isInTable() && tablePosition.cell.hidden) {
+                TableEditor.selectOriginCell(editor, tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex(), false);
+            }
+        }
+    };
     return editor;
 };
 
@@ -10181,6 +10335,12 @@ const withDeserializeHMTL = (editor) => {
                 insertData(data);
                 return;
             }
+            // 识出纯图片并且粘贴板中存在文件则不进行处理, hook 直接右键复制图片的场景，流转到上传图片流程
+            // 后续需要做识别html图片后自动上传处理
+            if (fragment.length === 1 && fragment[0].type === ElementKinds.image && data.files.length > 0) {
+                insertData(data);
+                return;
+            }
             // 过滤 text 节点的 color/background-color 属性
             fragment.forEach((node) => deleteColorAndBackgroundColorOfText(node));
             Transforms.insertFragment(editor, fragment);
@@ -10273,7 +10433,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -10396,12 +10556,14 @@ const PaintFormatOptions = [
         key: ToolbarActionTypes.undo,
         icon: 'undo',
         name: '撤销',
+        shortcutKey: `${CONTROL_KEY}+Z`,
         execute: (editor) => editor.undo()
     },
     {
         key: ToolbarActionTypes.redo,
         icon: 'redo',
         name: '重做',
+        shortcutKey: `${CONTROL_KEY}+Shift+Z`,
         execute: (editor) => editor.redo()
     },
     {
@@ -10512,7 +10674,8 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <a
                 thyIconNavLink
                 [thyIconNavLinkIcon]="item.icon"
-                [thyTooltip]="item.name"
+                [thyTooltip]="tooltip"
+                [thyTooltipTemplateContext]="{ name: item.name, shortcutKey: item.shortcutKey }"
                 thyTooltipPlacement="top"
                 [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
@@ -10524,8 +10687,9 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <span class="quick-toolbar-name">{{ item?.name }}</span>
             </ng-container>
         </ng-template>
+        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
-    `, isInline: true, components: [{ type: 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"] }] });
+    `, isInline: true, components: [{ type: i3.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: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -10535,7 +10699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             <a
                 thyIconNavLink
                 [thyIconNavLinkIcon]="item.icon"
-                [thyTooltip]="item.name"
+                [thyTooltip]="tooltip"
+                [thyTooltipTemplateContext]="{ name: item.name, shortcutKey: item.shortcutKey }"
                 thyTooltipPlacement="top"
                 [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
@@ -10547,6 +10712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 <span class="quick-toolbar-name">{{ item?.name }}</span>
             </ng-container>
         </ng-template>
+        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
     `,
                     host: {
@@ -10607,7 +10773,7 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
 }
 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"] }] });
+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$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$4.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: [{
@@ -10710,6 +10876,146 @@ const withQuickInsert = (editor) => {
     return editor;
 };
 
+const withSoftBreak = (options = { rules: [{ hotkey: 'shift+enter' }] }) => (editor) => {
+    const { onKeydown } = editor;
+    editor.onKeydown = (event) => {
+        const { rules } = options;
+        const entry = getBlockAbove(editor);
+        rules.forEach(({ hotkey, query }) => {
+            if (isHotkey(hotkey, event) && isNodeType(entry, query)) {
+                event.preventDefault();
+                editor.insertText('\n');
+            }
+        });
+        onKeydown(event);
+    };
+    return editor;
+};
+
+class TheFontSizeToolbarItemComponent extends TheToolbarBaseItemComponent {
+    constructor(elementRef, thyPopover, viewContainerRef, overlay) {
+        super();
+        this.elementRef = elementRef;
+        this.thyPopover = thyPopover;
+        this.viewContainerRef = viewContainerRef;
+        this.overlay = overlay;
+        this.fontSizes = FontSizes;
+        this.disabled = false;
+        this.disableGroup = HEADING_TYPES;
+        this.toolbarItemContainer = true;
+        this.fontSizeToolbarItem = true;
+    }
+    get isOpen() {
+        return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
+    }
+    get disableClass() {
+        return this.disabled;
+    }
+    toggleDropdown(event) {
+        var _a;
+        super.execute(event);
+        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
+            return;
+        }
+        this.openDropdownPopover();
+    }
+    handleDocumentMouseDown(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.closeDropdownPopover();
+        }
+    }
+    ngOnInit() {
+        this.activeSize = this.fontSizes[2];
+    }
+    statusChange(editor) {
+        if (editor.selection) {
+            const anchorBlock$1 = anchorBlock(editor);
+            if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
+                this.activeSize = null;
+                this.disabled = true;
+                return;
+            }
+            const marks = getSelectionMarks(editor);
+            const fontSizeMark = marks[MarkTypes.fontSize];
+            this.activeSize = fontSizeMark ? fontSizeMark : this.fontSizes[2];
+            this.disabled = false;
+        }
+    }
+    itemMousedown(event, size) {
+        var _a, _b;
+        super.execute(event);
+        this.closeDropdownPopover();
+        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.readOnly)) {
+            return;
+        }
+        const anchorBlock$1 = anchorBlock(this.editor);
+        if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
+            return;
+        }
+        Editor.addMark(this.editor, MarkTypes.fontSize, size);
+    }
+    openDropdownPopover() {
+        var _a;
+        this.dropdownPopoverRef = this.thyPopover.open(this.dropdownTemplate, {
+            origin: this.elementRef,
+            panelClass: ['the-toolbar-dropdown-popover', (_a = this.item) === null || _a === void 0 ? void 0 : _a.key],
+            placement: 'bottomLeft',
+            insideClosable: false,
+            backdropClosable: true,
+            hasBackdrop: false,
+            offset: 10,
+            viewContainerRef: this.viewContainerRef,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+    }
+    closeDropdownPopover() {
+        var _a;
+        if (this.dropdownPopoverRef) {
+            (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
+        }
+    }
+}
+TheFontSizeToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheFontSizeToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheFontSizeToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheFontSizeToolbarItemComponent, selector: "the-font-size-toolbar-item", inputs: { editor: "editor", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.the-toolbar-dropdown-container": "this.toolbarItemContainer", "class.the-font-size-toolbar-item": "this.fontSizeToolbarItem", "class.disabled": "this.disableClass" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\">\n    <span *ngIf=\"activeSize\" class=\"show-text\">{{ activeSize }}px</span>\n    <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let size of fontSizes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"size === activeSize\"\n                (mousedown)=\"itemMousedown($event, size)\"\n            >\n                <span thyActionMenuItemName>{{ size }}px</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheFontSizeToolbarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-font-size-toolbar-item',
+                    templateUrl: './toolbar-item.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { editor: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate', { static: true }]
+            }], toolbarItemContainer: [{
+                type: HostBinding,
+                args: ['class.the-toolbar-dropdown-container']
+            }], fontSizeToolbarItem: [{
+                type: HostBinding,
+                args: ['class.the-font-size-toolbar-item']
+            }], disableClass: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], toggleDropdown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], handleDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }] } });
+
+const FontSizes = [12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48];
+const FontSizeOptions = [
+    {
+        key: MarkTypes.fontSize,
+        name: '字号',
+        iconComponent: TheFontSizeToolbarItemComponent
+    }
+];
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -10727,6 +11033,17 @@ const internalPlugins = [
     withCode,
     withHeading,
     withMark(),
+    withSoftBreak({
+        rules: [
+            { hotkey: 'shift+enter' },
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: [ElementKinds.blockquote]
+                }
+            }
+        ]
+    }),
     withBlockquote,
     withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator }),
     withAutoFormat({ rules: autoFormatRules }),
@@ -10735,9 +11052,9 @@ const internalPlugins = [
     withMoveSelection,
     withInsertParagraphNodes(),
     withGetFragment(),
+    withImage,
     withDeserializeHMTL,
     withDeserializeMd(),
-    withImage,
     withQuickInsert
 ];
 const internalToolbarItems = [
@@ -10745,6 +11062,7 @@ const internalToolbarItems = [
     ...MarkOptions,
     ...ColorOptions,
     ...HeadingOptions,
+    ...FontSizeOptions,
     ...TodoItemOptions,
     ...ListOptions,
     ...ImageOptions,
@@ -11080,7 +11398,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", 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"] }] });
+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: i3.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: [{
@@ -11205,7 +11523,7 @@ class TheInlineToolbarComponent {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2.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"
@@ -11229,7 +11547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.ScrollDispatcher }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.ScrollDispatcher }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
                 type: Input
             }], toolbarItems: [{
                 type: Input
@@ -11327,16 +11645,20 @@ class ThePlaceholderComponent {
         }
     }
     checkStatus() {
+        var _a, _b, _c;
         const { editor } = this;
+        const isEmptyShow = typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.isEmptyShowPlaceholder) === 'undefined' ? true : this.options.isEmptyShowPlaceholder;
+        const isMustShow = (_b = this.options) === null || _b === void 0 ? void 0 : _b.isMustShowPlaceholder;
+        const isReadonly = (_c = this.options) === null || _c === void 0 ? void 0 : _c.readonly;
         // empty content and no selection processing
-        if (!editor.selection && isEmptyContent(editor.children)) {
+        if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
             const firstElementChild = this.contextService.getFirstElementChild();
             const offsetTop = firstElementChild.offsetTop;
             const offsetLeft = firstElementChild.offsetLeft;
             this.updatePosition(offsetLeft, offsetTop);
             return;
         }
-        if (isCleanEmptyParagraph(editor)) {
+        if (isMustShow && 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]]);
@@ -11357,12 +11679,12 @@ class ThePlaceholderComponent {
     }
 }
 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 });
+ThePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", options: "options" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ options?.placeholder }}`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[thePlaceholder]',
-                    template: `{{ placeholder }}`,
+                    template: `{{ options?.placeholder }}`,
                     host: {
                         class: 'the-placeholder',
                         '[class.hide]': 'isHide'
@@ -11370,7 +11692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
                 type: Input
-            }], placeholder: [{
+            }], options: [{
                 type: Input
             }], handleCompositionStart: [{
                 type: HostListener,
@@ -11571,7 +11893,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         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)) {
+        if (options && ((_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']) {
@@ -11594,7 +11916,9 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.theContextService.initialize({ nativeElement: this.elementRef.nativeElement, viewContainerRef: this.viewContainerRef });
         this.toolbarCalculate();
         setTimeout(() => {
+            var _a;
             this.theEditorCreated.emit(this.editor);
+            (_a = this.placeholderInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
             this.applyAutoFocus();
         });
     }
@@ -11776,7 +12100,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => TheEditorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }, { 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"] }] });
+    ], 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\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { 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: [{
@@ -11940,7 +12264,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", "containerClass", "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: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -11980,7 +12304,9 @@ const TETHYS = [
     ThySelectModule,
     ThyButtonModule,
     ThyNotifyModule,
-    ThyAlertModule
+    ThyAlertModule,
+    ThyResizableModule,
+    ThySwitchModule
 ];
 const COMPONENTS = [
     TheToolbarComponent,
@@ -12000,7 +12326,8 @@ const COMPONENTS = [
     TheTableSelectComponent,
     TheTableToolbarItemComponent,
     TheConversionHintComponent,
-    TheVerticalToolbarItemComponent
+    TheVerticalToolbarItemComponent,
+    TheFontSizeToolbarItemComponent
 ];
 const PLUGIN_COMPONENTS = [
     TheImageComponent,
@@ -12043,7 +12370,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableSelectComponent,
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
-        TheVerticalToolbarItemComponent, TheImageComponent,
+        TheVerticalToolbarItemComponent,
+        TheFontSizeToolbarItemComponent, TheImageComponent,
         TheTemplateComponent,
         TheHrComponent,
         TheBlockquoteComponent,
@@ -12074,7 +12402,9 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ThySelectModule,
         ThyButtonModule,
         ThyNotifyModule,
-        ThyAlertModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
+        ThyAlertModule,
+        ThyResizableModule,
+        ThySwitchModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
 TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorModule, providers: [
         {
             provide: TheToolbarGroupToken,
@@ -12107,5 +12437,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, 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 };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, 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, TheCodeConfig, 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