@worktile/theia 2.3.3 → 2.4.2

package/fesm2015/worktile-theia.js

@@ -2,33 +2,33 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Injectable, Inject, ViewChild, Directive, ElementRef, TemplateRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
 import * as i10 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
-import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, EDITOR_TO_ELEMENT, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
+import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, EDITOR_TO_ELEMENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
 import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
 import isHotkey, { isKeyHotkey } from 'is-hotkey';
-import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
+import { Transforms, Text, Range, Editor, Element as Element$1, Node, Span, Path, Point, Operation, createEditor } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
-import { __rest, __awaiter } from 'tslib';
-import * as _lodash from 'lodash';
 import marked from 'marked';
 import { TheiaConverter } from '@atinc/selene';
 import * as i1$3 from 'ngx-tethys/popover';
 import { ThyPopover } from 'ngx-tethys/popover';
+import { __rest, __awaiter } from 'tslib';
+import * as _lodash from 'lodash';
 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';
-import { map, takeUntil, take, delay, startWith, distinctUntilChanged, skip, share, filter, throttleTime, mapTo, debounceTime, pairwise } from 'rxjs/operators';
+import { map, takeUntil, take, delay, startWith, distinctUntilChanged, skip, share, filter, mapTo, debounceTime, pairwise } from 'rxjs/operators';
 import { ThyUploadStatus } from 'ngx-tethys/uploader';
 import { fromEvent, timer, Subject, combineLatest, Observable, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
 import * as i1$2 from '@angular/platform-browser';
 import * as i6 from 'ngx-tethys/progress';
 import { ThyProgressModule } from 'ngx-tethys/progress';
-import * as i4 from 'ngx-tethys/icon';
+import * as i3 from 'ngx-tethys/icon';
 import { ThyIconModule } from 'ngx-tethys/icon';
-import * as i3 from 'ngx-tethys/nav';
+import * as i3$1 from 'ngx-tethys/nav';
 import { ThyNavModule } from 'ngx-tethys/nav';
 import * as i5 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
@@ -38,7 +38,7 @@ import * as i8 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$2 from 'ngx-tethys/action-menu';
+import * as i2$1 from 'ngx-tethys/action-menu';
 import { ThyActionMenuModule } from 'ngx-tethys/action-menu';
 import * as i6$1 from 'ngx-tethys/switch';
 import { ThySwitchModule } from 'ngx-tethys/switch';
@@ -47,14 +47,14 @@ 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$1 from 'ngx-tethys/form';
+import * as i2$2 from 'ngx-tethys/form';
 import { ThyFormModule } from 'ngx-tethys/form';
-import * as i5$3 from 'ngx-tethys/shared';
+import * as i5$2 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$2 from 'ngx-tethys/list';
+import * as i2$3 from 'ngx-tethys/list';
 import { ThyListModule } from 'ngx-tethys/list';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
@@ -522,6 +522,61 @@ function idCreator(length = 5) {
     return key;
 }
 
+const UNDOING = new WeakMap();
+const REDOING = new WeakMap();
+const withTheHistory = (editor) => {
+    const { undo, redo } = editor;
+    editor.undo = () => {
+        UNDOING.set(editor, true);
+        undo();
+        UNDOING.set(editor, false);
+    };
+    editor.redo = () => {
+        REDOING.set(editor, true);
+        redo();
+        REDOING.set(editor, false);
+    };
+    return editor;
+};
+const TheHistoryEditor = {
+    isUndoing(editor) {
+        return UNDOING.get(editor);
+    },
+    isRedoing(editor) {
+        return REDOING.get(editor);
+    }
+};
+
+const setMarks = (editor, marks, at) => {
+    Transforms.setNodes(editor, marks, {
+        at,
+        match: Text.isText,
+        split: true
+    });
+};
+
+const clearMarks = (editor) => {
+    const { selection } = editor;
+    if (!selection) {
+        return;
+    }
+    if (Range.isCollapsed(selection)) {
+        const marks = Editor.marks(editor);
+        for (const key in marks) {
+            Editor.removeMark(editor, key);
+        }
+    }
+    else {
+        const unsetMarks = {};
+        MarkProps.forEach(key => {
+            unsetMarks[key] = null;
+        });
+        setMarks(editor, unsetMarks);
+    }
+};
+
+const insertElement = (editor, element) => editor.insertElement(element);
+
 const isAncestor = (node) => Element$1.isElement(node) || Editor.isEditor(node);
 
 const getLastChild$1 = (node, level) => {
@@ -1321,36 +1376,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     someNode: someNode
 });
 
