@worktile/theia 2.3.3 → 2.4.2

package/bundles/worktile-theia.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('slate-angular'), require('ngx-tethys/core'), require('is-hotkey'), require('slate'), require('slate-history'), require('lodash'), require('marked'), require('@atinc/selene'), require('ngx-tethys/popover'), require('@angular/cdk/overlay'), require('ngx-tethys/alert'), require('rxjs/operators'), require('ngx-tethys/uploader'), require('rxjs'), require('@angular/platform-browser'), require('ngx-tethys/progress'), require('ngx-tethys/icon'), require('ngx-tethys/nav'), require('ngx-tethys/tooltip'), require('ngx-tethys/input'), require('ng-codemirror'), require('ngx-tethys/notify'), require('ngx-tethys/action-menu'), require('ngx-tethys/switch'), require('ngx-tethys/resizable'), require('is-url'), require('ngx-tethys/button'), require('ngx-tethys/form'), require('ngx-tethys/shared'), require('ngx-tethys'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('ngx-tethys/list'), require('ngx-tethys/autocomplete'), require('ngx-tethys/avatar'), require('ngx-tethys/select')) :
-    typeof define === 'function' && define.amd ? define('@worktile/theia', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'slate-angular', 'ngx-tethys/core', 'is-hotkey', 'slate', 'slate-history', 'lodash', 'marked', '@atinc/selene', 'ngx-tethys/popover', '@angular/cdk/overlay', 'ngx-tethys/alert', 'rxjs/operators', 'ngx-tethys/uploader', 'rxjs', '@angular/platform-browser', 'ngx-tethys/progress', 'ngx-tethys/icon', 'ngx-tethys/nav', 'ngx-tethys/tooltip', 'ngx-tethys/input', 'ng-codemirror', 'ngx-tethys/notify', 'ngx-tethys/action-menu', 'ngx-tethys/switch', 'ngx-tethys/resizable', 'is-url', 'ngx-tethys/button', 'ngx-tethys/form', 'ngx-tethys/shared', 'ngx-tethys', '@angular/cdk/coercion', '@angular/cdk/portal', 'ngx-tethys/list', 'ngx-tethys/autocomplete', 'ngx-tethys/avatar', 'ngx-tethys/select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.theia = {}), global.ng.core, global.ng.common, global.ng.forms, global.i1, global.core, global.isHotkey, global.slate, global.slateHistory, global._lodash, global.marked, global.selene, global.i1$2, global.ng.cdk.overlay, global.i1$1, global.rxjs.operators, global.uploader, global.rxjs, global.ng.platformBrowser, global.i6, global.i4, global.i3, global.i5, global.i5$1, global.i8, global.i1$4, global.i5$2, global.i6$1, global.i9, global.isUrl, global.i1$5, global.i2$1, global.i5$3, global.i1$6, global.ng.cdk.coercion, global.ng.cdk.portal, global.i2$2, global.autocomplete, global.avatar, global.select));
-})(this, (function (exports, i0, i10, i4$1, i1, core, isHotkey, slate, slateHistory, _lodash, marked, selene, i1$2, i2, i1$1, operators, uploader, rxjs, i1$3, i6, i4, i3, i5, i5$1, i8, i1$4, i5$2, i6$1, i9, isUrl, i1$5, i2$1, i5$3, i1$6, coercion, portal, i2$2, autocomplete, avatar, select) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('slate-angular'), require('ngx-tethys/core'), require('is-hotkey'), require('slate'), require('slate-history'), require('marked'), require('@atinc/selene'), require('ngx-tethys/popover'), require('lodash'), require('@angular/cdk/overlay'), require('ngx-tethys/alert'), require('rxjs/operators'), require('ngx-tethys/uploader'), require('rxjs'), require('@angular/platform-browser'), require('ngx-tethys/progress'), require('ngx-tethys/icon'), require('ngx-tethys/nav'), require('ngx-tethys/tooltip'), require('ngx-tethys/input'), require('ng-codemirror'), require('ngx-tethys/notify'), require('ngx-tethys/action-menu'), require('ngx-tethys/switch'), require('ngx-tethys/resizable'), require('is-url'), require('ngx-tethys/button'), require('ngx-tethys/form'), require('ngx-tethys/shared'), require('ngx-tethys'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('ngx-tethys/list'), require('ngx-tethys/autocomplete'), require('ngx-tethys/avatar'), require('ngx-tethys/select')) :
+    typeof define === 'function' && define.amd ? define('@worktile/theia', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'slate-angular', 'ngx-tethys/core', 'is-hotkey', 'slate', 'slate-history', 'marked', '@atinc/selene', 'ngx-tethys/popover', 'lodash', '@angular/cdk/overlay', 'ngx-tethys/alert', 'rxjs/operators', 'ngx-tethys/uploader', 'rxjs', '@angular/platform-browser', 'ngx-tethys/progress', 'ngx-tethys/icon', 'ngx-tethys/nav', 'ngx-tethys/tooltip', 'ngx-tethys/input', 'ng-codemirror', 'ngx-tethys/notify', 'ngx-tethys/action-menu', 'ngx-tethys/switch', 'ngx-tethys/resizable', 'is-url', 'ngx-tethys/button', 'ngx-tethys/form', 'ngx-tethys/shared', 'ngx-tethys', '@angular/cdk/coercion', '@angular/cdk/portal', 'ngx-tethys/list', 'ngx-tethys/autocomplete', 'ngx-tethys/avatar', 'ngx-tethys/select'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.theia = {}), global.ng.core, global.ng.common, global.ng.forms, global.i1, global.core, global.isHotkey, global.slate, global.slateHistory, global.marked, global.selene, global.i1$2, global._lodash, global.ng.cdk.overlay, global.i1$1, global.rxjs.operators, global.uploader, global.rxjs, global.ng.platformBrowser, global.i6, global.i3, global.i3$1, global.i5, global.i5$1, global.i8, global.i1$4, global.i2$1, global.i6$1, global.i9, global.isUrl, global.i1$5, global.i2$2, global.i5$2, global.i1$6, global.ng.cdk.coercion, global.ng.cdk.portal, global.i2$3, global.autocomplete, global.avatar, global.select));
+})(this, (function (exports, i0, i10, i4, i1, core, isHotkey, slate, slateHistory, marked, selene, i1$2, _lodash, i2, i1$1, operators, uploader, rxjs, i1$3, i6, i3, i3$1, i5, i5$1, i8, i1$4, i2$1, i6$1, i9, isUrl, i1$5, i2$2, i5$2, i1$6, coercion, portal, i2$3, autocomplete, avatar, select) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,31 +26,31 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
-    var _lodash__namespace = /*#__PURE__*/_interopNamespace(_lodash);
     var marked__default = /*#__PURE__*/_interopDefaultLegacy(marked);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$2);
+    var _lodash__namespace = /*#__PURE__*/_interopNamespace(_lodash);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
-    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var isUrl__default = /*#__PURE__*/_interopDefaultLegacy(isUrl);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i5__namespace$3 = /*#__PURE__*/_interopNamespace(i5$3);
-    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
+    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
+    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -853,6 +853,61 @@
         return key;
     }
 
+    var UNDOING = new WeakMap();
+    var REDOING = new WeakMap();
+    var withTheHistory = function (editor) {
+        var undo = editor.undo, redo = editor.redo;
+        editor.undo = function () {
+            UNDOING.set(editor, true);
+            undo();
+            UNDOING.set(editor, false);
+        };
+        editor.redo = function () {
+            REDOING.set(editor, true);
+            redo();
+            REDOING.set(editor, false);
+        };
+        return editor;
+    };
+    var TheHistoryEditor = {
+        isUndoing: function (editor) {
+            return UNDOING.get(editor);
+        },
+        isRedoing: function (editor) {
+            return REDOING.get(editor);
+        }
+    };
+
+    var setMarks = function (editor, marks, at) {
+        slate.Transforms.setNodes(editor, marks, {
+            at: at,
+            match: slate.Text.isText,
+            split: true
+        });
+    };
+
+    var clearMarks = function (editor) {
+        var selection = editor.selection;
+        if (!selection) {
+            return;
+        }
+        if (slate.Range.isCollapsed(selection)) {
+            var marks = slate.Editor.marks(editor);
+            for (var key in marks) {
+                slate.Editor.removeMark(editor, key);
+            }
+        }
+        else {
+            var unsetMarks_1 = {};
+            MarkProps.forEach(function (key) {
+                unsetMarks_1[key] = null;
+            });
+            setMarks(editor, unsetMarks_1);
+        }
+    };
+
+    var insertElement = function (editor, element) { return editor.insertElement(element); };
+
     var isAncestor = function (node) { return slate.Element.isElement(node) || slate.Editor.isEditor(node); };
 
     var getLastChild$1 = function (node, level) {
@@ -1720,36 +1775,6 @@
         someNode: someNode
     });
 
-    var setMarks = function (editor, marks, at) {
-        slate.Transforms.setNodes(editor, marks, {
-            at: at,
-            match: slate.Text.isText,
-            split: true
-        });
-    };
-
-    var clearMarks = function (editor) {
-        var selection = editor.selection;
-        if (!selection) {
-            return;
-        }
-        if (slate.Range.isCollapsed(selection)) {
-            var marks = slate.Editor.marks(editor);
-            for (var key in marks) {
-                slate.Editor.removeMark(editor, key);
-            }
-        }
-        else {
-            var unsetMarks_1 = {};
-            MarkProps.forEach(function (key) {
-                unsetMarks_1[key] = null;
-            });
-            setMarks(editor, unsetMarks_1);
-        }
-    };
-
-    var insertElement = function (editor, element) { return editor.insertElement(element); };
-
     var insertElementNext = function (editor, node) {
         if (slate.Range.isExpanded(editor.selection)) {
             slate.Editor.deleteFragment(editor);
@@ -1992,614 +2017,177 @@
         handleContinualInsertBreak: handleContinualInsertBreak
     });
 
