@worktile/theia 2.2.10 → 2.3.0-next.0

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('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';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('slate-angular'), require('ngx-tethys/core'), require('is-hotkey'), require('slate'), require('slate-history'), require('lodash'), require('marked'), require('@atinc/selene'), require('ngx-tethys/popover'), require('@angular/cdk/overlay'), require('ngx-tethys/alert'), require('rxjs/operators'), require('ngx-tethys/uploader'), require('rxjs'), require('@angular/platform-browser'), require('ngx-tethys/progress'), require('ngx-tethys/icon'), require('ngx-tethys/nav'), require('ngx-tethys/tooltip'), require('ngx-tethys/input'), require('ng-codemirror'), require('ngx-tethys/notify'), require('ngx-tethys/action-menu'), require('ngx-tethys/switch'), require('ngx-tethys/resizable'), require('is-url'), require('ngx-tethys/button'), require('ngx-tethys/form'), require('ngx-tethys/shared'), require('ngx-tethys'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('ngx-tethys/list'), require('ngx-tethys/autocomplete'), require('ngx-tethys/avatar'), require('ngx-tethys/select')) :
+    typeof define === 'function' && define.amd ? define('@worktile/theia', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'slate-angular', 'ngx-tethys/core', 'is-hotkey', 'slate', 'slate-history', 'lodash', 'marked', '@atinc/selene', 'ngx-tethys/popover', '@angular/cdk/overlay', 'ngx-tethys/alert', 'rxjs/operators', 'ngx-tethys/uploader', 'rxjs', '@angular/platform-browser', 'ngx-tethys/progress', 'ngx-tethys/icon', 'ngx-tethys/nav', 'ngx-tethys/tooltip', 'ngx-tethys/input', 'ng-codemirror', 'ngx-tethys/notify', 'ngx-tethys/action-menu', 'ngx-tethys/switch', 'ngx-tethys/resizable', 'is-url', 'ngx-tethys/button', 'ngx-tethys/form', 'ngx-tethys/shared', 'ngx-tethys', '@angular/cdk/coercion', '@angular/cdk/portal', 'ngx-tethys/list', 'ngx-tethys/autocomplete', 'ngx-tethys/avatar', 'ngx-tethys/select'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.theia = {}), global.ng.core, global.ng.common, global.ng.forms, global.i1, global.core, global.isHotkey, global.slate, global.slateHistory, global._lodash, global.marked, global.selene, global.i1$2, global.ng.cdk.overlay, global.i1$1, global.rxjs.operators, global.uploader, global.rxjs, global.ng.platformBrowser, global.i6, global.i4, global.i3, global.i5, global.i5$1, global.i8, global.i1$4, global.i5$2, global.i6$1, global.i9, global.isUrl, global.i1$5, global.i2$1, global.i5$3, global.i1$6, global.ng.cdk.coercion, global.ng.cdk.portal, global.i2$2, global.autocomplete, global.avatar, global.select));
+})(this, (function (exports, i0, i10, i4$1, i1, core, isHotkey, slate, slateHistory, _lodash, marked, selene, i1$2, i2, i1$1, operators, uploader, rxjs, i1$3, i6, i4, i3, i5, i5$1, i8, i1$4, i5$2, i6$1, i9, isUrl, i1$5, i2$1, i5$3, i1$6, coercion, portal, i2$2, autocomplete, avatar, select) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,8 +25,8 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
     var _lodash__namespace = /*#__PURE__*/_interopNamespace(_lodash);
@@ -35,10 +35,10 @@
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
@@ -379,6 +379,7 @@
     var DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
     var ELEMENT_UNIQUE_ID = 'key';
     var ZERO_WIDTH_CHAR = '\u200B';
+    var DROP_THUMB_LINE = 'drop-thumb-line';
     exports.TheMode = void 0;
     (function (TheMode) {
         TheMode["fullMode"] = "full";
@@ -424,6 +425,11 @@
         VerticalAlignment["middle"] = "middle";
         VerticalAlignment["bottom"] = "bottom";
     })(exports.VerticalAlignment || (exports.VerticalAlignment = {}));
+    exports.LayoutTypes = void 0;
+    (function (LayoutTypes) {
+        LayoutTypes["wrapLeft"] = "wrap-left";
+        LayoutTypes["wrapRight"] = "wrap-right";
+    })(exports.LayoutTypes || (exports.LayoutTypes = {}));
     exports.FontSizes = void 0;
     (function (FontSizes) {
         FontSizes["fontSize12"] = "12";
@@ -831,6 +837,7 @@
         },
         {
             type: exports.ElementKinds.tableCell,
+            isSecondaryContainer: true,
             inValidChildrenTypes: [exports.ElementKinds.table, exports.ElementKinds.tableCell]
         }
     ];
@@ -2674,6 +2681,25 @@
         return regexps.some(function (regexp) { return regexp.test(content); });
     };
 
+    var mergeElementOptions = function (elementOptions) {
+        elementOptions = elementOptions.filter(function (item) { return item.inValidChildrenTypes.length > 0; });
+        var combinationData = __spreadArray(__spreadArray([], __read(DefaultElementOptions)), __read(elementOptions));
+        var dataInfo = {};
+        combinationData.forEach(function (item) {
+            var type = item.type, inValidChildrenTypes = item.inValidChildrenTypes, isIndivisible = item.isIndivisible, isSecondaryContainer = item.isSecondaryContainer;
+            if (!dataInfo[type]) {
+                dataInfo[type] = {
+                    type: type,
+                    inValidChildrenTypes: inValidChildrenTypes,
+                    isIndivisible: isIndivisible,
+                    isSecondaryContainer: isSecondaryContainer
+                };
+            }
+            dataInfo[type].inValidChildrenTypes = Array.from(new Set(__spreadArray(__spreadArray([], __read(inValidChildrenTypes)), __read(dataInfo[type].inValidChildrenTypes))));
+        });
+        return dataInfo;
+    };
+
     var withAutoInsertData = function (validChildren) { return function (editor) {
         var insertData = editor.insertData;
         var allElementOptions = DefaultElementOptions;
@@ -2739,23 +2765,6 @@
         };
         return editor;
     }; };
-    var mergeElementOptions = function (elementOptions) {
-        elementOptions = elementOptions.filter(function (item) { return item.inValidChildrenTypes.length > 0; });
-        var combinationData = __spreadArray(__spreadArray([], __read(DefaultElementOptions)), __read(elementOptions));
-        var dataInfo = {};
-        combinationData.forEach(function (item) {
-            var type = item.type, inValidChildrenTypes = item.inValidChildrenTypes, isIndivisible = item.isIndivisible;
-            if (!dataInfo[type]) {
-                dataInfo[type] = {
-                    type: type,
-                    inValidChildrenTypes: inValidChildrenTypes,
-                    isIndivisible: isIndivisible
-                };
-            }
-            dataInfo[type].inValidChildrenTypes = Array.from(new Set(__spreadArray(__spreadArray([], __read(inValidChildrenTypes)), __read(dataInfo[type].inValidChildrenTypes))));
-        });
-        return dataInfo;
-    };
 
     var withRemoveEmpty = function (editor) {
         var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward;
@@ -2871,6 +2880,10 @@
             var editableElement = this.getEditableElement();
             return editableElement === null || editableElement === void 0 ? void 0 : editableElement.firstElementChild;
         };