-const setMarks = (editor, marks, at) => {
-    Transforms.setNodes(editor, marks, {
-        at,
-        match: Text.isText,
-        split: true
-    });
-};
-
-const clearMarks = (editor) => {
-    const { selection } = editor;
-    if (!selection) {
-        return;
-    }
-    if (Range.isCollapsed(selection)) {
-        const marks = Editor.marks(editor);
-        for (const key in marks) {
-            Editor.removeMark(editor, key);
-        }
-    }
-    else {
-        const unsetMarks = {};
-        MarkProps.forEach(key => {
-            unsetMarks[key] = null;
-        });
-        setMarks(editor, unsetMarks);
-    }
-};
-
-const insertElement = (editor, element) => editor.insertElement(element);
-
 const insertElementNext = (editor, node) => {
     if (Range.isExpanded(editor.selection)) {
         Editor.deleteFragment(editor);
@@ -1586,673 +1611,214 @@ var index = /*#__PURE__*/Object.freeze({
     handleContinualInsertBreak: handleContinualInsertBreak
 });
 
-const isNodeTypeList = (n) => {
-    return [ElementKinds.bulletedList, ElementKinds.numberedList].includes(n.type);
-};
-
-const ListEditor = {
-    isList(editor, element, type) {
-        return Editor.isBlock(editor, element) && element.type === type;
-    },
-    toggleList(editor, type, startIndex) {
-        if (!editor.selection) {
-            return;
-        }
-        if (!startIndex) {
-            startIndex = 1;
-        }
-        const types = [ElementKinds.bulletedList, ElementKinds.numberedList];
-        Editor.withoutNormalizing(editor, () => {
-            const [...listItems] = Editor.nodes(editor, {
-                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem,
-                mode: 'lowest'
-            });
-            const firstListItemPath = listItems.length && listItems[0][1];
-            const activeListPath = listItems.length && Path.parent(firstListItemPath);
-            const activeListNode = listItems.length && Node.get(editor, activeListPath);
-            // 同级且类型相同：unwrap
-            const isLowestActive = listItems.length &&
-                listItems.every(([, path]) => activeListNode.type === type && (Path.isSibling(firstListItemPath, path) || Path.equals(firstListItemPath, path)));
-            if (isLowestActive) {
-                const upListItem = Path.parent(activeListPath);
-                Transforms.unwrapNodes(editor, {
-                    at: editor.selection,
-                    match: node => node === activeListNode,
-                    split: true,
-                    mode: 'lowest'
-                });
-                if (upListItem && Node.get(editor, upListItem).type === ElementKinds.listItem) {
-                    Transforms.moveNodes(editor, {
-                        at: editor.selection,
-                        to: Path.next(upListItem),
-                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
-                    });
-                }
-                else {
-                    Transforms.unwrapNodes(editor, {
-                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
-                    });
-                }
-                return;
-            }
-            // 跨级、同级且类型不同
-            if (activeListNode && types.includes(activeListNode.type)) {
-                Transforms.setNodes(editor, { type }, { match: node => Element$1.isElement(node) && node.type !== type && types.includes(node.type) });
-                return;
-            }
-            // wrap
-            this.buildListItem(editor);
-            // Todo: types
-            Transforms.wrapNodes(editor, { type, children: [], start: startIndex }, {
-                at: editor.selection,
-                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
-            });
-        });
-    },
-    unwrapList(editor) {
-        Editor.withoutNormalizing(editor, () => {
-            unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true, mode: 'all' });
-            unwrapNodesByType(editor, [ElementKinds.listItem], { split: true, mode: 'all' });
-        });
-    },
-    wrapList(editor, type) {
-        Editor.withoutNormalizing(editor, () => {
-            const listItem = {
-                type: ElementKinds.listItem,
-                children: []
-            };
-            const list = {
-                type,
-                children: []
-            };
-            Transforms.wrapNodes(editor, list, { split: true });
-            Transforms.wrapNodes(editor, listItem, { split: true });
-        });
-    },
-    isActive(editor, type) {
-        const [match] = getNodesByType(editor, type);
-        return !!match;
-    },
-    getActiveList(editor) {
-        const [match] = getNodesByType(editor, LIST_BLOCK_TYPES);
-        return match;
-    },
-    buildListItem(editor) {
-        const nodes = Editor.nodes(editor, {
-            match: node => Editor.isBlock(editor, node),
-            mode: 'lowest'
-        });
-        for (const [node, path] of nodes) {
-            if (!Editor.isVoid(editor, node) && Element$1.isElement(node) && node.type !== ElementKinds.paragraph) {
-                Transforms.setNodes(editor, { type: ElementKinds.paragraph, checked: undefined }, // todo remove checked
-                { at: path });
-            }
-            else if (Element$1.isElement(node) && node.type === ElementKinds.paragraph) {
-                let { textIndent } = node;
-                if (textIndent) {
-                    Transforms.setNodes(editor, { textIndent: undefined, indent: undefined }, // remove indent
-                    { at: path });
-                }
-            }
-            if (Node.parent(editor, path).type !== ElementKinds.listItem) {
-                Transforms.wrapNodes(editor, { type: ElementKinds.listItem, children: [] }, {
-                    at: path,
-                    split: true
-                });
-            }
-        }
-    },
-    buildInsertDataChildren(node) {
-        const { children } = node;
-        const listItem = children[0];
-        if (isNodeTypeList(node) && Element$1.isElement(listItem) && listItem.children[0].type === ElementKinds.paragraph) {
-            return node;
-        }
-        return this.buildInsertDataChildren(listItem);
+class TheConversionHintComponent {
+    constructor() {
+        this.duration = 10000;
+        this.pauseOnHover = true;
     }
-};
-
-const TodoItemEditor = {
-    isActive(editor) {
-        const [match] = getNodesByType(editor, ElementKinds.checkItem);
-        return !!match;
-    },
-    insertTodoItem(editor) {
-        if (!editor.selection) {
-            return;
-        }
-        const isActive = this.isActive(editor);
-        const isNumberedList = ListEditor.isActive(editor, ElementKinds.numberedList);
-        const isBulletedList = ListEditor.isActive(editor, ElementKinds.bulletedList);
-        if (isActive) {
-            Transforms.setNodes(editor, {
-                type: ElementKinds.paragraph
-            });
+    mouseenter() {
+        if (this.pauseOnHover) {
+            this.clearCloseTimer();
         }
-        else {
-            if (isNumberedList || isBulletedList) {
-                ListEditor.unwrapList(editor);
-            }
-            Transforms.setNodes(editor, {
-                type: ElementKinds.checkItem
-            });
+    }
+    mouseleave() {
+        if (this.pauseOnHover) {
+            this.creatCloseTimer();
         }
     }
-};
-
-const BlockquoteEditor = {
-    toggleBlockquote(editor) {
-        if (!isParagraph(editor)) {
-            Transforms.insertNodes(editor, {
-                type: ElementKinds.paragraph,
-                mode: 'text',
-                children: [
-                    {
-                        text: ''
-                    }
-                ]
-            });
-        }
-        const isActive = isBlockActive(editor, ElementKinds.blockquote);
-        if (!isActive) {
-            Transforms.wrapNodes(editor, { type: ElementKinds.blockquote, children: [] }, {
-                mode: 'lowest'
-            });
-        }
-        else {
-            Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.blockquote });
-        }
+    ngOnInit() {
+        this.creatCloseTimer();
     }
-};
+    ngOnDestroy() {
+        this.clearCloseTimer();
+    }
+    creatCloseTimer() {
+        this.closeTimer = setInterval(() => {
+            clearInterval(this.closeTimer);
+            closeConversionHint(this.editor);
+        }, this.duration);
+    }
+    clearCloseTimer() {
+        clearInterval(this.closeTimer);
+    }
+}
+TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n    <thy-alert\n        thyType=\"primary-weak\"\n        thyIcon=\"info-circle-fill\"\n        thyCloseable=\"true\"\n        thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\"\n    >\n        <ng-template #operation>\n            <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\">\n                \u7ACB\u5373\u8F6C\u6362\n            </a>\n        </ng-template>\n    </thy-alert>\n</ng-container>\n", components: [{ type: i1$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheConversionHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-conversion-hint',
+                    templateUrl: 'conversion-hint.component.html',
+                    host: {
+                        class: 'the-conversion-hint'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], conversion: [{
+                type: Input
+            }], mouseenter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], mouseleave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
 
-const InlineCodeEditor = {
-    toggleInlineCode(editor, text) {
-        const isActive = InlineCodeEditor.isInlineCodeActive(editor);
-        if (isActive) {
-            InlineCodeEditor.unwrapInlineCode(editor);
-            return;
-        }
-        if (Range.isCollapsed(editor.selection)) {
-            InlineCodeEditor.wrapInlineCode(editor, text);
-        }
-        else {
-            const fragment = Node.fragment(editor, editor.selection)[0];
-            const selectNode = Node.get(fragment, []);
-            const selectText = Node.string(selectNode);
-            InlineCodeEditor.wrapInlineCode(editor, selectText);
-        }
-    },
-    wrapInlineCode(editor, text = '') {
-        if (InlineCodeEditor.isInlineCodeActive(editor)) {
-            InlineCodeEditor.unwrapInlineCode(editor);
-        }
-        const { selection } = editor;
-        const isCollapsed = selection && Range.isCollapsed(selection);
-        const inlineCode = {
-            type: ElementKinds.inlineCode,
-            children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
+function plainToTheia(text) {
+    if (typeof text !== 'string') {
+        return text;
+    }
+    return text.split('\n').map(i => {
+        return {
+            type: ElementKinds.paragraph,
+            children: [
+                {
+                    text: i
+                }
+            ]
         };
-        if (isCollapsed) {
-            Transforms.insertNodes(editor, inlineCode);
+    });
+}
+function htmlToTheia(value) {
+    if (typeof value === 'string') {
+        const htmlDom = new DOMParser().parseFromString(value, 'text/html');
+        return TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
+    }
+    return value;
+}
+function dataDeserialize(mode, value) {
+    if (!value) {
+        return [createEmptyParagraph()];
+    }
+    if (mode === TheDataMode.html) {
+        if (typeof value !== 'string') {
+            return value;
         }
-        else {
-            Transforms.wrapNodes(editor, inlineCode, { split: true });
+        if (/<[^>]+>/.test(value)) {
+            return htmlToTheia(value);
         }
-    },
-    unwrapInlineCode(editor) {
-        Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
-    },
-    isInlineCodeActive(editor, path) {
-        var _a;
-        const [inlineCode] = Editor.nodes(editor, {
-            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
-            match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode
-        });
-        return !!inlineCode;
+        return plainToTheia(value);
+    }
+    return value || [createEmptyParagraph()];
+}
+function dataSerializing(mode, value) {
+    if (mode === TheDataMode.html) {
+        return TheiaConverter.convertToHtml(value);
     }
+    return value;
+}
+
+const getEditorUUID = (editor) => {
+    return THE_EDITOR_UUID.get(editor);
+};
+const setEditorUUID = (editor, uuid) => {
+    THE_EDITOR_UUID.set(editor, uuid);
 };
 
-const HeadingEditor = {
-    setHeading(editor, heading) {
-        Editor.withoutNormalizing(editor, () => {
-            const types = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.listItem];
-            Transforms.unwrapNodes(editor, {
-                at: editor.selection,
-                match: n => Element$1.isElement(n) && types.includes(n.type),
-                mode: 'all',
-                split: true
-            });
-            Transforms.setNodes(editor, { type: heading });
-            const entry = anchorBlockEntry(editor);
-            const unMarks = {
-                [MarkTypes.fontSize]: null
-            };
-            if (entry) {
-                setMarks(editor, unMarks, entry[1]);
-                return;
-            }
-            setMarks(editor, unMarks, editor.selection);
-        });
-    },
-    isHeadingActive(editor, heading) {
-        const [match] = Editor.nodes(editor, {
-            match: n => Element$1.isElement(n) && n.type === heading,
-            universal: true
-        });
-        return !!match;
+const getToolbarClass = (editor) => {
+    const uuid = getEditorUUID(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';
+
+/**
+ * whether the current node is a clean paragraph
+ * @param editor
+ * @param text
+ * @returns boolean
+ */
+const isCleanEmptyParagraph = (editor) => {
+    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+    if (!isCollapsedCursor) {
+        return false;
+    }
+    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+    const textIndent = 'textIndent';
+    const align = 'align';
+    const hasTextIndent = block[textIndent];
+    const alignValue = block[align];
+    const hasIndent = block[ElementKinds.indent];
+    if (Node.string(block) === '' &&
+        Element$1.isElement(block) &&
+        block.type === ElementKinds.paragraph &&
+        block.children.length === 1 &&
+        Text.isText(block.children[0]) &&
+        !Editor.isVoid(editor, block) &&
+        !hasIndent &&
+        !hasTextIndent &&
+        (!alignValue || alignValue === Alignment.left)) {
+        return true;
     }
+    return false;
 };
 
-const autoFormatRules = [
-    {
-        type: ElementKinds.heading_1,
-        markup: '#',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_1);
-        }
-    },
-    {
-        type: ElementKinds.heading_2,
-        markup: '##',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_2);
-        }
-    },
-    {
-        type: ElementKinds.heading_3,
-        markup: '###',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_3);
-        }
-    },
-    {
-        type: ElementKinds.heading_4,
-        markup: '####',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_4);
-        }
-    },
-    {
-        type: ElementKinds.heading_5,
-        markup: '#####',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_5);
+const mergeElementOptions = (elementOptions) => {
+    elementOptions = elementOptions.filter(item => item.inValidChildrenTypes.length > 0);
+    const combinationData = [...DefaultElementOptions, ...elementOptions];
+    const dataInfo = {};
+    combinationData.forEach(item => {
+        const { type, inValidChildrenTypes, isIndivisible, isSecondaryContainer } = item;
+        if (!dataInfo[type]) {
+            dataInfo[type] = {
+                type,
+                inValidChildrenTypes,
+                isIndivisible,
+                isSecondaryContainer
+            };
         }
-    },
-    {
-        type: ElementKinds.heading_6,
-        markup: '######',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_6);
-        }
-    },
-    {
-        type: ElementKinds.blockquote,
-        markup: ['>'],
-        format: (editor) => {
-            BlockquoteEditor.toggleBlockquote(editor);
-        }
-    },
-    {
-        type: MarkTypes.bold,
-        between: ['**', '**'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: MarkTypes.bold,
-        between: ['__', '__'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: MarkTypes.italic,
-        between: ['*', '*'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: MarkTypes.italic,
-        between: ['_', '_'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: ElementKinds.inlineCode,
-        between: ['`', '`'],
-        mode: 'inline',
-        format: (editor, text) => {
-            InlineCodeEditor.toggleInlineCode(editor, text);
-            Transforms.select(editor, Editor.after(editor, editor.selection));
-        }
-    },
-    {
-        type: MarkTypes.strike,
-        between: ['~~', '~~'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: ElementKinds.code,
-        markup: '```',
-        insertTrigger: true
-    },
-    {
-        type: ElementKinds.listItem,
-        markup: [],
-        match: (editor) => {
-            return isParagraph(editor) ? ['*', '-', '+'] : [];
-        },
-        format: (editor) => {
-            ListEditor.toggleList(editor, ElementKinds.bulletedList);
-        }
-    },
-    {
-        type: ElementKinds.listItem,
-        markup: [],
-        match: (editor, textFromBlockStart) => {
-            return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
-        },
-        format: (editor, markup) => {
-            let startIndex = 1;
-            if (markup) {
-                startIndex = markup[0].split('.')[0];
-                if (startIndex === 0) {
-                    startIndex = 1;
-                }
-            }
-            ListEditor.toggleList(editor, ElementKinds.numberedList, startIndex);
-        }
-    },
-    {
-        type: ElementKinds.checkItem,
-        markup: [],
-        match: (editor) => {
-            return isParagraph(editor) ? ['[]'] : [];
-        },
-        format: (editor) => {
-            TodoItemEditor.insertTodoItem(editor);
-        }
-    },
-    {
-        type: ElementKinds.hr,
-        markup: '---',
-        insertTrigger: true
-    }
-];
-
-const UNDOING = new WeakMap();
-const REDOING = new WeakMap();
-const withTheHistory = (editor) => {
-    const { undo, redo } = editor;
-    editor.undo = () => {
-        UNDOING.set(editor, true);
-        undo();
-        UNDOING.set(editor, false);
-    };
-    editor.redo = () => {
-        REDOING.set(editor, true);
-        redo();
-        REDOING.set(editor, false);
-    };
-    return editor;
-};
-const TheHistoryEditor = {
-    isUndoing(editor) {
-        return UNDOING.get(editor);
-    },
-    isRedoing(editor) {
-        return REDOING.get(editor);
-    }
+        dataInfo[type].inValidChildrenTypes = Array.from(new Set([...inValidChildrenTypes, ...dataInfo[type].inValidChildrenTypes]));
+    });
+    return dataInfo;
 };
 
-class TheConversionHintComponent {
-    constructor() {
-        this.duration = 10000;
-        this.pauseOnHover = true;
-    }
-    mouseenter() {
-        if (this.pauseOnHover) {
-            this.clearCloseTimer();
-        }
-    }
-    mouseleave() {
-        if (this.pauseOnHover) {
-            this.creatCloseTimer();
-        }
-    }
-    ngOnInit() {
-        this.creatCloseTimer();
-    }
-    ngOnDestroy() {
-        this.clearCloseTimer();
-    }
-    creatCloseTimer() {
-        this.closeTimer = setInterval(() => {
-            clearInterval(this.closeTimer);
-            closeConversionHint(this.editor);
-        }, this.duration);
-    }
-    clearCloseTimer() {
-        clearInterval(this.closeTimer);
+/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
+function coercePixelsFromCssValue(cssValue) {
+    const match = cssValue.match(/(\d+(\.\d+)?)px/);
+    if (match) {
+        return Number(match[1]);
     }
 }
-TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n    <thy-alert\n        thyType=\"primary-weak\"\n        thyIcon=\"info-circle-fill\"\n        thyCloseable=\"true\"\n        thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\"\n    >\n        <ng-template #operation>\n            <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\">\n                \u7ACB\u5373\u8F6C\u6362\n            </a>\n        </ng-template>\n    </thy-alert>\n</ng-container>\n", components: [{ type: i1$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheConversionHintComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'the-conversion-hint',
-                    templateUrl: 'conversion-hint.component.html',
-                    host: {
-                        class: 'the-conversion-hint'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], conversion: [{
-                type: Input
-            }], mouseenter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], mouseleave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-function plainToTheia(text) {
-    if (typeof text !== 'string') {
-        return text;
-    }
-    return text.split('\n').map(i => {
-        return {
-            type: ElementKinds.paragraph,
-            children: [
-                {
-                    text: i
-                }
-            ]
-        };
-    });
+function getElementWidth(element) {
+    // Optimization: Check style.width first as we probably set it already before reading
+    // offsetWidth which triggers layout.
+    return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
 }
-function htmlToTheia(value) {
-    if (typeof value === 'string') {
-        const htmlDom = new DOMParser().parseFromString(value, 'text/html');
-        return TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
-    }
-    return value;
+function getElementHeight(element) {
+    return element.getBoundingClientRect().height;
 }
-function dataDeserialize(mode, value) {
-    if (!value) {
-        return [createEmptyParagraph()];
+function getColsTotalWidth(cols) {
+    return cols.reduce((total, col) => {
+        return total + getElementWidth(col);
+    }, 0);
+}
+function getRowsTotalHeight(rows) {
+    return rows.reduce((total, row) => {
+        return total + getElementHeight(row);
+    }, 0);
+}
+function useElementStyle(el, element) {
+    if (element.align) {
+        el.style.textAlign = element.align || Alignment.left;
     }
-    if (mode === TheDataMode.html) {
-        if (typeof value !== 'string') {
-            return value;
-        }
-        if (/<[^>]+>/.test(value)) {
-            return htmlToTheia(value);
-        }
-        return plainToTheia(value);
+    if (element.textIndent) {
+        el.style.textIndent = element.textIndent + 'em';
     }
-    return value || [createEmptyParagraph()];
-}
-function dataSerializing(mode, value) {
-    if (mode === TheDataMode.html) {
-        return TheiaConverter.convertToHtml(value);
+    if (element.verticalAlign) {
+        el.style.verticalAlign = element.verticalAlign;
     }
-    return value;
-}
-
-const getEditorUUID = (editor) => {
-    return THE_EDITOR_UUID.get(editor);
-};
-const setEditorUUID = (editor, uuid) => {
-    THE_EDITOR_UUID.set(editor, uuid);
-};
-
-const getToolbarClass = (editor) => {
-    const uuid = getEditorUUID(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';
-
-/**
- * whether the current node is a clean paragraph
- * @param editor
- * @param text
- * @returns boolean
- */
-const isCleanEmptyParagraph = (editor) => {
-    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
-    if (!isCollapsedCursor) {
-        return false;
-    }
-    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
-    const textIndent = 'textIndent';
-    const align = 'align';
-    const hasTextIndent = block[textIndent];
-    const alignValue = block[align];
-    const hasIndent = block[ElementKinds.indent];
-    if (Node.string(block) === '' &&
-        Element$1.isElement(block) &&
-        block.type === ElementKinds.paragraph &&
-        block.children.length === 1 &&
-        Text.isText(block.children[0]) &&
-        !Editor.isVoid(editor, block) &&
-        !hasIndent &&
-        !hasTextIndent &&
-        (!alignValue || alignValue === Alignment.left)) {
-        return true;
-    }
-    return false;
-};
-
-const mergeElementOptions = (elementOptions) => {
-    elementOptions = elementOptions.filter(item => item.inValidChildrenTypes.length > 0);
-    const combinationData = [...DefaultElementOptions, ...elementOptions];
-    const dataInfo = {};
-    combinationData.forEach(item => {
-        const { type, inValidChildrenTypes, isIndivisible, isSecondaryContainer } = item;
-        if (!dataInfo[type]) {
-            dataInfo[type] = {
-                type,
-                inValidChildrenTypes,
-                isIndivisible,
-                isSecondaryContainer
-            };
-        }
-        dataInfo[type].inValidChildrenTypes = Array.from(new Set([...inValidChildrenTypes, ...dataInfo[type].inValidChildrenTypes]));
-    });
-    return dataInfo;
-};
-
-/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
-function coercePixelsFromCssValue(cssValue) {
-    const match = cssValue.match(/(\d+(\.\d+)?)px/);
-    if (match) {
-        return Number(match[1]);
-    }
-}
-function getElementWidth(element) {
-    // Optimization: Check style.width first as we probably set it already before reading
-    // offsetWidth which triggers layout.
-    return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
-}
-function getElementHeight(element) {
-    return Math.round(element.getBoundingClientRect().height);
-}
-function getColsTotalWidth(cols) {
-    return cols.reduce((total, col) => {
-        return total + getElementWidth(col);
-    }, 0);
-}
-function getRowsTotalHeight(rows) {
-    return rows.reduce((total, row) => {
-        return total + getElementHeight(row);
-    }, 0);
-}
-function useElementStyle(el, element) {
-    if (element.align) {
-        el.style.textAlign = element.align || Alignment.left;
-    }
-    if (element.textIndent) {
-        el.style.textIndent = element.textIndent + 'em';
-    }
-    if (element.verticalAlign) {
-        el.style.verticalAlign = element.verticalAlign;
-    }
-}
-function getElementClassByPrefix(el, prefix) {
-    let matchClass = null;
-    el.classList.forEach((value, key) => {
-        if (value.includes(prefix)) {
-            matchClass = value;
-        }
-    });
-    return matchClass;
-}
-function findRelativeElementByPoint(editor, x, y, mode) {
-    const editableElement = EDITOR_TO_ELEMENT.get(editor);
-    const rectEditable = editableElement.getBoundingClientRect();
-    if (x > rectEditable.x && x < rectEditable.x + rectEditable.width) {
-        let { paddingLeft } = window.getComputedStyle(editableElement, null);
-        const paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
-        const startX = rectEditable.left + paddingLeftPixels;
-        let relativeElement = document.elementFromPoint(mode === 'highest' ? startX : x, y);
-        return relativeElement;
-    }
-    return null;
-}
-function findNodeEntryByPoint(editor, x, y, mode) {
-    const editableElement = EDITOR_TO_ELEMENT.get(editor);
-    let rootElement = null;
-    let relativeElement = findRelativeElementByPoint(editor, x, y, mode);
-    // 获取最顶层的DOM
-    if (mode === 'highest') {
-        while (relativeElement && editableElement.contains(relativeElement)) {
-            relativeElement = relativeElement.closest('[data-slate-node="element"]');
-            if (relativeElement) {
-                rootElement = relativeElement;
-                relativeElement = relativeElement.parentElement;
-            }
-        }
-    }
-    if (!mode) {
-        if (relativeElement && editableElement.contains(relativeElement)) {
-            relativeElement = relativeElement.closest('[data-slate-node="element"]');
-            rootElement = relativeElement;
-        }
-    }
-    if (rootElement) {
-        const node = AngularEditor.toSlateNode(editor, rootElement);
-        const path = AngularEditor.findPath(editor, node);
-        return [node, path];
-    }
-    return null;
+}
+function getElementClassByPrefix(el, prefix) {
+    let matchClass = null;
+    el.classList.forEach((value, key) => {
+        if (value.includes(prefix)) {
+            matchClass = value;
+        }
+    });
+    return matchClass;
 }
 
 const withDeserializeMd = (options) => (editor) => {
@@ -2968,7 +2534,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -3092,6 +2658,10 @@ const hasStableListItem = (listItemNode) => {
     return listItemNode.children.length === 1 && type === ElementKinds.paragraph;
 };
 
+const isNodeTypeList = (n) => {
+    return [ElementKinds.bulletedList, ElementKinds.numberedList].includes(n.type);
+};
+
 /**
  * list 中 是否是单个listItem，且listItem没有子列表
  */
@@ -3987,7 +3557,7 @@ TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <span contenteditable="false" class="todo-item-status">
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
     `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, decorators: [{
             type: Component,
@@ -3997,7 +3567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
         <span contenteditable="false" class="todo-item-status">
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { checkItemClass: [{
@@ -4243,126 +3813,523 @@ const withNodeID = ({ idKey = 'id', idCreator = () => Date.now(), filterText = t
             });
             return apply(Object.assign(Object.assign({}, operation), { node }));
         }
-        if (operation.type === 'split_node' && (!filterText || operation.properties.type)) {
-            let id = operation.properties[idKey];
-            if (editor.removedIDs.has(id)) {
-                editor.removedIDs.delete(id);
-            }
-            else {
-                id = idCreator();
+        if (operation.type === 'split_node' && (!filterText || operation.properties.type)) {
+            let id = operation.properties[idKey];
+            if (editor.removedIDs.has(id)) {
+                editor.removedIDs.delete(id);
+            }
+            else {
+                id = idCreator();
+            }
+            return apply(Object.assign(Object.assign({}, operation), { properties: Object.assign(Object.assign({}, operation.properties), { [idKey]: id }) }));
+        }
+        if (operation.type === 'merge_node' && (!filterText || operation.properties.type)) {
+            editor.removedIDs.add(operation.properties[idKey]);
+        }
+        return apply(operation);
+    };
+    editor.getFragment = () => {
+        const fragment = _.cloneDeep(getFragment());
+        return deleteElementKey(fragment, idKey);
+    };
+    return editor;
+};
+
+const autoFormatBlock = (editor, type, at, { preFormat, format }, markups) => {
+    Transforms.delete(editor, { at });
+    if (preFormat) {
+        preFormat(editor);
+    }
+    if (!format) {
+        Transforms.setNodes(editor, { type }, { match: n => Editor.isBlock(editor, n) });
+    }
+    else {
+        format(editor, markups);
+    }
+};
+
+const autoFormatInline = (editor, { type, between, markup, ignoreTrim, format }) => {
+    const selection = editor.selection;
+    const startMarkup = between ? between[0] : markup;
+    const endMarkup = between ? between[1] : '';
+    let endMarkupPointBefore = selection.anchor;
+    if (endMarkup) {
+        endMarkupPointBefore = getPointBefore(editor, selection, {
+            matchString: endMarkup
+        });
+        if (!endMarkupPointBefore) {
+            return false;
+        }
+    }
+    const startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
+        matchString: startMarkup,
+        skipInvalid: true,
+        afterMatch: true
+    });
+    if (!startMarkupPointAfter) {
+        return false;
+    }
+    // found
+    const markupRange = {
+        anchor: startMarkupPointAfter,
+        focus: endMarkupPointBefore
+    };
+    if (!ignoreTrim) {
+        const markupText = getText(editor, markupRange);
+        if (markupText.trim() !== markupText) {
+            return false;
+        }
+    }
+    // delete end markup
+    if (endMarkup) {
+        endMarkupPointBefore = getPointBefore(editor, selection, {
+            matchString: endMarkup
+        });
+        Transforms.delete(editor, {
+            at: {
+                anchor: endMarkupPointBefore,
+                focus: selection.anchor
+            }
+        });
+    }
+    const startMarkupPointBefore = getPointBefore(editor, selection, {
+        matchString: startMarkup,
+        skipInvalid: true
+    });
+    if (format) {
+        const markupText = getText(editor, markupRange);
+        format(editor, markupText);
+        // delete start to end selection
+        Transforms.delete(editor, {
+            at: {
+                anchor: startMarkupPointBefore,
+                focus: selection.anchor
+            }
+        });
+    }
+    else {
+        // add mark to the text between the markups
+        Transforms.select(editor, markupRange);
+        editor.addMark(type, true);
+        Transforms.collapse(editor, { edge: 'end' });
+        editor.removeMark(type, false);
+        // delete start markup
+        Transforms.delete(editor, {
+            at: {
+                anchor: startMarkupPointBefore,
+                focus: startMarkupPointAfter
+            }
+        });
+    }
+    return true;
+};
+
+const ListEditor = {
+    isList(editor, element, type) {
+        return Editor.isBlock(editor, element) && element.type === type;
+    },
+    toggleList(editor, type, startIndex) {
+        if (!editor.selection) {
+            return;
+        }
+        if (!startIndex) {
+            startIndex = 1;
+        }
+        const types = [ElementKinds.bulletedList, ElementKinds.numberedList];
+        Editor.withoutNormalizing(editor, () => {
+            const [...listItems] = Editor.nodes(editor, {
+                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem,
+                mode: 'lowest'
+            });
+            const firstListItemPath = listItems.length && listItems[0][1];
+            const activeListPath = listItems.length && Path.parent(firstListItemPath);
+            const activeListNode = listItems.length && Node.get(editor, activeListPath);
+            // 同级且类型相同：unwrap
+            const isLowestActive = listItems.length &&
+                listItems.every(([, path]) => activeListNode.type === type && (Path.isSibling(firstListItemPath, path) || Path.equals(firstListItemPath, path)));
+            if (isLowestActive) {
+                const upListItem = Path.parent(activeListPath);
+                Transforms.unwrapNodes(editor, {
+                    at: editor.selection,
+                    match: node => node === activeListNode,
+                    split: true,
+                    mode: 'lowest'
+                });
+                if (upListItem && Node.get(editor, upListItem).type === ElementKinds.listItem) {
+                    Transforms.moveNodes(editor, {
+                        at: editor.selection,
+                        to: Path.next(upListItem),
+                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
+                    });
+                }
+                else {
+                    Transforms.unwrapNodes(editor, {
+                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
+                    });
+                }
+                return;
+            }
+            // 跨级、同级且类型不同
+            if (activeListNode && types.includes(activeListNode.type)) {
+                Transforms.setNodes(editor, { type }, { match: node => Element$1.isElement(node) && node.type !== type && types.includes(node.type) });
+                return;
+            }
+            // wrap
+            this.buildListItem(editor);
+            // Todo: types
+            Transforms.wrapNodes(editor, { type, children: [], start: startIndex }, {
+                at: editor.selection,
+                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
+            });
+        });
+    },
+    unwrapList(editor) {
+        Editor.withoutNormalizing(editor, () => {
+            unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true, mode: 'all' });
+            unwrapNodesByType(editor, [ElementKinds.listItem], { split: true, mode: 'all' });
+        });
+    },
+    wrapList(editor, type) {
+        Editor.withoutNormalizing(editor, () => {
+            const listItem = {
+                type: ElementKinds.listItem,
+                children: []
+            };
+            const list = {
+                type,
+                children: []
+            };
+            Transforms.wrapNodes(editor, list, { split: true });
+            Transforms.wrapNodes(editor, listItem, { split: true });
+        });
+    },
+    isActive(editor, type) {
+        const [match] = getNodesByType(editor, type);
+        return !!match;
+    },
+    getActiveList(editor) {
+        const [match] = getNodesByType(editor, LIST_BLOCK_TYPES);
+        return match;
+    },
+    buildListItem(editor) {
+        const nodes = Editor.nodes(editor, {
+            match: node => Editor.isBlock(editor, node),
+            mode: 'lowest'
+        });
+        for (const [node, path] of nodes) {
+            if (!Editor.isVoid(editor, node) && Element$1.isElement(node) && node.type !== ElementKinds.paragraph) {
+                Transforms.setNodes(editor, { type: ElementKinds.paragraph, checked: undefined }, // todo remove checked
+                { at: path });
+            }
+            else if (Element$1.isElement(node) && node.type === ElementKinds.paragraph) {
+                let { textIndent } = node;
+                if (textIndent) {
+                    Transforms.setNodes(editor, { textIndent: undefined, indent: undefined }, // remove indent
+                    { at: path });
+                }
+            }
+            if (Node.parent(editor, path).type !== ElementKinds.listItem) {
+                Transforms.wrapNodes(editor, { type: ElementKinds.listItem, children: [] }, {
+                    at: path,
+                    split: true
+                });
+            }
+        }
+    },
+    buildInsertDataChildren(node) {
+        const { children } = node;
+        const listItem = children[0];
+        if (isNodeTypeList(node) && Element$1.isElement(listItem) && listItem.children[0].type === ElementKinds.paragraph) {
+            return node;
+        }
+        return this.buildInsertDataChildren(listItem);
+    }
+};
+
+const TodoItemEditor = {
+    isActive(editor) {
+        const [match] = getNodesByType(editor, ElementKinds.checkItem);
+        return !!match;
+    },
+    insertTodoItem(editor) {
+        if (!editor.selection) {
+            return;
+        }
+        const isActive = this.isActive(editor);
+        const isNumberedList = ListEditor.isActive(editor, ElementKinds.numberedList);
+        const isBulletedList = ListEditor.isActive(editor, ElementKinds.bulletedList);
+        if (isActive) {
+            Transforms.setNodes(editor, {
+                type: ElementKinds.paragraph
+            });
+        }
+        else {
+            if (isNumberedList || isBulletedList) {
+                ListEditor.unwrapList(editor);
+            }
+            Transforms.setNodes(editor, {
+                type: ElementKinds.checkItem
+            });
+        }
+    }
+};
+
+const BlockquoteEditor = {
+    toggleBlockquote(editor) {
+        if (!isParagraph(editor)) {
+            Transforms.insertNodes(editor, {
+                type: ElementKinds.paragraph,
+                mode: 'text',
+                children: [
+                    {
+                        text: ''
+                    }
+                ]
+            });
+        }
+        const isActive = isBlockActive(editor, ElementKinds.blockquote);
+        if (!isActive) {
+            Transforms.wrapNodes(editor, { type: ElementKinds.blockquote, children: [] }, {
+                mode: 'lowest'
+            });
+        }
+        else {
+            Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.blockquote });
+        }
+    }
+};
+
+const InlineCodeEditor = {
+    toggleInlineCode(editor, text) {
+        const isActive = InlineCodeEditor.isInlineCodeActive(editor);
+        if (isActive) {
+            InlineCodeEditor.unwrapInlineCode(editor);
+            return;
+        }
+        if (Range.isCollapsed(editor.selection)) {
+            InlineCodeEditor.wrapInlineCode(editor, text);
+        }
+        else {
+            const fragment = Node.fragment(editor, editor.selection)[0];
+            const selectNode = Node.get(fragment, []);
+            const selectText = Node.string(selectNode);
+            InlineCodeEditor.wrapInlineCode(editor, selectText);
+        }
+    },
+    wrapInlineCode(editor, text = '') {
+        if (InlineCodeEditor.isInlineCodeActive(editor)) {
+            InlineCodeEditor.unwrapInlineCode(editor);
+        }
+        const { selection } = editor;
+        const isCollapsed = selection && Range.isCollapsed(selection);
+        const inlineCode = {
+            type: ElementKinds.inlineCode,
+            children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
+        };
+        if (isCollapsed) {
+            Transforms.insertNodes(editor, inlineCode);
+        }
+        else {
+            Transforms.wrapNodes(editor, inlineCode, { split: true });
+        }
+    },
+    unwrapInlineCode(editor) {
+        Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
+    },
+    isInlineCodeActive(editor, path) {
+        var _a;
+        const [inlineCode] = Editor.nodes(editor, {
+            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode
+        });
+        return !!inlineCode;
+    }
+};
+
+const HeadingEditor = {
+    setHeading(editor, heading) {
+        Editor.withoutNormalizing(editor, () => {
+            const types = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.listItem];
+            Transforms.unwrapNodes(editor, {
+                at: editor.selection,
+                match: n => Element$1.isElement(n) && types.includes(n.type),
+                mode: 'all',
+                split: true
+            });
+            Transforms.setNodes(editor, { type: heading });
+            const entry = anchorBlockEntry(editor);
+            const unMarks = {
+                [MarkTypes.fontSize]: null
+            };
+            if (entry) {
+                setMarks(editor, unMarks, entry[1]);
+                return;
+            }
+            setMarks(editor, unMarks, editor.selection);
+        });
+    },
+    isHeadingActive(editor, heading) {
+        const [match] = Editor.nodes(editor, {
+            match: n => Element$1.isElement(n) && n.type === heading,
+            universal: true
+        });
+        return !!match;
+    }
+};
+
+const defaultAutoFormatRules = [
+    {
+        type: ElementKinds.heading_1,
+        markup: '#',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_1);
+        }
+    },
+    {
+        type: ElementKinds.heading_2,
+        markup: '##',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_2);
+        }
+    },
+    {
+        type: ElementKinds.heading_3,
+        markup: '###',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_3);
+        }
+    },
+    {
+        type: ElementKinds.heading_4,
+        markup: '####',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_4);
+        }
+    },
+    {
+        type: ElementKinds.heading_5,
+        markup: '#####',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_5);
+        }
+    },
+    {
+        type: ElementKinds.heading_6,
+        markup: '######',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_6);
+        }
+    },
+    {
+        type: ElementKinds.blockquote,
+        markup: ['>'],
+        format: (editor) => {
+            BlockquoteEditor.toggleBlockquote(editor);
+        }
+    },
+    {
+        type: MarkTypes.bold,
+        between: ['**', '**'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: MarkTypes.bold,
+        between: ['__', '__'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: MarkTypes.italic,
+        between: ['*', '*'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: MarkTypes.italic,
+        between: ['_', '_'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: ElementKinds.inlineCode,
+        between: ['`', '`'],
+        mode: 'inline',
+        format: (editor, text) => {
+            InlineCodeEditor.toggleInlineCode(editor, text);
+            Transforms.select(editor, Editor.after(editor, editor.selection));
+        }
+    },
+    {
+        type: MarkTypes.strike,
+        between: ['~~', '~~'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: ElementKinds.code,
+        markup: '```',
+        insertTrigger: true
+    },
+    {
+        type: ElementKinds.listItem,
+        markup: [],
+        match: (editor) => {
+            return isParagraph(editor) ? ['*', '-', '+'] : [];
+        },
+        format: (editor) => {
+            ListEditor.toggleList(editor, ElementKinds.bulletedList);
+        }
+    },
+    {
+        type: ElementKinds.listItem,
+        key: ElementKinds.numberedList,
+        markup: [],
+        match: (editor, textFromBlockStart) => {
+            return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
+        },
+        format: (editor, markup) => {
+            let startIndex = 1;
+            if (markup) {
+                startIndex = markup[0].split('.')[0];
+                if (startIndex === 0) {
+                    startIndex = 1;
+                }
             }
-            return apply(Object.assign(Object.assign({}, operation), { properties: Object.assign(Object.assign({}, operation.properties), { [idKey]: id }) }));
-        }
-        if (operation.type === 'merge_node' && (!filterText || operation.properties.type)) {
-            editor.removedIDs.add(operation.properties[idKey]);
-        }
-        return apply(operation);
-    };
-    editor.getFragment = () => {
-        const fragment = _.cloneDeep(getFragment());
-        return deleteElementKey(fragment, idKey);
-    };
-    return editor;
-};
-
-const autoFormatBlock = (editor, type, at, { preFormat, format }, markups) => {
-    Transforms.delete(editor, { at });
-    if (preFormat) {
-        preFormat(editor);
-    }
-    if (!format) {
-        Transforms.setNodes(editor, { type }, { match: n => Editor.isBlock(editor, n) });
-    }
-    else {
-        format(editor, markups);
-    }
-};
-
-const autoFormatInline = (editor, { type, between, markup, ignoreTrim, format }) => {
-    const selection = editor.selection;
-    const startMarkup = between ? between[0] : markup;
-    const endMarkup = between ? between[1] : '';
-    let endMarkupPointBefore = selection.anchor;
-    if (endMarkup) {
-        endMarkupPointBefore = getPointBefore(editor, selection, {
-            matchString: endMarkup
-        });
-        if (!endMarkupPointBefore) {
-            return false;
+            ListEditor.toggleList(editor, ElementKinds.numberedList, startIndex);
         }
-    }
-    const startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
-        matchString: startMarkup,
-        skipInvalid: true,
-        afterMatch: true
-    });
-    if (!startMarkupPointAfter) {
-        return false;
-    }
-    // found
-    const markupRange = {
-        anchor: startMarkupPointAfter,
-        focus: endMarkupPointBefore
-    };
-    if (!ignoreTrim) {
-        const markupText = getText(editor, markupRange);
-        if (markupText.trim() !== markupText) {
-            return false;
+    },
+    {
+        type: ElementKinds.checkItem,
+        markup: [],
+        match: (editor) => {
+            return isParagraph(editor) ? ['[]'] : [];
+        },
+        format: (editor) => {
+            TodoItemEditor.insertTodoItem(editor);
         }
+    },
+    {
+        type: ElementKinds.hr,
+        markup: '---',
+        insertTrigger: true
     }
-    // delete end markup
-    if (endMarkup) {
-        endMarkupPointBefore = getPointBefore(editor, selection, {
-            matchString: endMarkup
-        });
-        Transforms.delete(editor, {
-            at: {
-                anchor: endMarkupPointBefore,
-                focus: selection.anchor
-            }
-        });
-    }
-    const startMarkupPointBefore = getPointBefore(editor, selection, {
-        matchString: startMarkup,
-        skipInvalid: true
-    });
-    if (format) {
-        const markupText = getText(editor, markupRange);
-        format(editor, markupText);
-        // delete start to end selection
-        Transforms.delete(editor, {
-            at: {
-                anchor: startMarkupPointBefore,
-                focus: selection.anchor
-            }
-        });
-    }
-    else {
-        // add mark to the text between the markups
-        Transforms.select(editor, markupRange);
-        editor.addMark(type, true);
-        Transforms.collapse(editor, { edge: 'end' });
-        editor.removeMark(type, false);
-        // delete start markup
-        Transforms.delete(editor, {
-            at: {
-                anchor: startMarkupPointBefore,
-                focus: startMarkupPointAfter
-            }
-        });
-    }
-    return true;
-};
+];
 
-const withAutoFormat = ({ rules }) => (editor) => {
+const withAutoFormat = () => (editor) => {
     const { insertText } = editor;
     editor.insertText = text => {
-        var _a;
+        var _a, _b;
+        let autoFormatRules = defaultAutoFormatRules;
+        if ((_a = editor.extraAutoFormatRules) === null || _a === void 0 ? void 0 : _a.length) {
+            const extraRules = mergAutoFormateRules(editor.extraAutoFormatRules);
+            autoFormatRules = Object.values(extraRules);
+        }
         if (!isCollapsed(editor.selection)) {
             return insertText(text);
         }
-        for (let _b of rules) {
-            const { query } = _b, rule = __rest(_b, ["query"]);
+        for (let _c of autoFormatRules) {
+            const { query } = _c, rule = __rest(_c, ["query"]);
             const { trigger = ' ', mode = 'block', type, markup, preFormat, format, match, between, ignoreTrim, insertTrigger, allowSameTypeAbove = false, triggerAtBlockStart = true } = rule;
             if (query && !query(editor, rule))
                 continue;
@@ -4397,7 +4364,7 @@ const withAutoFormat = ({ rules }) => (editor) => {
                     });
                     if (!markupRange)
                         continue;
-                    const blockAbovePath = (_a = getBlockAbove(editor)) === null || _a === void 0 ? void 0 : _a[1];
+                    const blockAbovePath = (_b = getBlockAbove(editor)) === null || _b === void 0 ? void 0 : _b[1];
                     if (!blockAbovePath)
                         continue;
                     // If the markup is not at the start, insert break before autoformatting.
@@ -4434,6 +4401,17 @@ const withAutoFormat = ({ rules }) => (editor) => {
     };
     return editor;
 };
+const mergAutoFormateRules = (extraAutoFormatRules) => {
+    const combinationData = [...defaultAutoFormatRules, ...extraAutoFormatRules];
+    const dataInfo = {};
+    combinationData.forEach(item => {
+        if (!dataInfo[item.type + item.key]) {
+            dataInfo[item.type + item.key] = Object.assign({}, item);
+        }
+        dataInfo[item.type + item.key] = Object.assign(Object.assign({}, dataInfo[item.type + item.key]), item);
+    });
+    return dataInfo;
+};
 
 const withTransforms = () => (editor) => {
     const e = editor;
@@ -6190,7 +6168,7 @@ class TheColorSelectComponent {
     }
 }
 TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -6404,7 +6382,7 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 thyIconName="caret-down"
             ></thy-icon>
         </a>
-    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -6680,7 +6658,7 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -6922,7 +6900,7 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <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)]=\"options.lineWrapping\"\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\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [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)]=\"options.lineWrapping\"\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\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -7146,7 +7124,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$2.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{
@@ -7172,14 +7150,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             }] } });
 
 class TheBaseLinkComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, thyPopover, overlay, viewContainerRef, thyClickDispatcher) {
+    constructor(elementRef, cdr, thyPopover, overlay, viewContainerRef) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.thyPopover = thyPopover;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.thyClickDispatcher = thyClickDispatcher;
         this.beforeContextChange = (value) => {
             if (this.thyPopoverEditRef && this.thyPopoverEditRef.componentInstance) {
                 let { originText } = this.thyPopoverEditRef.componentInstance;
@@ -7288,7 +7265,7 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         this.close(LinkCloseTypes.destroy);
     }
 }
-TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 TheBaseLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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.15", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
             type: Component,
@@ -7296,7 +7273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     selector: '[TheBaseLinkComponent]',
                     template: ''
                 }]
-        }], 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: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.ThyPopover }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { mousedownHandle: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -7309,27 +7286,16 @@ class TheLinkComponent extends TheBaseLinkComponent {
     }
 }
 TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
+        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[theLink]',
-                    template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
-                }]
-        }] });
-class TheReadonlyLinkComponent extends TheBaseLinkComponent {
-}
-TheReadonlyLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheReadonlyLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheReadonlyLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheReadonlyLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheReadonlyLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[theLink]',
-                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`,
+                    template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
+        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`,
                     host: {
                         '[attr.href]': 'element.url',
                         target: '_blank'
@@ -7380,7 +7346,7 @@ const withLink = (editor) => {
     };
     editor.renderElement = (element) => {
         if (element.type === ElementKinds.link) {
-            return AngularEditor.isReadonly(editor) ? TheReadonlyLinkComponent : TheLinkComponent;
+            return TheLinkComponent;
         }
         return renderElement(element);
     };
@@ -7492,7 +7458,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: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -7559,6 +7525,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             type: Injectable
         }] });
 
