@worktile/theia 1.2.15 → 1.2.20

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/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';
+    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('ngx-tethys/switch'), require('ngx-tethys/resizable'), require('is-url'), require('ngx-tethys/button'), require('ngx-tethys/form'), require('ngx-tethys/shared'), require('ngx-tethys'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('ngx-tethys/list'), require('ngx-tethys/autocomplete'), require('ngx-tethys/avatar'), require('ngx-tethys/select')) :
+    typeof define === 'function' && define.amd ? define('@worktile/theia', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'slate-angular', 'ngx-tethys/core', 'is-hotkey', 'slate', 'slate-history', 'lodash', 'marked', '@atinc/selene', 'ngx-tethys/popover', '@angular/cdk/overlay', 'ngx-tethys/alert', 'rxjs/operators', 'ngx-tethys/uploader', '@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', 'ngx-tethys/switch', 'ngx-tethys/resizable', 'is-url', 'ngx-tethys/button', 'ngx-tethys/form', 'ngx-tethys/shared', 'ngx-tethys', '@angular/cdk/coercion', '@angular/cdk/portal', 'ngx-tethys/list', 'ngx-tethys/autocomplete', 'ngx-tethys/avatar', 'ngx-tethys/select'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.theia = {}), global.ng.core, global.ng.common, global.ng.forms, global.i1, global.core, global.isHotkey, global.slate, global.slateHistory, global._lodash, global.marked, global.selene, global.i1$2, global.ng.cdk.overlay, global.i1$1, global.rxjs.operators, global.uploader, global.ng.platformBrowser, global.rxjs, global.i4, global.i4$1, global.i5, global.i3, global.i5$1, global.i8, global.i1$4, global.i5$2, global.i6$1, global.i9, global.isUrl, global.i1$5, global.i2$1, global.i5$3, global.i1$6, global.ng.cdk.coercion, global.ng.cdk.portal, global.i2$2, global.autocomplete, global.avatar, global.select));
+})(this, (function (exports, i0, 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, i3, i5$1, i8, i1$4, i5$2, i6$1, i9, isUrl, i1$5, i2$1, i5$3, i1$6, coercion, portal, i2$2, autocomplete, avatar, select) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,23 +32,25 @@
     var _lodash__namespace = /*#__PURE__*/_interopNamespace(_lodash);
     var marked__default = /*#__PURE__*/_interopDefaultLegacy(marked);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$2);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
-    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var isUrl__default = /*#__PURE__*/_interopDefaultLegacy(isUrl);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
-    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i5__namespace$3 = /*#__PURE__*/_interopNamespace(i5$3);
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
-    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -429,6 +431,7 @@
         MarkTypes["color"] = "color";
         MarkTypes["backgroundColor"] = "background-color";
         MarkTypes["codeLine"] = "code-line";
+        MarkTypes["fontSize"] = "font-size";
     })(exports.MarkTypes || (exports.MarkTypes = {}));
     exports.ToolbarActionTypes = void 0;
     (function (ToolbarActionTypes) {
@@ -457,7 +460,8 @@
         exports.MarkTypes.color,
         exports.MarkTypes.italic,
         exports.MarkTypes.strike,
-        exports.MarkTypes.underline
+        exports.MarkTypes.underline,
+        exports.MarkTypes.fontSize
     ];
     var THE_INLINE_TOOLBAR_TYPES = [exports.ElementKinds.default, exports.ElementKinds.listItem, exports.ElementKinds.checkItem];
     var STANDARD_HEADING_TYPES = [
@@ -487,6 +491,7 @@
     })(exports.ToolbarItemMode || (exports.ToolbarItemMode = {}));
     var DefaultGlobalToolbarDefinition = [
         exports.ElementKinds.headingList,
+        exports.MarkTypes.fontSize,
         exports.ToolbarActionTypes.split,
         exports.MarkTypes.bold,
         exports.MarkTypes.italic,
@@ -620,10 +625,10 @@
         default: 'default',
         print: 'print'
     };
-    var TheCodeMode = /** @class */ (function () {
-        function TheCodeMode() {
+    var TheCodeConfig = /** @class */ (function () {
+        function TheCodeConfig() {
         }
-        return TheCodeMode;
+        return TheCodeConfig;
     }());
     var THE_CODE_MODE_TOKEN = new i0.InjectionToken('the-code-mode');
     var THE_CODE_MODE_PROVIDER = {
@@ -640,7 +645,7 @@
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.renderer2 = renderer2;
-            _this.excludes = ['color', 'background-color', 'text'];
+            _this.excludes = ['color', 'font-size', 'background-color', 'text'];
             _this.attributes = [];
             return _this;
         }
@@ -657,6 +662,11 @@
                     this.attributes.push(attr);
                 }
             }
+            var fontSize = this.text[exports.MarkTypes.fontSize];
+            if (fontSize) {
+                var attr = "the-" + exports.MarkTypes.fontSize;
+                this.renderer2.setAttribute(this.elementRef.nativeElement, attr, fontSize);
+            }
             if (this.text[exports.MarkTypes.color]) {
                 this.renderer2.setStyle(this.elementRef.nativeElement, 'color', this.text[exports.MarkTypes.color]);
             }
@@ -828,7 +838,11 @@
     };
 
     var isEmptyParagraph = function (editor, at) {
-        var _a = __read(getAnchorBlockEntry(editor, at), 1), block = _a[0];
+        var entry = getAnchorBlockEntry(editor, at);
+        if (!entry) {
+            return false;
+        }
+        var _a = __read(entry, 1), block = _a[0];
         return slate.Editor.isEmpty(editor, block) && block.type === exports.ElementKinds.paragraph;
     };
 