+        TheContextService.prototype.layoutDefaultWidth = function () {
+            var firstElementChild = this.getFirstElementChild();
+            return 0.48 * firstElementChild.clientWidth;
+        };
         TheContextService.prototype.setUploadFileList = function (file) {
             this.fileList.push(file);
         };
@@ -2885,18 +2898,178 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
 
+    var ImageEditor = {
+        openUpload: function (editor) {
+            var inputFile = document.createElement('input');
+            inputFile.setAttribute('type', 'file');
+            inputFile.setAttribute('accept', 'image/*');
+            inputFile.onchange = function (event) {
+                ImageEditor.insertImages(editor, event.target.files);
+            };
+            inputFile.click();
+        },
+        insertImages: function (editor, imageFiles) {
+            var e_1, _a;
+            var contextService = editor.injector.get(TheContextService);
+            var imageNodes = [];
+            var text = { text: '' };
+            try {
+                for (var imageFiles_1 = __values(imageFiles), imageFiles_1_1 = imageFiles_1.next(); !imageFiles_1_1.done; imageFiles_1_1 = imageFiles_1.next()) {
+                    var image = imageFiles_1_1.value;
+                    var verify = ImageEditor.verifyImage(editor, image);
+                    if (verify) {
+                        var url = URL.createObjectURL(image);
+                        contextService.setUploadFileList({
+                            url: url,
+                            file: image
+                        });
+                        imageNodes.push({ type: exports.ElementKinds.image, url: url, children: [text] });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (imageFiles_1_1 && !imageFiles_1_1.done && (_a = imageFiles_1.return)) _a.call(imageFiles_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (imageNodes.length > 0) {
+                var at = editor.selection;
+                slate.Transforms.insertNodes(editor, imageNodes, { at: at });
+                if (isCollapsed(editor.selection) && isEmptyParagraph(editor)) {
+                    slate.Transforms.removeNodes(editor, { at: at });
+                    slate.Transforms.select(editor, at);
+                }
+            }
+        },
+        verifyImage: function (editor, image) {
+            if (!PICTURE_ACCEPTED_UPLOAD_MIME.includes(image.type)) {
+                editor.onError({
+                    code: exports.ErrorCodes.IMAGE_ERR_MIME_FORMAT
+                });
+                return false;
+            }
+            if (image.size / 1000000 >= PICTURE_ACCEPTED_UPLOAD_SIZE) {
+                editor.onError({
+                    code: exports.ErrorCodes.IMAGE_ERR_SIZE_LIMIT
+                });
+                return false;
+            }
+            return true;
+        },
+        isImageActive: function (editor) {
+            var _a = __read(slate.Editor.nodes(editor, {
+                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.image; },
+                universal: true
+            }), 1), match = _a[0];
+            return !!match;
+        },
+        setImageNode: function (editor, path, partial) {
+            slate.Transforms.setNodes(editor, partial, { at: path });
+        }
+    };
+
+    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.15", ngImport: i0__namespace, type: NavSplitLineComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NavSplitLineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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 TheImageComponent = /** @class */ (function (_super) {
         __extends(TheImageComponent, _super);
-        function TheImageComponent(elementRef, sanitizer, imageUploaderService, cdr, theContextService) {
+        function TheImageComponent(elementRef, sanitizer, imageUploaderService, cdr, theContextService, thyPopover, overlay, viewContainerRef) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.sanitizer = sanitizer;
             _this.imageUploaderService = imageUploaderService;
             _this.cdr = cdr;
             _this.theContextService = theContextService;
+            _this.thyPopover = thyPopover;
+            _this.overlay = overlay;
+            _this.viewContainerRef = viewContainerRef;
             _this.imageEntry = {};
             _this.uploading = false;
             _this.percentage = 0;
+            _this.layoutDefaultWidth = 368;
+            _this.layoutOptions = [
+                {
+                    key: exports.Alignment.left,
+                    icon: 'image-left',
+                    name: '左对齐',
+                    handle: function (e, key) { return _this.setImageNode(e, { align: key, layout: undefined }); }
+                },
+                {
+                    key: exports.Alignment.center,
+                    icon: 'image-center',
+                    name: '居中',
+                    handle: function (e, key) { return _this.setImageNode(e, { align: key, layout: undefined }); }
+                },
+                {
+                    key: exports.Alignment.right,
+                    icon: 'image-right',
+                    name: '右对齐',
+                    handle: function (e, key) { return _this.setImageNode(e, { align: key, layout: undefined }); }
+                },
+                {
+                    key: exports.ToolbarActionTypes.split
+                },
+                {
+                    key: exports.LayoutTypes.wrapLeft,
+                    icon: 'wrap-left',
+                    name: '隐藏左边',
+                    handle: function (e, key) { return _this.setImageNode(e, { layout: key }); }
+                },
+                {
+                    key: exports.LayoutTypes.wrapRight,
+                    icon: 'wrap-right',
+                    name: '隐藏右边',
+                    handle: function (e, key) { return _this.setImageNode(e, { layout: key }); }
+                },
+                {
+                    key: 'remove',
+                    icon: 'trash',
+                    name: '删除',
+                    handle: function (e) { return _this.onDelete(e); }
+                }
+            ];
             _this.dragable = false;
             _this.beforeContextChange = function (value) {
                 if (value.element !== _this.element && value.element.thumbUrl) {
@@ -2906,21 +3079,43 @@
                         height: value.element.height,
                         thumbUrl: value.element.thumbUrl,
                         originUrl: value.element.originUrl,
-                        align: value.element.align || exports.Alignment.left
+                        align: value.element.align || exports.Alignment.left,
+                        layout: value.element.layout,
+                        reSized: value.element.reSized || false
                     };
+                    _this.setBlockCardLayoutAttr();
                 }
             };
             return _this;
         }
+        Object.defineProperty(TheImageComponent.prototype, "isOpen", {
+            get: function () {
+                return this.layoutToolbarRef && this.layoutToolbarRef.getOverlayRef() && this.layoutToolbarRef.getOverlayRef().hasAttached();
+            },
+            enumerable: false,
+            configurable: true
+        });
         TheImageComponent.prototype.ngOnInit = function () {
             var _this = this;
             var _a;
+            this.layoutDefaultWidth = this.theContextService.layoutDefaultWidth();
             this.file = (_a = this.theContextService.fileList.find(function (item) { return item.url === _this.element.url; })) === null || _a === void 0 ? void 0 : _a.file;
             if (this.file && this.file instanceof File) {
                 this.uploadImage(this.file);
             }
             _super.prototype.ngOnInit.call(this);
         };
+        TheImageComponent.prototype.onContextChange = function () {
+            _super.prototype.onContextChange.call(this);
+            if (this.initialized) {
+                if (this.isShouldOpen()) {
+                    this.openLayoutToolbar();
+                }
+                if (this.isShouldClose()) {
+                    this.closeLayoutToolbar();
+                }
+            }
+        };
         TheImageComponent.prototype.ngOnDestroy = function () {
             this.uploadingSubscription.unsubscribe();
             this.mouseUpSubscription.unsubscribe();
@@ -3002,18 +3197,20 @@
                 axis: axis,
                 printerPositionX: event.pageX,
                 printerPositionY: event.pageY,
-                internalWidth: this.imageEntry.width | imgElement.width,
-                internalHeight: this.imageEntry.height | imgElement.height,
+                internalWidth: imgElement.width || this.imageEntry.width,
+                internalHeight: imgElement.height || this.imageEntry.height,
                 maxWidth: this.theContextService.getOptions().width
             };
             this.mouseMoveSubscription = this.theContextService.onMouseMove$.subscribe(function (e) { return _this.mouseMoveHandle(e, options); });
         };
         TheImageComponent.prototype.mouseMoveHandle = function (event, options) {
+            var _a;
             if (this.dragable) {
                 var axis = options.axis, printerPositionX = options.printerPositionX, printerPositionY = options.printerPositionY, internalWidth = options.internalWidth, internalHeight = options.internalHeight, maxWidth = options.maxWidth;
                 var isReversal = axis.includes('-');
                 var offsetX = event.pageX - printerPositionX;
                 var offsetY = event.pageY - printerPositionY;
+                var _b = this.element, width = _b.width, height = _b.height;
                 if (isReversal) {
                     offsetX = -offsetX;
                     offsetY = -offsetY;
@@ -3021,11 +3218,15 @@
                 if (this.element.align === 'center') {
                     offsetX = offsetX * 2;
                 }
-                var _b = this.element, width = _b.width, height = _b.height;
                 if (axis.includes('x')) {
                     width = offsetX + internalWidth;
                     if (width >= maxWidth) {
                         width = maxWidth;
+                        // clear `layout` when the image is adjusted to the maximum value under rich media
+                        if ((_a = this.imageEntry) === null || _a === void 0 ? void 0 : _a.layout) {
+                            var path = findPath(this.editor, this.element);
+                            ImageEditor.setImageNode(this.editor, path, { layout: undefined });
+                        }
                     }
                     if (width <= 100) {
                         width = 100;
@@ -3048,6 +3249,9 @@
                         width = internalWidth / ratio;
                     }
                 }
+                if (!this.imageEntry.reSized && this.imageEntry.width !== width) {
+                    this.imageEntry.reSized = true;
+                }
                 this.imageContent.nativeElement.style.width = width + 'px';
                 this.imageContent.nativeElement.style.height = height + 'px';
                 this.imageEntry.width = width;
@@ -3070,10 +3274,81 @@
             }
             $event.stopPropagation();
         };
+        TheImageComponent.prototype.isShouldOpen = function () {
+            return !(this === null || this === void 0 ? void 0 : this.readonly) && (this === null || this === void 0 ? void 0 : this.isCollapsed) && !this.uploading && !this.isOpen;
+        };
+        TheImageComponent.prototype.isShouldClose = function () {
+            return this.isOpen && ((this === null || this === void 0 ? void 0 : this.readonly) || !(this === null || this === void 0 ? void 0 : this.isCollapsed) || this.uploading);
+        };
+        TheImageComponent.prototype.openLayoutToolbar = function () {
+            var _a;
+            this.layoutToolbarRef = this.thyPopover.open(this.layoutToolbar, {
+                origin: this.imageContent,
+                panelClass: ['the-image-toolbar'],
+                placement: 'bottom',
+                insideClosable: false,
+                backdropClosable: true,
+                hasBackdrop: false,
+                offset: 60,
+                viewContainerRef: this.viewContainerRef,
+                scrollStrategy: this.overlay.scrollStrategies.reposition()
+            });
+            (_a = this.layoutToolbarRef) === null || _a === void 0 ? void 0 : _a.getOverlayRef().updatePositionStrategy(this.createPositionStrategy());
+        };
+        TheImageComponent.prototype.closeLayoutToolbar = function () {
+            var _a;
+            (_a = this.layoutToolbarRef) === null || _a === void 0 ? void 0 : _a.close();
+        };
+        TheImageComponent.prototype.layoutActive = function (key) {
+            var _b = this.imageEntry, layout = _b.layout, align = _b.align;
+            return key && ((key === align && !layout) || key === layout);
+        };
+        TheImageComponent.prototype.setImageNode = function (e, partial) {
+            e.preventDefault();
+            var path = findPath(this.editor, this.element);
+            ImageEditor.setImageNode(this.editor, path, partial);
+        };
+        TheImageComponent.prototype.setBlockCardLayoutAttr = function () {
+            var _this = this;
+            Promise.resolve().then(function () {
+                var _a;
+                var currentElement = i1.AngularEditor.toDOMNode(_this.editor, _this.element);
+                var blockCard = currentElement.closest('.slate-block-card');
+                var layout = _this.element.layout;
+                if (blockCard && layout) {
+                    blockCard.setAttribute('layout', layout);
+                }
+                else if (blockCard && !layout) {
+                    blockCard.removeAttribute('layout');
+                }
+                (_a = _this.layoutToolbarRef) === null || _a === void 0 ? void 0 : _a.getOverlayRef().updatePosition();
+            });
+        };
+        TheImageComponent.prototype.onDelete = function (event) {
+            event.preventDefault();
+            deleteElement(this.editor, this.element);
+        };
+        TheImageComponent.prototype.createPositionStrategy = function () {
+            var bottomPosition = {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetX: 0,
+                offsetY: 60
+            };
+            return this.overlay
+                .position()
+                .flexibleConnectedTo(this.imageContent)
+                .withFlexibleDimensions(false)
+                .withGrowAfterOpen(false)
+                .withPush(false)
+                .withPositions([bottomPosition]);
+        };
         return TheImageComponent;
     }(TheBaseElementComponent));