-    var isNodeTypeList = function (n) {
-        return [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList].includes(n.type);
-    };
-
-    var ListEditor = {
-        isList: function (editor, element, type) {
-            return slate.Editor.isBlock(editor, element) && element.type === type;
-        },
-        toggleList: function (editor, type, startIndex) {
-            var _this = this;
-            if (!editor.selection) {
-                return;
+    var TheConversionHintComponent = /** @class */ (function () {
+        function TheConversionHintComponent() {
+            this.duration = 10000;
+            this.pauseOnHover = true;
+        }
+        TheConversionHintComponent.prototype.mouseenter = function () {
+            if (this.pauseOnHover) {
+                this.clearCloseTimer();
             }
-            if (!startIndex) {
-                startIndex = 1;
+        };
+        TheConversionHintComponent.prototype.mouseleave = function () {
+            if (this.pauseOnHover) {
+                this.creatCloseTimer();
             }
-            var types = [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList];
-            slate.Editor.withoutNormalizing(editor, function () {
-                var _a = __read(slate.Editor.nodes(editor, {
-                    match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; },
-                    mode: 'lowest'
-                })), listItems = _a.slice(0);
-                var firstListItemPath = listItems.length && listItems[0][1];
-                var activeListPath = listItems.length && slate.Path.parent(firstListItemPath);
-                var activeListNode = listItems.length && slate.Node.get(editor, activeListPath);
-                // 同级且类型相同：unwrap
-                var isLowestActive = listItems.length &&
-                    listItems.every(function (_a) {
-                        var _b = __read(_a, 2), path = _b[1];
-                        return activeListNode.type === type && (slate.Path.isSibling(firstListItemPath, path) || slate.Path.equals(firstListItemPath, path));
-                    });
-                if (isLowestActive) {
-                    var upListItem = slate.Path.parent(activeListPath);
-                    slate.Transforms.unwrapNodes(editor, {
-                        at: editor.selection,
-                        match: function (node) { return node === activeListNode; },
-                        split: true,
-                        mode: 'lowest'
-                    });
-                    if (upListItem && slate.Node.get(editor, upListItem).type === exports.ElementKinds.listItem) {
-                        slate.Transforms.moveNodes(editor, {
-                            at: editor.selection,
-                            to: slate.Path.next(upListItem),
-                            match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; }
-                        });
-                    }
-                    else {
-                        slate.Transforms.unwrapNodes(editor, {
-                            match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; }
-                        });
+        };
+        TheConversionHintComponent.prototype.ngOnInit = function () {
+            this.creatCloseTimer();
+        };
+        TheConversionHintComponent.prototype.ngOnDestroy = function () {
+            this.clearCloseTimer();
+        };
+        TheConversionHintComponent.prototype.creatCloseTimer = function () {
+            var _this = this;
+            this.closeTimer = setInterval(function () {
+                clearInterval(_this.closeTimer);
+                closeConversionHint(_this.editor);
+            }, this.duration);
+        };
+        TheConversionHintComponent.prototype.clearCloseTimer = function () {
+            clearInterval(this.closeTimer);
+        };
+        return TheConversionHintComponent;
+    }());
+    TheConversionHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheConversionHintComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheConversionHintComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1__namespace$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheConversionHintComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-conversion-hint',
+                        templateUrl: 'conversion-hint.component.html',
+                        host: {
+                            class: 'the-conversion-hint'
+                        },
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], propDecorators: { editor: [{
+                    type: i0.Input
+                }], conversion: [{
+                    type: i0.Input
+                }], mouseenter: [{
+                    type: i0.HostListener,
+                    args: ['mouseenter']
+                }], mouseleave: [{
+                    type: i0.HostListener,
+                    args: ['mouseleave']
+                }] } });
+
+    function plainToTheia(text) {
+        if (typeof text !== 'string') {
+            return text;
+        }
+        return text.split('\n').map(function (i) {
+            return {
+                type: exports.ElementKinds.paragraph,
+                children: [
+                    {
+                        text: i
                     }
-                    return;
-                }
-                // 跨级、同级且类型不同
-                if (activeListNode && types.includes(activeListNode.type)) {
-                    slate.Transforms.setNodes(editor, { type: type }, { match: function (node) { return slate.Element.isElement(node) && node.type !== type && types.includes(node.type); } });
-                    return;
-                }
-                // wrap
-                _this.buildListItem(editor);
-                // Todo: types
-                slate.Transforms.wrapNodes(editor, { type: type, children: [], start: startIndex }, {
-                    at: editor.selection,
-                    match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; }
-                });
-            });
-        },
-        unwrapList: function (editor) {
-            slate.Editor.withoutNormalizing(editor, function () {
-                unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], { split: true, mode: 'all' });
-                unwrapNodesByType(editor, [exports.ElementKinds.listItem], { split: true, mode: 'all' });
-            });
-        },
-        wrapList: function (editor, type) {
-            slate.Editor.withoutNormalizing(editor, function () {
-                var listItem = {
-                    type: exports.ElementKinds.listItem,
-                    children: []
-                };
-                var list = {
-                    type: type,
-                    children: []
-                };
-                slate.Transforms.wrapNodes(editor, list, { split: true });
-                slate.Transforms.wrapNodes(editor, listItem, { split: true });
-            });
-        },
-        isActive: function (editor, type) {
-            var _a = __read(getNodesByType(editor, type), 1), match = _a[0];
-            return !!match;
-        },
-        getActiveList: function (editor) {
-            var _a = __read(getNodesByType(editor, LIST_BLOCK_TYPES), 1), match = _a[0];
-            return match;
-        },
-        buildListItem: function (editor) {
-            var e_1, _a;
-            var nodes = slate.Editor.nodes(editor, {
-                match: function (node) { return slate.Editor.isBlock(editor, node); },
-                mode: 'lowest'
-            });
-            try {
-                for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
-                    var _b = __read(nodes_1_1.value, 2), node = _b[0], path = _b[1];
-                    if (!slate.Editor.isVoid(editor, node) && slate.Element.isElement(node) && node.type !== exports.ElementKinds.paragraph) {
-                        slate.Transforms.setNodes(editor, { type: exports.ElementKinds.paragraph, checked: undefined }, // todo remove checked
-                        { at: path });
-                    }
-                    else if (slate.Element.isElement(node) && node.type === exports.ElementKinds.paragraph) {
-                        var textIndent = node.textIndent;
-                        if (textIndent) {
-                            slate.Transforms.setNodes(editor, { textIndent: undefined, indent: undefined }, // remove indent
-                            { at: path });
-                        }
-                    }
-                    if (slate.Node.parent(editor, path).type !== exports.ElementKinds.listItem) {
-                        slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.listItem, children: [] }, {
-                            at: path,
-                            split: true
-                        });
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
-                }
-                finally { if (e_1) throw e_1.error; }
+                ]
+            };
+        });
+    }
+    function htmlToTheia(value) {
+        if (typeof value === 'string') {
+            var htmlDom = new DOMParser().parseFromString(value, 'text/html');
+            return selene.TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
+        }
+        return value;
+    }
+    function dataDeserialize(mode, value) {
+        if (!value) {
+            return [createEmptyParagraph()];
+        }
+        if (mode === exports.TheDataMode.html) {
+            if (typeof value !== 'string') {
+                return value;
             }
-        },
-        buildInsertDataChildren: function (node) {
-            var children = node.children;
-            var listItem = children[0];
-            if (isNodeTypeList(node) && slate.Element.isElement(listItem) && listItem.children[0].type === exports.ElementKinds.paragraph) {
-                return node;
+            if (/<[^>]+>/.test(value)) {
+                return htmlToTheia(value);
             }
-            return this.buildInsertDataChildren(listItem);
+            return plainToTheia(value);
+        }
+        return value || [createEmptyParagraph()];
+    }
+    function dataSerializing(mode, value) {
+        if (mode === exports.TheDataMode.html) {
+            return selene.TheiaConverter.convertToHtml(value);
         }
+        return value;
+    }
+
+    var getEditorUUID = function (editor) {
+        return THE_EDITOR_UUID.get(editor);
+    };
+    var setEditorUUID = function (editor, uuid) {
+        THE_EDITOR_UUID.set(editor, uuid);
     };
 
-    var TodoItemEditor = {
-        isActive: function (editor) {
-            var _a = __read(getNodesByType(editor, exports.ElementKinds.checkItem), 1), match = _a[0];
-            return !!match;
-        },
-        insertTodoItem: function (editor) {
-            if (!editor.selection) {
-                return;
-            }
-            var isActive = this.isActive(editor);
-            var isNumberedList = ListEditor.isActive(editor, exports.ElementKinds.numberedList);
-            var isBulletedList = ListEditor.isActive(editor, exports.ElementKinds.bulletedList);
-            if (isActive) {
-                slate.Transforms.setNodes(editor, {
-                    type: exports.ElementKinds.paragraph
-                });
-            }
-            else {
-                if (isNumberedList || isBulletedList) {
-                    ListEditor.unwrapList(editor);
-                }
-                slate.Transforms.setNodes(editor, {
-                    type: exports.ElementKinds.checkItem
-                });
-            }
-        }
+    var getToolbarClass = function (editor) {
+        var uuid = getEditorUUID(editor);
+        return "the-toolbar-" + uuid;
     };
 
-    var BlockquoteEditor = {
-        toggleBlockquote: function (editor) {
-            if (!isParagraph(editor)) {
-                slate.Transforms.insertNodes(editor, {
-                    type: exports.ElementKinds.paragraph,
-                    mode: 'text',
-                    children: [
-                        {
-                            text: ''
-                        }
-                    ]
-                });
-            }
-            var isActive = isBlockActive(editor, exports.ElementKinds.blockquote);
-            if (!isActive) {
-                slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.blockquote, children: [] }, {
-                    mode: 'lowest'
-                });
-            }
-            else {
-                slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.blockquote; } });
-            }
+    var IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+    var CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
+
+    /**
+     * whether the current node is a clean paragraph
+     * @param editor
+     * @param text
+     * @returns boolean
+     */
+    var isCleanEmptyParagraph = function (editor) {
+        var isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && slate.Range.isCollapsed(editor.selection);
+        if (!isCollapsedCursor) {
+            return false;
+        }
+        var block = slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+        var textIndent = 'textIndent';
+        var align = 'align';
+        var hasTextIndent = block[textIndent];
+        var alignValue = block[align];
+        var hasIndent = block[exports.ElementKinds.indent];
+        if (slate.Node.string(block) === '' &&
+            slate.Element.isElement(block) &&
+            block.type === exports.ElementKinds.paragraph &&
+            block.children.length === 1 &&
+            slate.Text.isText(block.children[0]) &&
+            !slate.Editor.isVoid(editor, block) &&
+            !hasIndent &&
+            !hasTextIndent &&
+            (!alignValue || alignValue === exports.Alignment.left)) {
+            return true;
         }
+        return false;
     };
 
-    var InlineCodeEditor = {
-        toggleInlineCode: function (editor, text) {
-            var isActive = InlineCodeEditor.isInlineCodeActive(editor);
-            if (isActive) {
-                InlineCodeEditor.unwrapInlineCode(editor);
-                return;
-            }
-            if (slate.Range.isCollapsed(editor.selection)) {
-                InlineCodeEditor.wrapInlineCode(editor, text);
-            }
-            else {
-                var fragment = slate.Node.fragment(editor, editor.selection)[0];
-                var selectNode = slate.Node.get(fragment, []);
-                var selectText = slate.Node.string(selectNode);
-                InlineCodeEditor.wrapInlineCode(editor, selectText);
-            }
-        },
-        wrapInlineCode: function (editor, text) {
-            if (text === void 0) { text = ''; }
-            if (InlineCodeEditor.isInlineCodeActive(editor)) {
-                InlineCodeEditor.unwrapInlineCode(editor);
-            }
-            var selection = editor.selection;
-            var isCollapsed = selection && slate.Range.isCollapsed(selection);
-            var inlineCode = {
-                type: exports.ElementKinds.inlineCode,
-                children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
-            };
-            if (isCollapsed) {
-                slate.Transforms.insertNodes(editor, inlineCode);
-            }
-            else {
-                slate.Transforms.wrapNodes(editor, inlineCode, { split: true });
+    var mergeElementOptions = function (elementOptions) {
+        elementOptions = elementOptions.filter(function (item) { return item.inValidChildrenTypes.length > 0; });
+        var combinationData = __spreadArray(__spreadArray([], __read(DefaultElementOptions)), __read(elementOptions));
+        var dataInfo = {};
+        combinationData.forEach(function (item) {
+            var type = item.type, inValidChildrenTypes = item.inValidChildrenTypes, isIndivisible = item.isIndivisible, isSecondaryContainer = item.isSecondaryContainer;
+            if (!dataInfo[type]) {
+                dataInfo[type] = {
+                    type: type,
+                    inValidChildrenTypes: inValidChildrenTypes,
+                    isIndivisible: isIndivisible,
+                    isSecondaryContainer: isSecondaryContainer
+                };
             }
-        },
-        unwrapInlineCode: function (editor) {
-            slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } });
-        },
-        isInlineCodeActive: function (editor, path) {
-            var _a;
-            var _b = __read(slate.Editor.nodes(editor, {
-                at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
-                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; }
-            }), 1), inlineCode = _b[0];
-            return !!inlineCode;
-        }
+            dataInfo[type].inValidChildrenTypes = Array.from(new Set(__spreadArray(__spreadArray([], __read(inValidChildrenTypes)), __read(dataInfo[type].inValidChildrenTypes))));
+        });
+        return dataInfo;
     };
 