@@ -1526,7 +1540,7 @@
         }
         if (children && children.length === 1) {
             var firstNode = children[0];
-            if (firstNode.type === exports.ElementKinds.default && !slate.Node.string(firstNode)) {
+            if (firstNode.type === exports.ElementKinds.default && firstNode.children.length === 1 && !slate.Node.string(firstNode)) {
                 return true;
             }
         }
@@ -4727,20 +4741,66 @@
             // block card cursor
             if (anchorNode && i1.hasBlockCard(domSelection)) {
                 var isCardLeftCursor = i1.isCardLeft(anchorNode);
-                // ↓ + left-block-card 或者 → + right-block-card
-                if ((isMoveDown && isCardLeftCursor) || (isMoveForward && !isCardLeftCursor)) {
-                    nativeEvent.preventDefault();
+                if (isMoveUp) {
                     var _a = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _a[1];
+                    var previousPath = slate.Path.hasPrevious(path) && slate.Path.previous(path);
+                    var previousNode = previousPath && getNode(editor, previousPath);
+                    if (previousNode && editor.isBlockCard(previousNode)) {
+                        i1.AngularEditor.moveBlockCard(editor, previousNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                    }
+                    else {
+                        var before = slate.Editor.before(editor, path);
+                        if (before) {
+                            slate.Transforms.select(editor, before);
+                        }
+                    }
+                    nativeEvent.preventDefault();
+                    return;
+                }
+                if (isMoveDown) {
+                    var _b = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _b[1];
+                    var nextPath = slate.Path.next(path);
+                    var nextNode = getNode(editor, nextPath);
+                    if (nextNode && editor.isBlockCard(nextNode)) {
+                        i1.AngularEditor.moveBlockCard(editor, nextNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                    }
+                    else {
+                        var after = slate.Editor.after(editor, path);
+                        if (after) {
+                            slate.Transforms.select(editor, slate.Editor.after(editor, path));
+                        }
+                    }
+                    nativeEvent.preventDefault();
+                    return;
+                }
+                // → + right-block-card
+                if ((isMoveForward && !isCardLeftCursor)) {
+                    nativeEvent.preventDefault();
+                    var _c = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _c[1];
+                    var nextPath = slate.Path.next(path);
+                    var nextNode = getNode(editor, nextPath);
+                    if (nextNode && editor.isBlockCard(nextNode)) {
+                        event.preventDefault();
+                        i1.AngularEditor.moveBlockCard(editor, nextNode, { direction: 'left' });
+                        return;
+                    }
                     var after = slate.Editor.after(editor, path);
                     if (after) {
                         slate.Transforms.select(editor, slate.Editor.after(editor, path));
                     }
                     return;
                 }
-                // ↑ + right-block-card 或者 ← + left-block-card
-                if ((isMoveUp && !isCardLeftCursor) || (isMoveBackward && isCardLeftCursor)) {
+                // ← + left-block-card
+                if (isMoveBackward && isCardLeftCursor) {
                     nativeEvent.preventDefault();
-                    var _b = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _b[1];
+                    var _d = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _d[1];
+                    var previousPath = slate.Path.hasPrevious(path) && slate.Path.previous(path);
+                    var previousNode = previousPath && getNode(editor, previousPath);
+                    if (previousNode && editor.isBlockCard(previousNode)) {
+                        event.preventDefault();
+                        i1.AngularEditor.moveBlockCard(editor, previousNode, { direction: 'right' });
+                        return;
+                    }
                     var before = slate.Editor.before(editor, path);
                     if (before) {
                         slate.Transforms.select(editor, before);
@@ -4750,14 +4810,14 @@
                 // move to card center
                 if ((isCardLeftCursor && isMoveForward) || (!isCardLeftCursor && isMoveBackward)) {
                     nativeEvent.preventDefault();
-                    var _c = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _c[1];
+                    var _e = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _e[1];
                     slate.Transforms.select(editor, isCardLeftCursor ? slate.Editor.start(editor, path) : slate.Editor.end(editor, path));
                     return;
                 }
             }
             // block card center
             if (isCollapsed && (isMoveUp || isMoveDown) && anchorEntry) {
-                var _d = __read(anchorEntry, 2), block = _d[0], path = _d[1];
+                var _f = __read(anchorEntry, 2), block = _f[0], path = _f[1];
                 if (editor.isBlockCard(block)) {
                     event.preventDefault();
                     slate.Transforms.select(editor, isMoveUp ? slate.Editor.before(editor, path) : slate.Editor.after(editor, path));
@@ -4765,7 +4825,7 @@
                 }
             }
             if (isCollapsed && (isMoveBackward || isMoveForward) && anchorEntry) {
-                var _e = __read(anchorEntry, 1), block = _e[0];
+                var _g = __read(anchorEntry, 1), block = _g[0];
                 if (editor.isBlockCard(block)) {
                     event.preventDefault();
                     i1.AngularEditor.moveBlockCard(editor, block, { direction: isMoveBackward ? 'left' : 'right' });
@@ -5151,11 +5211,14 @@
                     columnIndex++;
                     nextCell = this.table.children[rowIndex].children[columnIndex];
                 }
-                else {
+                else if (rowIndex + 1 < this.getHeight()) {
                     columnIndex = 0;
                     rowIndex++;
                     nextCell = this.table.children[rowIndex].children[columnIndex];
                 }
+                else {
+                    nextCell = null;
+                }
             }
             return nextCell;
         };
@@ -5307,7 +5370,7 @@
             return rowspans.some(function (rowspan) { return isInside(rowspan, rowIndx, targetIndex); });
         });
     }
-    function calcOriginSpan(table, targetRowIndex, targetColumnIndex) {
+    function getOriginCell(table, targetRowIndex, targetColumnIndex) {
         var _loop_1 = function (rowIndex) {
             var row = table.children[rowIndex];
             var originCell = row.children
@@ -5830,6 +5893,13 @@
         isActiveHeader: function (editor) {
             var _a = __read(slate.Editor.nodes(editor, { match: function (n) { return n.type === exports.ElementKinds.tableRow; } }), 1), tableRowEntry = _a[0];
             return tableRowEntry && tableRowEntry[0] && tableRowEntry[0].header;
+        },
+        selectOriginCell: function (editor, table, rowIndex, columnIndex, isStart) {
+            var origin = getOriginCell(table, rowIndex, columnIndex);
+            if (origin) {
+                var path = i1.AngularEditor.findPath(editor, origin);
+                slate.Transforms.select(editor, isStart ? slate.Editor.start(editor, path) : slate.Editor.end(editor, path));
+            }
         }
     };
 
@@ -6509,7 +6579,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: 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"] }] });
+    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: i3__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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6589,15 +6659,9 @@
     };
 
     var CodeEditor = {
-        setLanguage: function (editor, language, element) {
-            var at = i1.AngularEditor.findPath(editor, element);
-            slate.Transforms.setNodes(editor, { language: language }, {
-                at: at
-            });
-        },
-        setCodeContent: function (editor, content, element) {
+        setCodeAttribute: function (editor, element, value) {
             var at = i1.AngularEditor.findPath(editor, element);
-            slate.Transforms.setNodes(editor, { content: content }, {
+            slate.Transforms.setNodes(editor, value, {
                 at: at
             });
         },
@@ -6775,8 +6839,8 @@
         };
         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$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]" }] });
+    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.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: i3__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]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6786,7 +6850,7 @@
                             class: 'the-toolbar-dropdown-container'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$3.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace$1.Overlay }]; }, propDecorators: { toolbarItem: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$3.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { toolbarItem: [{
                     type: i0.Input
                 }], menus: [{
                     type: i0.Input
@@ -6813,36 +6877,85 @@
                     args: ['document: mousedown', ['$event']]
                 }] } });
 
+    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 TheCodeComponent = /** @class */ (function (_super) {
         __extends(TheCodeComponent, _super);
-        function TheCodeComponent(elementRef, cdr, thyNotifyService, ngZone, mode) {
+        function TheCodeComponent(elementRef, cdr, thyNotifyService, contextService, ngZone, config) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.thyNotifyService = thyNotifyService;
+            _this.contextService = contextService;
             _this.ngZone = ngZone;
-            _this.mode = mode;
+            _this.config = config;
             _this.startRenderCodemirror = false;
             _this.dropdownMode = exports.DropdownMode;
-            _this.maxHeight = _this.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
             _this.codeMirrorFocused = false;
+            _this.maxHeight = _this.config.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
             _this.menus = CODE_MODES.map(function (item) {
                 return { key: item.value, name: item.showName };
             });
+            _this.ToolbarItemMode = exports.ToolbarItemMode;
+            _this.isAutoWrap = false;
+            _this.isResizing = false;
+            _this.resizeHeight = null;
             _this.options = {
                 mode: _this.menus[0].key,
                 lineNumbers: false,
                 readOnly: false,
                 autofocus: false,
                 lineWiseCopyCut: true,
-                lineWrapping: _this.mode === CodeMode.default ? false : true,
+                lineWrapping: _this.config.mode === CodeMode.default ? false : true,
                 cursorBlinkRate: 500
             };
             _this.actives = _this.menus[0];
+            _this.resizeBounds = null;
             _this.onChangeLangulage = function (item) {
                 _this.options = Object.assign(Object.assign({}, _this.options), { mode: item.key });
                 _this.actives = item;
-                CodeEditor.setLanguage(_this.editor, item.key, _this.element);
+                CodeEditor.setCodeAttribute(_this.editor, _this.element, { langulage: item.key });
             };
             return _this;
         }
@@ -6853,6 +6966,11 @@
             enumerable: false,
             configurable: true
         });
+        TheCodeComponent.prototype.handleCodeMousedown = function (event) {
+            if (!(event.target instanceof HTMLElement && this.elementRef.nativeElement.contains(event.target))) {
+                this.codeMirrorFocused = false;
+            }
+        };
         TheCodeComponent.prototype.onContextChange = function () {
             _super.prototype.onContextChange.call(this);
             if (this.initialized) {
@@ -6862,6 +6980,9 @@
                 if (this.options.mode !== this.element.language) {
                     this.useMode();
                 }
+                if (!this.readonly && this.isCollapsed) {
+                    this.initializeCodemirrorFocus();
+                }
             }
         };
         TheCodeComponent.prototype.ngOnInit = function () {
@@ -6882,18 +7003,27 @@
                 this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
                     _this.renderCodemirror();
                     _this.initializeCodemirrorFocus();
+                    _this.resizeBounds = {
+                        nativeElement: _this.contextService.getEditableElement()
+                    };
                 });
             }
         };