-    TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-operate\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3084,84 +3359,18 @@
             return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$2.DomSanitizer }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [THE_UPLOAD_SERVICE_TOKEN]
-                        }] }, { type: i0__namespace.ChangeDetectorRef }, { type: TheContextService }];
+                        }] }, { type: i0__namespace.ChangeDetectorRef }, { type: TheContextService }, { type: i1__namespace$3.ThyPopover }, { type: i2__namespace.Overlay }, { type: i0__namespace.ViewContainerRef }];
         }, propDecorators: { imageContent: [{
                     type: i0.ViewChild,
                     args: ['imageContent']
                 }], img: [{
                     type: i0.ViewChild,
                     args: ['img', { static: false }]
+                }], layoutToolbar: [{
+                    type: i0.ViewChild,
+                    args: ['layoutToolbar', { static: true }]
                 }] } });
 
-    var ImageEditor = {
-        openUpload: function (editor) {
-            var inputFile = document.createElement('input');
-            inputFile.setAttribute('type', 'file');
-            inputFile.setAttribute('accept', 'image/*');
-            inputFile.onchange = function (event) {
-                ImageEditor.insertImages(editor, event.target.files);
-            };
-            inputFile.click();
-        },
-        insertImages: function (editor, imageFiles) {
-            var e_1, _a;
-            var contextService = editor.injector.get(TheContextService);
-            var imageNodes = [];
-            var text = { text: '' };
-            try {
-                for (var imageFiles_1 = __values(imageFiles), imageFiles_1_1 = imageFiles_1.next(); !imageFiles_1_1.done; imageFiles_1_1 = imageFiles_1.next()) {
-                    var image = imageFiles_1_1.value;
-                    var verify = ImageEditor.verifyImage(editor, image);
-                    if (verify) {
-                        var url = URL.createObjectURL(image);
-                        contextService.setUploadFileList({
-                            url: url,
-                            file: image
-                        });
-                        imageNodes.push({ type: exports.ElementKinds.image, url: url, children: [text] });
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (imageFiles_1_1 && !imageFiles_1_1.done && (_a = imageFiles_1.return)) _a.call(imageFiles_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            if (imageNodes.length > 0) {
-                var at = editor.selection;
-                slate.Transforms.insertNodes(editor, imageNodes, { at: at });
-                if (isCollapsed(editor.selection) && isEmptyParagraph(editor)) {
-                    slate.Transforms.removeNodes(editor, { at: at });
-                    slate.Transforms.select(editor, at);
-                }
-            }
-        },
-        verifyImage: function (editor, image) {
-            if (!PICTURE_ACCEPTED_UPLOAD_MIME.includes(image.type)) {
-                editor.onError({
-                    code: exports.ErrorCodes.IMAGE_ERR_MIME_FORMAT
-                });
-                return false;
-            }
-            if (image.size / 1000000 >= PICTURE_ACCEPTED_UPLOAD_SIZE) {
-                editor.onError({
-                    code: exports.ErrorCodes.IMAGE_ERR_SIZE_LIMIT
-                });
-                return false;
-            }
-            return true;
-        },
-        isImageActive: function (editor) {
-            var _a = __read(slate.Editor.nodes(editor, {
-                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.image; },
-                universal: true
-            }), 1), match = _a[0];
-            return !!match;
-        }
-    };
-
     var withImage = function (editor) {
         var insertData = editor.insertData, isVoid = editor.isVoid, renderElement = editor.renderElement, isBlockCard = editor.isBlockCard;
         editor.isVoid = function (element) {
@@ -4309,7 +4518,7 @@
         return TheHrComponent;
     }(TheBaseElementComponent));
     TheHrComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheHrComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheHrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0__namespace, template: "\n        <div class=\"the-hr\" contenteditable=\"false\" [ngClass]=\"{ active: selection }\">\n            <hr class=\"the-hr\" />\n            <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        </div>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TheHrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0__namespace, template: "\n        <div class=\"the-hr\" contenteditable=\"false\" [ngClass]=\"{ active: selection }\">\n            <hr class=\"the-hr\" />\n            <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        </div>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheHrComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6237,6 +6446,14 @@
             }
             return false;
         },
+        isDisabled: function (editor) {
+            if (editor.selection) {
+                var disableGroup = [exports.ElementKinds.image];
+                var anchorBlock$1 = anchorBlock(editor);
+                return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
+            }
+            return false;
+        },
         setAlign: function (editor, alignment) {
             if (TableEditor.setAlign(editor, alignment)) {
                 return;
@@ -6258,7 +6475,8 @@
             dropdownMode: exports.DropdownMode.icon,
             dropdownItemKey: exports.ToolbarActionTypes.alignLeft,
             includes: [exports.ToolbarActionTypes.alignLeft, exports.ToolbarActionTypes.alignCenter, exports.ToolbarActionTypes.alignRight],
-            name: '对齐方式'
+            name: '对齐方式',
+            disable: function (editor) { return AlignEditor.isDisabled(editor); }
         },
         {
             key: exports.ToolbarActionTypes.alignLeft,
@@ -6492,7 +6710,7 @@
         return TheColorSelectComponent;
     }());
     TheColorSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__namespace, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheColorSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0__namespace, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6700,7 +6918,7 @@
         return TheColorToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheColorToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, deps: [{ token: i1__namespace$3.ThyPopover }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TheColorToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            class=\"link-width-down\"\n            thyIconNavLink\n            [ngStyle]=\"{\n                width: item.key === 'color' ? '42px' : 'auto'\n            }\"\n            [thyTooltip]=\"item.name\"\n            [thyIconNavLinkActive]=\"active\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"active\"></thy-icon>\n            <thy-icon\n                [ngClass]=\"{\n                    'link-down-icon': true,\n                    'font-size-sm': true,\n                    'text-desc': true\n                }\"\n                thyIconName=\"caret-down\"\n            ></thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColorToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6971,7 +7189,7 @@
         return TheToolbarDropdownComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7011,49 +7229,6 @@
                     args: ['class.disabled']
                 }] } });
 