-    var HeadingEditor = {
-        setHeading: function (editor, heading) {
-            slate.Editor.withoutNormalizing(editor, function () {
-                var _a;
-                var types = [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.listItem];
-                slate.Transforms.unwrapNodes(editor, {
-                    at: editor.selection,
-                    match: function (n) { return slate.Element.isElement(n) && types.includes(n.type); },
-                    mode: 'all',
-                    split: true
-                });
-                slate.Transforms.setNodes(editor, { type: heading });
-                var entry = anchorBlockEntry(editor);
-                var unMarks = (_a = {},
-                    _a[exports.MarkTypes.fontSize] = null,
-                    _a);
-                if (entry) {
-                    setMarks(editor, unMarks, entry[1]);
-                    return;
-                }
-                setMarks(editor, unMarks, editor.selection);
-            });
-        },
-        isHeadingActive: function (editor, heading) {
-            var _a = __read(slate.Editor.nodes(editor, {
-                match: function (n) { return slate.Element.isElement(n) && n.type === heading; },
-                universal: true
-            }), 1), match = _a[0];
-            return !!match;
-        }
-    };
-
-    var autoFormatRules = [
-        {
-            type: exports.ElementKinds.heading_1,
-            markup: '#',
-            format: function (editor) {
-                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_1);
-            }
-        },
-        {
-            type: exports.ElementKinds.heading_2,
-            markup: '##',
-            format: function (editor) {
-                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_2);
-            }
-        },
-        {
-            type: exports.ElementKinds.heading_3,
-            markup: '###',
-            format: function (editor) {
-                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_3);
-            }
-        },
-        {
-            type: exports.ElementKinds.heading_4,
-            markup: '####',
-            format: function (editor) {
-                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_4);
-            }
-        },
-        {
-            type: exports.ElementKinds.heading_5,
-            markup: '#####',
-            format: function (editor) {
-                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_5);
-            }
-        },
-        {
-            type: exports.ElementKinds.heading_6,
-            markup: '######',
-            format: function (editor) {
-                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_6);
-            }
-        },
-        {
-            type: exports.ElementKinds.blockquote,
-            markup: ['>'],
-            format: function (editor) {
-                BlockquoteEditor.toggleBlockquote(editor);
-            }
-        },
-        {
-            type: exports.MarkTypes.bold,
-            between: ['**', '**'],
-            mode: 'inline',
-            insertTrigger: true
-        },
-        {
-            type: exports.MarkTypes.bold,
-            between: ['__', '__'],
-            mode: 'inline',
-            insertTrigger: true
-        },
-        {
-            type: exports.MarkTypes.italic,
-            between: ['*', '*'],
-            mode: 'inline',
-            insertTrigger: true
-        },
-        {
-            type: exports.MarkTypes.italic,
-            between: ['_', '_'],
-            mode: 'inline',
-            insertTrigger: true
-        },
-        {
-            type: exports.ElementKinds.inlineCode,
-            between: ['`', '`'],
-            mode: 'inline',
-            format: function (editor, text) {
-                InlineCodeEditor.toggleInlineCode(editor, text);
-                slate.Transforms.select(editor, slate.Editor.after(editor, editor.selection));
-            }
-        },
-        {
-            type: exports.MarkTypes.strike,
-            between: ['~~', '~~'],
-            mode: 'inline',
-            insertTrigger: true
-        },
-        {
-            type: exports.ElementKinds.code,
-            markup: '```',
-            insertTrigger: true
-        },
-        {
-            type: exports.ElementKinds.listItem,
-            markup: [],
-            match: function (editor) {
-                return isParagraph(editor) ? ['*', '-', '+'] : [];
-            },
-            format: function (editor) {
-                ListEditor.toggleList(editor, exports.ElementKinds.bulletedList);
-            }
-        },
-        {
-            type: exports.ElementKinds.listItem,
-            markup: [],
-            match: function (editor, textFromBlockStart) {
-                return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
-            },
-            format: function (editor, markup) {
-                var startIndex = 1;
-                if (markup) {
-                    startIndex = markup[0].split('.')[0];
-                    if (startIndex === 0) {
-                        startIndex = 1;
-                    }
-                }
-                ListEditor.toggleList(editor, exports.ElementKinds.numberedList, startIndex);
-            }
-        },
-        {
-            type: exports.ElementKinds.checkItem,
-            markup: [],
-            match: function (editor) {
-                return isParagraph(editor) ? ['[]'] : [];
-            },
-            format: function (editor) {
-                TodoItemEditor.insertTodoItem(editor);
-            }
-        },
-        {
-            type: exports.ElementKinds.hr,
-            markup: '---',
-            insertTrigger: true
-        }
-    ];
-
-    var UNDOING = new WeakMap();
-    var REDOING = new WeakMap();
-    var withTheHistory = function (editor) {
-        var undo = editor.undo, redo = editor.redo;
-        editor.undo = function () {
-            UNDOING.set(editor, true);
-            undo();
-            UNDOING.set(editor, false);
-        };
-        editor.redo = function () {
-            REDOING.set(editor, true);
-            redo();
-            REDOING.set(editor, false);
-        };
-        return editor;
-    };
-    var TheHistoryEditor = {
-        isUndoing: function (editor) {
-            return UNDOING.get(editor);
-        },
-        isRedoing: function (editor) {
-            return REDOING.get(editor);
-        }
-    };
-
-    var TheConversionHintComponent = /** @class */ (function () {
-        function TheConversionHintComponent() {
-            this.duration = 10000;
-            this.pauseOnHover = true;
-        }
-        TheConversionHintComponent.prototype.mouseenter = function () {
-            if (this.pauseOnHover) {
-                this.clearCloseTimer();
-            }
-        };
-        TheConversionHintComponent.prototype.mouseleave = function () {
-            if (this.pauseOnHover) {
-                this.creatCloseTimer();
-            }
-        };
-        TheConversionHintComponent.prototype.ngOnInit = function () {
-            this.creatCloseTimer();
-        };
-        TheConversionHintComponent.prototype.ngOnDestroy = function () {
-            this.clearCloseTimer();
-        };
-        TheConversionHintComponent.prototype.creatCloseTimer = function () {
-            var _this = this;
-            this.closeTimer = setInterval(function () {
-                clearInterval(_this.closeTimer);
-                closeConversionHint(_this.editor);
-            }, this.duration);
-        };
-        TheConversionHintComponent.prototype.clearCloseTimer = function () {
-            clearInterval(this.closeTimer);
-        };
-        return TheConversionHintComponent;
-    }());
-    TheConversionHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheConversionHintComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheConversionHintComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1__namespace$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheConversionHintComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'the-conversion-hint',
-                        templateUrl: 'conversion-hint.component.html',
-                        host: {
-                            class: 'the-conversion-hint'
-                        },
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
-                    }]
-            }], propDecorators: { editor: [{
-                    type: i0.Input
-                }], conversion: [{
-                    type: i0.Input
-                }], mouseenter: [{
-                    type: i0.HostListener,
-                    args: ['mouseenter']
-                }], mouseleave: [{
-                    type: i0.HostListener,
-                    args: ['mouseleave']
-                }] } });
-
-    function plainToTheia(text) {
-        if (typeof text !== 'string') {
-            return text;
-        }
-        return text.split('\n').map(function (i) {
-            return {
-                type: exports.ElementKinds.paragraph,
-                children: [
-                    {
-                        text: i
-                    }
-                ]
-            };
-        });
-    }
-    function htmlToTheia(value) {
-        if (typeof value === 'string') {
-            var htmlDom = new DOMParser().parseFromString(value, 'text/html');
-            return selene.TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
-        }
-        return value;
-    }
-    function dataDeserialize(mode, value) {
-        if (!value) {
-            return [createEmptyParagraph()];
-        }
-        if (mode === exports.TheDataMode.html) {
-            if (typeof value !== 'string') {
-                return value;
-            }
-            if (/<[^>]+>/.test(value)) {
-                return htmlToTheia(value);
-            }
-            return plainToTheia(value);
-        }
-        return value || [createEmptyParagraph()];
-    }
-    function dataSerializing(mode, value) {
-        if (mode === exports.TheDataMode.html) {
-            return selene.TheiaConverter.convertToHtml(value);
-        }
-        return value;
-    }
-
-    var getEditorUUID = function (editor) {
-        return THE_EDITOR_UUID.get(editor);
-    };
-    var setEditorUUID = function (editor, uuid) {
-        THE_EDITOR_UUID.set(editor, uuid);
-    };
-
-    var getToolbarClass = function (editor) {
-        var uuid = getEditorUUID(editor);
-        return "the-toolbar-" + uuid;
-    };
-
-    var IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-    var CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
-
-    /**
-     * whether the current node is a clean paragraph
-     * @param editor
-     * @param text
-     * @returns boolean
-     */
-    var isCleanEmptyParagraph = function (editor) {
-        var isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && slate.Range.isCollapsed(editor.selection);
-        if (!isCollapsedCursor) {
-            return false;
-        }
-        var block = slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]);
-        var textIndent = 'textIndent';
-        var align = 'align';
-        var hasTextIndent = block[textIndent];
-        var alignValue = block[align];
-        var hasIndent = block[exports.ElementKinds.indent];
-        if (slate.Node.string(block) === '' &&
-            slate.Element.isElement(block) &&
-            block.type === exports.ElementKinds.paragraph &&
-            block.children.length === 1 &&
-            slate.Text.isText(block.children[0]) &&
-            !slate.Editor.isVoid(editor, block) &&
-            !hasIndent &&
-            !hasTextIndent &&
-            (!alignValue || alignValue === exports.Alignment.left)) {
-            return true;
-        }
-        return false;
-    };
-
-    var mergeElementOptions = function (elementOptions) {
-        elementOptions = elementOptions.filter(function (item) { return item.inValidChildrenTypes.length > 0; });
-        var combinationData = __spreadArray(__spreadArray([], __read(DefaultElementOptions)), __read(elementOptions));
-        var dataInfo = {};
-        combinationData.forEach(function (item) {
-            var type = item.type, inValidChildrenTypes = item.inValidChildrenTypes, isIndivisible = item.isIndivisible, isSecondaryContainer = item.isSecondaryContainer;
-            if (!dataInfo[type]) {
-                dataInfo[type] = {
-                    type: type,
-                    inValidChildrenTypes: inValidChildrenTypes,
-                    isIndivisible: isIndivisible,
-                    isSecondaryContainer: isSecondaryContainer
-                };
-            }
-            dataInfo[type].inValidChildrenTypes = Array.from(new Set(__spreadArray(__spreadArray([], __read(inValidChildrenTypes)), __read(dataInfo[type].inValidChildrenTypes))));
-        });
-        return dataInfo;
-    };
-
-    /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
-    function coercePixelsFromCssValue(cssValue) {
-        var match = cssValue.match(/(\d+(\.\d+)?)px/);
-        if (match) {
-            return Number(match[1]);
+    /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
+    function coercePixelsFromCssValue(cssValue) {
+        var match = cssValue.match(/(\d+(\.\d+)?)px/);
+        if (match) {
+            return Number(match[1]);
         }
     }
     function getElementWidth(element) {
@@ -2608,7 +2196,7 @@
         return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
     }
     function getElementHeight(element) {
-        return Math.round(element.getBoundingClientRect().height);
+        return element.getBoundingClientRect().height;
     }
     function getColsTotalWidth(cols) {
         return cols.reduce(function (total, col) {
@@ -2640,45 +2228,6 @@
         });
         return matchClass;
     }
-    function findRelativeElementByPoint(editor, x, y, mode) {
-        var editableElement = i1.EDITOR_TO_ELEMENT.get(editor);
-        var rectEditable = editableElement.getBoundingClientRect();
-        if (x > rectEditable.x && x < rectEditable.x + rectEditable.width) {
-            var paddingLeft = window.getComputedStyle(editableElement, null).paddingLeft;
-            var paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
-            var startX = rectEditable.left + paddingLeftPixels;
-            var relativeElement = document.elementFromPoint(mode === 'highest' ? startX : x, y);
-            return relativeElement;
-        }
-        return null;
-    }
-    function findNodeEntryByPoint(editor, x, y, mode) {
-        var editableElement = i1.EDITOR_TO_ELEMENT.get(editor);
-        var rootElement = null;
-        var 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) {
-            var node = i1.AngularEditor.toSlateNode(editor, rootElement);
-            var path = i1.AngularEditor.findPath(editor, node);
-            return [node, path];
-        }
-        return null;
-    }
 
     var withDeserializeMd = function (options) { return function (editor) {
         var insertData = editor.insertData, onKeydown = editor.onKeydown;
@@ -3438,7 +2987,7 @@
         return TheImageComponent;
     }(TheBaseElementComponent));
     TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3576,6 +3125,10 @@
         return listItemNode.children.length === 1 && type === exports.ElementKinds.paragraph;
     };
 