+        TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
+            if (codeMirrorFocused)
+                this.codeMirrorFocused = codeMirrorFocused;
+        };
         TheCodeComponent.prototype.renderCodemirror = function () {
             this.startRenderCodemirror = true;
             this.useReadonly();
             this.useMode();
+            this.useAutoWrap();
+            this.useHeight();
             this.cdr.detectChanges();
         };
         TheCodeComponent.prototype.initializeCodemirrorFocus = function () {
             var _this = this;
-            if (this.isCollapsed) {
+            if (this.isCollapsed && !this.isResizing) {
                 setTimeout(function () {
                     if (_this.isCollapsed && _this.codemirror && _this.codemirror.editor && !_this.codemirror.editor.hasFocus()) {
                         i1.AngularEditor.blur(_this.editor);
@@ -6904,17 +7034,14 @@
             }
         };
         TheCodeComponent.prototype.codeChange = function ($event) {
-            CodeEditor.setCodeContent(this.editor, $event, this.element);
-        };
-        TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
-            this.codeMirrorFocused = codeMirrorFocused;
+            CodeEditor.setCodeAttribute(this.editor, this.element, { content: $event });
         };
         TheCodeComponent.prototype.onDelete = function (event) {
             event.preventDefault();
+            this.codeMirrorFocused = false;
             deleteElement(this.editor, this.element);
         };
         TheCodeComponent.prototype.onCopy = function (event) {
-            var _this = this;
             event.preventDefault();
             event.stopPropagation();
             // remove codemorrir selection
@@ -6922,29 +7049,56 @@
             if (selection.rangeCount > 0) {
                 selection.removeAllRanges();
             }
-            // focus the element
-            setTimeout(function () {
-                i1.AngularEditor.focus(_this.editor);
-                slate.Transforms.select(_this.editor, i1.AngularEditor.findPath(_this.editor, _this.element));
-            });
-            // copy the element
-            setTimeout(function () {
-                document.execCommand('copy');
-                _this.thyNotifyService.success('复制成功');
-            }, 200);
+            i1.AngularEditor.focus(this.editor);
+            slate.Transforms.select(this.editor, i1.AngularEditor.findPath(this.editor, this.element));
+            document.execCommand('copy');
+            this.thyNotifyService.success('复制成功');
+            i1.AngularEditor.deselect(this.editor);
+            this.codeMirrorFocused = false;
         };
         TheCodeComponent.prototype.useMode = function () {
             var _this = this;
             this.options = Object.assign(Object.assign({}, this.options), { mode: this.element.language });
             this.actives = this.menus.find(function (i) { return i.key === _this.element.language; });
         };
+        TheCodeComponent.prototype.useAutoWrap = function () {
+            if (this.element.autoWrap) {
+                this.cdr.detectChanges();
+                this.isAutoWrap = this.element.autoWrap;
+                this.codemirror.setOptionIfChanged('lineWrapping', this.element.autoWrap);
+            }
+        };
+        TheCodeComponent.prototype.useHeight = function () {
+            if (this.element.height) {
+                this.resizeHeight = this.element.height;
+                this.maxHeight = this.element.height;
+            }
+        };
         TheCodeComponent.prototype.useReadonly = function () {
             this.options = Object.assign(Object.assign({}, this.options), { readOnly: this.readonly, cursorBlinkRate: this.readonly ? -1 : 500 });
         };
+        TheCodeComponent.prototype.onResize = function (_a) {
+            var height = _a.height;
+            this.resizeHeight = height;
+            slate.Transforms.select(this.editor, i1.AngularEditor.findPath(this.editor, this.element));
+            CodeEditor.setCodeAttribute(this.editor, this.element, { height: height });
+            this.maxHeight = height;
+        };
+        TheCodeComponent.prototype.onStartResize = function () {
+            this.isResizing = true;
+        };
+        TheCodeComponent.prototype.onEndResize = function () {
+            this.isResizing = false;
+        };
+        TheCodeComponent.prototype.onChangeWrap = function (value) {
+            i1.AngularEditor.deselect(this.editor);
+            this.codemirror.setOptionIfChanged('lineWrapping', value);
+            CodeEditor.setCodeAttribute(this.editor, this.element, { autoWrap: value ? value : null });
+        };
         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 }, { 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 });
+    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: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", host: { listeners: { "document: mousedown": "handleCodeMousedown($event)" } }, viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.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        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"isAutoWrap\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div\n    thyResizable\n    [thyMinHeight]=\"42\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeStart)=\"onStartResize()\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"codeMirrorFocused && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: 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: 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: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], 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: [{
@@ -6953,13 +7107,16 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$4.ThyNotifyService }, { type: i0__namespace.NgZone }, { type: CodeMode, decorators: [{
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$4.ThyNotifyService }, { type: TheContextService }, { type: i0__namespace.NgZone }, { type: TheCodeConfig, decorators: [{
                             type: i0.Inject,
                             args: [THE_CODE_MODE_TOKEN]
                         }] }];
         }, propDecorators: { codemirror: [{
                     type: i0.ViewChild,
-                    args: ['codemirror', { read: i5$2.CodeMirrorComponent, static: false }]
+                    args: ['codemirror', { read: i8.CodeMirrorComponent, static: false }]
+                }], handleCodeMousedown: [{
+                    type: i0.HostListener,
+                    args: ['document: mousedown', ['$event']]
                 }] } });
 
     var withCode = function (editor) {
@@ -7173,7 +7330,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$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"] }] });
+    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$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$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$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$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$1.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: [{
@@ -7326,7 +7483,7 @@
         };
         return TheBaseLinkComponent;
     }(TheBaseElementComponent));