-    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.15", ngImport: i0__namespace, type: NavSplitLineComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NavSplitLineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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, contextService, ngZone, config) {
@@ -7268,7 +7443,7 @@
         return TheCodeComponent;
     }(TheBaseElementComponent));
     TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7497,7 +7672,7 @@
         return TheLinkEditComponent;
     }());
     TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$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"] }] });
+    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7788,7 +7963,7 @@
         return TheTableSelectComponent;
     }());
     TheTableSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableSelectComponent, deps: [{ token: i1__namespace$6.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\n        <span\n            *ngFor=\"let item of tableData, let colIndex = index\"\n            [ngClass]=\"{'active-cell': rowIndex<= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true}\"\n            (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n        >\n        </span>\n    </div>\n    <span class=\"selector-text\">{{maxRowIndex+1}} x {{maxColIndex+1}}</span>\n</div>\n", directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    TheTableSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0__namespace, template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\n        <span\n            *ngFor=\"let item of tableData, let colIndex = index\"\n            [ngClass]=\"{'active-cell': rowIndex<= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true}\"\n            (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n        >\n        </span>\n    </div>\n    <span class=\"selector-text\">{{maxRowIndex+1}} x {{maxColIndex+1}}</span>\n</div>\n", directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7857,7 +8032,7 @@
         return TheTableToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheTableToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, deps: [{ token: i1__namespace$6.ThyPopover }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheTableToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <a\n            thyIconNavLink\n            class=\"link-with-down\"\n            [thyTooltip]=\"item?.name\"\n            thyTooltipPlacement=\"top\"\n            [thyIconNavLinkActive]=\"active\"\n            (mousedown)=\"execute($event)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <thy-icon class=\"link-down-icon font-size-sm text-desc table-down-icon\" thyIconName=\"caret-down\"> </thy-icon>\n        </a>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8633,6 +8808,43 @@
         });
         return matchClass;
     }