+    var isNodeTypeList = function (n) {
+        return [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList].includes(n.type);
+    };
+
     /**
      * list 中 是否是单个listItem，且listItem没有子列表
      */
@@ -4518,12 +4071,12 @@
         return TheTodoItemComponent;
     }(TheBaseElementComponent));
     TheTodoItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTodoItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTodoItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheTodoItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <span><slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children></span>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTodoItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'div[theTodoItem]',
-                        template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n    "
+                        template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <span><slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children></span>\n    "
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { checkItemClass: [{
                     type: i0.HostBinding,
@@ -4783,205 +4336,627 @@
                 if (operation.type === 'merge_node' && (!filterText || operation.properties.type)) {
                     editor.removedIDs.add(operation.properties[idKey]);
                 }
-                return apply(operation);
-            };
-            editor.getFragment = function () {
-                var fragment = _.cloneDeep(getFragment());
-                return deleteElementKey(fragment, idKey);
-            };
-            return editor;
-        };
+                return apply(operation);
+            };
+            editor.getFragment = function () {
+                var fragment = _.cloneDeep(getFragment());
+                return deleteElementKey(fragment, idKey);
+            };
+            return editor;
+        };
+    };
+
+    var autoFormatBlock = function (editor, type, at, _a, markups) {
+        var preFormat = _a.preFormat, format = _a.format;
+        slate.Transforms.delete(editor, { at: at });
+        if (preFormat) {
+            preFormat(editor);
+        }
+        if (!format) {
+            slate.Transforms.setNodes(editor, { type: type }, { match: function (n) { return slate.Editor.isBlock(editor, n); } });
+        }
+        else {
+            format(editor, markups);
+        }
+    };
+
+    var autoFormatInline = function (editor, _a) {
+        var type = _a.type, between = _a.between, markup = _a.markup, ignoreTrim = _a.ignoreTrim, format = _a.format;
+        var selection = editor.selection;
+        var startMarkup = between ? between[0] : markup;
+        var endMarkup = between ? between[1] : '';
+        var endMarkupPointBefore = selection.anchor;
+        if (endMarkup) {
+            endMarkupPointBefore = getPointBefore(editor, selection, {
+                matchString: endMarkup
+            });
+            if (!endMarkupPointBefore) {
+                return false;
+            }
+        }
+        var startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
+            matchString: startMarkup,
+            skipInvalid: true,
+            afterMatch: true
+        });
+        if (!startMarkupPointAfter) {
+            return false;
+        }
+        // found
+        var markupRange = {
+            anchor: startMarkupPointAfter,
+            focus: endMarkupPointBefore
+        };
+        if (!ignoreTrim) {
+            var markupText = getText(editor, markupRange);
+            if (markupText.trim() !== markupText) {
+                return false;
+            }
+        }
+        // delete end markup
+        if (endMarkup) {
+            endMarkupPointBefore = getPointBefore(editor, selection, {
+                matchString: endMarkup
+            });
+            slate.Transforms.delete(editor, {
+                at: {
+                    anchor: endMarkupPointBefore,
+                    focus: selection.anchor
+                }
+            });
+        }
+        var startMarkupPointBefore = getPointBefore(editor, selection, {
+            matchString: startMarkup,
+            skipInvalid: true
+        });
+        if (format) {
+            var markupText = getText(editor, markupRange);
+            format(editor, markupText);
+            // delete start to end selection
+            slate.Transforms.delete(editor, {
+                at: {
+                    anchor: startMarkupPointBefore,
+                    focus: selection.anchor
+                }
+            });
+        }
+        else {
+            // add mark to the text between the markups
+            slate.Transforms.select(editor, markupRange);
+            editor.addMark(type, true);
+            slate.Transforms.collapse(editor, { edge: 'end' });
+            editor.removeMark(type, false);
+            // delete start markup
+            slate.Transforms.delete(editor, {
+                at: {
+                    anchor: startMarkupPointBefore,
+                    focus: startMarkupPointAfter
+                }
+            });
+        }
+        return true;
+    };
+
+    var ListEditor = {
+        isList: function (editor, element, type) {
+            return slate.Editor.isBlock(editor, element) && element.type === type;
+        },
+        toggleList: function (editor, type, startIndex) {
+            var _this = this;
+            if (!editor.selection) {
+                return;
+            }
+            if (!startIndex) {
+                startIndex = 1;
+            }
+            var types = [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList];
+            slate.Editor.withoutNormalizing(editor, function () {
+                var _a = __read(slate.Editor.nodes(editor, {
+                    match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; },
+                    mode: 'lowest'
+                })), listItems = _a.slice(0);
+                var firstListItemPath = listItems.length && listItems[0][1];
+                var activeListPath = listItems.length && slate.Path.parent(firstListItemPath);
+                var activeListNode = listItems.length && slate.Node.get(editor, activeListPath);
+                // 同级且类型相同：unwrap
+                var isLowestActive = listItems.length &&
+                    listItems.every(function (_a) {
+                        var _b = __read(_a, 2), path = _b[1];
+                        return activeListNode.type === type && (slate.Path.isSibling(firstListItemPath, path) || slate.Path.equals(firstListItemPath, path));
+                    });
+                if (isLowestActive) {
+                    var upListItem = slate.Path.parent(activeListPath);
+                    slate.Transforms.unwrapNodes(editor, {
+                        at: editor.selection,
+                        match: function (node) { return node === activeListNode; },
+                        split: true,
+                        mode: 'lowest'
+                    });
+                    if (upListItem && slate.Node.get(editor, upListItem).type === exports.ElementKinds.listItem) {
+                        slate.Transforms.moveNodes(editor, {
+                            at: editor.selection,
+                            to: slate.Path.next(upListItem),
+                            match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; }
+                        });
+                    }
+                    else {
+                        slate.Transforms.unwrapNodes(editor, {
+                            match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; }
+                        });
+                    }
+                    return;
+                }
+                // 跨级、同级且类型不同
+                if (activeListNode && types.includes(activeListNode.type)) {
+                    slate.Transforms.setNodes(editor, { type: type }, { match: function (node) { return slate.Element.isElement(node) && node.type !== type && types.includes(node.type); } });
+                    return;
+                }
+                // wrap
+                _this.buildListItem(editor);
+                // Todo: types
+                slate.Transforms.wrapNodes(editor, { type: type, children: [], start: startIndex }, {
+                    at: editor.selection,
+                    match: function (node) { return slate.Element.isElement(node) && node.type === exports.ElementKinds.listItem; }
+                });
+            });
+        },
+        unwrapList: function (editor) {
+            slate.Editor.withoutNormalizing(editor, function () {
+                unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], { split: true, mode: 'all' });
+                unwrapNodesByType(editor, [exports.ElementKinds.listItem], { split: true, mode: 'all' });
+            });
+        },
+        wrapList: function (editor, type) {
+            slate.Editor.withoutNormalizing(editor, function () {
+                var listItem = {
+                    type: exports.ElementKinds.listItem,
+                    children: []
+                };
+                var list = {
+                    type: type,
+                    children: []
+                };
+                slate.Transforms.wrapNodes(editor, list, { split: true });
+                slate.Transforms.wrapNodes(editor, listItem, { split: true });
+            });
+        },
+        isActive: function (editor, type) {
+            var _a = __read(getNodesByType(editor, type), 1), match = _a[0];
+            return !!match;
+        },
+        getActiveList: function (editor) {
+            var _a = __read(getNodesByType(editor, LIST_BLOCK_TYPES), 1), match = _a[0];
+            return match;
+        },
+        buildListItem: function (editor) {
+            var e_1, _a;
+            var nodes = slate.Editor.nodes(editor, {
+                match: function (node) { return slate.Editor.isBlock(editor, node); },
+                mode: 'lowest'
+            });
+            try {
+                for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
+                    var _b = __read(nodes_1_1.value, 2), node = _b[0], path = _b[1];
+                    if (!slate.Editor.isVoid(editor, node) && slate.Element.isElement(node) && node.type !== exports.ElementKinds.paragraph) {
+                        slate.Transforms.setNodes(editor, { type: exports.ElementKinds.paragraph, checked: undefined }, // todo remove checked
+                        { at: path });
+                    }
+                    else if (slate.Element.isElement(node) && node.type === exports.ElementKinds.paragraph) {
+                        var textIndent = node.textIndent;
+                        if (textIndent) {
+                            slate.Transforms.setNodes(editor, { textIndent: undefined, indent: undefined }, // remove indent
+                            { at: path });
+                        }
+                    }
+                    if (slate.Node.parent(editor, path).type !== exports.ElementKinds.listItem) {
+                        slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.listItem, children: [] }, {
+                            at: path,
+                            split: true
+                        });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        },
+        buildInsertDataChildren: function (node) {
+            var children = node.children;
+            var listItem = children[0];
+            if (isNodeTypeList(node) && slate.Element.isElement(listItem) && listItem.children[0].type === exports.ElementKinds.paragraph) {
+                return node;
+            }
+            return this.buildInsertDataChildren(listItem);
+        }
     };
 
-    var autoFormatBlock = function (editor, type, at, _a, markups) {
-        var preFormat = _a.preFormat, format = _a.format;
-        slate.Transforms.delete(editor, { at: at });
-        if (preFormat) {
-            preFormat(editor);
-        }
-        if (!format) {
-            slate.Transforms.setNodes(editor, { type: type }, { match: function (n) { return slate.Editor.isBlock(editor, n); } });
+    var TodoItemEditor = {
+        isActive: function (editor) {
+            var _a = __read(getNodesByType(editor, exports.ElementKinds.checkItem), 1), match = _a[0];
+            return !!match;
+        },
+        insertTodoItem: function (editor) {
+            if (!editor.selection) {
+                return;
+            }
+            var isActive = this.isActive(editor);
+            var isNumberedList = ListEditor.isActive(editor, exports.ElementKinds.numberedList);
+            var isBulletedList = ListEditor.isActive(editor, exports.ElementKinds.bulletedList);
+            if (isActive) {
+                slate.Transforms.setNodes(editor, {
+                    type: exports.ElementKinds.paragraph
+                });
+            }
+            else {
+                if (isNumberedList || isBulletedList) {
+                    ListEditor.unwrapList(editor);
+                }
+                slate.Transforms.setNodes(editor, {
+                    type: exports.ElementKinds.checkItem
+                });
+            }
         }
-        else {
-            format(editor, markups);
+    };
+
+    var BlockquoteEditor = {
+        toggleBlockquote: function (editor) {
+            if (!isParagraph(editor)) {
+                slate.Transforms.insertNodes(editor, {
+                    type: exports.ElementKinds.paragraph,
+                    mode: 'text',
+                    children: [
+                        {
+                            text: ''
+                        }
+                    ]
+                });
+            }
+            var isActive = isBlockActive(editor, exports.ElementKinds.blockquote);
+            if (!isActive) {
+                slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.blockquote, children: [] }, {
+                    mode: 'lowest'
+                });
+            }
+            else {
+                slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.blockquote; } });
+            }
         }
     };
 