-    TheBaseLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheBaseLinkComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace$1.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$6.ThyClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBaseLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheBaseLinkComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$6.ThyClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TheBaseLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheBaseLinkComponent, decorators: [{
                 type: i0.Component,
@@ -7334,7 +7491,7 @@
                         selector: '[TheBaseLinkComponent]',
                         template: ''
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.ThyPopover }, { type: i2__namespace$1.Overlay }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$6.ThyClickDispatcher }]; }, propDecorators: { mousedownHandle: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.ThyPopover }, { type: i2__namespace.Overlay }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$6.ThyClickDispatcher }]; }, propDecorators: { mousedownHandle: [{
                     type: i0.HostListener,
                     args: ['click', ['$event']]
                 }] } });
@@ -7526,8 +7683,8 @@
         };
         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: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    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.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: i3__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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7537,7 +7694,7 @@
                             class: 'the-toolbar-dropdown-container'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$6.ThyPopover }, { type: i2__namespace$1.Overlay }]; }, propDecorators: { item: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$6.ThyPopover }, { type: i2__namespace.Overlay }]; }, propDecorators: { item: [{
                     type: i0.Input
                 }], editor: [{
                     type: i0.Input
@@ -8299,49 +8456,6 @@
         });
     }
 
-    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;
@@ -8463,7 +8577,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\" (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"] }] });
+    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: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__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: 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: TheTableToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8527,7 +8641,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$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]" }] });
+    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]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8838,11 +8952,11 @@
         };
         return TableService;
     }());