+    function findRelativeElementByPoint(editor, x, y, mode) {
+        var editableElement = i1.EDITOR_TO_ELEMENT.get(editor);
+        var rectEditable = editableElement.getBoundingClientRect();
+        if (x > rectEditable.x && x < rectEditable.x + rectEditable.width) {
+            var centerX = rectEditable.x + rectEditable.width / 2;
+            var relativeElement = document.elementFromPoint(mode === 'highest' ? centerX : x, y);
+            return relativeElement;
+        }
+        return null;
+    }
+    function findNodeEntryByPoint(editor, x, y, mode) {
+        var editableElement = i1.EDITOR_TO_ELEMENT.get(editor);
+        var rootElement = null;
+        var relativeElement = findRelativeElementByPoint(editor, x, y, mode);
+        // 获取最顶层的DOM
+        if (mode === 'highest') {
+            while (relativeElement && editableElement.contains(relativeElement)) {
+                relativeElement = relativeElement.closest('[data-slate-node="element"]');
+                if (relativeElement) {
+                    rootElement = relativeElement;
+                    relativeElement = relativeElement.parentElement;
+                }
+            }
+        }
+        if (!mode) {
+            if (relativeElement && editableElement.contains(relativeElement)) {
+                relativeElement = relativeElement.closest('[data-slate-node="element"]');
+                rootElement = relativeElement;
+            }
+        }
+        if (rootElement) {
+            var node = i1.AngularEditor.toSlateNode(editor, rootElement);
+            var path = i1.AngularEditor.findPath(editor, node);
+            return [node, path];
+        }
+        return null;
+    }
 
     function splitCell(editor) {
         var opts = new TableOptions$1();
@@ -8796,7 +9008,7 @@
         return TheTableToolbarComponent;
     }());
     TheTableToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, deps: [{ token: i0__namespace.NgZone }, { token: TheColorSelectService }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$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"] }] });
+    TheTableToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0__namespace, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8860,7 +9072,7 @@
         return TheContextMenuComponent;
     }());
     TheContextMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__namespace, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5__namespace$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+    TheContextMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0__namespace, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5__namespace$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheContextMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9263,7 +9475,7 @@
         return TheInsertMarkComponent;
     }());
     TheInsertMarkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0__namespace, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    TheInsertMarkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInsertMarkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9779,7 +9991,7 @@
                 provide: TheTableToken,
                 useExisting: TheTableComponent
             }
-        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: i0.ElementRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: i0.ElementRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10213,7 +10425,7 @@
         };
         return TheColumnResizeOverlayHandleComponent;
     }());
-    TheColumnResizeOverlayHandleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: i6.DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheColumnResizeOverlayHandleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: i10.DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TheColumnResizeOverlayHandleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColumnResizeOverlayHandleComponent, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheColumnResizeOverlayHandleComponent, decorators: [{
                 type: i0.Component,
@@ -10225,7 +10437,7 @@
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: ResizeRef }, { type: TableCellEventDispatcher }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i6.DOCUMENT]
+                            args: [i10.DOCUMENT]
                         }] }, { type: ColumnResizeNotifierSource }];
         } });
 
@@ -11531,7 +11743,7 @@
         return TheVerticalToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$6.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11776,7 +11988,7 @@
         return TheToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$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"] }] });
+    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11852,7 +12064,7 @@
         return TheQuickToolbarComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
     TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: 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.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12229,7 +12441,7 @@
         return TheIndentToolbarComponent;
     }(TheToolbarBaseItemComponent));
     TheIndentToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheIndentToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$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.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheIndentToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: menu.name, shortcutKey: menu.shortcutKey }\"\n                thyTooltipPlacement=\"right\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n\n<ng-template #tooltip let-data>{{ data?.shortcutKey }}</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12881,7 +13093,7 @@
         return TheToolbarComponent;
     }());
     TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: 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.15", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13060,7 +13272,7 @@
         TheQuickInsertComponent.prototype.checkStatus = function () {
             var _a;
             var editor = this.editor;
-            if (this.isVisible && isCleanEmptyParagraph(editor) && !this.hasExcludeAttribute()) {
+            if (this.isVisible && isCleanEmptyParagraph(editor) && !this.hasExcludeAttribute() && !this.isRichMediaScope()) {
                 var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
                 var rootNode = i1.AngularEditor.toDOMNode(editor, block);
                 this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
@@ -13068,6 +13280,17 @@
             }
             this.isHide = true;
         };
+        TheQuickInsertComponent.prototype.isRichMediaScope = function () {
+            var _a;
+            var editor = this.editor;
+            if (editor === null || editor === void 0 ? void 0 : editor.selection) {
+                var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                var rootNode = i1.AngularEditor.toDOMNode(editor, block);
+                var firstElementChild = rootNode.firstElementChild;
+                return (firstElementChild === null || firstElementChild === void 0 ? void 0 : firstElementChild.offsetLeft) > 0;
+            }
+            return false;
+        };
         TheQuickInsertComponent.prototype.hasExcludeAttribute = function () {
             var marks = getSelectionMarks(this.editor);
             var fontSizeMark = marks[exports.MarkTypes.fontSize];
@@ -13094,7 +13317,7 @@
         return TheQuickInsertComponent;
     }());
     TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13119,6 +13342,359 @@
                     args: ['mousedown', ['$event']]
                 }] } });
 