-    var autoFormatInline = function (editor, _a) {
-        var type = _a.type, between = _a.between, markup = _a.markup, ignoreTrim = _a.ignoreTrim, format = _a.format;
-        var selection = editor.selection;
-        var startMarkup = between ? between[0] : markup;
-        var endMarkup = between ? between[1] : '';
-        var endMarkupPointBefore = selection.anchor;
-        if (endMarkup) {
-            endMarkupPointBefore = getPointBefore(editor, selection, {
-                matchString: endMarkup
-            });
-            if (!endMarkupPointBefore) {
-                return false;
+    var InlineCodeEditor = {
+        toggleInlineCode: function (editor, text) {
+            var isActive = InlineCodeEditor.isInlineCodeActive(editor);
+            if (isActive) {
+                InlineCodeEditor.unwrapInlineCode(editor);
+                return;
+            }
+            if (slate.Range.isCollapsed(editor.selection)) {
+                InlineCodeEditor.wrapInlineCode(editor, text);
+            }
+            else {
+                var fragment = slate.Node.fragment(editor, editor.selection)[0];
+                var selectNode = slate.Node.get(fragment, []);
+                var selectText = slate.Node.string(selectNode);
+                InlineCodeEditor.wrapInlineCode(editor, selectText);
+            }
+        },
+        wrapInlineCode: function (editor, text) {
+            if (text === void 0) { text = ''; }
+            if (InlineCodeEditor.isInlineCodeActive(editor)) {
+                InlineCodeEditor.unwrapInlineCode(editor);
+            }
+            var selection = editor.selection;
+            var isCollapsed = selection && slate.Range.isCollapsed(selection);
+            var inlineCode = {
+                type: exports.ElementKinds.inlineCode,
+                children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
+            };
+            if (isCollapsed) {
+                slate.Transforms.insertNodes(editor, inlineCode);
+            }
+            else {
+                slate.Transforms.wrapNodes(editor, inlineCode, { split: true });
             }
+        },
+        unwrapInlineCode: function (editor) {
+            slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } });
+        },
+        isInlineCodeActive: function (editor, path) {
+            var _a;
+            var _b = __read(slate.Editor.nodes(editor, {
+                at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; }
+            }), 1), inlineCode = _b[0];
+            return !!inlineCode;
         }
-        var startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
-            matchString: startMarkup,
-            skipInvalid: true,
-            afterMatch: true
-        });
-        if (!startMarkupPointAfter) {
-            return false;
+    };
+
+    var HeadingEditor = {
+        setHeading: function (editor, heading) {
+            slate.Editor.withoutNormalizing(editor, function () {
+                var _a;
+                var types = [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.listItem];
+                slate.Transforms.unwrapNodes(editor, {
+                    at: editor.selection,
+                    match: function (n) { return slate.Element.isElement(n) && types.includes(n.type); },
+                    mode: 'all',
+                    split: true
+                });
+                slate.Transforms.setNodes(editor, { type: heading });
+                var entry = anchorBlockEntry(editor);
+                var unMarks = (_a = {},
+                    _a[exports.MarkTypes.fontSize] = null,
+                    _a);
+                if (entry) {
+                    setMarks(editor, unMarks, entry[1]);
+                    return;
+                }
+                setMarks(editor, unMarks, editor.selection);
+            });
+        },
+        isHeadingActive: function (editor, heading) {
+            var _a = __read(slate.Editor.nodes(editor, {
+                match: function (n) { return slate.Element.isElement(n) && n.type === heading; },
+                universal: true
+            }), 1), match = _a[0];
+            return !!match;
         }
-        // found
-        var markupRange = {
-            anchor: startMarkupPointAfter,
-            focus: endMarkupPointBefore
-        };
-        if (!ignoreTrim) {
-            var markupText = getText(editor, markupRange);
-            if (markupText.trim() !== markupText) {
-                return false;
+    };
+
+    var defaultAutoFormatRules = [
+        {
+            type: exports.ElementKinds.heading_1,
+            markup: '#',
+            format: function (editor) {
+                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_1);
+            }
+        },
+        {
+            type: exports.ElementKinds.heading_2,
+            markup: '##',
+            format: function (editor) {
+                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_2);
+            }
+        },
+        {
+            type: exports.ElementKinds.heading_3,
+            markup: '###',
+            format: function (editor) {
+                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_3);
+            }
+        },
+        {
+            type: exports.ElementKinds.heading_4,
+            markup: '####',
+            format: function (editor) {
+                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_4);
+            }
+        },
+        {
+            type: exports.ElementKinds.heading_5,
+            markup: '#####',
+            format: function (editor) {
+                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_5);
+            }
+        },
+        {
+            type: exports.ElementKinds.heading_6,
+            markup: '######',
+            format: function (editor) {
+                HeadingEditor.setHeading(editor, exports.ElementKinds.heading_6);
+            }
+        },
+        {
+            type: exports.ElementKinds.blockquote,
+            markup: ['>'],
+            format: function (editor) {
+                BlockquoteEditor.toggleBlockquote(editor);
+            }
+        },
+        {
+            type: exports.MarkTypes.bold,
+            between: ['**', '**'],
+            mode: 'inline',
+            insertTrigger: true
+        },
+        {
+            type: exports.MarkTypes.bold,
+            between: ['__', '__'],
+            mode: 'inline',
+            insertTrigger: true
+        },
+        {
+            type: exports.MarkTypes.italic,
+            between: ['*', '*'],
+            mode: 'inline',
+            insertTrigger: true
+        },
+        {
+            type: exports.MarkTypes.italic,
+            between: ['_', '_'],
+            mode: 'inline',
+            insertTrigger: true
+        },
+        {
+            type: exports.ElementKinds.inlineCode,
+            between: ['`', '`'],
+            mode: 'inline',
+            format: function (editor, text) {
+                InlineCodeEditor.toggleInlineCode(editor, text);
+                slate.Transforms.select(editor, slate.Editor.after(editor, editor.selection));
             }
-        }
-        // delete end markup
-        if (endMarkup) {
-            endMarkupPointBefore = getPointBefore(editor, selection, {
-                matchString: endMarkup
-            });
-            slate.Transforms.delete(editor, {
-                at: {
-                    anchor: endMarkupPointBefore,
-                    focus: selection.anchor
-                }
-            });
-        }
-        var startMarkupPointBefore = getPointBefore(editor, selection, {
-            matchString: startMarkup,
-            skipInvalid: true
-        });
-        if (format) {
-            var markupText = getText(editor, markupRange);
-            format(editor, markupText);
-            // delete start to end selection
-            slate.Transforms.delete(editor, {
-                at: {
-                    anchor: startMarkupPointBefore,
-                    focus: selection.anchor
-                }
-            });
-        }
-        else {
-            // add mark to the text between the markups
-            slate.Transforms.select(editor, markupRange);
-            editor.addMark(type, true);
-            slate.Transforms.collapse(editor, { edge: 'end' });
-            editor.removeMark(type, false);
-            // delete start markup
-            slate.Transforms.delete(editor, {
-                at: {
-                    anchor: startMarkupPointBefore,
-                    focus: startMarkupPointAfter
+        },
+        {
+            type: exports.MarkTypes.strike,
+            between: ['~~', '~~'],
+            mode: 'inline',
+            insertTrigger: true
+        },
+        {
+            type: exports.ElementKinds.code,
+            markup: '```',
+            insertTrigger: true
+        },
+        {
+            type: exports.ElementKinds.listItem,
+            markup: [],
+            match: function (editor) {
+                return isParagraph(editor) ? ['*', '-', '+'] : [];
+            },
+            format: function (editor) {
+                ListEditor.toggleList(editor, exports.ElementKinds.bulletedList);
+            }
+        },
+        {
+            type: exports.ElementKinds.listItem,
+            key: exports.ElementKinds.numberedList,
+            markup: [],
+            match: function (editor, textFromBlockStart) {
+                return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
+            },
+            format: function (editor, markup) {
+                var startIndex = 1;
+                if (markup) {
+                    startIndex = markup[0].split('.')[0];
+                    if (startIndex === 0) {
+                        startIndex = 1;
+                    }
                 }
-            });
+                ListEditor.toggleList(editor, exports.ElementKinds.numberedList, startIndex);
+            }
+        },
+        {
+            type: exports.ElementKinds.checkItem,
+            markup: [],
+            match: function (editor) {
+                return isParagraph(editor) ? ['[]'] : [];
+            },
+            format: function (editor) {
+                TodoItemEditor.insertTodoItem(editor);
+            }
+        },
+        {
+            type: exports.ElementKinds.hr,
+            markup: '---',
+            insertTrigger: true
         }
-        return true;
-    };
+    ];
 