-    TableService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TableService, deps: [{ token: i1__namespace$3.ThyPopover }, { token: i2__namespace$1.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TableService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TableService, deps: [{ token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     TableService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TableService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TableService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace$3.ThyPopover }, { type: i2__namespace$1.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0__namespace.NgZone }, { type: TheContextService }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$3.ThyPopover }, { type: i2__namespace.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0__namespace.NgZone }, { type: TheContextService }]; } });
 
     var SLA_TABLE_SELECTOR = '.slate-element-table';
     var SLA_TABLE_CELL_SELECTOR = '.slate-element-table-cell';
@@ -8930,7 +9044,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: 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"] }] });
+    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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInsertMarkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10595,7 +10709,7 @@
         };
         return TheTdComponent;
     }(TheBaseElementComponent));
-    TheTdComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheTdComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Injector }, { token: i2__namespace$1.Overlay }, { token: ColumnResizingStore }, { token: i2__namespace$1.ScrollDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheTdComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheTdComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Injector }, { token: i2__namespace.Overlay }, { token: ColumnResizingStore }, { token: i2__namespace.ScrollDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TheTdComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheTdComponent, decorators: [{
                 type: i0.Component,
@@ -10604,7 +10718,7 @@
                         templateUrl: './td.component.html',
                         providers: [ColumnResizingStore]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Renderer2 }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.Injector }, { type: i2__namespace$1.Overlay }, { type: ColumnResizingStore }, { type: i2__namespace$1.ScrollDispatcher }]; }, propDecorators: { backgroundColor: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Renderer2 }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.Injector }, { type: i2__namespace.Overlay }, { type: ColumnResizingStore }, { type: i2__namespace.ScrollDispatcher }]; }, propDecorators: { backgroundColor: [{
                     type: i0.HostBinding,
                     args: ['style.backgroundColor']
                 }], colspan: [{
@@ -10641,7 +10755,7 @@
                 }
                 // case 2
                 if (cell.hidden && !normalizedNodes.includes(cell)) {
-                    var origin = calcOriginSpan(table, rowIndex, columnIndex);
+                    var origin = getOriginCell(table, rowIndex, columnIndex);
                     if (!origin) {
                         delete table.children[rowIndex].children[columnIndex].hidden;
                     }
@@ -10652,7 +10766,7 @@
     };
 
     var withTable = function (editor) {
-        var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward, onKeydown = editor.onKeydown, setFragmentData = editor.setFragmentData, insertData = editor.insertData, normalizeNode = editor.normalizeNode, isBlockCard = editor.isBlockCard, renderElement = editor.renderElement, deleteCutData = editor.deleteCutData, isContainer = editor.isContainer;
+        var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward, onKeydown = editor.onKeydown, setFragmentData = editor.setFragmentData, insertData = editor.insertData, normalizeNode = editor.normalizeNode, isBlockCard = editor.isBlockCard, renderElement = editor.renderElement, deleteCutData = editor.deleteCutData, isContainer = editor.isContainer, onChange = editor.onChange;
         editor.deleteBackward = function (unit) {
             var opts = new TableOptions$1();
             if (!isSelectionInTable(opts, editor)) {
@@ -10723,13 +10837,11 @@
                         var aboveCell = aboveRow && aboveRow.children[startPosition.getColumnIndex()];
                         if (aboveCell) {
                             if (aboveCell.hidden) {
-                                var originSpan = calcOriginSpan(endPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex());
-                                if (originSpan) {
-                                    at = slate.Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                                }
+                                TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex(), false);
+                                return;
                             }
                             else {
-                                at = slate.Editor.start(editor, TheEditor.findPath(editor, aboveCell));
+                                at = slate.Editor.end(editor, TheEditor.findPath(editor, aboveCell));
                             }
                         }
                         else {
@@ -10758,10 +10870,8 @@
                         var belowCell = belowRow && belowRow.children[startPosition.getColumnIndex()];
                         if (belowCell) {
                             if (belowCell.hidden) {
-                                var originSpan = calcOriginSpan(endPosition.table, belowRowIndex, startPosition.getColumnIndex());
-                                if (originSpan) {
-                                    at = slate.Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                                }
+                                TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() + 1, startPosition.getColumnIndex(), true);
+                                return;
                             }
                             else {
                                 at = slate.Editor.start(editor, TheEditor.findPath(editor, belowCell));
@@ -10780,18 +10890,27 @@
                     var beforePoint = slate.Editor.before(editor, editor.selection);
                     var beforePosition = beforePoint && TablePosition.create(opts, editor, beforePoint.path);
                     if (beforePosition && beforePosition.cell && beforePosition.cell.hidden) {
+                        event.preventDefault();
                         var at = slate.Editor.end(editor, TheEditor.findPath(editor, beforePosition.findPrevious()));
                         slate.Transforms.select(editor, at);
-                        event.preventDefault();
                     }
                 }
                 if (isMoveForward) {
                     var afterPoint = slate.Editor.after(editor, editor.selection);
                     var afterPosition = afterPoint && TablePosition.create(opts, editor, afterPoint.path);
                     if (afterPosition.cell && afterPosition.cell.hidden) {
-                        var at = slate.Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
-                        slate.Transforms.select(editor, at);
                         event.preventDefault();
+                        var nextCell = afterPosition.findNext();
+                        if (nextCell) {
+                            var at = slate.Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
+                            slate.Transforms.select(editor, at);
+                            event.preventDefault();
+                        }
+                        else {
+                            i1.AngularEditor.moveBlockCard(editor, startPosition.tableEntry[0], { direction: 'right' });
+                            event.preventDefault();
+                        }
+                        return;
                     }
                 }
                 // Prevent deleting cells in the table
@@ -10872,12 +10991,12 @@
             }
             if (tableFragment) {
                 tableFragment = normalizeTable(_.cloneDeep(tableFragment));
+                var plainText = slate.Node.string(tableFragment);
                 tableFragment = [tableFragment];
                 var stringObj = JSON.stringify(tableFragment);
                 var encoded = window.btoa(encodeURIComponent(stringObj));
                 unit.setData("application/" + CLIPBOARD_FORMAT_KEY, encoded);
-                // unit.setData('text/html', div.innerHTML);
-                unit.setData('text/plain', slate.Node.string(tableFragment));
+                unit.setData('text/plain', plainText);
                 return;
             }
             setFragmentData(unit);
@@ -10902,7 +11021,7 @@
                         for (var j = selectColIndex_1; j <= lastColIndex_1; j++) {
                             var row = tablePosition_1.table.children[i];
                             if (row && row.children[j]) {
-                                var originCell = calcOriginSpan(tablePosition_1.table, i, j);
+                                var originCell = getOriginCell(tablePosition_1.table, i, j);
                                 if (originCell && (originCell.colspan || originCell.rowspan)) {
                                     var path = TheEditor.findPath(editor, originCell).slice(-2);
                                     resetTableCell(editor, tablePosition_1.table, originCell, path[0], path[1]);
@@ -10960,6 +11079,21 @@
                     slate.Transforms.setNodes(editor, { columns: columns }, { at: entry[1] });
                 }
             }
+            // adjust selection when selection is in hidden cell
+            if (slate.Element.isElement(entry[0]) && entry[0].type === exports.ElementKinds.tableCell && entry[0].hidden) {
+                if (editor.selection && slate.Range.isCollapsed(editor.selection) && slate.Path.isAncestor(entry[1], editor.selection.anchor.path)) {
+                    setTimeout(function () {
+                        var opts = new TableOptions$1();
+                        var tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+                        var origin = getOriginCell(tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex());
+                        if (origin) {
+                            var path = i1.AngularEditor.findPath(editor, origin);
+                            slate.Transforms.select(editor, slate.Editor.end(editor, path));
+                        }
+                    }, 0);
+                    return;
+                }
+            }
             normalizeNode(entry);
         };
         editor.isBlockCard = function (element) {
@@ -11007,6 +11141,20 @@
         editor.isContainer = function (element) {
             return element.type === exports.ElementKinds.tableCell ? true : isContainer(element);
         };
+        editor.onChange = function () {
+            onChange();
+            // adujst selection when selection is in hidden cell
+            // just hook set_selection
+            var isCollapsed = editor.selection && slate.Range.isCollapsed(editor.selection);
+            var isSelectionOperation = editor.operations.every(function (op) { return slate.Operation.isSelectionOperation(op); });
+            if (isCollapsed && isSelectionOperation) {
+                var opts = new TableOptions$1();
+                var tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+                if (tablePosition.isInTable() && tablePosition.cell.hidden) {
+                    TableEditor.selectOriginCell(editor, tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex(), false);
+                }
+            }
+        };
         return editor;
     };
 
@@ -11151,7 +11299,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: { 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]" }] });
+    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: i3__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: i5__namespace$2.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$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11413,7 +11561,7 @@
         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]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: 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"] }] });
+    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]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$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: 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: [{
@@ -11480,7 +11628,7 @@
         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"] }] });
+    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$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["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: [{
@@ -11604,6 +11752,141 @@
         };
     };
 
+    var TheFontSizeToolbarItemComponent = /** @class */ (function (_super) {
+        __extends(TheFontSizeToolbarItemComponent, _super);
+        function TheFontSizeToolbarItemComponent(elementRef, thyPopover, viewContainerRef, overlay) {
+            var _this = _super.call(this) || this;
+            _this.elementRef = elementRef;
+            _this.thyPopover = thyPopover;
+            _this.viewContainerRef = viewContainerRef;
+            _this.overlay = overlay;
+            _this.fontSizes = FontSizes;
+            _this.disabled = false;
+            _this.disableGroup = HEADING_TYPES;
+            _this.toolbarItemContainer = true;
+            _this.fontSizeToolbarItem = true;
+            return _this;
+        }
+        Object.defineProperty(TheFontSizeToolbarItemComponent.prototype, "isOpen", {
+            get: function () {
+                return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TheFontSizeToolbarItemComponent.prototype, "disableClass", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheFontSizeToolbarItemComponent.prototype.toggleDropdown = function (event) {
+            var _a;
+            _super.prototype.execute.call(this, event);
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
+                return;
+            }
+            this.openDropdownPopover();
+        };
+        TheFontSizeToolbarItemComponent.prototype.handleDocumentMouseDown = function (event) {
+            if (!this.elementRef.nativeElement.contains(event.target)) {
+                this.closeDropdownPopover();
+            }
+        };
+        TheFontSizeToolbarItemComponent.prototype.ngOnInit = function () {
+            this.activeSize = this.fontSizes[2];
+        };
+        TheFontSizeToolbarItemComponent.prototype.statusChange = function (editor) {
+            if (editor.selection) {
+                var anchorBlock$1 = anchorBlock(editor);
+                if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
+                    this.activeSize = null;
+                    this.disabled = true;
+                    return;
+                }
+                var marks = getSelectionMarks(editor);
+                var fontSizeMark = marks[exports.MarkTypes.fontSize];
+                this.activeSize = fontSizeMark ? fontSizeMark : this.fontSizes[2];
+                this.disabled = false;
+            }
+        };
+        TheFontSizeToolbarItemComponent.prototype.itemMousedown = function (event, size) {
+            var _a, _b;
+            _super.prototype.execute.call(this, event);
+            this.closeDropdownPopover();
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.readOnly)) {
+                return;
+            }
+            var anchorBlock$1 = anchorBlock(this.editor);
+            if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
+                return;
+            }
+            slate.Editor.addMark(this.editor, exports.MarkTypes.fontSize, size);
+        };
+        TheFontSizeToolbarItemComponent.prototype.openDropdownPopover = function () {
+            var _a;
+            this.dropdownPopoverRef = this.thyPopover.open(this.dropdownTemplate, {
+                origin: this.elementRef,
+                panelClass: ['the-toolbar-dropdown-popover', (_a = this.item) === null || _a === void 0 ? void 0 : _a.key],
+                placement: 'bottomLeft',
+                insideClosable: false,
+                backdropClosable: true,
+                hasBackdrop: false,
+                offset: 10,
+                viewContainerRef: this.viewContainerRef,
+                scrollStrategy: this.overlay.scrollStrategies.reposition()
+            });
+        };
+        TheFontSizeToolbarItemComponent.prototype.closeDropdownPopover = function () {
+            var _a;
+            if (this.dropdownPopoverRef) {
+                (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
+            }
+        };
+        return TheFontSizeToolbarItemComponent;
+    }(TheToolbarBaseItemComponent));
+    TheFontSizeToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheFontSizeToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheFontSizeToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheFontSizeToolbarItemComponent, selector: "the-font-size-toolbar-item", inputs: { editor: "editor", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.the-toolbar-dropdown-container": "this.toolbarItemContainer", "class.the-font-size-toolbar-item": "this.fontSizeToolbarItem", "class.disabled": "this.disableClass" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\">\n    <span *ngIf=\"activeSize\" class=\"show-text\">{{ activeSize }}</span>\n    <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let size of fontSizes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"size === activeSize\"\n                (mousedown)=\"itemMousedown($event, size)\"\n            >\n                <span thyActionMenuItemName>{{ size }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheFontSizeToolbarItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-font-size-toolbar-item',
+                        templateUrl: './toolbar-item.component.html'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$3.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { editor: [{
+                    type: i0.Input
+                }], item: [{
+                    type: i0.Input
+                }], dropdownTemplate: [{
+                    type: i0.ViewChild,
+                    args: ['dropdownTemplate', { static: true }]
+                }], toolbarItemContainer: [{
+                    type: i0.HostBinding,
+                    args: ['class.the-toolbar-dropdown-container']
+                }], fontSizeToolbarItem: [{
+                    type: i0.HostBinding,
+                    args: ['class.the-font-size-toolbar-item']
+                }], disableClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.disabled']
+                }], toggleDropdown: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
+                }], handleDocumentMouseDown: [{
+                    type: i0.HostListener,
+                    args: ['document: mousedown', ['$event']]
+                }] } });
+
+    var FontSizes = [12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48];
+    var FontSizeOptions = [
+        {
+            key: exports.MarkTypes.fontSize,
+            name: '字号',
+            iconComponent: TheFontSizeToolbarItemComponent
+        }
+    ];
+
     var internalPlugins = [
         withTheHistory,
         withAutoInsertData(),
@@ -11645,7 +11928,7 @@
         withDeserializeMd(),
         withQuickInsert
     ];