+var Position;
+(function (Position) {
+    Position["top"] = "top";
+    Position["right"] = "right";
+    Position["bottom"] = "bottom";
+    Position["left"] = "left";
+})(Position || (Position = {}));
 class HoveredCellInfo {
 }
 class TableCellEventDispatcher {
@@ -7723,11 +7696,15 @@ class TableStore {
     get dangerousCells() {
         return this.dangerousCells$.getValue();
     }
-    getTablePath(editor) {
+    getTableEntry(editor) {
         const { selection } = editor;
         const { anchor: { path } } = selection;
         const opts = new TableOptions$1();
-        return TablePosition.create(opts, editor, path).tableEntry[1];
+        return TablePosition.create(opts, editor, path).tableEntry;
+    }
+    getTablePath(editor) {
+        const tableEntry = this.getTableEntry(editor);
+        return tableEntry[1];
     }
     getTablePosition(editor) {
         const { selection } = editor;
@@ -7988,6 +7965,7 @@ class TableStore {
     }
     focusCell(editor, path) {
         const at = Editor.start(editor, path);
+        TheEditor.focus(this.editor);
         Transforms.select(editor, at);
     }
     dangerousCellsChange() {
@@ -8101,6 +8079,10 @@ class TableStore {
     mergeCell(editor) {
         mergeCell(editor, this.selectedCells);
     }
+    setTableOptions(editor, options) {
+        const tablePath = this.getTablePath(this.editor);
+        Transforms.setNodes(editor, { options }, { at: tablePath });
+    }
     removeDangerousColumns() {
         const { dangerousColumnsIndex, isSelectedTable } = this;
         if (isSelectedTable) {
@@ -8203,10 +8185,95 @@ function setCellMenuInvisibility(editor, menuList, selectedCells, isActiveSelect
     });
 }
 
+class TheTableOptionsComponent {
+    constructor(popoverRef) {
+        this.popoverRef = popoverRef;
+        this.tableDropdownList = [
+            // {
+            //     name: '表头行',
+            //     key: 'headerRow'
+            // },
+            // {
+            //     name: '表头列',
+            //     key: 'headerColumn'
+            // },
+            {
+                name: '序号列',
+                key: 'numberedColumn'
+            }
+        ];
+    }
+    get table() {
+        return this.tableStore && this.tableStore.getTableEntry(this.editor)[0];
+    }
+    handleDocumentMouseDown(event) {
+        if (this.popoverRef && !document.querySelector('.table-options-pannel').contains(event.target)) {
+            this.popoverRef.close();
+        }
+    }
+    ngOnInit() {
+        this.setColumnOptions();
+    }
+    setColumnOptions() {
+        this.tableDropdownList.forEach(item => {
+            item.isActive = (this.table.options && this.table.options[item.key]) || false;
+        });
+    }
+    setTableOptions(event, option) {
+        event.preventDefault();
+        event.stopPropagation();
+        const currentOption = this.tableDropdownList.find(item => item.key === option.key);
+        currentOption.isActive = !option.isActive;
+        const tableOption = {};
+        tableOption[option.key] = currentOption.isActive || null;
+        this.tableStore.setTableOptions(this.editor, Object.assign(Object.assign({}, this.table.options), tableOption));
+        this.popoverRef.close();
+    }
+}
+TheTableOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$6.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: `
+        <thy-action-menu class="table-drop-menu">
+            <ng-container *ngFor="let option of tableDropdownList">
+                <a thyActionMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
+                    <span thyActionMenuItemName>{{ option.name }}</span>
+                    <span thyActionMenuItemExtendIcon class="text-primary" *ngIf="option.isActive">
+                        <thy-icon thyIconName="check"></thy-icon>
+                    </span>
+                </a>
+            </ng-container>
+        </thy-action-menu>
+    `, isInline: true, components: [{ type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-table-options',
+                    template: `
+        <thy-action-menu class="table-drop-menu">
+            <ng-container *ngFor="let option of tableDropdownList">
+                <a thyActionMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
+                    <span thyActionMenuItemName>{{ option.name }}</span>
+                    <span thyActionMenuItemExtendIcon class="text-primary" *ngIf="option.isActive">
+                        <thy-icon thyIconName="check"></thy-icon>
+                    </span>
+                </a>
+            </ng-container>
+        </thy-action-menu>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$6.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], handleDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }] } });
+
 class TheTableToolbarComponent {
-    constructor(ngZone, colorSelectService, popoverRef) {
+    constructor(ngZone, colorSelectService, thyPopover, popoverRef) {
         this.ngZone = ngZone;
         this.colorSelectService = colorSelectService;
+        this.thyPopover = thyPopover;
         this.popoverRef = popoverRef;
         this.cellMenuList = [
             {
@@ -8311,16 +8378,32 @@ class TheTableToolbarComponent {
             });
         });
     }
+    openTableOptionMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.thyPopover.open(TheTableOptionsComponent, {
+            origin: event.currentTarget,
+            initialState: {
+                tableStore: this.tableStore,
+                editor: this.editor
+            },
+            insideClosable: false,
+            hasBackdrop: false,
+            placement: 'bottomLeft',
+            originActiveClass: 'table-options-active',
+            panelClass: 'table-options-pannel'
+        });
+    }
 }
-TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$3.ThyPopover }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"tableStore.isSelectedTable\"></nav-split-line>\n    <button\n        thyButton=\"default\"\n        *ngIf=\"tableStore.isSelectedTable\"\n        class=\"mr-2\"\n        thySize=\"md\"\n        class=\"table-options\"\n        (mousedown)=\"openTableOptionMenu($event)\"\n    >\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar',
                     templateUrl: 'table-toolbar.component.html'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$3.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$3.ThyPopover }, { type: i1$3.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
                 type: Input
             }], isActiveSelect: [{
                 type: Input
@@ -8376,7 +8459,7 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4.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: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.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]" }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -8632,7 +8715,7 @@ class TableService {
                 return tableElement.querySelector('.the-table-corner-controls');
             }
             if (selectedColumnsIndex.length > 0 && row === 0) {
-                return tableElement.querySelectorAll('.the-table-col-controls-inner')[col];
+                return tableElement.querySelectorAll('.the-table-col-controls')[col];
             }
             if (selectedRowsIndex.length > 0 && col === 0) {
                 return tableElement.querySelectorAll('.the-table-row-controls-button-wrap')[row];
@@ -8736,8 +8819,13 @@ class TheInsertMarkComponent {
             const tableWrapper = tableComponent.tableWrapper.nativeElement;
             const tableElement = tableComponent.theTableElement.nativeElement;
             let result = 0;
+            const rowControl = tableComponent.nativeElement.querySelector('.the-table-row-controls');
+            let rowControlWidth = 11;
+            if (rowControl) {
+                rowControlWidth = rowControl.getBoundingClientRect().width;
+            }
             if (this.type === 'row') {
-                result = tableWrapper.offsetWidth + 11;
+                result = tableWrapper.offsetWidth + rowControlWidth;
             }
             else {
                 result = tableElement.offsetHeight - 1;
@@ -8786,41 +8874,23 @@ class TheColumnResizeDirective {
     _listenForCellEdgeHoverEvents() {
         this.ngZone.runOutsideAngular(() => {
             const element = this.elementRef.nativeElement;
-            let previous = { x: 0, y: 0 };
             fromEvent(element, 'mousemove') // mouseover to mousemove 增加灵敏性
-                .pipe(throttleTime(300), // 防抖
-            map(event => {
+                .pipe(map(event => {
                 if (!this.theTableComponent.isCollapsed) {
                     return null;
                 }
                 const cell = event.target.closest(SLA_TABLE_CELL_SELECTOR);
-                let hoveredInfo;
-                let position;
+                const positions = [Position.top, Position.right, Position.bottom, Position.left];
                 if (cell) {
-                    if (previous.x > 0) {
-                        const rectCell = cell.getBoundingClientRect();
-                        const deltaX = previous.x - event.clientX;
-                        const deltaY = previous.y - event.clientY;
-                        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX !== 0) {
-                            const centerCellX = rectCell.x + rectCell.width / 2;
-                            position = event.x > centerCellX ? 'right' : 'left';
-                            this.isXAxis = true;
-                        }
-                        if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY !== 0) {
-                            this.isXAxis = false;
-                            const centerCellY = rectCell.y + rectCell.height / 2;
-                            position = event.y > centerCellY ? 'top' : 'bottom';
-                        }
-                        hoveredInfo = {
-                            cell,
-                            position
-                        };
-                    }
-                    previous = {
-                        x: event.clientX,
-                        y: event.clientY
-                    };
-                    return position ? hoveredInfo : null;
+                    const rectCell = cell.getBoundingClientRect();
+                    const topOffset = event.clientY - rectCell.y;
+                    const rightOffset = rectCell.right - event.clientX;
+                    const bottomOffset = rectCell.bottom - event.clientY;
+                    const leftOffset = event.clientX - rectCell.x;
+                    const positionOffsets = [topOffset, rightOffset, bottomOffset, leftOffset];
+                    const minIndex = positionOffsets.indexOf(Math.min(...positionOffsets));
+                    this.position = positions[minIndex];
+                    return { cell, position: this.position };
                 }
                 return null;
             }), takeUntil(this.destroyed))
@@ -8834,12 +8904,22 @@ class TheColumnResizeDirective {
     }
     _listenStartDrag() {
         this.resizeNotifier.resizeStarted.pipe(takeUntil(this.destroyed)).subscribe(() => {
-            this.isXAxis ? this.theTableComponent.initializeColumns() : this.theTableComponent.initializeRows();
+            if (this.position === Position.left || this.position === Position.right) {
+                this.theTableComponent.initializeColumns();
+            }
+            else {
+                this.theTableComponent.initializeRows();
+            }
         });
     }
     _listenEndDrag() {
         this.resizeNotifier.resizeCompleted.pipe(takeUntil(this.destroyed)).subscribe(() => {
-            this.isXAxis ? this.theTableComponent.transformColumnsWidth() : this.theTableComponent.transformRowHeight();
+            if (this.position === Position.left || this.position === Position.right) {
+                this.theTableComponent.transformColumnsWidth();
+            }
+            else {
+                this.theTableComponent.transformRowHeight();
+            }
         });
     }
     ngOnDestroy() {
@@ -8960,7 +9040,8 @@ class TheTableComponent extends TheBaseElementComponent {
         });
     }
     useRowControls() {
-        if (this.selection) {
+        var _a;
+        if (this.selection || ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn)) {
             this.rowControls = this.calculateRowControls();
             this.cdr.markForCheck();
         }
@@ -9149,8 +9230,13 @@ class TheTableComponent extends TheBaseElementComponent {
         setNode(this.editor, { columns }, this.element);
     }
     onRowMouseDown(event, index) {
+        if (this.readonly)
+            return;
         event.stopPropagation();
-        event.preventDefault();
+        if (!this.isInTable) {
+            const path = TheEditor.findPath(this.editor, this.element);
+            Transforms.select(this.editor, path);
+        }
         this.tableStore.selectRow(this.editor, index);
         this.tableService.openToolbar(event.target, true);
     }
@@ -9229,7 +9315,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: TheTableToken,
             useExisting: TheTableComponent
         }
-    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-numbered-column-container': element?.options?.numberedColumn,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                active: isSelectedAllCell,\n                dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n            }\"\n        >\n            <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n            <div class=\"the-table-corner-controls-insert-row-marker\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                    </ng-container>\n                    <ng-container *ngIf=\"element?.options?.numberedColumn\">\n                        <div\n                            [contentEditable]=\"false\"\n                            contenteditable=\"false\"\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            class=\"the-table-numbered-controls-button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                        >\n                            <p class=\"row-number d-flex align-items-center\">{{ i + 1 }}</p>\n                        </div>\n                    </ng-container>\n                    <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark *ngIf=\"isInTable\" type=\"column\" [at]=\"i + 1\" [tableStore]=\"tableStore\">\n                        </the-table-insert-mark>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -9523,6 +9609,9 @@ class ResizeRef {
     setDirection(direction) {
         this.direction = direction;
     }
+    setPosition(position) {
+        this.position = position;
+    }
 }
 
 class TheColumnResizeOverlayHandleComponent {
@@ -9546,7 +9635,7 @@ class TheColumnResizeOverlayHandleComponent {
             fromEvent(this.elementRef.nativeElement, 'mouseenter')
                 .pipe(takeUntilDestroyed, mapTo(this.resizeRef.origin.nativeElement))
                 .subscribe(cell => {
-                this.eventDispatcher.tableCellHovered.next({ cell });
+                this.eventDispatcher.tableCellHovered.next({ cell, position: this.resizeRef.position });
                 this.resizeRef.updateSizeAndOffset();
             });
             fromEvent(this.elementRef.nativeElement, 'mousedown')
@@ -9600,7 +9689,7 @@ class TheColumnResizeOverlayHandleComponent {
         });
     }
     updateResizeActive(active) {
-        this.eventDispatcher.overlayHandleActiveForCell.next(active ? { cell: this.resizeRef.origin.nativeElement } : null);
+        this.eventDispatcher.overlayHandleActiveForCell.next(active ? { cell: this.resizeRef.origin.nativeElement, position: this.resizeRef.position } : null);
     }
     _isXAxis() {
         return this.resizeRef.direction === 'X';
@@ -9682,13 +9771,13 @@ const OVERLAY_INIT_SIZE = 16;
 const POSITION_MAP = {
     top: {
         originX: 'start',
-        originY: 'bottom',
+        originY: 'top',
         overlayX: 'start',
         overlayY: 'center'
     },
     bottom: {
         originX: 'start',
-        originY: 'top',
+        originY: 'bottom',
         overlayX: 'start',
         overlayY: 'center'
     },
@@ -9734,7 +9823,9 @@ class TheTdComponent extends TheBaseElementComponent {
         return this.tableComponent.resizeNotifier;
     }
     get theTableWrapperWidth() {
-        return this.tableComponent.theTableWrapperWidth;
+        const tableContainer = this.tableComponent.nativeElement.firstChild;
+        const paddingLeft = coercePixelsFromCssValue(window.getComputedStyle(tableContainer)['paddingLeft']);
+        return this.tableComponent.theTableWrapperWidth - paddingLeft;
     }
     get tableElement() {
         return this.tableComponent.theTableElement.nativeElement;
@@ -9750,7 +9841,14 @@ class TheTdComponent extends TheBaseElementComponent {
         return this.tableComponent.tableWrapper.nativeElement.scrollLeft;
     }
     get isXAxisHover() {
-        return ['left', 'right'].includes(this.hoverdDirection);
+        return [Position.left, Position.right].includes(this.hoverdDirection);
+    }
+    get rowResizeClass() {
+        var _a;
+        return [
+            'the-row-resize-handle-panel',
+            this.tablePosition.table && ((_a = this.tablePosition.table.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) ? 'the-numbered-resize-handle-panel' : ''
+        ];
     }
     get cellInnerNativeElement() {
         return this.cellInner.nativeElement;
@@ -9960,20 +10058,27 @@ class TheTdComponent extends TheBaseElementComponent {
         const element = this.elementRef.nativeElement;
         this.eventDispatcher
             .resizeOverlayVisibleForTableCell(element)
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil(this.destroy$), map(value => {
+            // 禁止第一列左侧
+            if (value && value.position === Position.left && this.tablePosition.getColumnIndex() === 0) {
+                return null;
+            }
+            // 禁止第一行顶部
+            if (value && value.position === Position.top && this.tablePosition.getRowIndex() === 0) {
+                return null;
+            }
+            return value;
+        }))
             .subscribe(hoveredCellInfo => {
             if (hoveredCellInfo && hoveredCellInfo.position) {
                 this.hoverdDirection = hoveredCellInfo.position;
             }
-            // first column should not have left resize handle
-            if (this.isXAxisHover && this.hoverdDirection === 'left' && this.tablePosition.getColumnIndex() === 0) {
-                return;
-            }
-            if (!this.isXAxisHover && this.hoverdDirection === 'bottom' && this.tablePosition.getRowIndex() === 0) {
-                return;
+            else {
+                this.hoverdDirection = null;
             }
             if (hoveredCellInfo) {
-                if (!this.overlayRef) {
+                this.hoverdDirection = hoveredCellInfo.position;
+                if (!this.overlayRef || !this.overlayRef.hasAttached()) {
                     this.overlayRef = this._createOverlayForHandle();
                     this._showHandleOverlay();
                 }
@@ -9984,7 +10089,6 @@ class TheTdComponent extends TheBaseElementComponent {
             }
             else if (this.overlayRef) {
                 this.overlayRef.detach();
-                this.overlayRef = null;
             }
         });
     }
@@ -9995,21 +10099,23 @@ class TheTdComponent extends TheBaseElementComponent {
             .subscribe(({ deltaSize, previousSize, completeImmediately }) => {
             const { top, left, height, width } = this.elementRef.nativeElement.getBoundingClientRect();
             const { clientY, clientX } = event;
-            let isApplySize = false;
+            let isPreventApplySize = false;
+            // 向下，或者向右移动(deltaSize > 0)，鼠标位置不在当前单元格拖拽线上，阻止应用拖拽尺寸
             if (this.isXAxisHover) {
-                const cellWidth = this.hoverdDirection === 'left' ? 0 : width;
-                isApplySize = deltaSize > 0 && left + cellWidth - clientX <= 0;
+                const cellWidth = this.hoverdDirection === Position.left ? 0 : width;
+                isPreventApplySize = deltaSize > 0 && left + cellWidth - clientX > 0;
             }
             else {
-                const cellHeight = this.hoverdDirection === 'bottom' ? 0 : height;
-                isApplySize = deltaSize > 0 && top + cellHeight - clientY <= 0;
+                const cellHeight = this.hoverdDirection === Position.top ? 0 : height;
+                isPreventApplySize = deltaSize > 0 && top + cellHeight - clientY > 0;
             }
-            if (isApplySize || deltaSize < 0) {
-                this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
-                this.applySize(deltaSize, previousSize);
-                if (completeImmediately) {
-                    this._completeResizeOperation();
-                }
+            if (isPreventApplySize) {
+                return;
+            }
+            this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
+            this.applySize(deltaSize, previousSize);
+            if (completeImmediately) {
+                this._completeResizeOperation();
             }
         });
         merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)
@@ -10034,7 +10140,6 @@ class TheTdComponent extends TheBaseElementComponent {
         this.resizeRef = new ResizeRef(this.elementRef, this.overlayRef, this.tableOptions.minWidthPx, this.tableOptions.maxWidthPx, this.tableOptions.minHeightPx, this.tableOptions.maxHeightPx, () => {
             this.updateOverlayHandleSizeAndOffset();
         });
-        this.resizeRef.setDirection(this.isXAxisHover ? 'X' : 'Y');
         customTokens.set(ResizeRef, this.resizeRef);
         customTokens.set(TableCellEventDispatcher, this.eventDispatcher);
         customTokens.set(ColumnResizeNotifierSource, this.resizeNotifier);
@@ -10047,9 +10152,11 @@ class TheTdComponent extends TheBaseElementComponent {
     }
     updateOverlayHandleSizeAndOffset() {
         var _a, _b;
-        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.removePanelClass(['the-column-resize-handle-panel', 'the-row-resize-handle-panel']);
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.removePanelClass(['the-column-resize-handle-panel', ...this.rowResizeClass]);
         this.isXAxisHover ? this.updateOverlayHandleColumnSize() : this.updateOverlayHandleRowSize();
         (_b = this.overlayRef) === null || _b === void 0 ? void 0 : _b.updatePositionStrategy(this.createPositionStrategy());
+        this.resizeRef.setDirection(this.isXAxisHover ? 'X' : 'Y');
+        this.resizeRef.setPosition(this.hoverdDirection);
     }
     updateOverlayHandleColumnSize() {
         let height = 0;
@@ -10064,8 +10171,14 @@ class TheTdComponent extends TheBaseElementComponent {
         this.overlayRef.updateSize({ height, width: OVERLAY_INIT_SIZE });
     }
     updateOverlayHandleRowSize() {
-        const width = this.tableComponent.tableWrapper.nativeElement.offsetWidth + 11;
-        this.overlayRef.addPanelClass('the-row-resize-handle-panel');
+        const tableElement = this.tableComponent.nativeElement;
+        const rowControl = tableElement.querySelector('.the-table-row-controls');
+        let rowControlWidth = 11;
+        if (rowControl) {
+            rowControlWidth = rowControl.getBoundingClientRect().width;
+        }
+        const width = this.tableComponent.tableWrapper.nativeElement.offsetWidth + rowControlWidth;
+        this.overlayRef.addPanelClass(this.rowResizeClass);
         this.overlayRef.updateSize({ width, height: OVERLAY_INIT_SIZE });
     }
     applySize(deltaSize, previousSize) {
@@ -10091,7 +10204,7 @@ class TheTdComponent extends TheBaseElementComponent {
             }
             : {
                 height: OVERLAY_INIT_SIZE + 'px',
-                panelClass: 'the-row-resize-handle-panel'
+                panelClass: this.rowResizeClass
             };
         return this.overlay.create(Object.assign({ 
             // Always position the overlay based on left-indexed coordinates.
@@ -10223,15 +10336,13 @@ class TheTdComponent extends TheBaseElementComponent {
         this.resizingStore.storeTableHeight(rows);
         this.resizingStore.initDirection(deltaY, this.isXAxisHover);
         let rowIndex = this.elementRef.nativeElement.parentElement.rowIndex - 1; // subtract thead's tr
-        if (this.hoverdDirection === 'bottom') {
+        if (this.hoverdDirection === Position.top) {
             rowIndex = rowIndex - 1;
         }
-        else {
-            const cellRowpsan = this.elementRef.nativeElement.rowSpan;
-            rowIndex = rowIndex + cellRowpsan - 1;
-        }
+        const rowSpan = this.elementRef.nativeElement.rowSpan;
+        const bottomRowIndex = rowIndex + (rowSpan - 1) + 1;
         if (deltaY > 0) {
-            this.applyBottomRows(rows, deltaY, rowIndex + 1);
+            this.applyBottomRows(rows, deltaY, bottomRowIndex);
             if (this.resizingStore.isRestoring(deltaY, this.isXAxisHover)) {
                 deltaY = this.resizingStore.restoreTopRows(deltaY);
             }
@@ -10874,7 +10985,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -11109,7 +11220,7 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </ng-template>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
-    `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, isInline: true, components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -11202,7 +11313,7 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
 }
 TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: 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$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [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$2.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -11440,16 +11551,16 @@ class TheInlineCodeComponent extends TheBaseElementComponent {
     }
 }
 TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
+        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theInlineCode]',
-                    template: `<span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
+                    template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
+        <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`
                 }]
         }] });
 