-    var withAutoFormat = function (_c) {
-        var rules = _c.rules;
-        return function (editor) {
-            var insertText = editor.insertText;
-            editor.insertText = function (text) {
-                var e_1, _c;
-                var _a;
-                if (!isCollapsed(editor.selection)) {
-                    return insertText(text);
-                }
-                var _loop_1 = function (_b) {
-                    var query = _b.query, rule = __rest(_b, ["query"]);
-                    var _d = rule.trigger, trigger = _d === void 0 ? ' ' : _d, _e = rule.mode, mode = _e === void 0 ? 'block' : _e, type = rule.type, markup = rule.markup, preFormat = rule.preFormat, format = rule.format, match = rule.match, between = rule.between, ignoreTrim = rule.ignoreTrim, insertTrigger = rule.insertTrigger, _f = rule.allowSameTypeAbove, allowSameTypeAbove = _f === void 0 ? false : _f, _g = rule.triggerAtBlockStart, triggerAtBlockStart = _g === void 0 ? true : _g;
-                    if (query && !query(editor, rule))
-                        return "continue";
-                    var triggers = castArray(trigger);
-                    // Check trigger
-                    if (!triggers.includes(text))
-                        return "continue";
-                    var valid = function () { return insertTrigger && insertText(text); };
-                    if (mode === 'block') {
-                        var markups = castArray(markup);
-                        var markupRange = void 0;
-                        if (triggerAtBlockStart) {
-                            markupRange = getRangeFromBlockStart(editor);
-                            // Don't autoformat if there is void nodes.
-                            var hasVoidNode = someNode(editor, {
-                                at: markupRange,
-                                match: function (n) { return slate.Editor.isVoid(editor, n); }
-                            });
-                            if (hasVoidNode)
-                                return "continue";
-                            var textFromBlockStart = getText(editor, markupRange);
-                            if (match) {
-                                markups = match(editor, textFromBlockStart);
-                            }
-                            if (!markups.includes(textFromBlockStart))
-                                return "continue";
-                        }
-                        else {
-                            markupRange = getRangeBefore(editor, editor.selection, {
-                                matchString: markup,
-                                skipInvalid: true
-                            });
-                            if (!markupRange)
-                                return "continue";
-                            var blockAbovePath = (_a = getBlockAbove(editor)) === null || _a === void 0 ? void 0 : _a[1];
-                            if (!blockAbovePath)
-                                return "continue";
-                            // If the markup is not at the start, insert break before autoformatting.
-                            if (!slate.Editor.isStart(editor, markupRange.anchor, blockAbovePath)) {
-                                editor.insertBreak();
-                            }
-                        }
-                        if (!allowSameTypeAbove) {
-                            // Don't autoformat if already in a block of the same type.
-                            var isBelowSameBlockType = someNode(editor, { match: { type: type } });
-                            if (isBelowSameBlockType)
-                                return "continue";
+    var withAutoFormat = function () { return function (editor) {
+        var insertText = editor.insertText;
+        editor.insertText = function (text) {
+            var e_1, _d;
+            var _a, _b;
+            var autoFormatRules = defaultAutoFormatRules;
+            if ((_a = editor.extraAutoFormatRules) === null || _a === void 0 ? void 0 : _a.length) {
+                var extraRules = mergAutoFormateRules(editor.extraAutoFormatRules);
+                autoFormatRules = Object.values(extraRules);
+            }
+            if (!isCollapsed(editor.selection)) {
+                return insertText(text);
+            }
+            var _loop_1 = function (_c) {
+                var query = _c.query, rule = __rest(_c, ["query"]);
+                var _e = rule.trigger, trigger = _e === void 0 ? ' ' : _e, _f = rule.mode, mode = _f === void 0 ? 'block' : _f, type = rule.type, markup = rule.markup, preFormat = rule.preFormat, format = rule.format, match = rule.match, between = rule.between, ignoreTrim = rule.ignoreTrim, insertTrigger = rule.insertTrigger, _g = rule.allowSameTypeAbove, allowSameTypeAbove = _g === void 0 ? false : _g, _h = rule.triggerAtBlockStart, triggerAtBlockStart = _h === void 0 ? true : _h;
+                if (query && !query(editor, rule))
+                    return "continue";
+                var triggers = castArray(trigger);
+                // Check trigger
+                if (!triggers.includes(text))
+                    return "continue";
+                var valid = function () { return insertTrigger && insertText(text); };
+                if (mode === 'block') {
+                    var markups = castArray(markup);
+                    var markupRange = void 0;
+                    if (triggerAtBlockStart) {
+                        markupRange = getRangeFromBlockStart(editor);
+                        // Don't autoformat if there is void nodes.
+                        var hasVoidNode = someNode(editor, {
+                            at: markupRange,
+                            match: function (n) { return slate.Editor.isVoid(editor, n); }
+                        });
+                        if (hasVoidNode)
+                            return "continue";
+                        var textFromBlockStart = getText(editor, markupRange);
+                        if (match) {
+                            markups = match(editor, textFromBlockStart);
                         }
-                        // Start of the block
-                        autoFormatBlock(editor, type, markupRange, {
-                            preFormat: preFormat,
-                            format: format
-                        }, markups);
-                        return { value: valid() };
+                        if (!markups.includes(textFromBlockStart))
+                            return "continue";
                     }
-                    if (mode === 'inline') {
-                        if (autoFormatInline(editor, {
-                            type: type,
-                            between: between,
-                            ignoreTrim: ignoreTrim,
-                            format: format,
-                            markup: Array.isArray(markup) ? markup[0] : markup
-                        })) {
-                            return { value: valid() };
+                    else {
+                        markupRange = getRangeBefore(editor, editor.selection, {
+                            matchString: markup,
+                            skipInvalid: true
+                        });
+                        if (!markupRange)
+                            return "continue";
+                        var blockAbovePath = (_b = getBlockAbove(editor)) === null || _b === void 0 ? void 0 : _b[1];
+                        if (!blockAbovePath)
+                            return "continue";
+                        // If the markup is not at the start, insert break before autoformatting.
+                        if (!slate.Editor.isStart(editor, markupRange.anchor, blockAbovePath)) {
+                            editor.insertBreak();
                         }
                     }
-                };
-                try {
-                    for (var rules_1 = __values(rules), rules_1_1 = rules_1.next(); !rules_1_1.done; rules_1_1 = rules_1.next()) {
-                        var _b = rules_1_1.value;
-                        var state_1 = _loop_1(_b);
-                        if (typeof state_1 === "object")
-                            return state_1.value;
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (rules_1_1 && !rules_1_1.done && (_c = rules_1.return)) _c.call(rules_1);
+                    if (!allowSameTypeAbove) {
+                        // Don't autoformat if already in a block of the same type.
+                        var isBelowSameBlockType = someNode(editor, { match: { type: type } });
+                        if (isBelowSameBlockType)
+                            return "continue";
+                    }
+                    // Start of the block
+                    autoFormatBlock(editor, type, markupRange, {
+                        preFormat: preFormat,
+                        format: format
+                    }, markups);
+                    return { value: valid() };
+                }
+                if (mode === 'inline') {
+                    if (autoFormatInline(editor, {
+                        type: type,
+                        between: between,
+                        ignoreTrim: ignoreTrim,
+                        format: format,
+                        markup: Array.isArray(markup) ? markup[0] : markup
+                    })) {
+                        return { value: valid() };
                     }
-                    finally { if (e_1) throw e_1.error; }
                 }
-                insertText(text);
             };
-            return editor;
+            try {
+                for (var autoFormatRules_1 = __values(autoFormatRules), autoFormatRules_1_1 = autoFormatRules_1.next(); !autoFormatRules_1_1.done; autoFormatRules_1_1 = autoFormatRules_1.next()) {
+                    var _c = autoFormatRules_1_1.value;
+                    var state_1 = _loop_1(_c);
+                    if (typeof state_1 === "object")
+                        return state_1.value;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (autoFormatRules_1_1 && !autoFormatRules_1_1.done && (_d = autoFormatRules_1.return)) _d.call(autoFormatRules_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            insertText(text);
         };
+        return editor;
+    }; };
+    var mergAutoFormateRules = function (extraAutoFormatRules) {
+        var combinationData = __spreadArray(__spreadArray([], __read(defaultAutoFormatRules)), __read(extraAutoFormatRules));
+        var dataInfo = {};
+        combinationData.forEach(function (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;
     };
 
     var withTransforms = function () { return function (editor) {
@@ -6803,7 +6778,7 @@
         return TheColorSelectComponent;
     }());
     TheColorSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__namespace, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__namespace, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7011,7 +6986,7 @@
         return TheColorToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheColorToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, deps: [{ token: i1__namespace$3.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7282,7 +7257,7 @@
         return TheToolbarDropdownComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i2__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7536,7 +7511,7 @@
         return TheCodeComponent;
     }(TheBaseElementComponent));
     TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <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__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [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__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7765,7 +7740,7 @@
         return TheLinkEditComponent;
     }());
     TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$2.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7792,14 +7767,13 @@
 
     var TheBaseLinkComponent = /** @class */ (function (_super) {
         __extends(TheBaseLinkComponent, _super);
-        function TheBaseLinkComponent(elementRef, cdr, thyPopover, overlay, viewContainerRef, thyClickDispatcher) {
+        function TheBaseLinkComponent(elementRef, cdr, thyPopover, overlay, viewContainerRef) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.thyPopover = thyPopover;
             _this.overlay = overlay;
             _this.viewContainerRef = viewContainerRef;
-            _this.thyClickDispatcher = thyClickDispatcher;
             _this.beforeContextChange = function (value) {
                 if (_this.thyPopoverEditRef && _this.thyPopoverEditRef.componentInstance) {
                     var originText = _this.thyPopoverEditRef.componentInstance.originText;
@@ -7920,7 +7894,7 @@
         };
         return TheBaseLinkComponent;
     }(TheBaseElementComponent));
-    TheBaseLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseLinkComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$6.ThyClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBaseLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseLinkComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TheBaseLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBaseLinkComponent, decorators: [{
                 type: i0.Component,
@@ -7928,7 +7902,7 @@
                         selector: '[TheBaseLinkComponent]',
                         template: ''
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.ThyPopover }, { type: i2__namespace.Overlay }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$6.ThyClickDispatcher }]; }, propDecorators: { mousedownHandle: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.ThyPopover }, { type: i2__namespace.Overlay }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { mousedownHandle: [{
                     type: i0.HostListener,
                     args: ['click', ['$event']]
                 }] } });
@@ -7944,28 +7918,12 @@
         return TheLinkComponent;
     }(TheBaseLinkComponent));
     TheLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheLinkComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: " <span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>\n        <span><slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children></span>\n        <span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'span[theLink]',
-                        template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
-                    }]
-            }] });
-    var TheReadonlyLinkComponent = /** @class */ (function (_super) {
-        __extends(TheReadonlyLinkComponent, _super);
-        function TheReadonlyLinkComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TheReadonlyLinkComponent;
-    }(TheBaseLinkComponent));
-    TheReadonlyLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheReadonlyLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheReadonlyLinkComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheReadonlyLinkComponent, decorators: [{
                 type: i0.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>\n        <span><slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children></span>\n        <span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>",
                         host: {
                             '[attr.href]': 'element.url',
                             target: '_blank'
@@ -8017,7 +7975,7 @@
         };
         editor.renderElement = function (element) {
             if (element.type === exports.ElementKinds.link) {
-                return i1.AngularEditor.isReadonly(editor) ? TheReadonlyLinkComponent : TheLinkComponent;
+                return TheLinkComponent;
             }
             return renderElement(element);
         };
@@ -8125,7 +8083,7 @@
         return TheTableToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheTableToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, deps: [{ token: i1__namespace$6.ThyPopover }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8181,6 +8139,13 @@
                 type: i0.Injectable
             }] });
 
+    var Position;
+    (function (Position) {
+        Position["top"] = "top";
+        Position["right"] = "right";
+        Position["bottom"] = "bottom";
+        Position["left"] = "left";
+    })(Position || (Position = {}));
     var HoveredCellInfo = /** @class */ (function () {
         function HoveredCellInfo() {
         }
@@ -8361,11 +8326,15 @@
             enumerable: false,
             configurable: true
         });
-        TableStore.prototype.getTablePath = function (editor) {
+        TableStore.prototype.getTableEntry = function (editor) {
             var selection = editor.selection;
             var path = selection.anchor.path;
             var opts = new TableOptions$1();
-            return TablePosition.create(opts, editor, path).tableEntry[1];
+            return TablePosition.create(opts, editor, path).tableEntry;
+        };
+        TableStore.prototype.getTablePath = function (editor) {
+            var tableEntry = this.getTableEntry(editor);
+            return tableEntry[1];
         };
         TableStore.prototype.getTablePosition = function (editor) {
             var selection = editor.selection;
@@ -8632,6 +8601,7 @@
         };
         TableStore.prototype.focusCell = function (editor, path) {
             var at = slate.Editor.start(editor, path);
+            TheEditor.focus(this.editor);
             slate.Transforms.select(editor, at);
         };
         TableStore.prototype.dangerousCellsChange = function () {
@@ -8791,6 +8761,10 @@
         TableStore.prototype.mergeCell = function (editor) {
             mergeCell(editor, this.selectedCells);
         };
+        TableStore.prototype.setTableOptions = function (editor, options) {
+            var tablePath = this.getTablePath(this.editor);
+            slate.Transforms.setNodes(editor, { options: options }, { at: tablePath });
+        };
         TableStore.prototype.removeDangerousColumns = function () {
             var _this = this;
             var _a = this, dangerousColumnsIndex = _a.dangerousColumnsIndex, isSelectedTable = _a.isSelectedTable;
@@ -8897,11 +8871,80 @@
         });
     }
 
+    var TheTableOptionsComponent = /** @class */ (function () {
+        function TheTableOptionsComponent(popoverRef) {
+            this.popoverRef = popoverRef;
+            this.tableDropdownList = [
+                // {
+                //     name: '表头行',
+                //     key: 'headerRow'
+                // },
+                // {
+                //     name: '表头列',
+                //     key: 'headerColumn'
+                // },
+                {
+                    name: '序号列',
+                    key: 'numberedColumn'
+                }
+            ];
+        }
+        Object.defineProperty(TheTableOptionsComponent.prototype, "table", {
+            get: function () {
+                return this.tableStore && this.tableStore.getTableEntry(this.editor)[0];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheTableOptionsComponent.prototype.handleDocumentMouseDown = function (event) {
+            if (this.popoverRef && !document.querySelector('.table-options-pannel').contains(event.target)) {
+                this.popoverRef.close();
+            }
+        };
+        TheTableOptionsComponent.prototype.ngOnInit = function () {
+            this.setColumnOptions();
+        };
+        TheTableOptionsComponent.prototype.setColumnOptions = function () {
+            var _this = this;
+            this.tableDropdownList.forEach(function (item) {
+                item.isActive = (_this.table.options && _this.table.options[item.key]) || false;
+            });
+        };
+        TheTableOptionsComponent.prototype.setTableOptions = function (event, option) {
+            event.preventDefault();
+            event.stopPropagation();
+            var currentOption = this.tableDropdownList.find(function (item) { return item.key === option.key; });
+            currentOption.isActive = !option.isActive;
+            var tableOption = {};
+            tableOption[option.key] = currentOption.isActive || null;
+            this.tableStore.setTableOptions(this.editor, Object.assign(Object.assign({}, this.table.options), tableOption));
+            this.popoverRef.close();
+        };
+        return TheTableOptionsComponent;
+    }());
+    TheTableOptionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableOptionsComponent, deps: [{ token: i1__namespace$6.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, template: "\n        <thy-action-menu class=\"table-drop-menu\">\n            <ng-container *ngFor=\"let option of tableDropdownList\">\n                <a thyActionMenuItem href=\"javascript:;\" (mousedown)=\"setTableOptions($event, option)\">\n                    <span thyActionMenuItemName>{{ option.name }}</span>\n                    <span thyActionMenuItemExtendIcon class=\"text-primary\" *ngIf=\"option.isActive\">\n                        <thy-icon thyIconName=\"check\"></thy-icon>\n                    </span>\n                </a>\n            </ng-container>\n        </thy-action-menu>\n    ", isInline: true, components: [{ type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableOptionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-table-options',
+                        template: "\n        <thy-action-menu class=\"table-drop-menu\">\n            <ng-container *ngFor=\"let option of tableDropdownList\">\n                <a thyActionMenuItem href=\"javascript:;\" (mousedown)=\"setTableOptions($event, option)\">\n                    <span thyActionMenuItemName>{{ option.name }}</span>\n                    <span thyActionMenuItemExtendIcon class=\"text-primary\" *ngIf=\"option.isActive\">\n                        <thy-icon thyIconName=\"check\"></thy-icon>\n                    </span>\n                </a>\n            </ng-container>\n        </thy-action-menu>\n    "
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$6.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
+                    type: i0.Input
+                }], editor: [{
+                    type: i0.Input
+                }], handleDocumentMouseDown: [{
+                    type: i0.HostListener,
+                    args: ['document: mousedown', ['$event']]
+                }] } });
+
     var TheTableToolbarComponent = /** @class */ (function () {
-        function TheTableToolbarComponent(ngZone, colorSelectService, popoverRef) {
+        function TheTableToolbarComponent(ngZone, colorSelectService, thyPopover, popoverRef) {
             var _this = this;
             this.ngZone = ngZone;
             this.colorSelectService = colorSelectService;
+            this.thyPopover = thyPopover;
             this.popoverRef = popoverRef;
             this.cellMenuList = [
                 {
@@ -9015,17 +9058,33 @@
                 });
             });
         };
+        TheTableToolbarComponent.prototype.openTableOptionMenu = function (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'
+            });
+        };
         return TheTableToolbarComponent;
     }());
-    TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, deps: [{ token: i0__namespace.NgZone }, { token: TheColorSelectService }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, deps: [{ token: i0__namespace.NgZone }, { token: TheColorSelectService }, { token: i1__namespace$3.ThyPopover }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"tableStore.isSelectedTable\"></nav-split-line>\n    <button\n        thyButton=\"default\"\n        *ngIf=\"tableStore.isSelectedTable\"\n        class=\"mr-2\"\n        thySize=\"md\"\n        class=\"table-options\"\n        (mousedown)=\"openTableOptionMenu($event)\"\n    >\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </button>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-table-toolbar',
                         templateUrl: 'table-toolbar.component.html'
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: TheColorSelectService }, { type: i1__namespace$3.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: TheColorSelectService }, { type: i1__namespace$3.ThyPopover }, { type: i1__namespace$3.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
                     type: i0.Input
                 }], isActiveSelect: [{
                     type: i0.Input
@@ -9082,7 +9141,7 @@
         return TheContextMenuComponent;
     }());
     TheContextMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__namespace, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5__namespace$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__namespace, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i2__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9357,7 +9416,7 @@
                     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];