-    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 internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(FontSizeOptions)), __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));
@@ -12037,7 +12320,7 @@
         return TheToolbarComponent;
     }());
     TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12177,7 +12460,7 @@
         };
         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 }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    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.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TheContextService }], 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", "containerClass", "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,
@@ -12189,7 +12472,7 @@
                         },
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i2__namespace$1.ScrollDispatcher }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i2__namespace.ScrollDispatcher }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
                     type: i0.Input
                 }], toolbarItems: [{
                     type: i0.Input
@@ -12290,12 +12573,13 @@
         };
         ThePlaceholderComponent.prototype.checkStatus = function () {
             var _this = this;
-            var _a, _b;
+            var _a, _b, _c;
             var editor = this.editor;
             var isEmptyShow = typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.isEmptyShowPlaceholder) === 'undefined' ? true : this.options.isEmptyShowPlaceholder;
             var isMustShow = (_b = this.options) === null || _b === void 0 ? void 0 : _b.isMustShowPlaceholder;
+            var isReadonly = (_c = this.options) === null || _c === void 0 ? void 0 : _c.readonly;
             // empty content and no selection processing
-            if (isEmptyShow && isEmptyContent(editor.children)) {
+            if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
                 var firstElementChild = this.contextService.getFirstElementChild();
                 var offsetTop = firstElementChild.offsetTop;
                 var offsetLeft = firstElementChild.offsetLeft;
@@ -12767,7 +13051,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: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: 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    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__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"] }] });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems"] }, { 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: [{
@@ -12948,7 +13232,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", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.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: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12976,19 +13260,21 @@
     var TETHYS = [
         i4$1.ThyIconModule,
         avatar.ThyAvatarModule,
-        i2$1.ThyNavModule,
-        i2$2.ThyFormModule,
+        i3.ThyNavModule,
+        i2$1.ThyFormModule,
         i5$3.ThySharedModule,
-        i2$3.ThyListModule,
-        i7.ThyTooltipModule,
+        i2$2.ThyListModule,
+        i5$1.ThyTooltipModule,
         i4.ThyProgressModule,
         autocomplete.ThyAutocompleteModule,
-        i5$1.ThyActionMenuModule,
+        i5$2.ThyActionMenuModule,
         i5.ThyInputModule,
         select.ThySelectModule,
         i1$5.ThyButtonModule,
         i1$4.ThyNotifyModule,
-        i1$1.ThyAlertModule
+        i1$1.ThyAlertModule,
+        i9.ThyResizableModule,
+        i6$1.ThySwitchModule
     ];
     var COMPONENTS = [
         TheToolbarComponent,
@@ -13008,7 +13294,8 @@
         TheTableSelectComponent,
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
-        TheVerticalToolbarItemComponent
+        TheVerticalToolbarItemComponent,
+        TheFontSizeToolbarItemComponent
     ];
     var PLUGIN_COMPONENTS = [
         TheImageComponent,
@@ -13054,7 +13341,8 @@
             TheTableSelectComponent,
             TheTableToolbarItemComponent,
             TheConversionHintComponent,
-            TheVerticalToolbarItemComponent, TheImageComponent,
+            TheVerticalToolbarItemComponent,
+            TheFontSizeToolbarItemComponent, TheImageComponent,
             TheTemplateComponent,
             TheHrComponent,
             TheBlockquoteComponent,
@@ -13073,31 +13361,33 @@
             TheTdComponent,
             ThePlaceholderComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
             avatar.ThyAvatarModule,
-            i2$1.ThyNavModule,
-            i2$2.ThyFormModule,
+            i3.ThyNavModule,
+            i2$1.ThyFormModule,
             i5$3.ThySharedModule,
-            i2$3.ThyListModule,
-            i7.ThyTooltipModule,
+            i2$2.ThyListModule,
+            i5$1.ThyTooltipModule,
             i4.ThyProgressModule,
             autocomplete.ThyAutocompleteModule,
-            i5$1.ThyActionMenuModule,
+            i5$2.ThyActionMenuModule,
             i5.ThyInputModule,
             select.ThySelectModule,
             i1$5.ThyButtonModule,
             i1$4.ThyNotifyModule,
-            i1$1.ThyAlertModule, i5$2.CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
+            i1$1.ThyAlertModule,
+            i9.ThyResizableModule,
+            i6$1.ThySwitchModule, i8.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
             },
             THE_CODE_MODE_PROVIDER
-        ], imports: [__spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i5$2.CodemirrorModule, TheColumnSizeModule])] });
+        ], imports: [__spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i8.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$2.CodemirrorModule, TheColumnSizeModule]),
+                        imports: __spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
                         exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent],
                         entryComponents: __spreadArray(__spreadArray([], __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
                         providers: [
@@ -13166,7 +13456,7 @@
     exports.THE_UPLOAD_SERVICE_TOKEN = THE_UPLOAD_SERVICE_TOKEN;
     exports.TableEditor = TableEditor;
     exports.TheBaseElementComponent = TheBaseElementComponent;
-    exports.TheCodeMode = TheCodeMode;
+    exports.TheCodeConfig = TheCodeConfig;
     exports.TheContextService = TheContextService;
     exports.TheDefaultElementComponent = TheDefaultElementComponent;
     exports.TheEditor = TheEditor;