@@ -11566,7 +11677,7 @@ class TheIndentToolbarComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheIndentToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheIndentToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheIndentToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheIndentToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheIndentToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -11797,7 +11908,7 @@ const internalPlugins = [
     }),
     withBlockquote,
     withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator }),
-    withAutoFormat({ rules: autoFormatRules }),
+    withAutoFormat(),
     withTransforms(),
     withTrailingNode({ type: ElementKinds.paragraph, level: 0 }),
     withMoveSelection,
@@ -12171,7 +12282,7 @@ class TheToolbarComponent {
     }
 }
 TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -12393,7 +12504,7 @@ class TheQuickInsertComponent {
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i3.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
             args: [{
@@ -12662,11 +12773,12 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         super.ngOnDestroy();
     }
     initialize() {
-        var _a, _b;
+        var _a, _b, _c;
         this.editor = withTheEditor(this.thePlugins, withHistory(withAngular(createEditor(), CLIPBOARD_FORMAT_KEY)));
         this.generateDecorate();
         this.editor.disabled = (_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled;
         this.editor.extraElementOptions = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.extraElementOptions;
+        this.editor.extraAutoFormatRules = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.extraAutoFormatRules;
         setEditorUUID(this.editor, idCreator());
         this.theContextService.initialize({
             theOptions: this.theOptions,
@@ -12876,7 +12988,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => TheEditorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -13038,7 +13150,7 @@ class TheToolbarGroupComponent {
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -13101,7 +13213,8 @@ const COMPONENTS = [
     TheTableToolbarItemComponent,
     TheConversionHintComponent,
     TheVerticalToolbarItemComponent,
-    TheIndentToolbarComponent
+    TheIndentToolbarComponent,
+    TheTableOptionsComponent
 ];
 const PLUGIN_COMPONENTS = [
     TheImageComponent,
@@ -13114,7 +13227,6 @@ const PLUGIN_COMPONENTS = [
     TheNumberedListComponent,
     TheCodeComponent,
     TheLinkComponent,
-    TheReadonlyLinkComponent,
     TheLinkEditComponent,
     TheLinkHoverComponent,
     TheTableToolbarComponent,
@@ -13145,7 +13257,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
         TheVerticalToolbarItemComponent,
-        TheIndentToolbarComponent, TheImageComponent,
+        TheIndentToolbarComponent,
+        TheTableOptionsComponent, TheImageComponent,
         TheTemplateComponent,
         TheHrComponent,
         TheBlockquoteComponent,
@@ -13155,7 +13268,6 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheNumberedListComponent,
         TheCodeComponent,
         TheLinkComponent,
-        TheReadonlyLinkComponent,
         TheLinkEditComponent,
         TheLinkHoverComponent,
         TheTableToolbarComponent,
@@ -13211,5 +13323,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, 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, coercePixelsFromCssValue, createEmptyParagraph, dataDeserialize, dataSerializing, findNodeEntryByPoint, findRelativeElementByPoint, getColsTotalWidth, getElementClassByPrefix, getElementHeight, getElementWidth, getRowsTotalHeight, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, mergeElementOptions, plainToTheia, toolbarCompose, useElementStyle, 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, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, 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, coercePixelsFromCssValue, createEmptyParagraph, dataDeserialize, dataSerializing, getColsTotalWidth, getElementClassByPrefix, getElementHeight, getElementWidth, getRowsTotalHeight, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, mergeElementOptions, plainToTheia, toolbarCompose, useElementStyle, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map