@@ -9472,8 +9531,13 @@
                 var tableWrapper = tableComponent.tableWrapper.nativeElement;
                 var tableElement = tableComponent.theTableElement.nativeElement;
                 var result = 0;
+                var rowControl = tableComponent.nativeElement.querySelector('.the-table-row-controls');
+                var 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;
@@ -9524,41 +9588,23 @@
             var _this = this;
             this.ngZone.runOutsideAngular(function () {
                 var element = _this.elementRef.nativeElement;
-                var previous = { x: 0, y: 0 };
                 rxjs.fromEvent(element, 'mousemove') // mouseover to mousemove 增加灵敏性
-                    .pipe(operators.throttleTime(300), // 防抖
-                operators.map(function (event) {
+                    .pipe(operators.map(function (event) {
                     if (!_this.theTableComponent.isCollapsed) {
                         return null;
                     }
                     var cell = event.target.closest(SLA_TABLE_CELL_SELECTOR);
-                    var hoveredInfo;
-                    var position;
+                    var positions = [Position.top, Position.right, Position.bottom, Position.left];
                     if (cell) {
-                        if (previous.x > 0) {
-                            var rectCell = cell.getBoundingClientRect();
-                            var deltaX = previous.x - event.clientX;
-                            var deltaY = previous.y - event.clientY;
-                            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX !== 0) {
-                                var 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;
-                                var centerCellY = rectCell.y + rectCell.height / 2;
-                                position = event.y > centerCellY ? 'top' : 'bottom';
-                            }
-                            hoveredInfo = {
-                                cell: cell,
-                                position: position
-                            };
-                        }
-                        previous = {
-                            x: event.clientX,
-                            y: event.clientY
-                        };
-                        return position ? hoveredInfo : null;
+                        var rectCell = cell.getBoundingClientRect();
+                        var topOffset = event.clientY - rectCell.y;
+                        var rightOffset = rectCell.right - event.clientX;
+                        var bottomOffset = rectCell.bottom - event.clientY;
+                        var leftOffset = event.clientX - rectCell.x;
+                        var positionOffsets = [topOffset, rightOffset, bottomOffset, leftOffset];
+                        var minIndex = positionOffsets.indexOf(Math.min.apply(Math, __spreadArray([], __read(positionOffsets))));
+                        _this.position = positions[minIndex];
+                        return { cell: cell, position: _this.position };
                     }
                     return null;
                 }), operators.takeUntil(_this.destroyed))
@@ -9573,13 +9619,23 @@
         TheColumnResizeDirective.prototype._listenStartDrag = function () {
             var _this = this;
             this.resizeNotifier.resizeStarted.pipe(operators.takeUntil(this.destroyed)).subscribe(function () {
-                _this.isXAxis ? _this.theTableComponent.initializeColumns() : _this.theTableComponent.initializeRows();
+                if (_this.position === Position.left || _this.position === Position.right) {
+                    _this.theTableComponent.initializeColumns();
+                }
+                else {
+                    _this.theTableComponent.initializeRows();
+                }
             });
         };
         TheColumnResizeDirective.prototype._listenEndDrag = function () {
             var _this = this;
             this.resizeNotifier.resizeCompleted.pipe(operators.takeUntil(this.destroyed)).subscribe(function () {
-                _this.isXAxis ? _this.theTableComponent.transformColumnsWidth() : _this.theTableComponent.transformRowHeight();
+                if (_this.position === Position.left || _this.position === Position.right) {
+                    _this.theTableComponent.transformColumnsWidth();
+                }
+                else {
+                    _this.theTableComponent.transformRowHeight();
+                }
             });
         };
         TheColumnResizeDirective.prototype.ngOnDestroy = function () {
@@ -9725,7 +9781,8 @@
             });
         };
         TheTableComponent.prototype.useRowControls = function () {
-            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();
             }
@@ -9919,8 +9976,13 @@
             setNode(this.editor, { columns: columns }, this.element);
         };
         TheTableComponent.prototype.onRowMouseDown = function (event, index) {
+            if (this.readonly)
+                return;
             event.stopPropagation();
-            event.preventDefault();
+            if (!this.isInTable) {
+                var path = TheEditor.findPath(this.editor, this.element);
+                slate.Transforms.select(this.editor, path);
+            }
             this.tableStore.selectRow(this.editor, index);
             this.tableService.openToolbar(event.target, true);
         };
@@ -10001,7 +10063,7 @@
                 provide: TheTableToken,
                 useExisting: TheTableComponent
             }
-        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: i0.ElementRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: i0.ElementRef, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10305,6 +10367,9 @@
         ResizeRef.prototype.setDirection = function (direction) {
             this.direction = direction;
         };
+        ResizeRef.prototype.setPosition = function (position) {
+            this.position = position;
+        };
         return ResizeRef;
     }());
 
@@ -10330,7 +10395,7 @@
                 rxjs.fromEvent(_this.elementRef.nativeElement, 'mouseenter')
                     .pipe(takeUntilDestroyed, operators.mapTo(_this.resizeRef.origin.nativeElement))
                     .subscribe(function (cell) {
-                    _this.eventDispatcher.tableCellHovered.next({ cell: cell });
+                    _this.eventDispatcher.tableCellHovered.next({ cell: cell, position: _this.resizeRef.position });
                     _this.resizeRef.updateSizeAndOffset();
                 });
                 rxjs.fromEvent(_this.elementRef.nativeElement, 'mousedown')
