@worktile/theia 2.3.0-next.1 → 2.3.0

package/bundles/worktile-theia.umd.js

@@ -379,7 +379,6 @@
     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";
@@ -2577,6 +2576,110 @@
         return false;
     };
 
+    var mergeElementOptions = function (elementOptions) {
+        elementOptions = elementOptions.filter(function (item) { return item.inValidChildrenTypes.length > 0; });
+        var combinationData = __spreadArray(__spreadArray([], __read(DefaultElementOptions)), __read(elementOptions));
+        var dataInfo = {};
+        combinationData.forEach(function (item) {
+            var type = item.type, inValidChildrenTypes = item.inValidChildrenTypes, isIndivisible = item.isIndivisible, isSecondaryContainer = item.isSecondaryContainer;
+            if (!dataInfo[type]) {
+                dataInfo[type] = {
+                    type: type,
+                    inValidChildrenTypes: inValidChildrenTypes,
+                    isIndivisible: isIndivisible,
+                    isSecondaryContainer: isSecondaryContainer
+                };
+            }
+            dataInfo[type].inValidChildrenTypes = Array.from(new Set(__spreadArray(__spreadArray([], __read(inValidChildrenTypes)), __read(dataInfo[type].inValidChildrenTypes))));
+        });
+        return dataInfo;
+    };
+
+    /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
+    function coercePixelsFromCssValue(cssValue) {
+        var match = cssValue.match(/(\d+(\.\d+)?)px/);
+        if (match) {
+            return Number(match[1]);
+        }
+    }
+    function getElementWidth(element) {
+        // Optimization: Check style.width first as we probably set it already before reading
+        // offsetWidth which triggers layout.
+        return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
+    }
+    function getElementHeight(element) {
+        return Math.round(element.getBoundingClientRect().height);
+    }
+    function getColsTotalWidth(cols) {
+        return cols.reduce(function (total, col) {
+            return total + getElementWidth(col);
+        }, 0);
+    }
+    function getRowsTotalHeight(rows) {
+        return rows.reduce(function (total, row) {
+            return total + getElementHeight(row);
+        }, 0);
+    }
+    function useElementStyle(el, element) {
+        if (element.align) {
+            el.style.textAlign = element.align || exports.Alignment.left;
+        }
+        if (element.textIndent) {
+            el.style.textIndent = element.textIndent + 'em';
+        }
+        if (element.verticalAlign) {
+            el.style.verticalAlign = element.verticalAlign;
+        }
+    }
+    function getElementClassByPrefix(el, prefix) {
+        var matchClass = null;
+        el.classList.forEach(function (value, key) {
+            if (value.includes(prefix)) {
+                matchClass = value;
+            }
+        });
+        return matchClass;
+    }
+    function findRelativeElementByPoint(editor, x, y, mode) {
+        var editableElement = i1.EDITOR_TO_ELEMENT.get(editor);
+        var rectEditable = editableElement.getBoundingClientRect();
+        if (x > rectEditable.x && x < rectEditable.x + rectEditable.width) {
+            var paddingLeft = window.getComputedStyle(editableElement, null).paddingLeft;
+            var paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
+            var startX = rectEditable.left + paddingLeftPixels;
+            var relativeElement = document.elementFromPoint(mode === 'highest' ? startX : x, y);
+            return relativeElement;
+        }
+        return null;
+    }
+    function findNodeEntryByPoint(editor, x, y, mode) {
+        var editableElement = i1.EDITOR_TO_ELEMENT.get(editor);
+        var rootElement = null;
+        var relativeElement = findRelativeElementByPoint(editor, x, y, mode);
+        // 获取最顶层的DOM
+        if (mode === 'highest') {
+            while (relativeElement && editableElement.contains(relativeElement)) {
+                relativeElement = relativeElement.closest('[data-slate-node="element"]');
+                if (relativeElement) {
+                    rootElement = relativeElement;
+                    relativeElement = relativeElement.parentElement;
+                }
+            }
+        }
+        if (!mode) {
+            if (relativeElement && editableElement.contains(relativeElement)) {
+                relativeElement = relativeElement.closest('[data-slate-node="element"]');
+                rootElement = relativeElement;
+            }
+        }
+        if (rootElement) {
+            var node = i1.AngularEditor.toSlateNode(editor, rootElement);
+            var path = i1.AngularEditor.findPath(editor, node);
+            return [node, path];
+        }
+        return null;
+    }
+
     var withDeserializeMd = function (options) { return function (editor) {
         var insertData = editor.insertData, onKeydown = editor.onKeydown;
         editor.onKeydown = function (event) {
@@ -2681,25 +2784,6 @@
         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;
@@ -3054,13 +3138,13 @@
                 {
                     key: exports.LayoutTypes.wrapLeft,
                     icon: 'wrap-left',
-                    name: '隐藏左边',
+                    name: '图片居左',
                     handle: function (e, key) { return _this.setImageNode(e, { layout: key }); }
                 },
                 {
                     key: exports.LayoutTypes.wrapRight,
                     icon: 'wrap-right',
-                    name: '隐藏右边',
+                    name: '图片居右',
                     handle: function (e, key) { return _this.setImageNode(e, { layout: key }); }
                 },
                 {
@@ -3275,25 +3359,31 @@
             $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;
+            var richMedia = this.theContextService.getOptions().theOptions.richMedia;
+            return !(this === null || this === void 0 ? void 0 : this.readonly) && richMedia && (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 _this = this;
             var _a;
             this.layoutToolbarRef = this.thyPopover.open(this.layoutToolbar, {
                 origin: this.imageContent,
-                panelClass: ['the-image-toolbar'],
+                panelClass: ['the-block-toolbar'],
                 placement: 'bottom',
                 insideClosable: false,
                 backdropClosable: true,
                 hasBackdrop: false,
-                offset: 60,
+                offset: 10,
                 viewContainerRef: this.viewContainerRef,
                 scrollStrategy: this.overlay.scrollStrategies.reposition()
             });
             (_a = this.layoutToolbarRef) === null || _a === void 0 ? void 0 : _a.getOverlayRef().updatePositionStrategy(this.createPositionStrategy());
+            setTimeout(function () {
+                var _a;
+                (_a = _this.layoutToolbarRef) === null || _a === void 0 ? void 0 : _a.getOverlayRef().updatePosition();
+            }, 150);
         };
         TheImageComponent.prototype.closeLayoutToolbar = function () {
             var _a;
@@ -3335,7 +3425,7 @@
                 overlayX: 'center',
                 overlayY: 'top',
                 offsetX: 0,
-                offsetY: 60
+                offsetY: 10
             };
             return this.overlay
                 .position()
@@ -3348,7 +3438,7 @@
         return TheImageComponent;
     }(TheBaseElementComponent));
     TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }, { token: i1__namespace$3.ThyPopover }, { token: i2__namespace.Overlay }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-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"] }] });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{\n            'width.px':\n                imageEntry?.layout && imageEntry?.width > layoutDefaultWidth && !imageEntry?.reSized\n                    ? layoutDefaultWidth\n                    : imageEntry.width,\n            'height.px': imageEntry.height\n        }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\n<ng-template #layoutToolbar>\n    <div class=\"the-block-toolbar-popover\" contenteditable=\"false\">\n        <thy-icon-nav>\n            <ng-container *ngFor=\"let item of layoutOptions\">\n                <a\n                    *ngIf=\"item.key !== 'split'\"\n                    href=\"javascript:;\"\n                    thyIconNavLink\n                    [ngClass]=\"{ 'remove-link': item.key === 'remove' }\"\n                    [thyIconNavLinkIcon]=\"item.icon\"\n                    [thyTooltip]=\"item.name\"\n                    [thyIconNavLinkActive]=\"layoutActive(item.key)\"\n                    thyTooltipPlacement=\"top\"\n                    (mousedown)=\"item?.handle($event, item.key)\"\n                ></a>\n                <nav-split-line *ngIf=\"item.key === 'split'\"></nav-split-line>\n            </ng-container>\n        </thy-icon-nav>\n    </div>\n</ng-template>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6447,7 +6537,10 @@
             return false;
         },
         isDisabled: function (editor) {
-            if (editor.selection) {
+            var _a;
+            var contextService = (_a = editor === null || editor === void 0 ? void 0 : editor.injector) === null || _a === void 0 ? void 0 : _a.get(TheContextService);
+            var richMedia = contextService.getOptions().theOptions.richMedia;
+            if (richMedia && 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);
@@ -8763,89 +8856,6 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
-    /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
-    function coercePixelsFromCssValue(cssValue) {
-        var match = cssValue.match(/(\d+(\.\d+)?)px/);
-        if (match) {
-            return Number(match[1]);
-        }
-    }
-    function getElementWidth(element) {
-        // Optimization: Check style.width first as we probably set it already before reading
-        // offsetWidth which triggers layout.
-        return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
-    }
-    function getElementHeight(element) {
-        return Math.round(element.getBoundingClientRect().height);
-    }
-    function getColsTotalWidth(cols) {
-        return cols.reduce(function (total, col) {
-            return total + getElementWidth(col);
-        }, 0);
-    }
-    function getRowsTotalHeight(rows) {
-        return rows.reduce(function (total, row) {
-            return total + getElementHeight(row);
-        }, 0);
-    }
-    function useElementStyle(el, element) {
-        if (element.align) {
-            el.style.textAlign = element.align || exports.Alignment.left;
-        }
-        if (element.textIndent) {
-            el.style.textIndent = element.textIndent + 'em';
-        }
-        if (element.verticalAlign) {
-            el.style.verticalAlign = element.verticalAlign;
-        }
-    }
-    function getElementClassByPrefix(el, prefix) {
-        var matchClass = null;
-        el.classList.forEach(function (value, key) {
-            if (value.includes(prefix)) {
-                matchClass = value;
-            }
-        });
-        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();
         var anchor = editor.selection.anchor;
@@ -13342,353 +13352,6 @@
                     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 DRAG_SNAPSHOT_OFFSET = 15; // 拖拽内容距离鼠标偏移量
-    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 = this.elementRef.nativeElement.nextSibling;
-            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 (event.clientX + this.dragElementWidth / 2 > offsetWidth) {
-                    left = event.pageX - editorLeft - this.nativeElement.offsetWidth;
-                }
-                else {
-                    left = Math.max(event.pageX - editorLeft, -editorLeft) + DRAG_SNAPSHOT_OFFSET;
-                }
-                var scrollTop = document.documentElement.scrollTop;
-                var editorMarginTop = editorTop + scrollTop; // 编辑器距离顶部间距
-                if (event.clientY + this.dragElementHeight + DRAG_SNAPSHOT_OFFSET > document.documentElement.offsetHeight) {
-                    top = event.pageY - editorMarginTop - this.nativeElement.offsetHeight + DRAG_SNAPSHOT_OFFSET;
-                    top = Math.min(top, height - this.editableElement.offsetTop);
-                }
-                else {
-                    top = event.pageY - editorMarginTop + this.editableElement.offsetTop + DRAG_SNAPSHOT_OFFSET;
-                }
-                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 = "display: block; min-height: 0; 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 + DRAG_SNAPSHOT_OFFSET > 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; }
-            var dndContainer = this.nativeElement.parentNode;
-            dndContainer.style.display = visible ? 'block' : 'none';
-        };
-        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() {
         }
@@ -13902,16 +13565,10 @@
             _this.onSlaDragStart = function (event) { };
             _this.onSlaDragOver = function (event) { };
             _this.onDrop = function (event) {
-                if (_this.isDraging) {
-                    event.preventDefault();
-                }
                 _this.theOnDOMEvent.emit({
                     nativeEvent: event
                 });
             };
-            _this.onDragChange = function (isDraging) {
-                _this.isDraging = isDraging;
-            };
             return _this;
         }
         Object.defineProperty(TheEditorComponent.prototype, "theGlobalToolbarInstance", {
@@ -14102,8 +13759,17 @@
             if (event.target === editableElement) {
                 var rectEditable = editableElement.getBoundingClientRect();
                 var centerX = rectEditable.x + rectEditable.width / 2;
-                var relativeElement = document.elementFromPoint(centerX, event.y);
+                var _g = window.getComputedStyle(editableElement, null), paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight;
+                var paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
+                var paddingRightPixels = coercePixelsFromCssValue(paddingRight);
+                var fakeLeftX = rectEditable.x + paddingLeftPixels + 50;
+                var fakeRightX = rectEditable.right - paddingRightPixels - 50;
+                var relativeElement = document.elementFromPoint(fakeLeftX, event.y);
                 var relativeBlockCardElement = relativeElement.closest('.slate-block-card');
+                if (!relativeBlockCardElement) {
+                    relativeElement = document.elementFromPoint(fakeRightX, event.y);
+                    relativeBlockCardElement = relativeElement.closest('.slate-block-card');
+                }
                 if (relativeBlockCardElement) {
                     var blockCardEntry = i1.AngularEditor.toSlateCardEntry(this.editor, relativeBlockCardElement.firstElementChild);
                     if (blockCardEntry && blockCardEntry[1]) {
@@ -14172,7 +13838,7 @@
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], 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 });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14434,8 +14100,7 @@
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        TheInlineCodeComponent,
-        TheDndComponent
+        TheInlineCodeComponent
     ];
     var PIPES = [ElementStylePipe, ElementClassPipe];
     var TheEditorModule = /** @class */ (function () {
@@ -14479,8 +14144,7 @@
             TheTableComponent,
             TheTableRowComponent,
             TheTdComponent,
-            TheInlineCodeComponent,
-            TheDndComponent], imports: [i10.CommonModule, i1.SlateModule, i4$1.FormsModule, i4.ThyIconModule,
+            TheInlineCodeComponent], imports: [i10.CommonModule, i1.SlateModule, i4$1.FormsModule, i4.ThyIconModule,
             avatar.ThyAvatarModule,
             i3.ThyNavModule,
             i2$1.ThyFormModule,
@@ -14545,7 +14209,6 @@
     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;
@@ -14600,15 +14263,25 @@
     exports.VOID_BLOCK_TYPES = VOID_BLOCK_TYPES;
     exports.VerticalAlignEditor = VerticalAlignEditor;
     exports.ZERO_WIDTH_CHAR = ZERO_WIDTH_CHAR;
+    exports.coercePixelsFromCssValue = coercePixelsFromCssValue;
     exports.createEmptyParagraph = createEmptyParagraph;
     exports.dataDeserialize = dataDeserialize;
     exports.dataSerializing = dataSerializing;
+    exports.findNodeEntryByPoint = findNodeEntryByPoint;
+    exports.findRelativeElementByPoint = findRelativeElementByPoint;
+    exports.getColsTotalWidth = getColsTotalWidth;
+    exports.getElementClassByPrefix = getElementClassByPrefix;
+    exports.getElementHeight = getElementHeight;
+    exports.getElementWidth = getElementWidth;
+    exports.getRowsTotalHeight = getRowsTotalHeight;
     exports.getToolbarClass = getToolbarClass;
     exports.htmlToTheia = htmlToTheia;
     exports.inValidTypes = inValidTypes;
     exports.isCleanEmptyParagraph = isCleanEmptyParagraph;
+    exports.mergeElementOptions = mergeElementOptions;
     exports.plainToTheia = plainToTheia;
     exports.toolbarCompose = toolbarCompose;
+    exports.useElementStyle = useElementStyle;
     exports.withTheEditor = withTheEditor;
 
     Object.defineProperty(exports, '__esModule', { value: true });