@worktile/theia 1.2.6 → 1.2.10

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('@angular/platform-browser'), require('rxjs'), require('ngx-tethys/progress'), require('ngx-tethys/icon'), require('ngx-tethys/input'), require('ngx-tethys/nav'), require('ngx-tethys/tooltip'), require('ng-codemirror'), require('ngx-tethys/notify'), require('ngx-tethys/action-menu'), 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/autocomplete'), require('ngx-tethys/avatar'), require('ngx-tethys/list'), 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', '@angular/platform-browser', 'rxjs', 'ngx-tethys/progress', 'ngx-tethys/icon', 'ngx-tethys/input', 'ngx-tethys/nav', 'ngx-tethys/tooltip', 'ng-codemirror', 'ngx-tethys/notify', 'ngx-tethys/action-menu', 'is-url', 'ngx-tethys/button', 'ngx-tethys/form', 'ngx-tethys/shared', 'ngx-tethys', '@angular/cdk/coercion', '@angular/cdk/portal', 'ngx-tethys/autocomplete', 'ngx-tethys/avatar', 'ngx-tethys/list', '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.ng.platformBrowser, global.rxjs, global.i4, global.i4$1, global.i5, global.i2$1, global.i5$1, global.i5$3, global.i1$4, global.i5$2, global.isUrl, global.i1$5, global.i2$2, global.i5$4, global.i1$6, global.ng.cdk.coercion, global.ng.cdk.portal, global.autocomplete, global.avatar, global.list, global.select));
-})(this, (function (exports, i0, i6, i4$2, i1, core, isHotkey, slate, slateHistory, _lodash, marked, selene, i1$2, i2, i1$1, operators, uploader, i1$3, rxjs, i4, i4$1, i5, i2$1, i5$1, i5$3, i1$4, i5$2, isUrl, i1$5, i2$2, i5$4, i1$6, coercion, portal, autocomplete, avatar, list, 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('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('@angular/platform-browser'), require('rxjs'), require('ngx-tethys/progress'), require('ngx-tethys/icon'), require('ngx-tethys/input'), require('ngx-tethys/nav'), require('ngx-tethys/tooltip'), require('ng-codemirror'), require('ngx-tethys/notify'), require('ngx-tethys/action-menu'), 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', '@angular/platform-browser', 'rxjs', 'ngx-tethys/progress', 'ngx-tethys/icon', 'ngx-tethys/input', 'ngx-tethys/nav', 'ngx-tethys/tooltip', 'ng-codemirror', 'ngx-tethys/notify', 'ngx-tethys/action-menu', '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.ng.platformBrowser, global.rxjs, global.i4, global.i4$1, global.i5, global.i2$1, global.i7, global.i5$2, global.i1$4, global.i5$1, global.isUrl, global.i1$5, global.i2$2, global.i5$3, global.i1$6, global.ng.cdk.coercion, global.ng.cdk.portal, global.i2$3, global.autocomplete, global.avatar, global.select));
+})(this, (function (exports, i0, i6, i4$2, i1, core, isHotkey, slate, slateHistory, _lodash, marked, selene, i1$2, i2, i1$1, operators, uploader, i1$3, rxjs, i4, i4$1, i5, i2$1, i7, i5$2, i1$4, i5$1, isUrl, i1$5, i2$2, i5$3, 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 }; }
 
@@ -39,15 +39,16 @@
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
-    var i5__namespace$3 = /*#__PURE__*/_interopNamespace(i5$3);
-    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var isUrl__default = /*#__PURE__*/_interopDefaultLegacy(isUrl);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
-    var i5__namespace$4 = /*#__PURE__*/_interopNamespace(i5$4);
+    var i5__namespace$3 = /*#__PURE__*/_interopNamespace(i5$3);
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
+    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -368,7 +369,7 @@
     }
 
     var PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
-    var PICTURE_ACCEPTED_UPLOAD_SIZE = 10;
+    var PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
     var A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
     var LINK_DEFAULT_TEXT = '链接';
     var TAB_SPACE = '    ';
@@ -433,7 +434,6 @@
     exports.ToolbarActionTypes = void 0;
     (function (ToolbarActionTypes) {
         ToolbarActionTypes["split"] = "split";
-        ToolbarActionTypes["save"] = "save";
         ToolbarActionTypes["undo"] = "undo";
         ToolbarActionTypes["redo"] = "redo";
         ToolbarActionTypes["paintformat"] = "paintformat";
@@ -475,12 +475,17 @@
     var BLOCK_DELETEBACKWARD_TYPES = [exports.ElementKinds.tableCell];
 
     var TheToolbarGroupToken = new i0.InjectionToken('the-toolbar-group-token');
-    var BLOCK_TOOLBAR_HOTKEY = '/';
+    var QUICK_TOOLBAR_HOTKEY = '/';
     exports.DropdownMode = void 0;
     (function (DropdownMode) {
         DropdownMode["icon"] = "icon-mode";
         DropdownMode["text"] = "text-mode";
     })(exports.DropdownMode || (exports.DropdownMode = {}));
+    exports.ToolbarItemMode = void 0;
+    (function (ToolbarItemMode) {
+        ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
+        ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
+    })(exports.ToolbarItemMode || (exports.ToolbarItemMode = {}));
     var DefaultGlobalToolbarDefinition = [
         exports.ElementKinds.headingList,
         exports.ToolbarActionTypes.split,
@@ -497,6 +502,7 @@
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.numberedList,
         exports.ElementKinds.bulletedList,
+        exports.ElementKinds.checkItem,
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.link,
         exports.ElementKinds.image,
@@ -504,8 +510,34 @@
         exports.ElementKinds.blockquote,
         exports.ElementKinds.code
     ];
-    var DefaultInlineToolbarDefinition = [];
-    var DefaultBlockToolbarDefinition = [exports.ElementKinds.image];
+    var DefaultInlineToolbarDefinition = [
+        exports.ToolbarActionTypes.clean,
+        exports.ToolbarActionTypes.split,
+        exports.MarkTypes.bold,
+        exports.MarkTypes.italic,
+        exports.MarkTypes.underline,
+        exports.MarkTypes.strike,
+        exports.MarkTypes.codeLine,
+        exports.MarkTypes.color,
+        exports.MarkTypes.backgroundColor,
+        exports.ToolbarActionTypes.split,
+        exports.ToolbarActionTypes.alignType,
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.link
+    ];
+    var DefaultQuickToolbarDefinition = __spreadArray(__spreadArray([], __read(STANDARD_HEADING_TYPES)), [
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.numberedList,
+        exports.ElementKinds.bulletedList,
+        exports.ElementKinds.checkItem,
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.link,
+        exports.ElementKinds.image,
+        exports.ElementKinds.table,
+        exports.ElementKinds.blockquote,
+        exports.ElementKinds.hr,
+        exports.ElementKinds.code
+    ]);
     var ToolbarMoreGroup = {
         key: 'more',
         icon: 'more'
@@ -585,20 +617,20 @@
             value: 'htmlmixed'
         }
     ];
-    var EditorMode = {
+    var CodeMode = {
         default: 'default',
         print: 'print'
     };
-    var TheEditorConfig = /** @class */ (function () {
-        function TheEditorConfig() {
+    var TheCodeMode = /** @class */ (function () {
+        function TheCodeMode() {
         }
-        return TheEditorConfig;
+        return TheCodeMode;
     }());
-    var THE_EDITOR_CONFIG_TOKEN = new i0.InjectionToken('the-editor-config');
-    var THE_EDITOR_CONFIG_PROVIDER = {
-        provide: THE_EDITOR_CONFIG_TOKEN,
+    var THE_CODE_MODE_TOKEN = new i0.InjectionToken('the-code-mode');
+    var THE_CODE_MODE_PROVIDER = {
+        provide: THE_CODE_MODE_TOKEN,
         useValue: {
-            mode: EditorMode.default
+            mode: CodeMode.default
         }
     };
     var CODEMIRROR_PADDING_TOP = 10;
@@ -699,6 +731,73 @@
                     }]
             }] });
 
+    var TheEditor = Object.assign({}, i1.AngularEditor);
+    exports.TheDataMode = void 0;
+    (function (TheDataMode) {
+        TheDataMode["json"] = "json";
+        TheDataMode["html"] = "html";
+    })(exports.TheDataMode || (exports.TheDataMode = {}));
+
+    exports.ToolbarItemType = void 0;
+    (function (ToolbarItemType) {
+        ToolbarItemType["default"] = "default";
+        ToolbarItemType["toolDropdown"] = "tool-dropdown";
+    })(exports.ToolbarItemType || (exports.ToolbarItemType = {}));
+    exports.ToolbarAlignment = void 0;
+    (function (ToolbarAlignment) {
+        ToolbarAlignment["left"] = "start";
+        ToolbarAlignment["center"] = "center";
+        ToolbarAlignment["right"] = "end";
+    })(exports.ToolbarAlignment || (exports.ToolbarAlignment = {}));
+
+    var THE_UPLOAD_SERVICE_TOKEN = new i0.InjectionToken('THE_UPLOAD_SERVICE_TOKEN');
+
+    var inValidTypes = [
+        exports.ElementKinds.table,
+        exports.ElementKinds.tableCell,
+        exports.ElementKinds.blockquote,
+        exports.ElementKinds.hr,
+        exports.ElementKinds.code
+    ];
+    var DefaultElementOptions = [
+        {
+            type: exports.ElementKinds.bulletedList,
+            inValidChildrenTypes: __spreadArray(__spreadArray([], __read(inValidTypes)), __read(HEADING_TYPES))
+        },
+        {
+            type: exports.ElementKinds.numberedList,
+            inValidChildrenTypes: __spreadArray(__spreadArray([], __read(inValidTypes)), __read(HEADING_TYPES))
+        },
+        {
+            type: exports.ElementKinds.listItem,
+            inValidChildrenTypes: __spreadArray(__spreadArray([], __read(inValidTypes)), __read(HEADING_TYPES))
+        },
+        {
+            type: exports.ElementKinds.blockquote,
+            inValidChildrenTypes: inValidTypes
+        },
+        {
+            type: exports.ElementKinds.table,
+            inValidChildrenTypes: [exports.ElementKinds.table]
+        },
+        {
+            type: exports.ElementKinds.tableCell,
+            inValidChildrenTypes: [exports.ElementKinds.table, exports.ElementKinds.tableCell]
+        }
+    ];
+
+    function idCreator(length) {
+        if (length === void 0) { length = 5; }
+        // remove numeral
+        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+        var maxPosition = $chars.length;
+        var key = '';
+        for (var i = 0; i < length; i++) {
+            key += $chars.charAt(Math.floor(Math.random() * maxPosition));
+        }
+        return key;
+    }
+
     var isAncestor = function (node) { return slate.Element.isElement(node) || slate.Editor.isEditor(node); };
 
     var getLastChild$1 = function (node, level) {
@@ -1317,6 +1416,7 @@
         return fragment;
     };
     var extractFragment = function (data, deleteKey) {
+        if (deleteKey === void 0) { deleteKey = ELEMENT_UNIQUE_ID; }
         var fragment = data.getData("application/" + CLIPBOARD_FORMAT_KEY);
         if (fragment) {
             var decoded = decodeURIComponent(window.atob(fragment));
@@ -1474,13 +1574,14 @@
     var getContainerBlocks = function (editor) {
         var containerNode = slate.Editor.above(editor, {
             match: function (node) {
-                return slate.Element.isElement(node) && TheEditor.isContainer(editor, node) && !CONTAINER_BLOCKS.includes(node.type);
+                return slate.Element.isElement(node) && isContainer(editor, node) && !CONTAINER_BLOCKS.includes(node.type);
             }
         });
         return !containerNode ? CONTAINER_BLOCKS : __spreadArray(__spreadArray([], __read(CONTAINER_BLOCKS)), [containerNode[0].type]);
     };
 
-    var TheQueries = {
+    var index$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         getLastNode: getLastNode,
         getAnchorBlockEntry: getAnchorBlockEntry,
         getAboveByType: getAboveByType,
@@ -1536,7 +1637,7 @@
         findNode: findNode,
         findDescendant: findDescendant,
         someNode: someNode
-    };
+    });
 
     var setMarks = function (editor, marks, at) {
         slate.Transforms.setNodes(editor, marks, {
@@ -1572,8 +1673,8 @@
         if (slate.Range.isExpanded(editor.selection)) {
             slate.Editor.deleteFragment(editor);
         }
-        var anchorBlockPath = TheQueries.anchorBlockEntry(editor)[1];
-        var isEmpty = TheQueries.isEmptyParagraph(editor);
+        var anchorBlockPath = anchorBlockEntry(editor)[1];
+        var isEmpty = isEmptyParagraph(editor);
         var nextPath = slate.Path.next([anchorBlockPath[0]]);
         slate.Transforms.insertNodes(editor, node, { at: nextPath });
         if (isEmpty && anchorBlockPath.length === 1) {
@@ -1586,7 +1687,7 @@
     };
 
     var setNode = function (editor, props, origin) {
-        slate.Transforms.setNodes(editor, props, { at: TheQueries.findPath(editor, origin) });
+        slate.Transforms.setNodes(editor, props, { at: findPath(editor, origin) });
     };
 
     /**
@@ -1608,7 +1709,7 @@
                 rules.forEach(function (_a) {
                     var types = _a.types, defaultType = _a.defaultType, hotkey = _a.hotkey, predicate = _a.predicate, onReset = _a.onReset;
                     if (!event || (hotkey && isHotkey__default["default"](hotkey, event))) {
-                        if (predicate(editor) && TheQueries.isNodeTypeIn(editor, types)) {
+                        if (predicate(editor) && isNodeTypeIn(editor, types)) {
                             if (event !== null) {
                                 event.preventDefault();
                             }
@@ -1635,7 +1736,7 @@
             return moved;
         for (var i = parentNode.children.length - 1; i >= start; i--) {
             var childPath = __spreadArray(__spreadArray([], __read(parentPath)), [i]);
-            var childNode = TheQueries.getNode(editor, childPath);
+            var childNode = getNode(editor, childPath);
             if (!match || (childNode && match([childNode, childPath]))) {
                 slate.Transforms.moveNodes(editor, { at: childPath, to: to });
                 moved++;
@@ -1644,18 +1745,6 @@
         return moved;
     };
 
-    function idCreator(length) {
-        if (length === void 0) { length = 5; }
-        // remove numeral
-        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
-        var maxPosition = $chars.length;
-        var key = '';
-        for (var i = 0; i < length; i++) {
-            key += $chars.charAt(Math.floor(Math.random() * maxPosition));
-        }
-        return key;
-    }
-
     var createEmptyParagraph = function () {
         return {
             type: exports.ElementKinds.paragraph,
@@ -1678,7 +1767,7 @@
     var applyDeepToNodes = function (_a) {
         var node = _a.node, source = _a.source, apply = _a.apply, query = _a.query;
         var entry = [node, []];
-        if (TheQueries.isNodeType(entry, query)) {
+        if (isNodeType(entry, query)) {
             if (source instanceof Function) {
                 apply(node, source());
             }
@@ -1686,7 +1775,7 @@
                 apply(node, source);
             }
         }
-        if (!TheQueries.isAncestor(node)) {
+        if (!isAncestor(node)) {
             return;
         }
         node.children.forEach(function (child) {
@@ -1713,7 +1802,7 @@
 
     var splitNode = function (editor, indivisibleTypes) {
         var selection = editor.selection;
-        var indivisibleType = indivisibleTypes && indivisibleTypes.find(function (item) { return TheQueries.getAboveByType(editor, item, { mode: 'highest' }); });
+        var indivisibleType = indivisibleTypes && indivisibleTypes.find(function (item) { return getAboveByType(editor, item, { mode: 'highest' }); });
         var splitPath;
         if (!indivisibleType) {
             slate.Transforms.splitNodes(editor, {
@@ -1728,7 +1817,7 @@
                 mode: 'highest',
                 match: function (data) {
                     if (data.type && !indivisibleTypes.includes(data.type)) {
-                        var _a = __read(TheQueries.getNodesByType(editor, data.type, { at: selection }), 1), node = _a[0];
+                        var _a = __read(getNodesByType(editor, data.type, { at: selection }), 1), node = _a[0];
                         var parentNode = slate.Editor.parent(editor, node[1]);
                         if (indivisibleTypes.includes(parentNode[0].type)) {
                             splitPath = node[1];
@@ -1742,7 +1831,7 @@
     };
 
     var deleteElement = function (editor, element) {
-        var at = TheQueries.findPath(editor, element);
+        var at = findPath(editor, element);
         slate.Transforms.insertNodes(editor, createEmptyParagraph(), { at: at });
         i1.AngularEditor.focus(editor);
         slate.Transforms.select(editor, at);
@@ -1760,11 +1849,11 @@
         if (slate.Range.isExpanded(editor.selection)) {
             slate.Editor.deleteFragment(editor);
         }
-        var isEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
+        var isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
         var parentPath = slate.Path.parent(editor.selection.anchor.path);
         slate.Editor.withoutNormalizing(editor, function () {
             slate.Transforms.insertNodes(editor, nodes);
-            if (parentPath.length && isEmptyParagraph) {
+            if (parentPath.length && isEmptyParagraph$1) {
                 slate.Transforms.delete(editor, { at: parentPath });
                 var lastPath = parentPath.pop();
                 slate.Transforms.select(editor, slate.Editor.end(editor, __spreadArray(__spreadArray([], __read(parentPath)), [lastPath + nodes.length - 1])));
@@ -1778,6 +1867,7 @@
 
     var THE_EDITOR_UUID = new WeakMap();
     var THE_EDITOR_CONVERSION_HINT_REF = new WeakMap();
+    var THE_EDITOR_QUICK_TOOLBAR_REF = new WeakMap();
 
     var closeConversionHint = function (editor) {
         var hintRef = THE_EDITOR_CONVERSION_HINT_REF.get(editor);
@@ -1786,7 +1876,44 @@
         }
     };
 
-    var TheTransforms = {
+    function handleContinualDeleteBackward(editor, aboveResult, type) {
+        var highestBlock = aboveResult[0];
+        var lowestBlock = anchorBlock(editor);
+        var wrapBlockType = highestBlock.type;
+        if (lowestBlock && slate.Editor.isStart(editor, editor.selection.anchor, aboveResult[1])) {
+            if (wrapBlockType === type) {
+                if (highestBlock.children[0] === lowestBlock) {
+                    unWrap(editor, wrapBlockType);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    function handleContinualInsertBreak(editor, lowestBlock, type) {
+        var isEmpty = slate.Editor.isEmpty(editor, lowestBlock);
+        var isEnd = slate.Editor.isEnd(editor, editor.selection.anchor, editor.selection.focus.path);
+        var aboveResult = slate.Editor.above(editor, {
+            match: function (n) { return slate.Editor.isBlock(editor, n) && n.type === type; }
+        });
+        if (isEnd) {
+            editor.marks = {};
+        }
+        if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
+            var wrapBlock = aboveResult[0];
+            if (wrapBlock.type === type) {
+                if (wrapBlock.children[wrapBlock.children.length - 1] === lowestBlock) {
+                    unWrap(editor, wrapBlock.type);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    var index = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         setMarks: setMarks,
         clearMarks: clearMarks,
         insertElement: insertElement,
@@ -1803,57 +1930,10 @@
         deleteElement: deleteElement,
         setEndSelection: setEndSelection,
         insertTheElements: insertTheElements,
-        closeConversionHint: closeConversionHint
-    };
-
-    var TheEditor = Object.assign(Object.assign(Object.assign({}, i1.AngularEditor), TheQueries), TheTransforms);
-    exports.TheDataMode = void 0;
-    (function (TheDataMode) {
-        TheDataMode["json"] = "json";
-        TheDataMode["html"] = "html";
-    })(exports.TheDataMode || (exports.TheDataMode = {}));
-
-    exports.ToolbarItemType = void 0;
-    (function (ToolbarItemType) {
-        ToolbarItemType["default"] = "default";
-        ToolbarItemType["toolDropdown"] = "tool-dropdown";
-    })(exports.ToolbarItemType || (exports.ToolbarItemType = {}));
-    exports.ToolbarAlignment = void 0;
-    (function (ToolbarAlignment) {
-        ToolbarAlignment["left"] = "start";
-        ToolbarAlignment["center"] = "center";
-        ToolbarAlignment["right"] = "end";
-    })(exports.ToolbarAlignment || (exports.ToolbarAlignment = {}));
-
-    var THE_UPLOAD_SERVICE_TOKEN = new i0.InjectionToken('THE_UPLOAD_SERVICE_TOKEN');
-
-    var inValidTypes = [exports.ElementKinds.table, exports.ElementKinds.tableCell, exports.ElementKinds.blockquote, exports.ElementKinds.hr, exports.ElementKinds.code];
-    var DefaultElementOptions = [
-        {
-            type: exports.ElementKinds.bulletedList,
-            inValidChildrenTypes: __spreadArray(__spreadArray([], __read(inValidTypes)), __read(HEADING_TYPES))
-        },
-        {
-            type: exports.ElementKinds.numberedList,
-            inValidChildrenTypes: __spreadArray(__spreadArray([], __read(inValidTypes)), __read(HEADING_TYPES))
-        },
-        {
-            type: exports.ElementKinds.listItem,
-            inValidChildrenTypes: __spreadArray(__spreadArray([], __read(inValidTypes)), __read(HEADING_TYPES))
-        },
-        {
-            type: exports.ElementKinds.blockquote,
-            inValidChildrenTypes: inValidTypes
-        },
-        {
-            type: exports.ElementKinds.table,
-            inValidChildrenTypes: [exports.ElementKinds.table]
-        },
-        {
-            type: exports.ElementKinds.tableCell,
-            inValidChildrenTypes: [exports.ElementKinds.table, exports.ElementKinds.tableCell]
-        }
-    ];
+        closeConversionHint: closeConversionHint,
+        handleContinualDeleteBackward: handleContinualDeleteBackward,
+        handleContinualInsertBreak: handleContinualInsertBreak
+    });
 
     var isNodeTypeList = function (n) {
         return [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList].includes(n.type);
@@ -1924,8 +2004,8 @@
         },
         unwrapList: function (editor) {
             slate.Editor.withoutNormalizing(editor, function () {
-                TheTransforms.unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], { split: true, mode: 'all' });
-                TheTransforms.unwrapNodesByType(editor, [exports.ElementKinds.listItem], { split: true, mode: 'all' });
+                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) {
@@ -1943,11 +2023,11 @@
             });
         },
         isActive: function (editor, type) {
-            var _a = __read(TheQueries.getNodesByType(editor, type), 1), match = _a[0];
+            var _a = __read(getNodesByType(editor, type), 1), match = _a[0];
             return !!match;
         },
         getActiveList: function (editor) {
-            var _a = __read(TheQueries.getNodesByType(editor, LIST_BLOCK_TYPES), 1), match = _a[0];
+            var _a = __read(getNodesByType(editor, LIST_BLOCK_TYPES), 1), match = _a[0];
             return match;
         },
         buildListItem: function (editor) {
@@ -1991,7 +2071,7 @@
 
     var TodoItemEditor = {
         isActive: function (editor) {
-            var _a = __read(TheQueries.getNodesByType(editor, exports.ElementKinds.checkItem), 1), match = _a[0];
+            var _a = __read(getNodesByType(editor, exports.ElementKinds.checkItem), 1), match = _a[0];
             return !!match;
         },
         insertTodoItem: function (editor) {
@@ -2019,7 +2099,7 @@
 
     var BlockquoteEditor = {
         toggleBlockquote: function (editor) {
-            if (!TheQueries.isParagraph(editor)) {
+            if (!isParagraph(editor)) {
                 slate.Transforms.insertNodes(editor, {
                     type: exports.ElementKinds.paragraph,
                     mode: 'text',
@@ -2030,7 +2110,7 @@
                     ]
                 });
             }
-            var isActive = TheQueries.isBlockActive(editor, exports.ElementKinds.blockquote);
+            var isActive = isBlockActive(editor, exports.ElementKinds.blockquote);
             if (!isActive) {
                 slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.blockquote, children: [] }, {
                     mode: 'lowest'
@@ -2119,7 +2199,7 @@
             type: exports.ElementKinds.listItem,
             markup: [],
             match: function (editor) {
-                return TheQueries.isParagraph(editor) ? ['*', '-', '+'] : [];
+                return isParagraph(editor) ? ['*', '-', '+'] : [];
             },
             format: function (editor) {
                 ListEditor.toggleList(editor, exports.ElementKinds.bulletedList);
@@ -2129,7 +2209,7 @@
             type: exports.ElementKinds.listItem,
             markup: [],
             match: function (editor, textFromBlockStart) {
-                return TheQueries.isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
+                return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
             },
             format: function (editor, markup) {
                 var startIndex = 1;
@@ -2146,7 +2226,7 @@
             type: exports.ElementKinds.checkItem,
             markup: [],
             match: function (editor) {
-                return TheQueries.isParagraph(editor) ? ['[]'] : [];
+                return isParagraph(editor) ? ['[]'] : [];
             },
             format: function (editor) {
                 TodoItemEditor.insertTodoItem(editor);
@@ -2209,7 +2289,7 @@
             var _this = this;
             this.closeTimer = setInterval(function () {
                 clearInterval(_this.closeTimer);
-                TheTransforms.closeConversionHint(_this.editor);
+                closeConversionHint(_this.editor);
             }, this.duration);
         };
         TheConversionHintComponent.prototype.clearCloseTimer = function () {
@@ -2300,7 +2380,7 @@
     var withDeserializeMd = function (options) { return function (editor) {
         var insertData = editor.insertData, onKeydown = editor.onKeydown;
         editor.onKeydown = function (event) {
-            TheTransforms.closeConversionHint(editor);
+            closeConversionHint(editor);
             onKeydown(event);
         };
         editor.insertData = function (data) {
@@ -2310,7 +2390,7 @@
             var plainFragment = data.getData('text/plain');
             var slateFragment = data.getData("application/" + CLIPBOARD_FORMAT_KEY);
             var oldRange = editor.selection;
-            TheTransforms.closeConversionHint(editor);
+            closeConversionHint(editor);
             if (plainFragment && isMarkdownStynx(plainFragment) && !slateFragment) {
                 setTimeout(function () {
                     var overlay = editor.injector.get(i2.Overlay);
@@ -2328,11 +2408,11 @@
                                     var htmlDom = new DOMParser().parseFromString(html, 'text/html');
                                     var fragment_1 = selene.TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
                                     if (!isUnformatted(fragment_1)) {
-                                        TheTransforms.closeConversionHint(editor);
+                                        closeConversionHint(editor);
                                         editor.undo();
                                         setTimeout(function () {
                                             slate.Transforms.select(editor, oldRange);
-                                            TheTransforms.insertTheElements(editor, fragment_1);
+                                            insertTheElements(editor, fragment_1);
                                             i1.AngularEditor.focus(editor);
                                         });
                                         return;
@@ -2410,13 +2490,13 @@
                 allElementOptions = Object.values(extraInfo);
             }
             var indivisibleTypes = allElementOptions.filter(function (item) { return item.isIndivisible; }).map(function (item) { return item.type; });
-            var fragment = extractFragment(data, ELEMENT_UNIQUE_ID);
+            var fragment = extractFragment(data);
             if (fragment) {
-                if (TheQueries.isAcrossBlocks(editor, fragment) || slate.Editor.isVoid(editor, fragment[0])) {
+                if (isAcrossBlocks(editor, fragment) || slate.Editor.isVoid(editor, fragment[0])) {
                     var selection = editor.selection;
                     var _b = __read(slate.Editor.edges(editor, selection), 1), start_1 = _b[0];
                     // query whether there is a node to be verified
-                    var tryVerifyNode_1 = allElementOptions.find(function (item) { return TheQueries.getAboveByType(editor, item.type, { at: start_1, mode: 'lowest' }); });
+                    var tryVerifyNode_1 = allElementOptions.find(function (item) { return getAboveByType(editor, item.type, { at: start_1, mode: 'lowest' }); });
                     if (tryVerifyNode_1) {
                         // is exist invalid element type in fragment
                         var invalidIndex = fragment.findIndex(function (item) { return tryVerifyNode_1.inValidChildrenTypes.includes(item.type); });
@@ -2430,7 +2510,7 @@
                                     });
                                 }
                                 // split node
-                                var path = TheTransforms.splitNode(editor, indivisibleTypes);
+                                var path = splitNode(editor, indivisibleTypes);
                                 slate.Transforms.insertNodes(editor, invalidFragmentData_1, {
                                     at: slate.Path.next(path)
                                 });
@@ -2439,10 +2519,10 @@
                         }
                     }
                     slate.Editor.withoutNormalizing(editor, function () {
-                        var isEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
+                        var isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
                         var emptyPath = slate.Path.parent(editor.selection.anchor.path);
                         slate.Transforms.insertNodes(editor, fragment);
-                        if (isEmptyParagraph) {
+                        if (isEmptyParagraph$1) {
                             slate.Transforms.delete(editor, { at: emptyPath });
                             var lastPath = emptyPath.pop();
                             slate.Transforms.select(editor, __spreadArray(__spreadArray([], __read(emptyPath)), [lastPath + fragment.length - 1]));
@@ -2483,16 +2563,16 @@
         var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward;
         editor.deleteBackward = function (unit) {
             var selection = editor.selection;
-            var anchorBlock = TheQueries.anchorBlock(editor);
-            if (!anchorBlock) {
+            var anchorBlock$1 = anchorBlock(editor);
+            if (!anchorBlock$1) {
                 deleteBackward(unit);
                 return;
             }
             // delete empty paragraphs or empty headings, the default operation is to delete before the void node
             var parentPath = slate.Path.parent(editor.selection.anchor.path);
-            var isEmptyHeading = HEADING_TYPES.includes(anchorBlock.type) && slate.Editor.isEmpty(editor, anchorBlock);
-            var isEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
-            if ((isEmptyParagraph || isEmptyHeading) &&
+            var isEmptyHeading = HEADING_TYPES.includes(anchorBlock$1.type) && slate.Editor.isEmpty(editor, anchorBlock$1);
+            var isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
+            if ((isEmptyParagraph$1 || isEmptyHeading) &&
                 parentPath[parentPath.length - 1] > 0 &&
                 slate.Editor.isVoid(editor, slate.Node.get(editor, slate.Path.previous(parentPath)))) {
                 slate.Transforms.delete(editor, { at: editor.selection.anchor.path.slice(0, editor.selection.anchor.path.length - 1) });
@@ -2513,10 +2593,10 @@
             deleteBackward(unit);
         };
         editor.deleteForward = function (unit) {
-            var anchorBlockEntry = TheQueries.anchorBlockEntry(editor);
-            if (anchorBlockEntry &&
-                TheQueries.isAncestorEmpty(editor, anchorBlockEntry[0]) &&
-                TheQueries.getNode(editor, slate.Path.next(anchorBlockEntry[1]))) {
+            var anchorBlockEntry$1 = anchorBlockEntry(editor);
+            if (anchorBlockEntry$1 &&
+                isAncestorEmpty(editor, anchorBlockEntry$1[0]) &&
+                getNode(editor, slate.Path.next(anchorBlockEntry$1[1]))) {
                 var pathRef = slate.Editor.pathRef(editor, slate.Path.parent(editor.selection.anchor.path));
                 slateHistory.HistoryEditor.withoutMerging(editor, function () {
                     slate.Transforms.move(editor);
@@ -2534,7 +2614,7 @@
         editor.onKeydown = function (event) {
             var selection = editor.selection;
             if (i1.IS_SAFARI && selection && slate.Range.isCollapsed(selection) && i1.hotkeys.isDeleteBackward(event)) {
-                var blockEntry = TheQueries.getAboveByType(editor, BLOCK_DELETEBACKWARD_TYPES);
+                var blockEntry = getAboveByType(editor, BLOCK_DELETEBACKWARD_TYPES);
                 if (blockEntry && blockEntry[0]) {
                     var isStart = slate.Editor.isStart(editor, selection.anchor, blockEntry[1]);
                     if (isStart) {
@@ -2558,6 +2638,7 @@
         function TheContextService(ngZone) {
             var _this = this;
             this.ngZone = ngZone;
+            this.fileList = [];
             this.paintFormatStatus = {
                 isActive: false,
                 marks: {}
@@ -2573,10 +2654,16 @@
         };
         TheContextService.prototype.getOptions = function () {
             if (!this.options.width) {
-                this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').offsetWidth - 30;
+                this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').firstElementChild.offsetWidth;
             }
             return this.options;
         };
+        TheContextService.prototype.setUploadFileList = function (file) {
+            this.fileList.push(file);
+        };
+        TheContextService.prototype.removeUploadImage = function (file) {
+            this.fileList.splice(this.fileList.findIndex(function (item) { return item.file === file; }), 1);
+        };
         return TheContextService;
     }());
     TheContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheContextService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -2601,7 +2688,6 @@
             _this.beforeContextChange = function (value) {
                 if (value.element !== _this.element && value.element.thumbUrl) {
                     _this.imageEntry = {
-                        file: undefined,
                         name: value.element.name,
                         width: value.element.width,
                         height: value.element.height,
@@ -2614,8 +2700,11 @@
             return _this;
         }
         TheImageComponent.prototype.ngOnInit = function () {
-            if (this.element.file instanceof File) {
-                this.uploadImage(this.element.file);
+            var _this = this;
+            var _a;
+            this.file = (_a = this.theContextService.fileList.find(function (item) { return item.url === _this.element.url; })) === null || _a === void 0 ? void 0 : _a.file;
+            if (this.file && this.file instanceof File) {
+                this.uploadImage(this.file);
             }
             _super.prototype.ngOnInit.call(this);
         };
@@ -2629,7 +2718,7 @@
             this.mouseUpSubscription = this.theContextService.onMouseUp$.subscribe(function (e) { return _this.endDrag(e); });
             this.uploadingSubscription = this.imageUploaderService
                 .getUploadingItems$()
-                .pipe(operators.map(function (fileUploadingItem) { return _this.element.file && fileUploadingItem.find(function (item) { return item.file === _this.element.file; }); }))
+                .pipe(operators.map(function (fileUploadingItem) { return _this.file && fileUploadingItem.find(function (item) { return item.file === _this.file; }); }))
                 .subscribe(function (uploadingItem) {
                 if (!uploadingItem || !uploadingItem.result) {
                     return;
@@ -2644,13 +2733,13 @@
         };
         TheImageComponent.prototype.uploadImage = function (file) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, width, height, _b, uploadFileEntity, path, thumbUrl, originUrl, imageInfo;
+                var _b, width, height, _c, uploadFileEntity, path, thumbUrl, originUrl, imageInfo;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0: return [4 /*yield*/, this.resolveImageSize(file, this.theContextService.getOptions().width)];
                         case 1:
-                            _a = _c.sent(), width = _a.width, height = _a.height;
+                            _b = _d.sent(), width = _b.width, height = _b.height;
                             this.imageEntry = {
                                 height: height,
                                 width: width,
@@ -2659,7 +2748,7 @@
                             this.uploading = true;
                             return [4 /*yield*/, this.imageUploaderService.uploadFileHandle([file]).toPromise()];
                         case 2:
-                            _b = __read.apply(void 0, [_c.sent(), 1]), uploadFileEntity = _b[0];
+                            _c = __read.apply(void 0, [_d.sent(), 1]), uploadFileEntity = _c[0];
                             path = i1.AngularEditor.findPath(this.editor, this.element);
                             thumbUrl = uploadFileEntity.thumbUrl, originUrl = uploadFileEntity.originUrl;
                             imageInfo = {
@@ -2668,10 +2757,9 @@
                                 height: this.imageEntry.height,
                                 thumbUrl: thumbUrl,
                                 originUrl: originUrl,
-                                align: this.imageEntry.align || exports.Alignment.center,
-                                file: undefined
+                                align: this.imageEntry.align || exports.Alignment.center
                             };
-                            slateHistory.HistoryEditor.withoutSaving(this.editor, function () { return slate.Transforms.setNodes(_this.editor, Object.assign({ type: exports.ElementKinds.image, voids: true }, imageInfo), { at: path }); });
+                            slateHistory.HistoryEditor.withoutSaving(this.editor, function () { return slate.Transforms.setNodes(_this.editor, Object.assign({ type: exports.ElementKinds.image, url: null }, imageInfo), { at: path }); });
                             return [2 /*return*/];
                     }
                 });
@@ -2719,7 +2807,7 @@
                 if (this.element.align === 'center') {
                     offsetX = offsetX * 2;
                 }
-                var _a = this.element, width = _a.width, height = _a.height;
+                var _b = this.element, width = _b.width, height = _b.height;
                 if (axis.includes('x')) {
                     width = offsetX + internalWidth;
                     if (width >= maxWidth) {
@@ -2756,7 +2844,7 @@
             if (this.dragable) {
                 this.dragable = false;
                 this.mouseMoveSubscription.unsubscribe();
-                slate.Transforms.setNodes(this.editor, Object.assign({ type: exports.ElementKinds.image, voids: true }, this.imageEntry), { at: this.selection });
+                slate.Transforms.setNodes(this.editor, Object.assign({ type: exports.ElementKinds.image }, this.imageEntry), { at: this.selection });
             }
         };
         TheImageComponent.prototype.cancelUpload = function (event) {
@@ -2771,7 +2859,7 @@
         return TheImageComponent;
     }(TheBaseElementComponent));
     TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\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>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\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", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2803,6 +2891,7 @@
         },
         insertImages: function (editor, imageFiles) {
             var e_1, _a;
+            var contextService = editor.injector.get(TheContextService);
             var imageNodes = [];
             var text = { text: '' };
             try {
@@ -2811,7 +2900,11 @@
                     var verify = ImageEditor.verifyImage(editor, image);
                     if (verify) {
                         var url = URL.createObjectURL(image);
-                        imageNodes.push({ type: exports.ElementKinds.image, url: url, file: image, children: [text] });
+                        contextService.setUploadFileList({
+                            url: url,
+                            file: image
+                        });
+                        imageNodes.push({ type: exports.ElementKinds.image, url: url, children: [text] });
                     }
                 }
             }
@@ -2825,7 +2918,7 @@
             if (imageNodes.length > 0) {
                 var at = editor.selection;
                 slate.Transforms.insertNodes(editor, imageNodes, { at: at });
-                if (TheQueries.isCollapsed(editor.selection) && TheQueries.isEmptyParagraph(editor)) {
+                if (isCollapsed(editor.selection) && isEmptyParagraph(editor)) {
                     slate.Transforms.removeNodes(editor, { at: at });
                     slate.Transforms.select(editor, at);
                 }
@@ -2848,7 +2941,7 @@
         },
         isImageActive: function (editor) {
             var _a = __read(slate.Editor.nodes(editor, {
-                match: function (n) { return slate.Element.isElement(n) && n.type === 'image'; },
+                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.image; },
                 universal: true
             }), 1), match = _a[0];
             return !!match;
@@ -2862,7 +2955,6 @@
         };
         editor.insertData = function (data) {
             var e_1, _a;
-            // TODO:: 底层有点问题,粘贴多张图片时只能识别一张
             if (data.files.length) {
                 var imageFiles = [];
                 try {
@@ -2987,7 +3079,7 @@
 
     var isInList = function (editor, at) {
         if (at === void 0) { at = editor.selection; }
-        return TheQueries.isNodeTypeIn(editor, [exports.ElementKinds.numberedList, exports.ElementKinds.bulletedList], { at: at });
+        return isNodeTypeIn(editor, [exports.ElementKinds.numberedList, exports.ElementKinds.bulletedList], { at: at });
     };
 
     /**
@@ -3002,13 +3094,19 @@
         return [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList];
     };
 
+    /**
+     * 获取 List 中 ListItems，过滤掉空列表嵌套
+     * @param node
+     * @param initialValue
+     * @returns
+     */
     var getStartListItem = function (node, initialValue) {
         if (!initialValue) {
             initialValue = [];
         }
         if (node) {
             return node.reduce(function (result, current) {
-                if (current.type == exports.ElementKinds.listItem && current.children[0].type === exports.ElementKinds.default) {
+                if ((current.type === exports.ElementKinds.listItem && !getListTypes().includes(current.children[0].type))) {
                     result.push(current);
                 }
                 else {
@@ -3057,18 +3155,18 @@
      */
     var getListItemEntry = function (editor, _a) {
         var _b = _a === void 0 ? {} : _a, _c = _b.at, at = _c === void 0 ? editor.selection : _c;
-        if (at && TheQueries.isNodeTypeIn(editor, exports.ElementKinds.listItem, { at: at })) {
-            var selectionParent = TheQueries.getParent(editor, at);
+        if (at && isNodeTypeIn(editor, exports.ElementKinds.listItem, { at: at })) {
+            var selectionParent = getParent(editor, at);
             if (!selectionParent)
                 return;
             var _d = __read(selectionParent, 2), paragraphPath = _d[1];
-            var listItem = TheQueries.getAboveByType(editor, exports.ElementKinds.listItem, { at: at }) || TheQueries.getParent(editor, paragraphPath);
+            var listItem = getAboveByType(editor, exports.ElementKinds.listItem, { at: at }) || getParent(editor, paragraphPath);
             if (!listItem)
                 return;
             var _e = __read(listItem, 2), listItemNode = _e[0], listItemPath = _e[1];
             if (listItemNode.type !== exports.ElementKinds.listItem)
                 return;
-            var list = TheQueries.getParent(editor, listItemPath);
+            var list = getParent(editor, listItemPath);
             if (!list || !isList(list[0]))
                 return;
             return {
@@ -3082,9 +3180,9 @@
      * Is the selection focus at the start of its parent block.
      */
     var isSelectionAtListItemStart = function (editor) {
-        var listItemEntry = TheQueries.getAboveByType(editor, [exports.ElementKinds.listItem]);
+        var listItemEntry = getAboveByType(editor, [exports.ElementKinds.listItem]);
         if (listItemEntry) {
-            return TheQueries.isStart(editor, editor.selection.focus, listItemEntry[1]);
+            return isStart(editor, editor.selection.focus, listItemEntry[1]);
         }
         return false;
     };
@@ -3094,7 +3192,7 @@
         var children = fromList.children;
         var _b = __read(toListItemEntry, 2), toListItem = _b[0], toListItemPath = _b[1];
         var nextListItemPath = slate.Path.next(toListItemPath);
-        var toListItemIsEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
+        var toListItemIsEmptyParagraph = isEmptyParagraph(editor, editor.selection.anchor);
         var hasSubList = hasListInListItem(toListItem);
         var selectPath = __spreadArray([], __read(toListItemPath));
         var liIndex = selectPath.pop();
@@ -3166,7 +3264,7 @@
         var list = _a.list, listItem = _a.listItem;
         var _b = __read(list, 2), listNode = _b[0], listPath = _b[1];
         var _c = __read(listItem, 2), listItemPath = _c[1];
-        var listParentEntry = TheQueries.getParent(editor, listPath);
+        var listParentEntry = getParent(editor, listPath);
         if (!listParentEntry)
             return;
         var _d = __read(listParentEntry, 2), listParentNode = _d[0], listParentPath = _d[1];
@@ -3215,8 +3313,8 @@
                     type: exports.ElementKinds.listItem,
                     children: []
                 }, { at: nextPath });
-                var moveStartPath = TheQueries.findPath(editor, behindNode[0]);
-                var moveEndPath = TheQueries.findPath(editor, behindNode[behindNode.length - 1]);
+                var moveStartPath = findPath(editor, behindNode[0]);
+                var moveEndPath = findPath(editor, behindNode[behindNode.length - 1]);
                 var moveRange = slate.Editor.range(editor, moveStartPath, moveEndPath);
                 slate.Transforms.moveNodes(editor, {
                     at: moveRange,
@@ -3238,8 +3336,8 @@
      * Insert list item if selection in li>p.
      */
     var insertListItem = function (editor) {
-        if (editor.selection && !TheQueries.isRangeAtRoot(editor.selection)) {
-            var paragraphEntry = TheQueries.getAboveByType(editor, exports.ElementKinds.paragraph);
+        if (editor.selection && !isRangeAtRoot(editor.selection)) {
+            var paragraphEntry = getAboveByType(editor, exports.ElementKinds.paragraph);
             if (!paragraphEntry) {
                 return;
             }
@@ -3251,7 +3349,7 @@
             if (!slate.Range.isCollapsed(editor.selection)) {
                 slate.Transforms.delete(editor);
             }
-            var isEnd = TheQueries.isBlockTextEmptyAfterSelection(editor);
+            var isEnd = isBlockTextEmptyAfterSelection(editor);
             var nextNodePath_1 = slate.Path.next(paragraphPath);
             var nextListItemPath_1 = slate.Path.next(listItemPath);
             var nextEnd = slate.Editor.end(editor, listItemPath);
@@ -3286,7 +3384,7 @@
             /**
              * If there is a list in the list item, move it to the next list item
              */
-            if (TheQueries.getNode(editor, nextNodePath_1)) {
+            if (getNode(editor, nextNodePath_1)) {
                 slate.Transforms.moveNodes(editor, {
                     at: slate.Editor.range(editor, nextNodePath_1, nextEnd),
                     to: nextListItemPath_1.concat(1),
@@ -3302,8 +3400,8 @@
 
     var unwrapList = function (editor) {
         slate.Editor.withoutNormalizing(editor, function () {
-            TheTransforms.unwrapNodesByType(editor, exports.ElementKinds.listItem);
-            TheTransforms.unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], { split: true });
+            unwrapNodesByType(editor, exports.ElementKinds.listItem);
+            unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], { split: true });
         });
     };
 
@@ -3333,7 +3431,7 @@
         var toListItemSublist = getListItemSublist(toListItem, options);
         var to;
         if (!toListItemSublist) {
-            var fromList = TheQueries.getParent(editor, fromListItemPath);
+            var fromList = getParent(editor, fromListItemPath);
             if (!fromList)
                 return 0;
             var _e = __read(fromList, 1), fromListNode = _e[0];
@@ -3347,7 +3445,7 @@
             to = toListItemSublistPath.concat([0]);
         }
         else {
-            to = slate.Path.next(TheQueries.getLastChildPath(toListItemSublist));
+            to = slate.Path.next(getLastChildPath(toListItemSublist));
         }
         var moved = moveChildren(editor, {
             at: slate.Path.previous(fromListItemSublistPath),
@@ -3385,9 +3483,9 @@
              * 如果为同类型list，则把nextList children移动到当前list的尾部, 并删除nextList
              */
             var nextPath = slate.Path.next(listPath);
-            var nextNode = TheQueries.getNode(editor, nextPath);
+            var nextNode = getNode(editor, nextPath);
             if (nextNode && slate.Element.isElement(nextNode) && slate.Element.isElement(listNode) && nextNode.type === listNode.type) {
-                TheTransforms.moveChildren(editor, {
+                moveChildren(editor, {
                     at: [nextNode, nextPath],
                     to: listPath.concat(listNode.children.length)
                 });
@@ -3399,11 +3497,11 @@
                  * 获取prevList判断是否为同类型list
                  * 如果为同类型list，则把当前list children移动到prevList的尾部, 并删除当前List
                  */
-                var currentListNode = TheQueries.getNode(editor, listPath);
+                var currentListNode = getNode(editor, listPath);
                 var prevPath = slate.Path.previous(listPath);
-                var prevNode = TheQueries.getNode(editor, prevPath);
+                var prevNode = getNode(editor, prevPath);
                 if (prevNode && slate.Element.isElement(prevNode) && slate.Element.isElement(currentListNode) && prevNode.type === currentListNode.type) {
-                    TheTransforms.moveChildren(editor, {
+                    moveChildren(editor, {
                         at: [currentListNode, listPath],
                         to: prevPath.concat(prevNode.children.length)
                     });
@@ -3453,7 +3551,7 @@
      */
     var moveListItemSublistItemsToList = function (editor, _a) {
         var fromListItem = _a.fromListItem, toList = _a.toList, location = _a.location;
-        var fromListItemSublist = TheQueries.findDescendant(editor, {
+        var fromListItemSublist = findDescendant(editor, {
             at: fromListItem[1],
             match: {
                 type: getListTypes()
@@ -3462,7 +3560,7 @@
         if (!fromListItemSublist)
             return 0;
         var _b = __read(fromListItemSublist, 2), fromListItemSublistPath = _b[1];
-        var lastChildPath = TheQueries.getLastChildPath(toList);
+        var lastChildPath = getLastChildPath(toList);
         var moved;
         slate.Editor.withoutNormalizing(editor, function () {
             moved = moveChildren(editor, {
@@ -3533,7 +3631,7 @@
             }
             // move down with tab
             var tab = !e.shiftKey;
-            if (tab && !TheQueries.isFirstChild(listItemPath)) {
+            if (tab && !isFirstChild(listItemPath)) {
                 moveListItemDown(editor, { list: list, listItem: listItem });
                 return true;
             }
@@ -3698,6 +3796,20 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
+    /**
+     * Is the selection in same li
+     */
+    var isSelectionInSameListItem = function (editor) {
+        var selection = editor.selection;
+        if (!selection) {
+            return false;
+        }
+        var _a = __read(slate.Range.edges(selection), 2), start = _a[0], end = _a[1];
+        var startListItemEntry = getAboveByType(editor, exports.ElementKinds.listItem, { at: start.path });
+        var endListItemEntry = getAboveByType(editor, exports.ElementKinds.listItem, { at: end.path });
+        return startListItemEntry && endListItemEntry && slate.Path.equals(startListItemEntry[1], endListItemEntry[1]);
+    };
+
     var withList = function (_a) {
         var _b = _a === void 0 ? {} : _a, validLiChildrenTypes = _b.validLiChildrenTypes;
         return function (editor) {
@@ -3708,7 +3820,7 @@
                 onReset: function (_editor) { return unwrapList(_editor); }
             };
             editor.insertBreak = function () {
-                var node = TheQueries.anchorBlock(editor);
+                var node = anchorBlock(editor);
                 if (!node) {
                     insertBreak();
                     return;
@@ -3749,14 +3861,14 @@
                         }
                     }
                     // 如果选择的listItem为空则将其向上移动
-                    if (isStart_1 && TheQueries.isBlockAboveEmpty(editor)) {
+                    if (isStart_1 && isBlockAboveEmpty(editor)) {
                         moved_1 = moveListItemUp(editor, { list: list, listItem: listItem });
                         if (moved_1)
                             return;
                     }
-                    var didReset = TheTransforms.onKeyDownResetBlockType({
+                    var didReset = onKeyDownResetBlockType({
                         rules: [
-                            Object.assign(Object.assign({}, resetBlockTypesListRule), { predicate: function () { return !moved_1 && isStart_1 && TheQueries.isBlockAboveEmpty(editor); } })
+                            Object.assign(Object.assign({}, resetBlockTypesListRule), { predicate: function () { return !moved_1 && isStart_1 && isBlockAboveEmpty(editor); } })
                         ]
                     })(null, editor);
                     if (didReset) {
@@ -3782,15 +3894,14 @@
                     var fragmentElement = fragmentData[0];
                     if (getListTypes().includes(fragmentElement.type)) {
                         var startNodes = getStartListItem([fragmentElement.children[0]]);
-                        // 复制列表中的图片时startNodes长度为零
-                        if (startNodes.length === 0) {
-                            setFragmentData(unit);
-                            return;
-                        }
                         var children = startNodes.concat(fragmentElement.children.slice(1));
                         var fragmentNodes = [
                             Object.assign(Object.assign({}, fragmentElement), { children: children })
                         ];
+                        if (isSelectionInSameListItem(editor)) {
+                            // 仅仅复制列表中的内容
+                            fragmentNodes = children[0].children;
+                        }
                         var fragment = fragmentNodes.concat(fragmentData.slice(1));
                         var domRange = i1.AngularEditor.toDOMRange(editor, selection);
                         var contents = domRange.cloneContents();
@@ -3815,17 +3926,17 @@
                     var list = res.list, listItem_1 = res.listItem;
                     var _a = __read(list, 2), listPath_1 = _a[1];
                     var _b = __read(listItem_1, 2), listItemNode_1 = _b[0], listItemPath_1 = _b[1];
-                    var previousListItemPath_1 = TheQueries.getPreviousPath(listItemPath_1);
+                    var previousListItemPath_1 = getPreviousPath(listItemPath_1);
                     if (previousListItemPath_1) {
                         var beforePoint = slate.Editor.before(editor, listItemPath_1);
                         var parentPath = slate.Path.parent(beforePoint.path);
                         var parentNode = slate.Node.get(editor, parentPath);
                         if (slate.Editor.isVoid(editor, parentNode)) {
                             slate.Editor.withoutNormalizing(editor, function () {
-                                TheTransforms.unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], {
+                                unwrapNodesByType(editor, [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList], {
                                     split: true
                                 });
-                                TheTransforms.unwrapNodesByType(editor, exports.ElementKinds.listItem);
+                                unwrapNodesByType(editor, exports.ElementKinds.listItem);
                             });
                             return;
                         }
@@ -3849,7 +3960,7 @@
                             var beforePoint = slate.Editor.before(editor, listItemPath_1);
                             var startPoint = slate.Editor.start(editor, listItemPath_1);
                             var endPoint = slate.Editor.end(editor, listItemPath_1);
-                            var isInFirstChild = !isListNested(editor, listPath_1) && TheQueries.isFirstChild(listItemPath_1);
+                            var isInFirstChild = !isListNested(editor, listPath_1) && isFirstChild(listItemPath_1);
                             var to = isInFirstChild ? listPath_1 : slate.Path.next(slate.Path.parent(beforePoint.path));
                             // TODO: types
                             slate.Transforms.moveNodes(editor, {
@@ -3865,7 +3976,7 @@
                         return;
                     }
                     // deprecated
-                    if (!isListNested(editor, listPath_1) && TheQueries.isFirstChild(listItemPath_1)) {
+                    if (!isListNested(editor, listPath_1) && isFirstChild(listItemPath_1)) {
                         unwrapList(editor);
                         return;
                     }
@@ -3874,7 +3985,7 @@
             };
             editor.insertData = function (data) {
                 var text = data.getData('text/plain');
-                var fragment = extractFragment(data, ELEMENT_UNIQUE_ID);
+                var fragment = extractFragment(data);
                 var aboveEntry = slate.Editor.above(editor, {
                     match: function (n) { return slate.Editor.isBlock(editor, n) && n.type === exports.ElementKinds.listItem; }
                 });
@@ -3983,7 +4094,7 @@
             if (this.readonly) {
                 return false;
             }
-            TheTransforms.setNode(this.editor, { checked: checked }, this.element);
+            setNode(this.editor, { checked: checked }, this.element);
         };
         TheTodoItemComponent.prototype.useIndentClass = function (el, element) {
             var prefix = 'indent';
@@ -4027,7 +4138,7 @@
                 }), 1), match = _a[0];
                 if (match) {
                     var _b = __read(match, 2), path = _b[1];
-                    var block = TheQueries.anchorBlock(editor);
+                    var block = anchorBlock(editor);
                     if (block && slate.Editor.isStart(editor, selection.anchor, path) && slate.Editor.isEmpty(editor, block)) {
                         slate.Transforms.setNodes(editor, {
                             type: exports.ElementKinds.default,
@@ -4040,8 +4151,8 @@
                 }
             }
             insertBreak();
-            var anchorBlock = TheQueries.anchorBlock(editor);
-            if (anchorBlock && anchorBlock.type === exports.ElementKinds.checkItem) {
+            var anchorBlock$1 = anchorBlock(editor);
+            if (anchorBlock$1 && anchorBlock$1.type === exports.ElementKinds.checkItem) {
                 slate.Transforms.setNodes(editor, { checked: false });
             }
         };
@@ -4125,7 +4236,7 @@
         var deleteBackward = editor.deleteBackward;
         editor.deleteBackward = function (unit) {
             var anchor = editor.selection.anchor;
-            var node = TheQueries.anchorBlock(editor);
+            var node = anchorBlock(editor);
             var isVoid = slate.Editor.isVoid(editor, node);
             var alignTypes = [exports.Alignment.center, exports.Alignment.right];
             var startLine = slate.Editor.start(editor, anchor.path);
@@ -4144,7 +4255,7 @@
         var insertBreak = editor.insertBreak;
         editor.insertBreak = function () {
             var selection = editor.selection;
-            var anchorBlock = TheQueries.getAnchorBlockEntry(editor);
+            var anchorBlock = getAnchorBlockEntry(editor);
             if (anchorBlock && slate.Range.isCollapsed(selection) && anchorBlock[0].type.startsWith('heading')) {
                 if (slate.Editor.isStart(editor, selection.anchor, anchorBlock[1])) {
                     insertBreak();
@@ -4220,7 +4331,7 @@
         var _b = _a === void 0 ? {} : _a, _c = _b.idKey, idKey = _c === void 0 ? 'id' : _c, _d = _b.idCreator, idCreator = _d === void 0 ? function () { return Date.now(); } : _d, _e = _b.filterText, filterText = _e === void 0 ? true : _e, _f = _b.filter, filter = _f === void 0 ? function () { return true; } : _f;
         return function (e) {
             var editor = e;
-            var apply = editor.apply;
+            var apply = editor.apply, getFragment = editor.getFragment;
             var idPropsCreator = function () {
                 var _a;
                 return (_a = {}, _a[idKey] = idCreator(), _a);
@@ -4231,7 +4342,7 @@
                 if (operation.type === 'insert_node') {
                     var newFilter = function (entry) {
                         var _a = __read(entry, 1), _node = _a[0];
-                        return filter(entry) && filterText ? slate.Element.isElement(_node) : TheQueries.isDescendant(_node);
+                        return filter(entry) && filterText ? slate.Element.isElement(_node) : isDescendant(_node);
                     };
                     // fix can not find path by orign node
                     var node = operation.node;
@@ -4239,7 +4350,7 @@
                         node = _.cloneDeep(node);
                     }
                     // it will not overwrite ids once it's set as it's read-only
-                    TheTransforms.mergeDeepToNodes({
+                    mergeDeepToNodes({
                         node: node,
                         source: idPropsCreator,
                         query: {
@@ -4263,6 +4374,10 @@
                 }
                 return apply(operation);
             };
+            editor.getFragment = function () {
+                var fragment = _.cloneDeep(getFragment());
+                return deleteElementKey(fragment, idKey);
+            };
             return editor;
         };
     };
@@ -4288,14 +4403,14 @@
         var endMarkup = between ? between[1] : '';
         var endMarkupPointBefore = selection.anchor;
         if (endMarkup) {
-            endMarkupPointBefore = TheQueries.getPointBefore(editor, selection, {
+            endMarkupPointBefore = getPointBefore(editor, selection, {
                 matchString: endMarkup
             });
             if (!endMarkupPointBefore) {
                 return false;
             }
         }
-        var startMarkupPointAfter = TheQueries.getPointBefore(editor, endMarkupPointBefore, {
+        var startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
             matchString: startMarkup,
             skipInvalid: true,
             afterMatch: true
@@ -4309,14 +4424,14 @@
             focus: endMarkupPointBefore
         };
         if (!ignoreTrim) {
-            var markupText = TheQueries.getText(editor, markupRange);
+            var markupText = getText(editor, markupRange);
             if (markupText.trim() !== markupText) {
                 return false;
             }
         }
         // delete end markup
         if (endMarkup) {
-            endMarkupPointBefore = TheQueries.getPointBefore(editor, selection, {
+            endMarkupPointBefore = getPointBefore(editor, selection, {
                 matchString: endMarkup
             });
             slate.Transforms.delete(editor, {
@@ -4332,7 +4447,7 @@
         slate.Transforms.collapse(editor, { edge: 'end' });
         editor.removeMark(type, false);
         // delete start markup
-        var startMarkupPointBefore = TheQueries.getPointBefore(editor, selection, {
+        var startMarkupPointBefore = getPointBefore(editor, selection, {
             matchString: startMarkup,
             skipInvalid: true
         });
@@ -4352,7 +4467,7 @@
             editor.insertText = function (text) {
                 var e_1, _c;
                 var _a;
-                if (!TheQueries.isCollapsed(editor.selection)) {
+                if (!isCollapsed(editor.selection)) {
                     return insertText(text);
                 }
                 var _loop_1 = function (_b) {
@@ -4369,15 +4484,15 @@
                         var markups = castArray(markup);
                         var markupRange = void 0;
                         if (triggerAtBlockStart) {
-                            markupRange = TheQueries.getRangeFromBlockStart(editor);
+                            markupRange = getRangeFromBlockStart(editor);
                             // Don't autoformat if there is void nodes.
-                            var hasVoidNode = TheQueries.someNode(editor, {
+                            var hasVoidNode = someNode(editor, {
                                 at: markupRange,
                                 match: function (n) { return slate.Editor.isVoid(editor, n); }
                             });
                             if (hasVoidNode)
                                 return "continue";
-                            var textFromBlockStart = TheQueries.getText(editor, markupRange);
+                            var textFromBlockStart = getText(editor, markupRange);
                             if (match) {
                                 markups = match(editor, textFromBlockStart);
                             }
@@ -4385,13 +4500,13 @@
                                 return "continue";
                         }
                         else {
-                            markupRange = TheQueries.getRangeBefore(editor, editor.selection, {
+                            markupRange = getRangeBefore(editor, editor.selection, {
                                 matchString: markup,
                                 skipInvalid: true
                             });
                             if (!markupRange)
                                 return "continue";
-                            var blockAbovePath = (_a = TheQueries.getBlockAbove(editor)) === null || _a === void 0 ? void 0 : _a[1];
+                            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.
@@ -4401,7 +4516,7 @@
                         }
                         if (!allowSameTypeAbove) {
                             // Don't autoformat if already in a block of the same type.
-                            var isBelowSameBlockType = TheQueries.someNode(editor, { match: { type: type } });
+                            var isBelowSameBlockType = someNode(editor, { match: { type: type } });
                             if (isBelowSameBlockType)
                                 return "continue";
                         }
@@ -4463,9 +4578,9 @@
             editor.normalizeNode = function (_b) {
                 var _c = __read(_b, 2), currentNode = _c[0], currentPath = _c[1];
                 if (!currentPath.length) {
-                    var entry = TheQueries.getLastNode(editor, level);
+                    var entry = getLastNode(editor, level);
                     var _d = __read(entry, 2), lastNode = _d[0], lastPath = _d[1];
-                    if (slate.Element.isElement(lastNode) && lastNode.type !== type && TheQueries.isNodeType(entry, query)) {
+                    if (slate.Element.isElement(lastNode) && lastNode.type !== type && isNodeType(entry, query)) {
                         editor.insertNodes({
                             type: type,
                             children: [{ text: '' }]
@@ -4487,7 +4602,7 @@
                 var isLeftCursor = i1.isCardLeft(anchorNode);
                 var cardEntry = i1.AngularEditor.toSlateCardEntry(editor, anchorNode);
                 var cursorRootPath = cardEntry[1];
-                TheTransforms.insertParagraph(editor, isLeftCursor ? cursorRootPath : slate.Path.next(cursorRootPath));
+                insertParagraph(editor, isLeftCursor ? cursorRootPath : slate.Path.next(cursorRootPath));
                 if (!isLeftCursor) {
                     slate.Transforms.select(editor, slate.Path.next(cursorRootPath));
                 }
@@ -4507,7 +4622,7 @@
                     if (!previousPath_1) {
                         return;
                     }
-                    if (previousPath_1 && TheQueries.isEmptyParagraphByPath(editor, previousPath_1)) {
+                    if (previousPath_1 && isEmptyParagraphByPath(editor, previousPath_1)) {
                         slate.Transforms.removeNodes(editor, {
                             at: previousPath_1
                         });
@@ -4519,18 +4634,22 @@
                     return;
                 }
                 else {
-                    TheTransforms.insertParagraph(editor, cursorRootPath);
+                    insertParagraph(editor, cursorRootPath);
                     slate.Transforms.select(editor, cursorRootPath);
                     slate.Transforms.removeNodes(editor, { at: slate.Path.next(cursorRootPath) });
                     return;
                 }
             }
-            var blockCard = TheQueries.getBlockCardAbove(editor);
+            var blockCard = getBlockCardAbove(editor);
             var beforePoint = slate.Editor.before(editor, editor.selection.anchor);
-            var beforeBlockCard = TheQueries.getBlockCardAbove(editor, { at: beforePoint });
+            var beforeBlockCard = getBlockCardAbove(editor, { at: beforePoint });
             if (!blockCard && beforeBlockCard) {
-                if (TheQueries.isBlockAboveEmpty(editor)) {
+                if (isBlockAboveEmpty(editor)) {
                     var _a = __read(slate.Editor.parent(editor, editor.selection.anchor.path), 2), node = _a[0], path = _a[1];
+                    slateHistory.HistoryEditor.withoutMerging(editor, function () {
+                        var rightCursor = { path: beforeBlockCard[1], offset: i1.FAKE_RIGHT_BLOCK_CARD_OFFSET };
+                        slate.Transforms.select(editor, { anchor: rightCursor, focus: rightCursor });
+                    });
                     slate.Transforms.delete(editor, { at: path });
                     return;
                 }
@@ -4549,7 +4668,7 @@
                 var cardEntry = i1.AngularEditor.toSlateCardEntry(editor, anchorNode);
                 var cursorRootPath = cardEntry[1];
                 if (isLeftCursor) {
-                    TheTransforms.insertParagraph(editor, cursorRootPath);
+                    insertParagraph(editor, cursorRootPath);
                     slate.Transforms.select(editor, cursorRootPath);
                     slate.Transforms.removeNodes(editor, { at: slate.Path.next(cursorRootPath) });
                     return;
@@ -4562,11 +4681,11 @@
                     return;
                 }
             }
-            var blockCard = TheQueries.getBlockCardAbove(editor);
+            var blockCard = getBlockCardAbove(editor);
             var afterPoint = slate.Editor.after(editor, editor.selection.anchor);
-            var afterBlockCard = TheQueries.getBlockCardAbove(editor, { at: afterPoint });
+            var afterBlockCard = getBlockCardAbove(editor, { at: afterPoint });
             if (!blockCard && afterBlockCard) {
-                if (TheQueries.isBlockAboveEmpty(editor)) {
+                if (isBlockAboveEmpty(editor)) {
                     slateHistory.HistoryEditor.withoutMerging(editor, function () {
                         var leftCursor = { path: afterBlockCard[1], offset: -1 };
                         slate.Transforms.select(editor, { anchor: leftCursor, focus: leftCursor });
@@ -4588,7 +4707,7 @@
             var isMoveUp = i1.hotkeys.isMoveUp(nativeEvent);
             var isMoveDown = i1.hotkeys.isMoveDown(nativeEvent);
             var isCollapsed = selection && slate.Range.isCollapsed(selection);
-            var anchorEntry = TheQueries.anchorBlockEntry(editor);
+            var anchorEntry = anchorBlockEntry(editor);
             // block card cursor
             if (anchorNode && i1.hasBlockCard(domSelection)) {
                 var isCardLeftCursor = i1.isCardLeft(anchorNode);
@@ -4729,7 +4848,7 @@
             // fix deleteBackward on the start of inline block
             // deleteBackward logic bug
             if (inlineBlockEntry && !slate.Editor.isVoid(editor, inlineBlockEntry[0]) && selection.anchor.offset === 0) {
-                var beforePoint = TheQueries.getPointBefore(editor, selection.focus);
+                var beforePoint = getPointBefore(editor, selection.focus);
                 slate.Transforms.select(editor, beforePoint);
             }
             deleteBackward(unit);
@@ -4743,11 +4862,11 @@
             var getFragment = editor.getFragment;
             editor.getFragment = function () {
                 var selection = editor.selection;
-                var containerBlocks = __spreadArray(__spreadArray([], __read(elementKinds)), __read(TheQueries.getContainerBlocks(editor)));
+                var containerBlocks = __spreadArray(__spreadArray([], __read(elementKinds)), __read(getContainerBlocks(editor)));
                 if (selection && selection.anchor.path[0] === selection.focus.path[0]) {
-                    var fragmentData = slate.Node.fragment(editor, selection);
-                    var nodes = TheQueries.getSelectionNodesByType(editor, fragmentData, containerBlocks);
-                    return nodes && slate.Element.isElement(nodes) ? nodes.children : getFragment();
+                    var fragmentData = getFragment();
+                    var nodes = getSelectionNodesByType(editor, fragmentData, containerBlocks);
+                    return nodes && slate.Element.isElement(nodes) ? nodes.children : fragmentData;
                 }
                 return getFragment();
             };
@@ -5342,7 +5461,7 @@
         }
         // Create the table node
         var table = createTable(opts, columns, rows, getCellContent);
-        TheEditor.insertElement(editor, table);
+        insertElement(editor, table);
     }
 
     /**
@@ -5662,7 +5781,7 @@
                 MarkProps.forEach(function (key) {
                     unsetMarks[key] = null;
                 });
-                TheEditor.setMarks(editor, unsetMarks, cellRange);
+                setMarks(editor, unsetMarks, cellRange);
             });
         },
         handleSelectedCells: function (editor, handle) {
@@ -5700,7 +5819,11 @@
 
     var MarkEditor = {
         isMarkActive: function (editor, format) {
-            var node = slate.Node.get(editor, editor.selection.anchor.path);
+            var _a, _b;
+            if (!(editor === null || editor === void 0 ? void 0 : editor.selection)) {
+                return;
+            }
+            var node = slate.Node.get(editor, (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor) === null || _b === void 0 ? void 0 : _b.path);
             if (!slate.Text.isText(node)) {
                 return false;
             }
@@ -5788,7 +5911,7 @@
 
     var HrEditor = {
         insertHr: function (editor) {
-            TheTransforms.insertElement(editor, { type: exports.ElementKinds.hr, children: [{ text: '' }] });
+            insertElement(editor, { type: exports.ElementKinds.hr, children: [{ text: '' }] });
         }
     };
 
@@ -5797,7 +5920,7 @@
             key: exports.ElementKinds.hr,
             icon: 'horizontal-line',
             name: '分割线',
-            active: function (editor) { return TheQueries.isBlockActive(editor, exports.ElementKinds.hr); },
+            active: function (editor) { return isBlockActive(editor, exports.ElementKinds.hr); },
             execute: function (editor) { return HrEditor.insertHr(editor); }
         }
     ];
@@ -5836,7 +5959,7 @@
             name: '正文',
             styles: { height: '40px' },
             execute: function (editor) { return slate.Transforms.setNodes(editor, { type: exports.ElementKinds.paragraph }); },
-            active: function (editor) { return TheQueries.isParagraph(editor); }
+            active: function (editor) { return isParagraph(editor); }
         },
         {
             key: exports.ElementKinds.heading_1,
@@ -5877,18 +6000,21 @@
             key: exports.ElementKinds.blockquote,
             icon: 'blockquote',
             name: '引用',
-            active: function (editor) { return TheQueries.isBlockActive(editor, exports.ElementKinds.blockquote); },
+            active: function (editor) { return isBlockActive(editor, exports.ElementKinds.blockquote); },
             execute: function (editor) { return BlockquoteEditor.toggleBlockquote(editor); }
         }
     ];
 
     var AlignEditor = {
         isActive: function (editor, alignment) {
+            if (!(editor === null || editor === void 0 ? void 0 : editor.selection)) {
+                return;
+            }
             var tableCellAlign = TableEditor.isAlignActive(editor, alignment);
             if (tableCellAlign !== null) {
                 return tableCellAlign;
             }
-            var blockElement = TheQueries.anchorBlock(editor);
+            var blockElement = anchorBlock(editor);
             if (blockElement) {
                 var align = blockElement.align;
                 if (!align && alignment === exports.Alignment.left) {
@@ -5981,39 +6107,21 @@
             if (!aboveResult) {
                 return deleteBackward(unit);
             }
-            var highestBlock = aboveResult[0];
-            var lowestBlock = TheQueries.anchorBlock(editor);
-            var wrapBlockType = highestBlock.type;
-            if (lowestBlock && slate.Editor.isStart(editor, editor.selection.anchor, aboveResult[1])) {
-                if (wrapBlockType === exports.ElementKinds.blockquote) {
-                    if (highestBlock.children[0] === lowestBlock) {
-                        return TheTransforms.unWrap(editor, wrapBlockType);
-                    }
-                }
+            var hasHandled = handleContinualDeleteBackward(editor, aboveResult, exports.ElementKinds.blockquote);
+            if (hasHandled) {
+                return;
             }
-            deleteBackward(unit);
+            return deleteBackward(unit);
         };
         editor.insertBreak = function () {
-            var lowestBlock = TheQueries.anchorBlock(editor);
+            var lowestBlock = anchorBlock(editor);
             if (!lowestBlock) {
                 insertBreak();
                 return;
             }
-            var isEmpty = slate.Editor.isEmpty(editor, lowestBlock);
-            var isEnd = slate.Editor.isEnd(editor, editor.selection.anchor, editor.selection.focus.path);
-            var aboveResult = slate.Editor.above(editor, {
-                match: function (n) { return slate.Editor.isBlock(editor, n) && n.type === exports.ElementKinds.blockquote; }
-            });
-            if (isEnd) {
-                editor.marks = {};
-            }
-            if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
-                var wrapBlock = aboveResult[0];
-                if (wrapBlock.type === exports.ElementKinds.blockquote) {
-                    if (wrapBlock.children[wrapBlock.children.length - 1] === lowestBlock) {
-                        return TheTransforms.unWrap(editor, wrapBlock.type);
-                    }
-                }
+            var hasHandled = handleContinualInsertBreak(editor, lowestBlock, exports.ElementKinds.blockquote);
+            if (hasHandled) {
+                return;
             }
             var voidEntry = slate.Editor.above(editor, {
                 match: function (n) { return slate.Editor.isBlock(editor, n) && slate.Editor.isVoid(editor, n); }
@@ -6022,7 +6130,7 @@
                 slate.Transforms.insertNodes(editor, createEmptyParagraph());
                 return;
             }
-            insertBreak();
+            return insertBreak();
         };
         editor.isContainer = function (element) {
             return element.type === exports.ElementKinds.blockquote ? true : isContainer(element);
@@ -6141,6 +6249,7 @@
             }
         };
         TheColorSelectComponent.prototype._selectColor = function (event, color) {
+            event.preventDefault();
             event.stopPropagation();
             if (this.option.specialColor && color === this.option.specialColor) {
                 color = '';
@@ -6172,7 +6281,7 @@
         return TheColorSelectComponent;
     }());
     TheColorSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__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\n                        thyIconName=\"check\"\n                        [ngStyle]=\"{ color: row.tickColor }\"\n                    ></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div\n        *ngIf=\"option.showCustom\"\n        class=\"select-color\"\n    >\n        <span\n            class=\"color\"\n            [ngStyle]=\"{ background: selectedColor }\"\n        ></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.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.7", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.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.7", ngImport: i0__namespace, type: TheColorSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6254,6 +6363,9 @@
     var ColorEditor = {
         getActiveColor: function (editor, type) {
             var _a;
+            if (!(editor === null || editor === void 0 ? void 0 : editor.selection)) {
+                return;
+            }
             var node = slate.Node.get(editor, (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path);
             if (!slate.Text.isText(node)) {
                 return undefined;
@@ -6292,10 +6404,11 @@
         function TheToolbarBaseItemComponent() {
         }
         TheToolbarBaseItemComponent.prototype.execute = function (event) {
+            var _a;
             event.preventDefault();
             event.stopPropagation();
-            if (!this.itemMousedownHandle && !this.editor.selection) {
-                var lastNode = TheQueries.getLastNode(this.editor, 1);
+            if (!this.itemMousedownHandle && !((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection)) {
+                var lastNode = getLastNode(this.editor, 1);
                 var end = slate.Editor.end(this.editor, lastNode[1]);
                 slate.Transforms.select(this.editor, end);
                 i1.AngularEditor.focus(this.editor);
@@ -6376,7 +6489,7 @@
         return TheColorToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheColorToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", 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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6412,7 +6525,7 @@
     var withRemoveVoid = function (editor) {
         var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward, onKeydown = editor.onKeydown;
         var deleteBlockVoid = function (e) {
-            var aboveEntry = TheQueries.getAbove(e);
+            var aboveEntry = getAbove(e);
             var canDelete = aboveEntry && slate.Editor.isBlock(e, aboveEntry[0]) && slate.Editor.isVoid(e, aboveEntry[0]);
             if (canDelete) {
                 slate.Transforms.insertNodes(e, createEmptyParagraph(), { at: slate.Path.next(aboveEntry[1]) });
@@ -6428,7 +6541,7 @@
             deleteBackward(unit);
         };
         editor.onKeydown = function (event) {
-            var aboveEntry = TheQueries.getAbove(editor);
+            var aboveEntry = getAbove(editor);
             if (aboveEntry && slate.Editor.isVoid(editor, aboveEntry[0]) && slate.Editor.isInline(editor, aboveEntry[0])) {
                 if (i1.hotkeys.isDeleteBackward(event) || i1.hotkeys.isDeleteForward(event)) {
                     event.preventDefault();
@@ -6512,7 +6625,7 @@
                     language: DEFAULT_LANGUAGE.value,
                     children: [{ text: '' }]
                 };
-                TheTransforms.insertElement(editor, codeElement);
+                insertElement(editor, codeElement);
             }
         }
     };
@@ -6522,7 +6635,7 @@
             key: exports.ElementKinds.code,
             icon: 'code-syntax',
             name: '代码块',
-            active: function (editor) { return TheQueries.isBlockActive(editor, exports.ElementKinds.code); },
+            active: function (editor) { return isBlockActive(editor, exports.ElementKinds.code); },
             execute: function (editor) { return CodeEditor.insertCode(editor); }
         }
     ];
@@ -6643,7 +6756,7 @@
         return TheToolbarDropdownComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.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: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__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: i6__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.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6682,15 +6795,16 @@
 
     var TheCodeComponent = /** @class */ (function (_super) {
         __extends(TheCodeComponent, _super);
-        function TheCodeComponent(elementRef, cdr, thyNotifyService, ngZone) {
+        function TheCodeComponent(elementRef, cdr, thyNotifyService, ngZone, mode) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.thyNotifyService = thyNotifyService;
             _this.ngZone = ngZone;
+            _this.mode = mode;
             _this.startRenderCodemirror = false;
             _this.dropdownMode = exports.DropdownMode;
-            _this.maxHeight = 350 - CODEMIRROR_PADDING_TOP * 2;
+            _this.maxHeight = _this.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
             _this.codeMirrorFocused = false;
             _this.menus = CODE_MODES.map(function (item) {
                 return { key: item.value, name: item.showName };
@@ -6701,7 +6815,7 @@
                 readOnly: false,
                 autofocus: false,
                 lineWiseCopyCut: true,
-                lineWrapping: false,
+                lineWrapping: _this.mode === CodeMode.default ? false : true,
                 cursorBlinkRate: 500
             };
             _this.actives = _this.menus[0];
@@ -6777,7 +6891,7 @@
         };
         TheCodeComponent.prototype.onDelete = function (event) {
             event.preventDefault();
-            TheTransforms.deleteElement(this.editor, this.element);
+            deleteElement(this.editor, this.element);
         };
         TheCodeComponent.prototype.onCopy = function (event) {
             var _this = this;
@@ -6809,8 +6923,8 @@
         };
         return TheCodeComponent;
     }(TheBaseElementComponent));
-    TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i5$3.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"></the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n></ng-codemirror>\n", components: [{ type: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i5__namespace$3.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { 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.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i5$2.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"></the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n></ng-codemirror>\n", components: [{ type: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i5__namespace$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.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.7", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6818,9 +6932,14 @@
                         templateUrl: './code.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$4.ThyNotifyService }, { type: i0__namespace.NgZone }]; }, propDecorators: { codemirror: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$4.ThyNotifyService }, { type: i0__namespace.NgZone }, { type: CodeMode, decorators: [{
+                            type: i0.Inject,
+                            args: [THE_CODE_MODE_TOKEN]
+                        }] }];
+        }, propDecorators: { codemirror: [{
                     type: i0.ViewChild,
-                    args: ['codemirror', { read: i5$3.CodeMirrorComponent, static: false }]
+                    args: ['codemirror', { read: i5$2.CodeMirrorComponent, static: false }]
                 }] } });
 
     var withCode = function (editor) {
@@ -7014,7 +7133,7 @@
         TheLinkEditComponent.prototype.applyLink = function (form) {
             var link = this.link.trim();
             if (this.linkRegExp(link)) {
-                var linkPath = TheEditor.findPath(this.editor, this.node);
+                var linkPath = findPath(this.editor, this.node);
                 if (this.originLink !== link) {
                     slate.Transforms.setNodes(this.editor, { url: link }, { at: linkPath });
                 }
@@ -7034,7 +7153,7 @@
         return TheLinkEditComponent;
     }());
     TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__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", "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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$2.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$4.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.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"] }] });
+    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__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", "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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$2.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$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.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.7", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7261,6 +7380,7 @@
         editor.insertText = function (text) {
             if (text && isUrl__default["default"](text)) {
                 LinkEditor.wrapLink(editor, text, text);
+                slate.Transforms.move(editor, { distance: 1, unit: "offset" });
             }
             else {
                 insertText(text);
@@ -7268,8 +7388,10 @@
         };
         editor.insertData = function (data) {
             var text = data.getData('text/plain');
-            if (text && isUrl__default["default"](text)) {
+            var fragment = data.getData("application/" + CLIPBOARD_FORMAT_KEY);
+            if (text && isUrl__default["default"](text) && !fragment) {
                 LinkEditor.wrapLink(editor, text, text);
+                slate.Transforms.move(editor, { distance: 1, unit: "offset" });
             }
             else {
                 insertData(data);
@@ -7359,9 +7481,9 @@
                 return;
             }
             var type = this.item.key;
-            this.toggleTableSelect(event, type);
+            this.toggleTableSelect(event);
         };
-        TheTableToolbarItemComponent.prototype.toggleTableSelect = function (event, type, optionsParam) {
+        TheTableToolbarItemComponent.prototype.toggleTableSelect = function (event, optionsParam) {
             if (this.isOpenTableSelect) {
                 this.tableSelectRef.close();
                 return;
@@ -7385,7 +7507,7 @@
         return TheTableToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheTableToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheTableToolbarItemComponent, deps: [{ token: i1__namespace$6.ThyPopover }, { token: i2__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace$1.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.7", 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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i7__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.7", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7554,7 +7676,7 @@
             selectCellNodes.forEach(function (cell, index) {
                 var row = cell.row, node = cell.node;
                 if (node) {
-                    var cellPath = TheEditor.findPath(editor, node);
+                    var cellPath = findPath(editor, node);
                     if (index === 0) {
                         leftTopCellPath = cellPath;
                     }
@@ -8136,7 +8258,7 @@
             table.children.map(function (row, rowIndex) {
                 row.children.map(function (col, colIndex) {
                     if (rowIndex >= cellRow && rowIndex <= rowSpanIndex && colIndex >= cellCol && colIndex <= colSpanIndex) {
-                        var path = TheEditor.findPath(editor, col);
+                        var path = findPath(editor, col);
                         slate.Transforms.setNodes(editor, { colspan: null, rowspan: null, hidden: null }, { at: path });
                     }
                 });
@@ -8157,6 +8279,49 @@
         });
     }
 
+    var NavSplitLineComponent = /** @class */ (function () {
+        function NavSplitLineComponent() {
+            this.mode = exports.ToolbarItemMode.vertical;
+            this.theNavSplitLine = true;
+        }
+        Object.defineProperty(NavSplitLineComponent.prototype, "horizontal", {
+            get: function () {
+                return this.mode === exports.ToolbarItemMode.horizontal;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NavSplitLineComponent.prototype, "vertical", {
+            get: function () {
+                return this.mode === exports.ToolbarItemMode.vertical;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NavSplitLineComponent.prototype.ngOnInit = function () { };
+        return NavSplitLineComponent;
+    }());
+    NavSplitLineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: NavSplitLineComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NavSplitLineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: NavSplitLineComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'nav-split-line',
+                        template: ''
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
+                    type: i0.Input
+                }], theNavSplitLine: [{
+                    type: i0.HostBinding,
+                    args: ['class.the-nav-split-line']
+                }], horizontal: [{
+                    type: i0.HostBinding,
+                    args: ['class.horizontal']
+                }], vertical: [{
+                    type: i0.HostBinding,
+                    args: ['class.vertical']
+                }] } });
+
     var TheTableToolbarComponent = /** @class */ (function () {
         function TheTableToolbarComponent(ngZone, colorSelectService, popoverRef) {
             var _this = this;
@@ -8278,7 +8443,7 @@
         return TheTableToolbarComponent;
     }());
     TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", 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\"\n            (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <span class=\"nav-split-line\" *ngIf=\"!isActiveSelect && isShowSplitLine\"></span>\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    <span class=\"nav-split-line\" *ngIf=\"deleteIcon\"></span>\n    <a *ngIf=\"deleteIcon\" href=\"javascript:;\" thyIconNavLink [thyTooltip]=\"iconName\" class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\" (mousedown)=\"onDelete($event)\" (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"></a>\n</thy-icon-nav>", components: [{ type: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__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.7", ngImport: i0__namespace, type: TheTableToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8342,7 +8507,7 @@
         return TheContextMenuComponent;
     }());
     TheContextMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__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$1.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: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__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.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__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$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5__namespace$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8745,7 +8910,7 @@
         return TheInsertMarkComponent;
     }());
     TheInsertMarkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInsertMarkComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInsertMarkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0__namespace, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    TheInsertMarkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0__namespace, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInsertMarkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8987,9 +9152,12 @@
         TheTableComponent.prototype.useRowControls = function () {
             if (this.selection) {
                 this.rowControls = this.calculateRowControls();
-                this.cdr.detectChanges();
+                this.cdr.markForCheck();
             }
         };
+        TheTableComponent.prototype.detectChanges = function () {
+            this.cdr.detectChanges();
+        };
         TheTableComponent.prototype.calculateMinRowSpanCellForRows = function () {
             var table = this.element;
             var cells = table.children.map(function (row, index) {
@@ -9146,7 +9314,7 @@
                 var columns = tr_1.children.map(function (cell) {
                     return { width: Math.round(tableWidth_1 / tr_1.children.length) - tr_1.children.length };
                 });
-                TheEditor.setNode(this.editor, { columns: columns }, this.element);
+                setNode(this.editor, { columns: columns }, this.element);
             }
         };
         TheTableComponent.prototype.initializeRows = function () {
@@ -9154,7 +9322,7 @@
             this.element.children.map(function (row) {
                 if (!row.height) {
                     var element = TheEditor.toDOMNode(_this.editor, row);
-                    TheEditor.setNode(_this.editor, { height: getElementHeight(element) }, row);
+                    setNode(_this.editor, { height: getElementHeight(element) }, row);
                 }
             });
         };
@@ -9162,9 +9330,9 @@
             var _this = this;
             var rowElements = this.nativeElement.querySelector('tbody').children;
             if (rowElements) {
-                __spreadArray([], __read(rowElements)).map(function (row, index) {
+                __spreadArray([], __read(rowElements)).map(function (row, index$1) {
                     var height = getElementHeight(row);
-                    TheEditor.setNode(_this.editor, { height: height }, _this.element.children[index]);
+                    setNode(_this.editor, { height: height }, _this.element.children[index$1]);
                 });
             }
         };
@@ -9173,7 +9341,7 @@
             var columns = cols.map(function (col) {
                 return { width: getElementWidth(col) };
             });
-            TheEditor.setNode(this.editor, { columns: columns }, this.element);
+            setNode(this.editor, { columns: columns }, this.element);
         };
         TheTableComponent.prototype.onRowMouseDown = function (event, index) {
             event.stopPropagation();
@@ -9258,7 +9426,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\">\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: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__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-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: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9317,9 +9485,9 @@
     function calculateAnchorPositionInCell(editor) {
         var isFirstLine = false;
         var isLastLine = false;
-        var anchorBlock = TheEditor.anchorBlock(editor);
-        var anchorBlockPath = TheEditor.findPath(editor, anchorBlock);
-        var anchorBlockDom = TheEditor.toDOMNode(editor, anchorBlock);
+        var anchorBlock$1 = anchorBlock(editor);
+        var anchorBlockPath = findPath(editor, anchorBlock$1);
+        var anchorBlockDom = i1.AngularEditor.toDOMNode(editor, anchorBlock$1);
         var valueRangeRect = anchorBlockDom.getBoundingClientRect();
         var anchorBlockHeight = window.getComputedStyle(anchorBlockDom).lineHeight;
         var nativeSelection = window.getSelection();
@@ -9346,11 +9514,13 @@
             _super.prototype.onContextChange.call(this);
             if (this.initialized) {
                 this.useBackground();
+                this.useHeight();
             }
         };
         TheTableRowComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             this.useBackground();
+            this.useHeight();
         };
         TheTableRowComponent.prototype.useBackground = function () {
             if (this.element.header && !this.backgroundColor) {
@@ -10173,6 +10343,7 @@
                 this.applyRowSize(deltaSize);
             }
             this.tableComponent.useRowControls();
+            this.tableComponent.detectChanges();
             this.updateOverlayHandleSizeAndOffset();
         };
         TheTdComponent.prototype._createOverlayForHandle = function () {
@@ -10446,8 +10617,8 @@
             if (startBlockPath.length <= startPosition.cellEntry[1].length + 1 &&
                 startBlockPath.pop() === 0 &&
                 selection.anchor.offset === 0 &&
-                TheEditor.isStart(editor, selection.anchor, startBlockPath) &&
-                !slate.Editor.isVoid(editor, TheEditor.anchorBlock(editor))) {
+                isStart(editor, selection.anchor, startBlockPath) &&
+                !slate.Editor.isVoid(editor, anchorBlock(editor))) {
                 return;
             }
             deleteBackward(unit);
@@ -10487,11 +10658,11 @@
                     var _a = calculateAnchorPositionInCell(editor), isFirstLine = _a.isFirstLine, isLastLine = _a.isLastLine;
                     startPath.pop();
                     endPath.pop();
-                    if ((TheEditor.anchorBlockEntry(editor)[1].toString() !== startPath.toString() || !isFirstLine) && isMoveUp) {
+                    if ((anchorBlockEntry(editor)[1].toString() !== startPath.toString() || !isFirstLine) && isMoveUp) {
                         onKeydown(event);
                         return;
                     }
-                    if ((TheEditor.anchorBlockEntry(editor)[1].toString() !== endPath.toString() || !isLastLine) && isMoveDown) {
+                    if ((anchorBlockEntry(editor)[1].toString() !== endPath.toString() || !isLastLine) && isMoveDown) {
                         onKeydown(event);
                         return;
                     }
@@ -10687,7 +10858,7 @@
             setFragmentData(unit);
         };
         editor.insertData = function (data) {
-            var fragment = extractFragment(data, ELEMENT_UNIQUE_ID);
+            var fragment = extractFragment(data);
             if (fragment) {
                 var opts = new TableOptions$1();
                 var selection = editor.selection;
@@ -10822,7 +10993,7 @@
                 var _b = __read(_a, 2), currentNode = _b[0], currentPath = _b[1];
                 if (slate.Text.isText(currentNode) && currentPath.length) {
                     var _c = __read(slate.Editor.parent(editor, currentPath), 1), node = _c[0];
-                    var containerBlocks = __spreadArray(__spreadArray([], __read(types)), __read(TheQueries.getContainerBlocks(editor)));
+                    var containerBlocks = __spreadArray(__spreadArray([], __read(types)), __read(getContainerBlocks(editor)));
                     if (slate.Element.isElement(node) && containerBlocks.includes(node.type)) {
                         var paragraph = createEmptyParagraph();
                         paragraph.children[0].text = currentNode.text;
@@ -10844,7 +11015,12 @@
             if (html && !slateFragment) {
                 var htmlDom = new DOMParser().parseFromString(html, 'text/html');
                 var fragment = selene.TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
-                TheTransforms.insertTheElements(editor, fragment);
+                // 无法识别HTML内容时后退一下：识别纯文本
+                if (fragment.length === 1 && slate.Editor.isEmpty(editor, fragment[0]) && fragment[0].type === exports.ElementKinds.paragraph) {
+                    insertData(data);
+                    return;
+                }
+                insertTheElements(editor, fragment);
                 return;
             }
             insertData(data);
@@ -10885,6 +11061,11 @@
             enumerable: false,
             configurable: true
         });
+        TheVerticalToolbarItemComponent.prototype.handleDocumentMouseDown = function (event) {
+            if (!this.elementRef.nativeElement.contains(event.target)) {
+                this.close();
+            }
+        };
         TheVerticalToolbarItemComponent.prototype.ngOnInit = function () { };
         TheVerticalToolbarItemComponent.prototype.statusChange = function (editor) {
             var _a, _b;
@@ -10925,7 +11106,7 @@
                 offset: 10,
                 viewContainerRef: this.viewContainerRef,
                 insideClosable: false,
-                backdropClosable: true,
+                backdropClosable: false,
                 hasBackdrop: false
             });
         };
@@ -10937,7 +11118,7 @@
         return TheVerticalToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { 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 thyActionMenuItem href=\"javascript:;\" (mousedown)=\"itemMousedown($event, menu)\" [ngStyle]=\"menu?.styles\">\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.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$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__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.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: 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                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10959,6 +11140,9 @@
                 }], template: [{
                     type: i0.ViewChild,
                     args: ['VerticalAlignItems', { read: i0.TemplateRef, static: true }]
+                }], handleDocumentMouseDown: [{
+                    type: i0.HostListener,
+                    args: ['document: mousedown', ['$event']]
                 }] } });
 
     var VerticalAlignOptions = [
@@ -10994,13 +11178,383 @@
         }
     ];
 
+    var PaintFormatEditor = {
+        formatBrush: function (editor) {
+            var e_1, _a;
+            var contextService = editor.injector.get(TheContextService);
+            var obj = {};
+            try {
+                for (var MarkProps_1 = __values(MarkProps), MarkProps_1_1 = MarkProps_1.next(); !MarkProps_1_1.done; MarkProps_1_1 = MarkProps_1.next()) {
+                    var key = MarkProps_1_1.value;
+                    var k = contextService.paintFormatStatus.marks[key];
+                    obj[key] = k || null;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (MarkProps_1_1 && !MarkProps_1_1.done && (_a = MarkProps_1.return)) _a.call(MarkProps_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            var block = anchorBlock(editor);
+            if (block && slate.Range.isCollapsed(editor.selection)) {
+                // TODO:: 在撤销时有bug, 临时使用withoutSaving处理
+                slateHistory.HistoryEditor.withoutSaving(editor, function () {
+                    var path = TheEditor.findPath(editor, block);
+                    setMarks(editor, obj, path);
+                });
+            }
+            else {
+                setMarks(editor, obj);
+            }
+            PaintFormatEditor.cancelFormatBrushStatus(editor);
+        },
+        isActive: function (editor) {
+            var contextService = editor.injector.get(TheContextService);
+            var res = contextService.paintFormatStatus.isActive;
+            return res;
+        },
+        enableFormatBrush: function (editor) {
+            var contextService = editor.injector.get(TheContextService);
+            if (contextService.paintFormatStatus.isActive) {
+                return PaintFormatEditor.cancelFormatBrushStatus(editor);
+            }
+            contextService.paintFormatStatus = {
+                isActive: true,
+                marks: getSelectionMarks(editor)
+            };
+            var element = i1.EDITOR_TO_ELEMENT.get(editor);
+            element.classList.add('pointer-paint');
+            contextService.onMouseUp$
+                .pipe(operators.skip(1), operators.filter(function (event) { return element.contains(event.target); }), operators.take(1))
+                .subscribe(function (event) {
+                if (contextService.paintFormatStatus.isActive) {
+                    PaintFormatEditor.formatBrush(editor);
+                }
+            });
+            editor.onChange();
+        },
+        cancelFormatBrushStatus: function (editor) {
+            var contextService = editor.injector.get(TheContextService);
+            contextService.paintFormatStatus = {
+                isActive: false,
+                marks: {}
+            };
+            var element = i1.EDITOR_TO_ELEMENT.get(editor);
+            element.classList.remove('pointer-paint');
+            editor.onChange();
+        }
+    };
+
+    var PaintFormatOptions = [
+        {
+            key: exports.ToolbarActionTypes.undo,
+            icon: 'undo',
+            name: '撤销',
+            execute: function (editor) { return editor.undo(); }
+        },
+        {
+            key: exports.ToolbarActionTypes.redo,
+            icon: 'redo',
+            name: '重做',
+            execute: function (editor) { return editor.redo(); }
+        },
+        {
+            key: exports.ToolbarActionTypes.paintformat,
+            icon: 'paintformat',
+            name: '格式刷',
+            execute: PaintFormatEditor.enableFormatBrush,
+            active: PaintFormatEditor.isActive
+        },
+        {
+            key: exports.ToolbarActionTypes.clean,
+            icon: 'clean',
+            name: '清除格式',
+            execute: function (editor) {
+                var e_1, _a;
+                var selection = editor.selection;
+                if (!selection) {
+                    return;
+                }
+                if (TableEditor.clearMark(editor)) {
+                    return;
+                }
+                if (slate.Range.isCollapsed(selection)) {
+                    var marks = slate.Editor.marks(editor);
+                    try {
+                        for (var _b = __values(Object.keys(marks)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var key = _c.value;
+                            slate.Editor.removeMark(editor, key);
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+                else {
+                    var unsetMarks_1 = {};
+                    MarkProps.forEach(function (key) {
+                        unsetMarks_1[key] = null;
+                    });
+                    setMarks(editor, unsetMarks_1);
+                }
+            }
+        }
+    ];
+
+    /**
+     * 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 hasAlign = block[align];
+        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) &&
+            !hasTextIndent &&
+            !hasAlign) {
+            return true;
+        }
+        return false;
+    };
+
+    var TheToolbarItemComponent = /** @class */ (function (_super) {
+        __extends(TheToolbarItemComponent, _super);
+        function TheToolbarItemComponent(ngZone, cfr) {
+            var _this = _super.call(this) || this;
+            _this.ngZone = ngZone;
+            _this.cfr = cfr;
+            _this.itemMode = exports.ToolbarItemMode.horizontal;
+            _this.ToolbarItemMode = exports.ToolbarItemMode;
+            _this.active = false;
+            return _this;
+        }
+        TheToolbarItemComponent.prototype.ngOnInit = function () {
+            var _a, _b;
+            if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && i1.isComponentType((_b = this.item) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
+                this.renderToolbarItem();
+            }
+        };
+        TheToolbarItemComponent.prototype.statusChange = function (editor) {
+            var _a, _b;
+            this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
+        };
+        TheToolbarItemComponent.prototype.execute = function (event) {
+            var _a, _b, _c;
+            _super.prototype.execute.call(this, event);
+            if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
+                return;
+            }
+            (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
+        };
+        TheToolbarItemComponent.prototype.renderToolbarItem = function () {
+            var _this = this;
+            this.ngZone.run(function () {
+                var toolbarItemFactory = _this.cfr.resolveComponentFactory(_this.item.quickItemComponent);
+                var tollbarItemRef = _this.toolbarContainer.createComponent(toolbarItemFactory);
+                tollbarItemRef.instance.editor = _this.editor;
+                tollbarItemRef.instance.item = _this.item;
+                tollbarItemRef.instance.itemMode = exports.ToolbarItemMode.vertical;
+            });
+        };
+        return TheToolbarItemComponent;
+    }(TheToolbarBaseItemComponent));
+    TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: 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]=\"item.name\"\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-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__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.7", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-toolbar-item',
+                        template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"item.name\"\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-container #toolbarContainer></ng-container>\n    ",
+                        host: {
+                            class: 'the-toolbar-item'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }], editor: [{
+                    type: i0.Input
+                }], itemMode: [{
+                    type: i0.Input
+                }], toolbarContainer: [{
+                    type: i0.ViewChild,
+                    args: ['toolbarContainer', { read: i0.ViewContainerRef, static: true }]
+                }] } });
+
+    var TheQuickToolbarComponent = /** @class */ (function (_super) {
+        __extends(TheQuickToolbarComponent, _super);
+        function TheQuickToolbarComponent(popoverRef, elementRef) {
+            var _this = _super.call(this) || this;
+            _this.popoverRef = popoverRef;
+            _this.elementRef = elementRef;
+            _this.ToolbarItemMode = exports.ToolbarItemMode;
+            _this.ToolbarActionTypes = exports.ToolbarActionTypes;
+            return _this;
+        }
+        TheQuickToolbarComponent.prototype.handleMouseDown = function (event) {
+            if (!this.elementRef.nativeElement.contains(event.target)) {
+                this.popoverRef.close();
+            }
+            else {
+                event.preventDefault();
+            }
+        };
+        TheQuickToolbarComponent.prototype.handleEnter = function () {
+            this.popoverRef.close();
+        };
+        TheQuickToolbarComponent.prototype.ngOnInit = function () {
+            this.editorElement = i1.AngularEditor.toDOMNode(this.editor, this.editor);
+        };
+        TheQuickToolbarComponent.prototype.stopPropagation = function (event) {
+            event.preventDefault();
+        };
+        TheQuickToolbarComponent.prototype.selectionChange = function (event) {
+            this.removeHotKey();
+            var toolbarItem = this.quickToolbarItems.find(function (item) { return item.key === event.value; });
+            if (toolbarItem === null || toolbarItem === void 0 ? void 0 : toolbarItem.execute) {
+                toolbarItem.execute(this.editor);
+            }
+        };
+        TheQuickToolbarComponent.prototype.removeHotKey = function () {
+            var node = slate.Node.get(this.editor, this.editor.selection.anchor.path);
+            if (node && slate.Text.equals({ text: QUICK_TOOLBAR_HOTKEY }, node)) {
+                slate.Editor.deleteBackward(this.editor);
+            }
+        };
+        TheQuickToolbarComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return TheQuickToolbarComponent;
+    }(core.mixinUnsubscribe(core.MixinBase)));
+    TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()" } }, usesInheritance: true, ngImport: i0__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$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-quick-toolbar',
+                        templateUrl: 'quick-toolbar.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$3.ThyPopoverRef }, { type: i0__namespace.ElementRef }]; }, propDecorators: { editor: [{
+                    type: i0.Input
+                }], quickToolbarItems: [{
+                    type: i0.Input
+                }], handleMouseDown: [{
+                    type: i0.HostListener,
+                    args: ['document: mousedown', ['$event']]
+                }], handleEnter: [{
+                    type: i0.HostListener,
+                    args: ['document: keydown.enter']
+                }] } });
+
+    var OperationTypes = ['insert_text', 'remove_node', 'merge_node'];
+    var QuickInsertEditor = {
+        openQuickToolbar: function (editor, toolbarItems, origin) {
+            var overlay = editor.injector.get(i2.Overlay);
+            var viewContainerRef = editor.injector.get(i0.ViewContainerRef);
+            var thyPopover = editor.injector.get(i1$2.ThyPopover);
+            var quickToolbarRef = thyPopover.open(TheQuickToolbarComponent, {
+                initialState: {
+                    editor: editor,
+                    quickToolbarItems: toolbarItems
+                },
+                origin: origin,
+                viewContainerRef: viewContainerRef,
+                backdropClosable: true,
+                placement: 'bottomLeft',
+                offset: 4,
+                hasBackdrop: false,
+                insideClosable: true,
+                panelClass: 'the-quick-toolbar-container',
+                scrollStrategy: overlay.scrollStrategies.reposition(),
+                manualClosure: true
+            });
+            THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, quickToolbarRef);
+        },
+        closeQuickToolbar: function (editor) {
+            var quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
+            if (quickToolbarRef) {
+                quickToolbarRef.close();
+                THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, null);
+            }
+        },
+        isOpenToolbar: function (editor, opTypes) {
+            if (opTypes === void 0) { opTypes = OperationTypes; }
+            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 undos = editor.history.undos;
+            var lastBatch = undos[undos.length - 1];
+            var lastOp = lastBatch && lastBatch[lastBatch.length - 1];
+            if (lastOp &&
+                block.children.length === 1 &&
+                block.type === exports.ElementKinds.paragraph &&
+                slate.Node.string(block) === QUICK_TOOLBAR_HOTKEY &&
+                opTypes.includes(lastOp.type) &&
+                (lastOp.text === QUICK_TOOLBAR_HOTKEY || lastOp.text === undefined)) {
+                return true;
+            }
+            return false;
+        }
+    };
+
+    var withQuickInsert = function (editor) {
+        var onKeydown = editor.onKeydown, deleteBackward = editor.deleteBackward, onChange = editor.onChange;
+        editor.onKeydown = function (event) {
+            if (event.key === QUICK_TOOLBAR_HOTKEY && isCleanEmptyParagraph(editor)) {
+                var rootNode = i1.AngularEditor.toDOMNode(editor, slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]));
+                var theEditorComponent = editor.injector.get(TheEditorComponent);
+                var quickToolbars = theEditorComponent.quickToolbarItems;
+                QuickInsertEditor.openQuickToolbar(editor, quickToolbars, rootNode);
+            }
+            onKeydown(event);
+        };
+        editor.deleteBackward = function (unit) {
+            if (!QuickInsertEditor.isOpenToolbar(editor, ['remove_text'])) {
+                QuickInsertEditor.closeQuickToolbar(editor);
+            }
+            deleteBackward(unit);
+        };
+        editor.onChange = function () {
+            onChange();
+            if (editor.selection) {
+                var editorComponent = editor.injector.get(TheEditorComponent);
+                editorComponent.quickInsertInstance.checkStatus();
+                var block = slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+                if (!isCleanEmptyParagraph(editor) && slate.Node.string(block) !== QUICK_TOOLBAR_HOTKEY) {
+                    QuickInsertEditor.closeQuickToolbar(editor);
+                }
+            }
+        };
+        return editor;
+    };
+
     var internalPlugins = [
         withTheHistory,
         withAutoInsertData(),
         withRemoveEmpty,
         withRemoveVoid,
+        withBlockCard,
         withResetType,
-        withImage,
         withIndent(__spreadArray([exports.ElementKinds.checkItem, exports.ElementKinds.numberedList, exports.ElementKinds.bulletedList, exports.ElementKinds.paragraph], __read(HEADING_TYPES))),
         withList({ validLiChildrenTypes: [exports.ElementKinds.image] }),
         withLink,
@@ -11021,9 +11575,10 @@
         withGetFragment(),
         withDeserializeHMTL,
         withDeserializeMd(),
-        withBlockCard // should in the front of list、resettype、todo、deserialize-html
+        withImage,
+        withQuickInsert
     ];
-    var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions));
+    var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions)), __read(PaintFormatOptions));
     var toolbarCompose = function (toolbarItems) {
         if (toolbarItems === void 0) { toolbarItems = []; }
         return __spreadArray(__spreadArray([], __read(internalToolbarItems)), __read(toolbarItems));
@@ -11032,7 +11587,7 @@
         var e = editor;
         e.renderElement = function (element) { return null; };
         e.renderLeaf = function (text) { return null; };
-        e.insertElement = function (element) { return TheTransforms.insertElementNext(e, element); };
+        e.insertElement = function (element) { return insertElementNext(e, element); };
         e.isContainer = function (value) { return false; };
         e.extraElementOptions = [];
         e.disabled = false;
@@ -11064,14 +11619,14 @@
     var TheToolbarService = /** @class */ (function () {
         function TheToolbarService() {
         }
-        TheToolbarService.prototype.initialize = function (toolbarItems, global, inline, block) {
+        TheToolbarService.prototype.initialize = function (toolbarItems, global, inline, quick) {
             if (global === void 0) { global = DefaultGlobalToolbarDefinition; }
             if (inline === void 0) { inline = DefaultInlineToolbarDefinition; }
-            if (block === void 0) { block = DefaultBlockToolbarDefinition; }
+            if (quick === void 0) { quick = DefaultQuickToolbarDefinition; }
             var toolbarDefinition = {
                 global: global,
-                block: block,
-                inline: inline
+                inline: inline,
+                quick: quick
             };
             var toolbarOperations = new Map();
             toolbarItems.forEach(function (i) { return toolbarOperations.set(i.key, i); });
@@ -11115,7 +11670,7 @@
 
     var autoFocus = function (editor, isFocus) {
         setTimeout(function () {
-            if (editor && isFocus) {
+            if (editor && editor.children.length > 0 && isFocus) {
                 slateHistory.HistoryEditor.withoutMerging(editor, function () {
                     i1.AngularEditor.focus(editor);
                     slate.Transforms.select(editor, slate.Editor.start(editor, [0]));
@@ -11152,60 +11707,6 @@
         previousHeight = currentHeight;
     };
 
-    var TheToolbarItemComponent = /** @class */ (function (_super) {
-        __extends(TheToolbarItemComponent, _super);
-        function TheToolbarItemComponent() {
-            var _this = _super.call(this) || this;
-            _this.active = false;
-            return _this;
-        }
-        TheToolbarItemComponent.prototype.statusChange = function (editor) {
-            var _a, _b;
-            this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
-        };
-        TheToolbarItemComponent.prototype.execute = function (event) {
-            var _a, _b, _c;
-            _super.prototype.execute.call(this, event);
-            if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
-                return;
-            }
-            (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
-        };
-        return TheToolbarItemComponent;
-    }(TheToolbarBaseItemComponent));
-    TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            [thyIconNavLinkIcon]=\"item.icon\"\n            [thyTooltip]=\"item.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        ></a>\n    ", isInline: true, components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }], directives: [{ type: i5__namespace$1.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.7", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'the-toolbar-item',
-                        template: "\n        <a\n            thyIconNavLink\n            [thyIconNavLinkIcon]=\"item.icon\"\n            [thyTooltip]=\"item.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        ></a>\n    ",
-                        host: {
-                            class: 'the-toolbar-item'
-                        }
-                    }]
-            }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], editor: [{
-                    type: i0.Input
-                }] } });
-
-    var NavSplitLineComponent = /** @class */ (function () {
-        function NavSplitLineComponent() {
-        }
-        NavSplitLineComponent.prototype.ngOnInit = function () { };
-        return NavSplitLineComponent;
-    }());
-    NavSplitLineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: NavSplitLineComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NavSplitLineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: NavSplitLineComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'nav-split-line',
-                        template: ''
-                    }]
-            }], ctorParameters: function () { return []; } });
-
     var TheToolbarComponent = /** @class */ (function () {
         function TheToolbarComponent(cfr, elementRef, ngZone, toolbarGroupComponent) {
             this.cfr = cfr;
@@ -11271,26 +11772,24 @@
         };
         TheToolbarComponent.prototype.statusChange = function (editor) {
             var e_2, _a;
-            if (editor === null || editor === void 0 ? void 0 : editor.selection) {
-                var toolbarItems = __spreadArray(__spreadArray([], __read(this.toolbarItems)), [this.moreGroupMenu]);
-                try {
-                    for (var toolbarItems_1 = __values(toolbarItems), toolbarItems_1_1 = toolbarItems_1.next(); !toolbarItems_1_1.done; toolbarItems_1_1 = toolbarItems_1.next()) {
-                        var item = toolbarItems_1_1.value;
-                        if (item.key !== exports.ToolbarActionTypes.split) {
-                            var itemComponent = this.components.get(item.key);
-                            if (itemComponent) {
-                                itemComponent.instance.statusChange(editor);
-                            }
+            var toolbarItems = __spreadArray(__spreadArray([], __read(this.toolbarItems)), [this.moreGroupMenu]);
+            try {
+                for (var toolbarItems_1 = __values(toolbarItems), toolbarItems_1_1 = toolbarItems_1.next(); !toolbarItems_1_1.done; toolbarItems_1_1 = toolbarItems_1.next()) {
+                    var item = toolbarItems_1_1.value;
+                    if (item.key !== exports.ToolbarActionTypes.split) {
+                        var itemComponent = this.components.get(item.key);
+                        if (itemComponent) {
+                            itemComponent.instance.statusChange(editor);
                         }
                     }
                 }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_a = toolbarItems_1.return)) _a.call(toolbarItems_1);
-                    }
-                    finally { if (e_2) throw e_2.error; }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_a = toolbarItems_1.return)) _a.call(toolbarItems_1);
                 }
+                finally { if (e_2) throw e_2.error; }
             }
         };
         TheToolbarComponent.prototype.renderToolbarView = function () {
@@ -11500,56 +11999,214 @@
                     args: ['toolbarContainer', { read: i0.ViewContainerRef, static: true }]
                 }] } });
 
+    var TheInlineToolbarComponent = /** @class */ (function () {
+        function TheInlineToolbarComponent(elementRef, scrollDispatcher, cdr, ngZone) {
+            this.elementRef = elementRef;
+            this.scrollDispatcher = scrollDispatcher;
+            this.cdr = cdr;
+            this.ngZone = ngZone;
+            this.destroy$ = new rxjs.Subject();
+        }
+        TheInlineToolbarComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.scrollDispatcher
+                .scrolled()
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () {
+                _this.updateInlineToolbar();
+                _this.cdr.detectChanges();
+            });
+            this.ngZone.runOutsideAngular(function () {
+                rxjs.merge(rxjs.fromEvent(document, 'mouseup').pipe(operators.filter(function (e) { return e.button !== 2; })), rxjs.fromEvent(document, 'keyup').pipe(operators.filter(function (e) { return !e.shiftKey; })))
+                    .pipe(operators.debounceTime(200), operators.takeUntil(_this.destroy$))
+                    .subscribe(function () {
+                    var _a;
+                    _this.updateInlineToolbar();
+                    (_a = _this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.statusChange(_this.editor);
+                    _this.cdr.detectChanges();
+                });
+            });
+        };
+        TheInlineToolbarComponent.prototype.updateInlineToolbar = function () {
+            var inlineToolbar = this.elementRef.nativeElement.firstElementChild;
+            if (!this.editor.selection) {
+                inlineToolbar.removeAttribute('style');
+                return;
+            }
+            var anchorBlock$1 = anchorBlock(this.editor);
+            if (!inlineToolbar || !anchorBlock$1) {
+                return;
+            }
+            var editor = this.editor;
+            var selection = editor.selection;
+            if (!selection || !i1.AngularEditor.isFocused(editor) || slate.Range.isCollapsed(selection) || slate.Editor.string(editor, selection) === '') {
+                inlineToolbar.removeAttribute('style');
+                return;
+            }
+            if (!THE_INLINE_TOOLBAR_TYPES.includes(anchorBlock$1.type)) {
+                return;
+            }
+            var native = window.getSelection();
+            if (native.type !== 'None') {
+                var range = native.getRangeAt(0);
+                this.updatePosition(inlineToolbar, range);
+            }
+        };
+        TheInlineToolbarComponent.prototype.updatePosition = function (toolbarElement, range) {
+            var boundary = range.getBoundingClientRect();
+            if (!boundary || (boundary.height === 0 && boundary.width === 0 && range.startContainer === range.endContainer)) {
+                if (range.startContainer.nodeType === 1 && range.startContainer.querySelector('img')) {
+                    boundary = range.startContainer.querySelector('img').getBoundingClientRect();
+                }
+                else {
+                    boundary = range.startContainer.getBoundingClientRect();
+                }
+            }
+            var toolbarHeight = toolbarElement.offsetHeight;
+            var toolbarWidth = toolbarElement.offsetWidth;
+            var halfOffsetWidth = toolbarWidth / 2;
+            var defaultLeft = -halfOffsetWidth;
+            var positions = {};
+            positions.top = boundary.top - toolbarHeight;
+            positions.left = boundary.left + boundary.width / 2 + defaultLeft;
+            positions.right = 'initial';
+            ['top', 'left', 'right'].forEach(function (key) {
+                toolbarElement.style[key] = positions[key] + (isNaN(positions[key]) ? '' : 'px');
+            });
+            toolbarElement.style.opacity = '1';
+        };
+        TheInlineToolbarComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return TheInlineToolbarComponent;
+    }());
+    TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace$1.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-inline-toolbar',
+                        template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ",
+                        host: {
+                            '[class.hide]': 'toolbarItems.length === 0'
+                        },
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i2__namespace$1.ScrollDispatcher }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { editor: [{
+                    type: i0.Input
+                }], toolbarItems: [{
+                    type: i0.Input
+                }], inlineToolbar: [{
+                    type: i0.ViewChild,
+                    args: ['inlineToolbar']
+                }] } });
+
+    var TheQuickInsertComponent = /** @class */ (function () {
+        function TheQuickInsertComponent(renderer, elementRef, cdr) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.cdr = cdr;
+            this.isHide = true;
+            this.defaultIconName = 'plus-circle-thin';
+            this.iconNameFill = 'plus-circle-thin-fill';
+            this.displayIconName = this.defaultIconName;
+        }
+        TheQuickInsertComponent.prototype.handleMousedownNativeElement = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        TheQuickInsertComponent.prototype.checkStatus = function () {
+            var _a;
+            var editor = this.editor;
+            if (isCleanEmptyParagraph(editor)) {
+                var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                var rootNode = i1.AngularEditor.toDOMNode(editor, block);
+                this.isHide = false;
+                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+                return;
+            }
+            this.isHide = true;
+        };
+        TheQuickInsertComponent.prototype.updatePosition = function (left, top) {
+            this.isHide = false;
+            this.renderer.setStyle(this.elementRef.nativeElement, 'top', top + "px");
+            this.renderer.setStyle(this.elementRef.nativeElement, 'left', left + "px");
+        };
+        TheQuickInsertComponent.prototype.mouseEnter = function (event) {
+            this.displayIconName = this.iconNameFill;
+            this.cdr.markForCheck();
+        };
+        TheQuickInsertComponent.prototype.mouseLeave = function (event) {
+            this.displayIconName = this.defaultIconName;
+            this.cdr.markForCheck();
+        };
+        TheQuickInsertComponent.prototype.handleClick = function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            QuickInsertEditor.openQuickToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
+        };
+        return TheQuickInsertComponent;
+    }());
+    TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: 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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: '[theQuickInsert]',
+                        templateUrl: './quick-insert.component.html',
+                        host: {
+                            class: 'the-quick-insert',
+                            '[class.hide]': 'isHide'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { editor: [{
+                    type: i0.Input
+                }], quickToolbarItems: [{
+                    type: i0.Input
+                }], iconElement: [{
+                    type: i0.ViewChild,
+                    args: ['iconElement', { read: i0.ElementRef, static: false }]
+                }], handleMousedownNativeElement: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
+                }] } });
+
     var ThePlaceholderComponent = /** @class */ (function () {
         function ThePlaceholderComponent(renderer, elementRef) {
             this.renderer = renderer;
             this.elementRef = elementRef;
             this.isHide = true;
         }
-        Object.defineProperty(ThePlaceholderComponent.prototype, "selection", {
-            get: function () {
-                return this.editor.selection;
-            },
-            enumerable: false,
-            configurable: true
-        });
         ThePlaceholderComponent.prototype.handleCompositionStart = function () {
-            this.hide();
+            var _a;
+            if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) {
+                this.hide();
+            }
         };
         ThePlaceholderComponent.prototype.handleCompositionEnd = function (event) {
             if (!event.data) {
                 this.checkStatus();
             }
         };
-        ThePlaceholderComponent.prototype.checkStatus = function (value) {
+        ThePlaceholderComponent.prototype.checkStatus = function () {
+            var _a, _b, _c;
             var editor = this.editor;
-            var children = value ? value : editor.children;
             // empty content and no selection processing
-            if (this.autoFocus && !this.selection && TheQueries.isEmptyContent(children)) {
-                this.updatePosition(30, 51);
-                this.isHide = false;
+            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoFocus) && !(editor === null || editor === void 0 ? void 0 : editor.selection) && isEmptyContent(editor.children)) {
+                // normal top is 28, but margin-top: -41px is set when maxHeight is set, so top is 69
+                var firstTop = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.maxHeight) ? 69 : 28;
+                this.updatePosition(30, firstTop);
                 return;
             }
-            if (i1.AngularEditor.isFocused(editor) && this.selection && slate.Range.isCollapsed(this.selection)) {
-                var block = slate.Node.ancestor(editor, [this.selection.anchor.path[0]]);
-                var textIndent = 'textIndent';
-                var align = 'align';
-                var hasTextIndent = block[textIndent];
-                var hasAlign = block[align];
-                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) &&
-                    !hasTextIndent &&
-                    !hasAlign) {
-                    var rootNode = i1.AngularEditor.toDOMNode(this.editor, block);
-                    this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-                    return;
-                }
+            if (isCleanEmptyParagraph(editor)) {
+                var block = slate.Node.ancestor(editor, [(_c = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]]);
+                var rootNode = i1.AngularEditor.toDOMNode(editor, block);
+                this.isHide = false;
+                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+                return;
             }
-            this.hide();
+            this.isHide = true;
         };
         ThePlaceholderComponent.prototype.updatePosition = function (left, top) {
             this.isHide = false;
@@ -11562,12 +12219,12 @@
         return ThePlaceholderComponent;
     }());
     ThePlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ThePlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", autoFocus: "autoFocus", placeholder: "placeholder" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0__namespace, template: "{{ placeholder }}", isInline: true });
+    ThePlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", options: "options" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0__namespace, template: "{{ options?.placeholder }}", isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'div[thePlaceholder]',
-                        template: "{{ placeholder }}",
+                        template: "{{ options?.placeholder }}",
                         host: {
                             class: 'the-placeholder',
                             '[class.hide]': 'isHide'
@@ -11575,9 +12232,7 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }]; }, propDecorators: { editor: [{
                     type: i0.Input
-                }], autoFocus: [{
-                    type: i0.Input
-                }], placeholder: [{
+                }], options: [{
                     type: i0.Input
                 }], handleCompositionStart: [{
                     type: i0.HostListener,
@@ -11663,7 +12318,6 @@
             _this.theOnDOMEvent = new i0.EventEmitter();
             _this.theEditorCreated = new i0.EventEmitter();
             _this._plugins = [];
-            _this.globalToolbarItems = [];
             _this.autoScrollView = _.debounce(function (editor, scrollContainer) {
                 return autoScrollViewHandle(editor, scrollContainer);
             }, 80);
@@ -11754,9 +12408,6 @@
             _this.onSlaCompositionEnd = function (event) { };
             _this.onSlaDragStart = function (event) { };
             _this.onSlaDragOver = function (event) { };
-            _this.trackBy = function (element) {
-                return element.key;
-            };
             return _this;
         }
         Object.defineProperty(TheEditorComponent.prototype, "theGlobalToolbarInstance", {
@@ -11774,6 +12425,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TheEditorComponent.prototype, "quickToolbarItems", {
+            get: function () {
+                var _a;
+                return (_a = this.toolbarEntity) === null || _a === void 0 ? void 0 : _a.quick;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TheEditorComponent.prototype.ngOnInit = function () {
             this.initialize();
             this.onErrorHandler();
@@ -11830,8 +12489,8 @@
             var _a;
             var toolbar = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar;
             var toolbarItems = toolbarCompose(toolbar === null || toolbar === void 0 ? void 0 : toolbar.toolbarItems);
-            var toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.block, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline);
-            this.globalToolbarItems = toolbarOption.toolbarEntity.global;
+            var toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
+            this.toolbarEntity = toolbarOption.toolbarEntity;
             if (this.theGlobalToolbar) {
                 this.theGlobalToolbarInstance.editor = this.editor;
                 this.theGlobalToolbarInstance.toolbarItems = toolbarOption.toolbarEntity.global;
@@ -11841,11 +12500,10 @@
             }
         };
         TheEditorComponent.prototype.writeValue = function (value) {
-            var _a, _b;
+            var _a;
             var data = dataDeserialize((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.mode, value);
             // data-deserialize
             this.editorValue = data;
-            (_b = this.placeholderInstance) === null || _b === void 0 ? void 0 : _b.checkStatus(data);
         };
         TheEditorComponent.prototype.registerOnChange = function (fn) {
             this.onChangeCallback = fn;
@@ -11854,13 +12512,14 @@
             this.onTouchedCallback = fn;
         };
         TheEditorComponent.prototype.valueChange = function (value) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d;
             (_a = this.theGlobalToolbarInstance) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
-            (_b = this.placeholderInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
+            this.quickInsertInstance.checkStatus();
+            this.placeholderInstance.checkStatus();
             // auto scroll view
-            var scrollContainer = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.scrollContainer;
-            var maxHeight = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.maxHeight;
-            if (!((_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.readonly) && (scrollContainer || maxHeight)) {
+            var scrollContainer = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.scrollContainer;
+            var maxHeight = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.maxHeight;
+            if (!((_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.readonly) && (scrollContainer || maxHeight)) {
                 var container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
                 this.autoScrollView(this.editor, container);
             }
@@ -11926,7 +12585,7 @@
                     var blockCardEntry = i1.AngularEditor.toSlateCardEntry(this.editor, relativeBlockCardElement.firstElementChild);
                     if (blockCardEntry && blockCardEntry[1]) {
                         var rootNodePath = blockCardEntry[1].slice(0, 1);
-                        var rootNode = TheQueries.getNode(this.editor, rootNodePath);
+                        var rootNode = getNode(this.editor, rootNodePath);
                         if (this.editor.isBlockCard(rootNode)) {
                             event.preventDefault();
                             i1.AngularEditor.moveBlockCard(this.editor, rootNode, { direction: event.x < centerX ? 'left' : 'right' });
@@ -11936,18 +12595,18 @@
             }
         };
         TheEditorComponent.prototype.handleSelectAll = function () {
-            var _f;
+            var _e;
             var node;
             if (!this.editor.selection) {
-                TheTransforms.setEndSelection(this.editor);
+                setEndSelection(this.editor);
             }
-            var _g = __read(slate.Range.edges(this.editor.selection), 2), start = _g[0], end = _g[1];
+            var _f = __read(slate.Range.edges(this.editor.selection), 2), start = _f[0], end = _f[1];
             var selectionRange = slate.Editor.range(this.editor, start, end);
-            var containerBlocks = TheQueries.getContainerBlocks(this.editor);
+            var containerBlocks = getContainerBlocks(this.editor);
             for (var i = 0; i < containerBlocks.length; i++) {
-                _f = __read(TheQueries.getNodesByType(this.editor, containerBlocks[i]), 1), node = _f[0];
+                _e = __read(getNodesByType(this.editor, containerBlocks[i]), 1), node = _e[0];
                 if (node) {
-                    var _h = __read(node, 2), path = _h[1];
+                    var _g = __read(node, 2), path = _g[1];
                     var isStartParent = slate.Path.equals(path, start.path.slice(0, path.length));
                     var isEndParent = slate.Path.equals(path, end.path.slice(0, path.length));
                     if (isStartParent && isEndParent) {
@@ -11990,7 +12649,7 @@
                 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: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: 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]=\"globalToolbarItems\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [trackBy]=\"trackBy\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <div\n        *ngIf=\"theOptions?.placeholder\"\n        #placeholder\n        thePlaceholder\n        [editor]=\"editor\"\n        [autoFocus]=\"theOptions?.placeholder?.autoFocus\"\n        [placeholder]=\"theOptions?.placeholder\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "isStrictDecorate", "trackBy", "readonly", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "autoFocus", "placeholder"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: 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    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "isStrictDecorate", "trackBy", "readonly", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12033,6 +12692,9 @@
                 }], globalToolbarInstance: [{
                     type: i0.ViewChild,
                     args: ['globalToolbar']
+                }], quickInsertInstance: [{
+                    type: i0.ViewChild,
+                    args: ['quickInsert']
                 }], placeholderInstance: [{
                     type: i0.ViewChild,
                     args: ['placeholder']
@@ -12168,7 +12830,7 @@
         return TheToolbarGroupComponent;
     }());
     TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: 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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.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.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: 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: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], directives: [{ type: i7__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.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12198,12 +12860,12 @@
         avatar.ThyAvatarModule,
         i2$1.ThyNavModule,
         i2$2.ThyFormModule,
-        i5$4.ThySharedModule,
-        list.ThyListModule,
-        i5$1.ThyTooltipModule,
+        i5$3.ThySharedModule,
+        i2$3.ThyListModule,
+        i7.ThyTooltipModule,
         i4.ThyProgressModule,
         autocomplete.ThyAutocompleteModule,
-        i5$2.ThyActionMenuModule,
+        i5$1.ThyActionMenuModule,
         i5.ThyInputModule,
         select.ThySelectModule,
         i1$5.ThyButtonModule,
@@ -12215,10 +12877,12 @@
         TheToolbarDropdownComponent,
         TheToolbarGroupComponent,
         TheToolbarItemComponent,
+        TheInlineToolbarComponent,
         NavSplitLineComponent,
         TheTextComponent,
         TheDefaultElementComponent,
-        ThePlaceholderComponent,
+        TheQuickInsertComponent,
+        TheQuickToolbarComponent,
         TheColorSelectComponent,
         TheColorToolbarItemComponent,
         TheContextMenuComponent,
@@ -12245,7 +12909,8 @@
         TheTableToolbarComponent,
         TheTableComponent,
         TheTableRowComponent,
-        TheTdComponent
+        TheTdComponent,
+        ThePlaceholderComponent
     ];
     var PIPES = [ElementStylePipe, ElementClassPipe];
     var TheEditorModule = /** @class */ (function () {
@@ -12258,10 +12923,12 @@
             TheToolbarDropdownComponent,
             TheToolbarGroupComponent,
             TheToolbarItemComponent,
+            TheInlineToolbarComponent,
             NavSplitLineComponent,
             TheTextComponent,
             TheDefaultElementComponent,
-            ThePlaceholderComponent,
+            TheQuickInsertComponent,
+            TheQuickToolbarComponent,
             TheColorSelectComponent,
             TheColorToolbarItemComponent,
             TheContextMenuComponent,
@@ -12285,39 +12952,42 @@
             TheTableToolbarComponent,
             TheTableComponent,
             TheTableRowComponent,
-            TheTdComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
+            TheTdComponent,
+            ThePlaceholderComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
             avatar.ThyAvatarModule,
             i2$1.ThyNavModule,
             i2$2.ThyFormModule,
-            i5$4.ThySharedModule,
-            list.ThyListModule,
-            i5$1.ThyTooltipModule,
+            i5$3.ThySharedModule,
+            i2$3.ThyListModule,
+            i7.ThyTooltipModule,
             i4.ThyProgressModule,
             autocomplete.ThyAutocompleteModule,
-            i5$2.ThyActionMenuModule,
+            i5$1.ThyActionMenuModule,
             i5.ThyInputModule,
             select.ThySelectModule,
             i1$5.ThyButtonModule,
             i1$4.ThyNotifyModule,
-            i1$1.ThyAlertModule, i5$3.CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
+            i1$1.ThyAlertModule, i5$2.CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
     TheEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorModule, providers: [
             {
                 provide: TheToolbarGroupToken,
                 useValue: TheToolbarGroupComponent
-            }
-        ], imports: [__spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i5$3.CodemirrorModule, TheColumnSizeModule])] });
+            },
+            THE_CODE_MODE_PROVIDER
+        ], imports: [__spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i5$2.CodemirrorModule, TheColumnSizeModule])] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", 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([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i5$3.CodemirrorModule, TheColumnSizeModule]),
+                        imports: __spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i5$2.CodemirrorModule, TheColumnSizeModule]),
                         exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent],
                         entryComponents: __spreadArray(__spreadArray([], __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
                         providers: [
                             {
                                 provide: TheToolbarGroupToken,
                                 useValue: TheToolbarGroupComponent
-                            }
+                            },
+                            THE_CODE_MODE_PROVIDER
                         ]
                     }]
             }] });
@@ -12335,7 +13005,6 @@
     exports.AlignEditor = AlignEditor;
     exports.BLOCK_DELETEBACKWARD_TYPES = BLOCK_DELETEBACKWARD_TYPES;
     exports.BLOCK_INSERT_ORIGIN = BLOCK_INSERT_ORIGIN;
-    exports.BLOCK_TOOLBAR_HOTKEY = BLOCK_TOOLBAR_HOTKEY;
     exports.BlockquoteEditor = BlockquoteEditor;
     exports.CLIPBOARD_FORMAT_KEY = CLIPBOARD_FORMAT_KEY;
     exports.CODEMIRROR_PADDING_TOP = CODEMIRROR_PADDING_TOP;
@@ -12343,15 +13012,15 @@
     exports.COMPONENTS = COMPONENTS;
     exports.CONTAINER_BLOCKS = CONTAINER_BLOCKS;
     exports.CodeEditor = CodeEditor;
+    exports.CodeMode = CodeMode;
     exports.ColorEditor = ColorEditor;
     exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
     exports.DEFAULT_SCROLL_CONTAINER = DEFAULT_SCROLL_CONTAINER;
-    exports.DefaultBlockToolbarDefinition = DefaultBlockToolbarDefinition;
     exports.DefaultElementOptions = DefaultElementOptions;
     exports.DefaultGlobalToolbarDefinition = DefaultGlobalToolbarDefinition;
     exports.DefaultInlineToolbarDefinition = DefaultInlineToolbarDefinition;
+    exports.DefaultQuickToolbarDefinition = DefaultQuickToolbarDefinition;
     exports.ELEMENT_UNIQUE_ID = ELEMENT_UNIQUE_ID;
-    exports.EditorMode = EditorMode;
     exports.HEADING_TYPES = HEADING_TYPES;
     exports.HeadingEditor = HeadingEditor;
     exports.HrEditor = HrEditor;
@@ -12365,31 +13034,35 @@
     exports.PICTURE_ACCEPTED_UPLOAD_MIME = PICTURE_ACCEPTED_UPLOAD_MIME;
     exports.PICTURE_ACCEPTED_UPLOAD_SIZE = PICTURE_ACCEPTED_UPLOAD_SIZE;
     exports.PLUGIN_COMPONENTS = PLUGIN_COMPONENTS;
+    exports.QUICK_TOOLBAR_HOTKEY = QUICK_TOOLBAR_HOTKEY;
+    exports.QuickInsertEditor = QuickInsertEditor;
     exports.STANDARD_HEADING_TYPES = STANDARD_HEADING_TYPES;
     exports.TAB_SPACE = TAB_SPACE;
-    exports.THE_EDITOR_CONFIG_PROVIDER = THE_EDITOR_CONFIG_PROVIDER;
-    exports.THE_EDITOR_CONFIG_TOKEN = THE_EDITOR_CONFIG_TOKEN;
+    exports.THE_CODE_MODE_PROVIDER = THE_CODE_MODE_PROVIDER;
+    exports.THE_CODE_MODE_TOKEN = THE_CODE_MODE_TOKEN;
     exports.THE_EDITOR_CONVERSION_HINT_REF = THE_EDITOR_CONVERSION_HINT_REF;
+    exports.THE_EDITOR_QUICK_TOOLBAR_REF = THE_EDITOR_QUICK_TOOLBAR_REF;
     exports.THE_EDITOR_UUID = THE_EDITOR_UUID;
     exports.THE_INLINE_TOOLBAR_TYPES = THE_INLINE_TOOLBAR_TYPES;
     exports.THE_UPLOAD_SERVICE_TOKEN = THE_UPLOAD_SERVICE_TOKEN;
     exports.TableEditor = TableEditor;
     exports.TheBaseElementComponent = TheBaseElementComponent;
+    exports.TheCodeMode = TheCodeMode;
     exports.TheContextService = TheContextService;
     exports.TheDefaultElementComponent = TheDefaultElementComponent;
     exports.TheEditor = TheEditor;
     exports.TheEditorComponent = TheEditorComponent;
-    exports.TheEditorConfig = TheEditorConfig;
     exports.TheEditorModule = TheEditorModule;
     exports.TheImageComponent = TheImageComponent;
-    exports.TheQueries = TheQueries;
+    exports.TheQueries = index$1;
+    exports.TheToolbarBaseItemComponent = TheToolbarBaseItemComponent;
     exports.TheToolbarComponent = TheToolbarComponent;
     exports.TheToolbarDropdownComponent = TheToolbarDropdownComponent;
     exports.TheToolbarGroupComponent = TheToolbarGroupComponent;
     exports.TheToolbarGroupToken = TheToolbarGroupToken;
     exports.TheToolbarItemComponent = TheToolbarItemComponent;
     exports.TheToolbarService = TheToolbarService;
-    exports.TheTransforms = TheTransforms;
+    exports.TheTransforms = index;
     exports.TodoItemEditor = TodoItemEditor;
     exports.ToolbarMoreGroup = ToolbarMoreGroup;
     exports.VOID_BLOCK_TYPES = VOID_BLOCK_TYPES;