@@ -10388,7 +10453,7 @@
             });
         };
         TheColumnResizeOverlayHandleComponent.prototype.updateResizeActive = function (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);
         };
         TheColumnResizeOverlayHandleComponent.prototype._isXAxis = function () {
             return this.resizeRef.direction === 'X';
@@ -10476,13 +10541,13 @@
     var POSITION_MAP = {
         top: {
             originX: 'start',
-            originY: 'bottom',
+            originY: 'top',
             overlayX: 'start',
             overlayY: 'center'
         },
         bottom: {
             originX: 'start',
-            originY: 'top',
+            originY: 'bottom',
             overlayX: 'start',
             overlayY: 'center'
         },
@@ -10547,7 +10612,9 @@
         });
         Object.defineProperty(TheTdComponent.prototype, "theTableWrapperWidth", {
             get: function () {
-                return this.tableComponent.theTableWrapperWidth;
+                var tableContainer = this.tableComponent.nativeElement.firstChild;
+                var paddingLeft = coercePixelsFromCssValue(window.getComputedStyle(tableContainer)['paddingLeft']);
+                return this.tableComponent.theTableWrapperWidth - paddingLeft;
             },
             enumerable: false,
             configurable: true
@@ -10579,7 +10646,18 @@
         });
         Object.defineProperty(TheTdComponent.prototype, "isXAxisHover", {
             get: function () {
-                return ['left', 'right'].includes(this.hoverdDirection);
+                return [Position.left, Position.right].includes(this.hoverdDirection);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TheTdComponent.prototype, "rowResizeClass", {
+            get: function () {
+                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' : ''
+                ];
             },
             enumerable: false,
             configurable: true
@@ -10810,20 +10888,27 @@
             var element = this.elementRef.nativeElement;
             this.eventDispatcher
                 .resizeOverlayVisibleForTableCell(element)
-                .pipe(operators.takeUntil(this.destroy$))
+                .pipe(operators.takeUntil(this.destroy$), operators.map(function (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(function (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();
                     }
@@ -10834,7 +10919,6 @@
                 }
                 else if (_this.overlayRef) {
                     _this.overlayRef.detach();
-                    _this.overlayRef = null;
                 }
             });
         };
@@ -10847,21 +10931,23 @@
                 var deltaSize = _c.deltaSize, previousSize = _c.previousSize, completeImmediately = _c.completeImmediately;
                 var _d = _this.elementRef.nativeElement.getBoundingClientRect(), top = _d.top, left = _d.left, height = _d.height, width = _d.width;
                 var clientY = event.clientY, clientX = event.clientX;
-                var isApplySize = false;
+                var isPreventApplySize = false;
+                // 向下，或者向右移动(deltaSize > 0)，鼠标位置不在当前单元格拖拽线上，阻止应用拖拽尺寸
                 if (_this.isXAxisHover) {
-                    var cellWidth = _this.hoverdDirection === 'left' ? 0 : width;
-                    isApplySize = deltaSize > 0 && left + cellWidth - clientX <= 0;
+                    var cellWidth = _this.hoverdDirection === Position.left ? 0 : width;
+                    isPreventApplySize = deltaSize > 0 && left + cellWidth - clientX > 0;
                 }
                 else {
-                    var cellHeight = _this.hoverdDirection === 'bottom' ? 0 : height;
-                    isApplySize = deltaSize > 0 && top + cellHeight - clientY <= 0;
+                    var 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();
                 }
             });
             rxjs.merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)
@@ -10888,7 +10974,6 @@
             this.resizeRef = new ResizeRef(this.elementRef, this.overlayRef, this.tableOptions.minWidthPx, this.tableOptions.maxWidthPx, this.tableOptions.minHeightPx, this.tableOptions.maxHeightPx, function () {
                 _this.updateOverlayHandleSizeAndOffset();
             });
-            this.resizeRef.setDirection(this.isXAxisHover ? 'X' : 'Y');
             customTokens.set(ResizeRef, this.resizeRef);
             customTokens.set(TableCellEventDispatcher, this.eventDispatcher);
             customTokens.set(ColumnResizeNotifierSource, this.resizeNotifier);
@@ -10901,9 +10986,11 @@
         };
         TheTdComponent.prototype.updateOverlayHandleSizeAndOffset = function () {
             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(__spreadArray(['the-column-resize-handle-panel'], __read(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);
         };
         TheTdComponent.prototype.updateOverlayHandleColumnSize = function () {
             var height = 0;
@@ -10918,8 +11005,14 @@
             this.overlayRef.updateSize({ height: height, width: OVERLAY_INIT_SIZE });
         };
         TheTdComponent.prototype.updateOverlayHandleRowSize = function () {
-            var width = this.tableComponent.tableWrapper.nativeElement.offsetWidth + 11;
-            this.overlayRef.addPanelClass('the-row-resize-handle-panel');
+            var tableElement = this.tableComponent.nativeElement;
+            var rowControl = tableElement.querySelector('.the-table-row-controls');
+            var rowControlWidth = 11;
+            if (rowControl) {
+                rowControlWidth = rowControl.getBoundingClientRect().width;
+            }
+            var width = this.tableComponent.tableWrapper.nativeElement.offsetWidth + rowControlWidth;
+            this.overlayRef.addPanelClass(this.rowResizeClass);
             this.overlayRef.updateSize({ width: width, height: OVERLAY_INIT_SIZE });
         };
         TheTdComponent.prototype.applySize = function (deltaSize, previousSize) {
@@ -10945,7 +11038,7 @@
                 }
                 : {
                     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.
@@ -11078,15 +11171,13 @@
             this.resizingStore.storeTableHeight(rows);
             this.resizingStore.initDirection(deltaY, this.isXAxisHover);
             var rowIndex = this.elementRef.nativeElement.parentElement.rowIndex - 1; // subtract thead's tr
-            if (this.hoverdDirection === 'bottom') {
+            if (this.hoverdDirection === Position.top) {
                 rowIndex = rowIndex - 1;
             }
-            else {
-                var cellRowpsan = this.elementRef.nativeElement.rowSpan;
-                rowIndex = rowIndex + cellRowpsan - 1;
-            }
+            var rowSpan = this.elementRef.nativeElement.rowSpan;
+            var 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);
                 }
@@ -11753,7 +11844,7 @@
         return TheVerticalToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$6.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11998,7 +12089,7 @@
         return TheToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12074,7 +12165,7 @@
         return TheQuickToolbarComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
     TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [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__namespace$3.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12320,12 +12411,12 @@
         return TheInlineCodeComponent;
     }(TheBaseElementComponent));
     TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: "<span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: "<span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>\n        <span><slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children></span>\n        <span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theInlineCode]',
-                        template: "<span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
+                        template: "<span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>\n        <span><slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children></span>\n        <span contenteditable=\"false\" class=\"the-break-char\">{{ inlineChromiumBugfix }}</span>"
                     }]
             }] });
 
@@ -12453,7 +12544,7 @@
         return TheIndentToolbarComponent;
     }(TheToolbarBaseItemComponent));
     TheIndentToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheIndentToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheIndentToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i2__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i2__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i2__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12682,7 +12773,7 @@
         }),
         withBlockquote,
         withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator: idCreator }),
-        withAutoFormat({ rules: autoFormatRules }),
+        withAutoFormat(),
         withTransforms(),
         withTrailingNode({ type: exports.ElementKinds.paragraph, level: 0 }),
         withMoveSelection,
@@ -13105,7 +13196,7 @@
         return TheToolbarComponent;
     }());
     TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13331,7 +13422,7 @@
         return TheQuickInsertComponent;
     }());
     TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i3__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13623,11 +13714,12 @@
         };
         TheEditorComponent.prototype.initialize = function () {
             var _this = this;
-            var _a, _b;
+            var _a, _b, _c;
             this.editor = withTheEditor(this.thePlugins, slateHistory.withHistory(i1.withAngular(slate.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,
@@ -13838,11 +13930,11 @@
             TheContextService,
             TheColorSelectService,
             {
-                provide: i4$1.NG_VALUE_ACCESSOR,
+                provide: i4.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13854,7 +13946,7 @@
                             TheContextService,
                             TheColorSelectService,
                             {
-                                provide: i4$1.NG_VALUE_ACCESSOR,
+                                provide: i4.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                                 multi: true
                             }
@@ -14021,7 +14113,7 @@
         return TheToolbarGroupComponent;
     }());
     TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14047,16 +14139,16 @@
                 }] } });
 
     var TETHYS = [
-        i4.ThyIconModule,
+        i3.ThyIconModule,
         avatar.ThyAvatarModule,
-        i3.ThyNavModule,
-        i2$1.ThyFormModule,
-        i5$3.ThySharedModule,
-        i2$2.ThyListModule,
+        i3$1.ThyNavModule,
+        i2$2.ThyFormModule,
+        i5$2.ThySharedModule,
+        i2$3.ThyListModule,
         i5.ThyTooltipModule,
         i6.ThyProgressModule,
         autocomplete.ThyAutocompleteModule,
-        i5$2.ThyActionMenuModule,
+        i2$1.ThyActionMenuModule,
         i5$1.ThyInputModule,
         select.ThySelectModule,
         i1$5.ThyButtonModule,
@@ -14084,7 +14176,8 @@
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
         TheVerticalToolbarItemComponent,
-        TheIndentToolbarComponent
+        TheIndentToolbarComponent,
+        TheTableOptionsComponent
     ];
     var PLUGIN_COMPONENTS = [
         TheImageComponent,
@@ -14097,7 +14190,6 @@
         TheNumberedListComponent,
         TheCodeComponent,
         TheLinkComponent,
-        TheReadonlyLinkComponent,
         TheLinkEditComponent,
         TheLinkHoverComponent,
         TheTableToolbarComponent,
@@ -14131,7 +14223,8 @@
             TheTableToolbarItemComponent,
             TheConversionHintComponent,
             TheVerticalToolbarItemComponent,
-            TheIndentToolbarComponent, TheImageComponent,
+            TheIndentToolbarComponent,
+            TheTableOptionsComponent, TheImageComponent,
             TheTemplateComponent,
             TheHrComponent,
             TheBlockquoteComponent,
@@ -14141,23 +14234,22 @@
             TheNumberedListComponent,
             TheCodeComponent,
             TheLinkComponent,
-            TheReadonlyLinkComponent,
             TheLinkEditComponent,
             TheLinkHoverComponent,
             TheTableToolbarComponent,
             TheTableComponent,
             TheTableRowComponent,
             TheTdComponent,
-            TheInlineCodeComponent], imports: [i10.CommonModule, i1.SlateModule, i4$1.FormsModule, i4.ThyIconModule,
+            TheInlineCodeComponent], imports: [i10.CommonModule, i1.SlateModule, i4.FormsModule, i3.ThyIconModule,
             avatar.ThyAvatarModule,
-            i3.ThyNavModule,
-            i2$1.ThyFormModule,
-            i5$3.ThySharedModule,
-            i2$2.ThyListModule,
+            i3$1.ThyNavModule,
+            i2$2.ThyFormModule,
+            i5$2.ThySharedModule,
+            i2$3.ThyListModule,
             i5.ThyTooltipModule,
             i6.ThyProgressModule,
             autocomplete.ThyAutocompleteModule,
-            i5$2.ThyActionMenuModule,
+            i2$1.ThyActionMenuModule,
             i5$1.ThyInputModule,
             select.ThySelectModule,
             i1$5.ThyButtonModule,
@@ -14171,12 +14263,12 @@
                 useValue: TheToolbarGroupComponent
             },
             THE_CODE_MODE_PROVIDER
-        ], imports: [__spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4$1.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
+        ], imports: [__spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: __spreadArray(__spreadArray(__spreadArray([TheEditorComponent], __read(PIPES)), __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
-                        imports: __spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4$1.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
+                        imports: __spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
                         exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent],
                         entryComponents: __spreadArray(__spreadArray([], __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
                         providers: [
@@ -14271,8 +14363,6 @@
     exports.createEmptyParagraph = createEmptyParagraph;
     exports.dataDeserialize = dataDeserialize;
     exports.dataSerializing = dataSerializing;
-    exports.findNodeEntryByPoint = findNodeEntryByPoint;
-    exports.findRelativeElementByPoint = findRelativeElementByPoint;
     exports.getColsTotalWidth = getColsTotalWidth;
     exports.getElementClassByPrefix = getElementClassByPrefix;
     exports.getElementHeight = getElementHeight;