+    var getCurrentTarget = function (editor, event) {
+        var editorElement = i1.EDITOR_TO_ELEMENT.get(editor);
+        var _a = editorElement.getBoundingClientRect(), left = _a.left, right = _a.right;
+        var _b = window.getComputedStyle(editorElement, null), paddingLeft = _b.paddingLeft, paddingRight = _b.paddingRight;
+        var paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
+        var paddingRightPixels = coercePixelsFromCssValue(paddingRight);
+        var x = event.x;
+        if (event.x <= left + paddingLeftPixels || event.x >= right - paddingRightPixels) {
+            x = left + paddingLeftPixels;
+        }
+        var nodeEntry = findNodeEntryByPoint(editor, x, event.y);
+        if (nodeEntry) {
+            return TheEditor.toDOMNode(editor, nodeEntry[0]);
+        }
+    };
+
+    var getHoverDirection = function (editor, event) {
+        var rootNode = getCurrentTarget(editor, event);
+        if (rootNode) {
+            var _a = rootNode.getBoundingClientRect(), top = _a.top, bottom = _a.bottom;
+            var middleHeight = (bottom - top) / 2;
+            if (top + middleHeight > event.clientY) {
+                return 'top';
+            }
+            return 'bottom';
+        }
+    };
+
+    var removeDropThumbLine = function (editor) {
+        var element = i1.EDITOR_TO_ELEMENT.get(editor);
+        var dropThumbLine = element.querySelector('.' + DROP_THUMB_LINE);
+        if (dropThumbLine) {
+            dropThumbLine.remove();
+        }
+    };
+
+    var moveDragNode = function (editor, dragNode, event) {
+        event.stopPropagation();
+        var element = i1.EDITOR_TO_ELEMENT.get(editor);
+        var dropThumbLine = element.querySelector('.' + DROP_THUMB_LINE);
+        var parentElement = dropThumbLine && dropThumbLine.parentNode;
+        if (parentElement) {
+            var node = TheEditor.toSlateNode(editor, parentElement);
+            var dropPath_1 = node && TheEditor.findPath(editor, node);
+            if (dropPath_1.length) {
+                var dragPath_1 = dragNode.path;
+                var before = slate.Path.isBefore(dragPath_1, dropPath_1) && slate.Path.isSibling(dragPath_1, dropPath_1);
+                dropPath_1 = before ? dropPath_1 : slate.Path.next(dropPath_1);
+                if (dropPath_1.length) {
+                    slate.Editor.withoutNormalizing(editor, function () {
+                        slate.Transforms.moveNodes(editor, {
+                            at: dragPath_1,
+                            to: dropPath_1
+                        });
+                    });
+                }
+            }
+        }
+        removeDropThumbLine(editor);
+    };
+
+    var isValidDrag = function (editor, dragNode, currentTarget) {
+        var _a;
+        var node = TheEditor.toSlateNode(editor, currentTarget);
+        var dropPath = TheEditor.findPath(editor, node);
+        var dragPath = TheEditor.findPath(editor, dragNode);
+        if (dragPath[0] === dropPath[0] && dropPath.length > 1) {
+            // 阻止list元素拖入自身
+            return false;
+        }
+        var allElementOptions = DefaultElementOptions;
+        if ((_a = editor.extraElementOptions) === null || _a === void 0 ? void 0 : _a.length) {
+            var extraInfo = mergeElementOptions(editor.extraElementOptions);
+            allElementOptions = Object.values(extraInfo);
+        }
+        var types = allElementOptions.map(function (item) { return item.type; });
+        if (types.indexOf(node.type) > -1 && allElementOptions[types.indexOf(node.type)].isSecondaryContainer) {
+            // 阻止向table-celld等二级容器中拖入
+            return false;
+        }
+        var containerParent = slate.Editor.above(editor, {
+            at: dropPath,
+            mode: 'lowest',
+            match: function (node) {
+                return node && node.type && types.includes(node.type);
+            }
+        });
+        if (containerParent) {
+            var inValidChildrenTypes = allElementOptions.find(function (item) { return item.type === containerParent[0].type; }).inValidChildrenTypes;
+            if (inValidChildrenTypes.includes(dragNode.type)) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    var SNAPSHOT_PADDING_WIDTH = 5;
+    var SNAPSHOT_LIMI_HEIGHT = 70;
+    var DRAG_ICON_SIZE = 24;
+    var DRAG_ICON_OFFSET = 5;
+    var TheDndComponent = /** @class */ (function () {
+        function TheDndComponent(renderer, elementRef, ngZone, cdr) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.ngZone = ngZone;
+            this.cdr = cdr;
+            this.isDraging = false;
+            this.destroy$ = new rxjs.Subject();
+            this.dragChange = new i0.EventEmitter();
+            this.dropThumbLine = document.createElement('div');
+            this.dropThumbLine.className = DROP_THUMB_LINE;
+        }
+        Object.defineProperty(TheDndComponent.prototype, "nativeElement", {
+            get: function () {
+                return this.elementRef.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TheDndComponent.prototype, "editableElement", {
+            get: function () {
+                return this.editor && i1.EDITOR_TO_ELEMENT.get(this.editor);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheDndComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            var contextService = this.editor.injector.get(TheContextService);
+            this.ngZone.runOutsideAngular(function () {
+                rxjs.merge(rxjs.fromEvent(_this.editableElement, "mousemove"), rxjs.fromEvent(_this.editableElement, "mouseleave"))
+                    .pipe(operators.takeUntil(_this.destroy$), operators.filter(function () {
+                    return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
+                }))
+                    .subscribe(function (e) { return _this.setDragIcon(e); });
+                rxjs.fromEvent(document, "drop")
+                    .pipe(operators.takeUntil(_this.destroy$), operators.filter(function () {
+                    return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
+                }))
+                    .subscribe(function (e) { return _this.onDrop(e); });
+                rxjs.fromEvent(document, "dragover")
+                    .pipe(operators.takeUntil(_this.destroy$), operators.filter(function () {
+                    return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
+                }))
+                    .subscribe(function (e) { return _this.onDragover(e); });
+                rxjs.fromEvent(document, "scroll")
+                    .pipe(operators.takeUntil(_this.destroy$), operators.filter(function () {
+                    return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
+                }))
+                    .subscribe(function (e) {
+                    e.preventDefault();
+                    var scrollPosition = window.scrollY;
+                    if (!_this.isScrolling && _this.isDraging) {
+                        window.requestAnimationFrame(function () {
+                            if (_this.editableTop) {
+                                // 滚动过程中，通过设置父级元素来设置snapshot位置
+                                _this.updateDndContainerPosition(null, scrollPosition + _this.editableTop + 'px');
+                            }
+                            _this.isScrolling = false;
+                        });
+                        _this.isScrolling = true;
+                    }
+                });
+            });
+            this.setVisibility(false);
+            this.valueChangeHandle();
+        };
+        TheDndComponent.prototype.valueChangeHandle = function () {
+            var _this = this;
+            var onChange = this.editor.onChange;
+            this.editor.onChange = function () {
+                var ops = _this.editor.operations;
+                var skip = ops.length === 1 && slate.Operation.isSelectionOperation(ops[0]);
+                if (!skip) {
+                    _this.setVisibility(false);
+                }
+                onChange();
+            };
+        };
+        TheDndComponent.prototype.updateDndContainerPosition = function (left, top) {
+            var element = this.elementRef.nativeElement;
+            var parentElement = element.parentElement;
+            top && this.renderer.setStyle(parentElement, 'top', top);
+            left && this.renderer.setStyle(parentElement, 'left', left);
+        };
+        TheDndComponent.prototype.getEditableTop = function (event) {
+            var offsetHeight = document.documentElement.offsetHeight;
+            var height = this.editableElement.getBoundingClientRect().height;
+            if (event.clientY < this.dragElementHeight) {
+                this.editableTop = -this.editableElement.offsetTop;
+                return;
+            }
+            if (height > event.pageY && event.clientY + this.dragElementHeight >= offsetHeight) {
+                this.editableTop = event.clientY - this.editableElement.offsetTop;
+                return;
+            }
+            this.editableTop = null;
+        };
+        TheDndComponent.prototype.onDragStart = function (event) {
+            this.isDraging = true;
+            this.dragChange.emit(this.isDraging);
+            this.dragSnapshotContent = document.querySelector('.drag-snapshot-container');
+            this.dragSnapshotContent.className = 'the-editor-typo drag-snapshot-container';
+            this.dragSnapshotContent.appendChild(this.dragElement.cloneNode(true));
+            this.dragElement.style.opacity = '0.3';
+        };
+        TheDndComponent.prototype.onDragEnd = function (event) {
+            this.dragElement.style.opacity = '';
+            this.isDraging = false;
+            this.setVisibility(false);
+            this.resetDragSnapshotContent();
+            this.dragChange.emit(this.isDraging);
+        };
+        TheDndComponent.prototype.onDrop = function (event) {
+            event.preventDefault();
+            if (this.isDraging) {
+                moveDragNode(this.editor, this.dragNode, event);
+            }
+        };
+        TheDndComponent.prototype.onDragover = function (event) {
+            event.preventDefault();
+            if (this.isDraging && !this.isScrolling) {
+                this.getEditableTop(event);
+                var offsetWidth = document.documentElement.offsetWidth;
+                var _b = this.editableElement.getBoundingClientRect(), editorLeft = _b.left, editorTop = _b.top, height = _b.height;
+                var top = 0;
+                var left = 0;
+                if (editorLeft > 0) {
+                    if (event.clientX + this.dragElementWidth / 2 > offsetWidth) {
+                        left = event.pageX - editorLeft - this.elementRef.nativeElement.offsetWidth;
+                    }
+                    else {
+                        left = Math.max(event.pageX - editorLeft, -editorLeft) + 10;
+                    }
+                }
+                var paddingTop = 0; // paddingTop: 编辑器距离顶部的距离
+                if (editorTop >= 0) {
+                    // 无滚动情况下
+                    top = event.clientY - this.editableElement.offsetTop;
+                    paddingTop = editorTop - this.editableElement.offsetTop;
+                }
+                else {
+                    // 有滚动距离
+                    top = Math.abs(editorTop) + event.clientY; // 滚动距离 + 鼠标clientY
+                    paddingTop = event.pageY - this.editableElement.offsetTop - top;
+                    // 防止底部出现滚动条
+                    if (paddingTop < height - top) {
+                        top = top + paddingTop;
+                    }
+                }
+                this.updateDndContainerPosition(left + 'px', top + 'px');
+                this.setSnapshotStyle(event);
+                this.setDropThumbLine(event);
+            }
+        };
+        TheDndComponent.prototype.setDropThumbLine = function (event) {
+            var _a;
+            var element = getCurrentTarget(this.editor, event);
+            var direction = getHoverDirection(this.editor, event);
+            if (element) {
+                if (direction && direction === 'top') {
+                    element = (_a = element.previousElementSibling) === null || _a === void 0 ? void 0 : _a.querySelector('[data-slate-node="element"]');
+                }
+                if (element && isValidDrag(this.editor, this.dragNode.node, element)) {
+                    element.appendChild(this.dropThumbLine);
+                }
+            }
+        };
+        TheDndComponent.prototype.setDragIcon = function (event) {
+            if (!this.isDraging) {
+                var nodeEntry = findNodeEntryByPoint(this.editor, event.x, event.y, 'highest');
+                if (nodeEntry && !slate.Editor.isEmpty(this.editor, nodeEntry[0])) {
+                    var rootNode = i1.AngularEditor.toDOMNode(this.editor, nodeEntry[0]);
+                    this.dragNode = {
+                        node: nodeEntry[0],
+                        path: nodeEntry[1]
+                    };
+                    this.dragElement = rootNode;
+                    var lineHeight = coercePixelsFromCssValue(window.getComputedStyle(rootNode)['lineHeight']);
+                    var offsetTop = rootNode.offsetTop + rootNode.offsetParent.offsetTop + (lineHeight - DRAG_ICON_SIZE) / 2;
+                    var offsetLeft = rootNode.offsetLeft + rootNode.offsetParent.offsetLeft;
+                    this.updateDndContainerPosition(offsetLeft - DRAG_ICON_SIZE - DRAG_ICON_OFFSET + 'px', offsetTop + 'px');
+                    this.setVisibility(true);
+                }
+                else {
+                    this.setVisibility(false);
+                }
+            }
+        };
+        TheDndComponent.prototype.setSnapshotStyle = function (event) {
+            var _b = this.dragElement.getBoundingClientRect(), width = _b.width, height = _b.height;
+            this.dragElementHeight = height;
+            this.dragElementWidth = width;
+            var dragSnapshotContentStyle = "visibility: visible; width: " + (width + SNAPSHOT_PADDING_WIDTH * 2) + "px;";
+            if (height > SNAPSHOT_LIMI_HEIGHT) {
+                dragSnapshotContentStyle = dragSnapshotContentStyle + 'transform: scale(0.45);';
+                this.dragElementHeight = this.dragElementHeight * 0.45;
+                this.dragElementWidth = this.dragElementWidth * 0.45;
+            }
+            var snapshotTop = 0;
+            var snapshotLeft = 0;
+            // 上下移动：超出屏幕高度，重新设置snapshot的位置
+            if (event.clientY + this.dragElementHeight > document.documentElement.offsetHeight) {
+                snapshotTop = this.dragElementHeight;
+            }
+            else {
+                snapshotTop = 0;
+            }
+            // 左右移动：超出屏幕宽度，重新设置snapshot的位置
+            if (event.clientX + this.dragElementWidth / 2 > document.documentElement.offsetWidth) {
+                snapshotLeft = this.dragElementWidth;
+            }
+            else {
+                snapshotLeft = 0;
+            }
+            dragSnapshotContentStyle = dragSnapshotContentStyle + ("top: " + -snapshotTop + "px; left: " + -snapshotLeft + "px;");
+            this.dragSnapshotContent.setAttribute('style', dragSnapshotContentStyle);
+        };
+        TheDndComponent.prototype.resetDragSnapshotContent = function () {
+            this.dragSnapshotContent.className = 'drag-snapshot-container';
+            this.dragSnapshotContent.setAttribute('style', '');
+            this.dragSnapshotContent.innerHTML = '';
+        };
+        TheDndComponent.prototype.setVisibility = function (visible) {
+            if (visible === void 0) { visible = true; }
+            this.nativeElement.parentNode.style.visibility = visible ? 'visible' : 'hidden';
+        };
+        TheDndComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return TheDndComponent;
+    }());
+    TheDndComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheDndComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheDndComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDndComponent, selector: "[theDnd]", inputs: { editor: "editor" }, outputs: { dragChange: "dragChange" }, host: { classAttribute: "the-drag-drop" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0__namespace, template: "<div\n    draggable=\"true\"\n    class=\"the-drag-drop-icon\"\n    [ngStyle]=\"{ opacity: isDraging ? 0 : '' }\"\n    (dragstart)=\"onDragStart($event)\"\n    (dragend)=\"onDragEnd($event)\"\n>\n    <thy-icon thyIconName=\"drag\"> </thy-icon>\n</div>\n", components: [{ type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheDndComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: '[theDnd]',
+                        templateUrl: './dnd.component.html',
+                        host: {
+                            class: 'the-drag-drop'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { editor: [{
+                    type: i0.Input
+                }], dragChange: [{
+                    type: i0.Output
+                }], content: [{
+                    type: i0.ViewChild,
+                    args: ['content', { static: false }]
+                }] } });
+
     var ElementStylePipe = /** @class */ (function () {
         function ElementStylePipe() {
         }
@@ -13195,7 +13771,7 @@
         return TheTemplateComponent;
     }());
     TheTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTemplateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n", components: [{ type: TheDefaultElementComponent, selector: "[theDefaultElement]" }], directives: [{ type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n", components: [{ type: TheDefaultElementComponent, selector: "[theDefaultElement]" }], directives: [{ type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTemplateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13332,11 +13908,16 @@
             _this.onSlaDragStart = function (event) { };
             _this.onSlaDragOver = function (event) { };
             _this.onDrop = function (event) {
-                event.stopPropagation();
+                if (_this.isDraging) {
+                    event.preventDefault();
+                }
                 _this.theOnDOMEvent.emit({
                     nativeEvent: event
                 });
             };
+            _this.onDragChange = function (isDraging) {
+                _this.isDraging = isDraging;
+            };
             return _this;
         }
         Object.defineProperty(TheEditorComponent.prototype, "theGlobalToolbarInstance", {
@@ -13593,11 +14174,11 @@
             TheContextService,
             TheColorSelectService,
             {
-                provide: i4$2.NG_VALUE_ACCESSOR,
+                provide: i4$1.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: 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"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <div class=\"drag-container\">\n        <div #drag theDnd [editor]=\"editor\" (dragChange)=\"onDragChange($event)\"></div>\n        <div class=\"drag-snapshot-container\"></div>\n    </div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheDndComponent, selector: "[theDnd]", inputs: ["editor"], outputs: ["dragChange"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13609,7 +14190,7 @@
                             TheContextService,
                             TheColorSelectService,
                             {
-                                provide: i4$2.NG_VALUE_ACCESSOR,
+                                provide: i4$1.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                                 multi: true
                             }
@@ -13776,7 +14357,7 @@
         return TheToolbarGroupComponent;
     }());
     TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13802,17 +14383,17 @@
                 }] } });
 
     var TETHYS = [
-        i4$1.ThyIconModule,
+        i4.ThyIconModule,
         avatar.ThyAvatarModule,
         i3.ThyNavModule,
         i2$1.ThyFormModule,
         i5$3.ThySharedModule,
         i2$2.ThyListModule,
-        i5$1.ThyTooltipModule,
-        i4.ThyProgressModule,
+        i5.ThyTooltipModule,
+        i6.ThyProgressModule,
         autocomplete.ThyAutocompleteModule,
         i5$2.ThyActionMenuModule,
-        i5.ThyInputModule,
+        i5$1.ThyInputModule,
         select.ThySelectModule,
         i1$5.ThyButtonModule,
         i1$4.ThyNotifyModule,
@@ -13859,7 +14440,8 @@
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        TheInlineCodeComponent
+        TheInlineCodeComponent,
+        TheDndComponent
     ];
     var PIPES = [ElementStylePipe, ElementClassPipe];
     var TheEditorModule = /** @class */ (function () {
@@ -13903,17 +14485,18 @@
             TheTableComponent,
             TheTableRowComponent,
             TheTdComponent,
-            TheInlineCodeComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
+            TheInlineCodeComponent,
+            TheDndComponent], imports: [i10.CommonModule, i1.SlateModule, i4$1.FormsModule, i4.ThyIconModule,
             avatar.ThyAvatarModule,
             i3.ThyNavModule,
             i2$1.ThyFormModule,
             i5$3.ThySharedModule,
             i2$2.ThyListModule,
-            i5$1.ThyTooltipModule,
-            i4.ThyProgressModule,
+            i5.ThyTooltipModule,
+            i6.ThyProgressModule,
             autocomplete.ThyAutocompleteModule,
             i5$2.ThyActionMenuModule,
-            i5.ThyInputModule,
+            i5$1.ThyInputModule,
             select.ThySelectModule,
             i1$5.ThyButtonModule,
             i1$4.ThyNotifyModule,
@@ -13926,12 +14509,12 @@
                 useValue: TheToolbarGroupComponent
             },
             THE_CODE_MODE_PROVIDER
-        ], imports: [__spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
+        ], imports: [__spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4$1.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule])] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: __spreadArray(__spreadArray(__spreadArray([TheEditorComponent], __read(PIPES)), __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
-                        imports: __spreadArray(__spreadArray([i6.CommonModule, i1.SlateModule, i4$2.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
+                        imports: __spreadArray(__spreadArray([i10.CommonModule, i1.SlateModule, i4$1.FormsModule], __read(TETHYS)), [i8.CodemirrorModule, TheColumnSizeModule]),
                         exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent],
                         entryComponents: __spreadArray(__spreadArray([], __read(COMPONENTS)), __read(PLUGIN_COMPONENTS)),
                         providers: [
@@ -13968,6 +14551,7 @@
     exports.ColorEditor = ColorEditor;
     exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
     exports.DEFAULT_SCROLL_CONTAINER = DEFAULT_SCROLL_CONTAINER;
+    exports.DROP_THUMB_LINE = DROP_THUMB_LINE;
     exports.DefaultElementOptions = DefaultElementOptions;
     exports.DefaultGlobalToolbarDefinition = DefaultGlobalToolbarDefinition;
     exports.DefaultInlineToolbarDefinition = DefaultInlineToolbarDefinition;