@worktile/theia 2.3.0-next.1 → 2.3.0

package/fesm2015/worktile-theia.js

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Injectable, Inject, ViewChild, Directive, ElementRef, TemplateRef, EventEmitter, Output, Pipe, forwardRef, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Injectable, Inject, ViewChild, Directive, ElementRef, TemplateRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
 import * as i10 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
-import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, EDITOR_TO_ELEMENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
+import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, EDITOR_TO_ELEMENT, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
 import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
 import isHotkey, { isKeyHotkey } from 'is-hotkey';
 import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
@@ -69,7 +69,6 @@ const CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
 const DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
 const ELEMENT_UNIQUE_ID = 'key';
 const ZERO_WIDTH_CHAR = '\u200B';
-const DROP_THUMB_LINE = 'drop-thumb-line';
 var TheMode;
 (function (TheMode) {
     TheMode["fullMode"] = "full";
@@ -2152,6 +2151,110 @@ const isCleanEmptyParagraph = (editor) => {
     return false;
 };
 
+const mergeElementOptions = (elementOptions) => {
+    elementOptions = elementOptions.filter(item => item.inValidChildrenTypes.length > 0);
+    const combinationData = [...DefaultElementOptions, ...elementOptions];
+    const dataInfo = {};
+    combinationData.forEach(item => {
+        const { type, inValidChildrenTypes, isIndivisible, isSecondaryContainer } = item;
+        if (!dataInfo[type]) {
+            dataInfo[type] = {
+                type,
+                inValidChildrenTypes,
+                isIndivisible,
+                isSecondaryContainer
+            };
+        }
+        dataInfo[type].inValidChildrenTypes = Array.from(new Set([...inValidChildrenTypes, ...dataInfo[type].inValidChildrenTypes]));
+    });
+    return dataInfo;
+};
+
+/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
+function coercePixelsFromCssValue(cssValue) {
+    const 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((total, col) => {
+        return total + getElementWidth(col);
+    }, 0);
+}
+function getRowsTotalHeight(rows) {
+    return rows.reduce((total, row) => {
+        return total + getElementHeight(row);
+    }, 0);
+}
+function useElementStyle(el, element) {
+    if (element.align) {
+        el.style.textAlign = element.align || Alignment.left;
+    }
+    if (element.textIndent) {
+        el.style.textIndent = element.textIndent + 'em';
+    }
+    if (element.verticalAlign) {
+        el.style.verticalAlign = element.verticalAlign;
+    }
+}
+function getElementClassByPrefix(el, prefix) {
+    let matchClass = null;
+    el.classList.forEach((value, key) => {
+        if (value.includes(prefix)) {
+            matchClass = value;
+        }
+    });
+    return matchClass;
+}
+function findRelativeElementByPoint(editor, x, y, mode) {
+    const editableElement = EDITOR_TO_ELEMENT.get(editor);
+    const rectEditable = editableElement.getBoundingClientRect();
+    if (x > rectEditable.x && x < rectEditable.x + rectEditable.width) {
+        let { paddingLeft } = window.getComputedStyle(editableElement, null);
+        const paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
+        const startX = rectEditable.left + paddingLeftPixels;
+        let relativeElement = document.elementFromPoint(mode === 'highest' ? startX : x, y);
+        return relativeElement;
+    }
+    return null;
+}
+function findNodeEntryByPoint(editor, x, y, mode) {
+    const editableElement = EDITOR_TO_ELEMENT.get(editor);
+    let rootElement = null;
+    let 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) {
+        const node = AngularEditor.toSlateNode(editor, rootElement);
+        const path = AngularEditor.findPath(editor, node);
+        return [node, path];
+    }
+    return null;
+}
+
 const withDeserializeMd = (options) => (editor) => {
     const { insertData, onKeydown } = editor;
     editor.onKeydown = (event) => {
@@ -2256,25 +2359,6 @@ const isMarkdownStynx = content => {
     return regexps.some(regexp => regexp.test(content));
 };
 
-const mergeElementOptions = (elementOptions) => {
-    elementOptions = elementOptions.filter(item => item.inValidChildrenTypes.length > 0);
-    const combinationData = [...DefaultElementOptions, ...elementOptions];
-    const dataInfo = {};
-    combinationData.forEach(item => {
-        const { type, inValidChildrenTypes, isIndivisible, isSecondaryContainer } = item;
-        if (!dataInfo[type]) {
-            dataInfo[type] = {
-                type,
-                inValidChildrenTypes,
-                isIndivisible,
-                isSecondaryContainer
-            };
-        }
-        dataInfo[type].inValidChildrenTypes = Array.from(new Set([...inValidChildrenTypes, ...dataInfo[type].inValidChildrenTypes]));
-    });
-    return dataInfo;
-};
-
 const withAutoInsertData = (validChildren) => (editor) => {
     const { insertData } = editor;
     let allElementOptions = DefaultElementOptions;
@@ -2606,13 +2690,13 @@ class TheImageComponent extends TheBaseElementComponent {
             {
                 key: LayoutTypes.wrapLeft,
                 icon: 'wrap-left',
-                name: '隐藏左边',
+                name: '图片居左',
                 handle: (e, key) => this.setImageNode(e, { layout: key })
             },
             {
                 key: LayoutTypes.wrapRight,
                 icon: 'wrap-right',
-                name: '隐藏右边',
+                name: '图片居右',
                 handle: (e, key) => this.setImageNode(e, { layout: key })
             },
             {
@@ -2808,7 +2892,8 @@ class TheImageComponent extends TheBaseElementComponent {
         $event.stopPropagation();
     }
     isShouldOpen() {
-        return !(this === null || this === void 0 ? void 0 : this.readonly) && (this === null || this === void 0 ? void 0 : this.isCollapsed) && !this.uploading && !this.isOpen;
+        const { theOptions: { richMedia } } = this.theContextService.getOptions();
+        return !(this === null || this === void 0 ? void 0 : this.readonly) && richMedia && (this === null || this === void 0 ? void 0 : this.isCollapsed) && !this.uploading && !this.isOpen;
     }
     isShouldClose() {
         return this.isOpen && ((this === null || this === void 0 ? void 0 : this.readonly) || !(this === null || this === void 0 ? void 0 : this.isCollapsed) || this.uploading);
@@ -2817,16 +2902,20 @@ class TheImageComponent extends TheBaseElementComponent {
         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(() => {
+            var _a;
+            (_a = this.layoutToolbarRef) === null || _a === void 0 ? void 0 : _a.getOverlayRef().updatePosition();
+        }, 150);
     }
     closeLayoutToolbar() {
         var _a;
@@ -2867,7 +2956,7 @@ class TheImageComponent extends TheBaseElementComponent {
             overlayX: 'center',
             overlayY: 'top',
             offsetX: 0,
-            offsetY: 60
+            offsetY: 10
         };
         return this.overlay
             .position()
@@ -2879,7 +2968,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -5842,7 +5931,10 @@ const AlignEditor = {
         return false;
     },
     isDisabled(editor) {
-        if (editor.selection) {
+        var _a;
+        const contextService = (_a = editor === null || editor === void 0 ? void 0 : editor.injector) === null || _a === void 0 ? void 0 : _a.get(TheContextService);
+        const { theOptions: { richMedia } } = contextService.getOptions();
+        if (richMedia && editor.selection) {
             const disableGroup = [ElementKinds.image];
             const anchorBlock$1 = anchorBlock(editor);
             return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
@@ -8070,89 +8162,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
-function coercePixelsFromCssValue(cssValue) {
-    const 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((total, col) => {
-        return total + getElementWidth(col);
-    }, 0);
-}
-function getRowsTotalHeight(rows) {
-    return rows.reduce((total, row) => {
-        return total + getElementHeight(row);
-    }, 0);
-}
-function useElementStyle(el, element) {
-    if (element.align) {
-        el.style.textAlign = element.align || Alignment.left;
-    }
-    if (element.textIndent) {
-        el.style.textIndent = element.textIndent + 'em';
-    }
-    if (element.verticalAlign) {
-        el.style.verticalAlign = element.verticalAlign;
-    }
-}
-function getElementClassByPrefix(el, prefix) {
-    let matchClass = null;
-    el.classList.forEach((value, key) => {
-        if (value.includes(prefix)) {
-            matchClass = value;
-        }
-    });
-    return matchClass;
-}
-function findRelativeElementByPoint(editor, x, y, mode) {
-    const editableElement = EDITOR_TO_ELEMENT.get(editor);
-    const rectEditable = editableElement.getBoundingClientRect();
-    if (x > rectEditable.x && x < rectEditable.x + rectEditable.width) {
-        const centerX = rectEditable.x + rectEditable.width / 2;
-        let relativeElement = document.elementFromPoint(mode === 'highest' ? centerX : x, y);
-        return relativeElement;
-    }
-    return null;
-}
-function findNodeEntryByPoint(editor, x, y, mode) {
-    const editableElement = EDITOR_TO_ELEMENT.get(editor);
-    let rootElement = null;
-    let 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) {
-        const node = AngularEditor.toSlateNode(editor, rootElement);
-        const path = AngularEditor.findPath(editor, node);
-        return [node, path];
-    }
-    return null;
-}
-
 function splitCell(editor) {
     const opts = new TableOptions$1();
     const { anchor } = editor.selection;
@@ -12405,341 +12414,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 args: ['mousedown', ['$event']]
             }] } });
 
-const getCurrentTarget = (editor, event) => {
-    const editorElement = EDITOR_TO_ELEMENT.get(editor);
-    const { left, right } = editorElement.getBoundingClientRect();
-    let { paddingLeft, paddingRight } = window.getComputedStyle(editorElement, null);
-    const paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
-    const paddingRightPixels = coercePixelsFromCssValue(paddingRight);
-    let x = event.x;
-    if (event.x <= left + paddingLeftPixels || event.x >= right - paddingRightPixels) {
-        x = left + paddingLeftPixels;
-    }
-    const nodeEntry = findNodeEntryByPoint(editor, x, event.y);
-    if (nodeEntry) {
-        return TheEditor.toDOMNode(editor, nodeEntry[0]);
-    }
-};
-
-const getHoverDirection = (editor, event) => {
-    const rootNode = getCurrentTarget(editor, event);
-    if (rootNode) {
-        const { top, bottom } = rootNode.getBoundingClientRect();
-        const middleHeight = (bottom - top) / 2;
-        if (top + middleHeight > event.clientY) {
-            return 'top';
-        }
-        return 'bottom';
-    }
-};
-
-const removeDropThumbLine = (editor) => {
-    const element = EDITOR_TO_ELEMENT.get(editor);
-    const dropThumbLine = element.querySelector('.' + DROP_THUMB_LINE);
-    if (dropThumbLine) {
-        dropThumbLine.remove();
-    }
-};
-
-const moveDragNode = (editor, dragNode, event) => {
-    event.stopPropagation();
-    const element = EDITOR_TO_ELEMENT.get(editor);
-    const dropThumbLine = element.querySelector('.' + DROP_THUMB_LINE);
-    const parentElement = dropThumbLine && dropThumbLine.parentNode;
-    if (parentElement) {
-        const node = TheEditor.toSlateNode(editor, parentElement);
-        let dropPath = node && TheEditor.findPath(editor, node);
-        if (dropPath.length) {
-            const dragPath = dragNode.path;
-            const before = Path.isBefore(dragPath, dropPath) && Path.isSibling(dragPath, dropPath);
-            dropPath = before ? dropPath : Path.next(dropPath);
-            if (dropPath.length) {
-                Editor.withoutNormalizing(editor, () => {
-                    Transforms.moveNodes(editor, {
-                        at: dragPath,
-                        to: dropPath
-                    });
-                });
-            }
-        }
-    }
-    removeDropThumbLine(editor);
-};
-
-const isValidDrag = (editor, dragNode, currentTarget) => {
-    var _a;
-    const node = TheEditor.toSlateNode(editor, currentTarget);
-    const dropPath = TheEditor.findPath(editor, node);
-    const dragPath = TheEditor.findPath(editor, dragNode);
-    if (dragPath[0] === dropPath[0] && dropPath.length > 1) {
-        // 阻止list元素拖入自身
-        return false;
-    }
-    let allElementOptions = DefaultElementOptions;
-    if ((_a = editor.extraElementOptions) === null || _a === void 0 ? void 0 : _a.length) {
-        const extraInfo = mergeElementOptions(editor.extraElementOptions);
-        allElementOptions = Object.values(extraInfo);
-    }
-    const types = allElementOptions.map(item => item.type);
-    if (types.indexOf(node.type) > -1 && allElementOptions[types.indexOf(node.type)].isSecondaryContainer) {
-        // 阻止向table-celld等二级容器中拖入
-        return false;
-    }
-    let containerParent = Editor.above(editor, {
-        at: dropPath,
-        mode: 'lowest',
-        match: (node) => {
-            return node && node.type && types.includes(node.type);
-        }
-    });
-    if (containerParent) {
-        const { inValidChildrenTypes } = allElementOptions.find(item => item.type === containerParent[0].type);
-        if (inValidChildrenTypes.includes(dragNode.type)) {
-            return false;
-        }
-    }
-    return true;
-};
-
-const SNAPSHOT_PADDING_WIDTH = 5;
-const SNAPSHOT_LIMI_HEIGHT = 70;
-const DRAG_ICON_SIZE = 24;
-const DRAG_ICON_OFFSET = 5;
-const DRAG_SNAPSHOT_OFFSET = 15; // 拖拽内容距离鼠标偏移量
-class TheDndComponent {
-    constructor(renderer, elementRef, ngZone, cdr) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.cdr = cdr;
-        this.isDraging = false;
-        this.destroy$ = new Subject();
-        this.dragChange = new EventEmitter();
-        this.dropThumbLine = document.createElement('div');
-        this.dropThumbLine.className = DROP_THUMB_LINE;
-    }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    get editableElement() {
-        return this.editor && EDITOR_TO_ELEMENT.get(this.editor);
-    }
-    ngAfterViewInit() {
-        const contextService = this.editor.injector.get(TheContextService);
-        this.ngZone.runOutsideAngular(() => {
-            merge(fromEvent(this.editableElement, `mousemove`), fromEvent(this.editableElement, `mouseleave`))
-                .pipe(takeUntil(this.destroy$), filter(() => {
-                return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
-            }))
-                .subscribe(e => this.setDragIcon(e));
-            fromEvent(document, `drop`)
-                .pipe(takeUntil(this.destroy$), filter(() => {
-                return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
-            }))
-                .subscribe(e => this.onDrop(e));
-            fromEvent(document, `dragover`)
-                .pipe(takeUntil(this.destroy$), filter(() => {
-                return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
-            }))
-                .subscribe(e => this.onDragover(e));
-            fromEvent(document, `scroll`)
-                .pipe(takeUntil(this.destroy$), filter(() => {
-                return !contextService.getOptions().theOptions.readonly && contextService.getOptions().theOptions.dragAndDrop;
-            }))
-                .subscribe(e => {
-                e.preventDefault();
-                let scrollPosition = window.scrollY;
-                if (!this.isScrolling && this.isDraging) {
-                    window.requestAnimationFrame(() => {
-                        if (this.editableTop) {
-                            // 滚动过程中，通过设置父级元素来设置snapshot位置
-                            this.updateDndContainerPosition(null, scrollPosition + this.editableTop + 'px');
-                        }
-                        this.isScrolling = false;
-                    });
-                    this.isScrolling = true;
-                }
-            });
-        });
-        this.setVisibility(false);
-        this.valueChangeHandle();
-    }
-    valueChangeHandle() {
-        const { onChange } = this.editor;
-        this.editor.onChange = () => {
-            const ops = this.editor.operations;
-            const skip = ops.length === 1 && Operation.isSelectionOperation(ops[0]);
-            if (!skip) {
-                this.setVisibility(false);
-            }
-            onChange();
-        };
-    }
-    updateDndContainerPosition(left, top) {
-        const element = this.elementRef.nativeElement;
-        const parentElement = element.parentElement;
-        top && this.renderer.setStyle(parentElement, 'top', top);
-        left && this.renderer.setStyle(parentElement, 'left', left);
-    }
-    getEditableTop(event) {
-        const offsetHeight = document.documentElement.offsetHeight;
-        const { height } = this.editableElement.getBoundingClientRect();
-        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;
-    }
-    onDragStart(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';
-    }
-    onDragEnd(event) {
-        this.dragElement.style.opacity = '';
-        this.isDraging = false;
-        this.setVisibility(false);
-        this.resetDragSnapshotContent();
-        this.dragChange.emit(this.isDraging);
-    }
-    onDrop(event) {
-        event.preventDefault();
-        if (this.isDraging) {
-            moveDragNode(this.editor, this.dragNode, event);
-        }
-    }
-    onDragover(event) {
-        event.preventDefault();
-        if (this.isDraging && !this.isScrolling) {
-            this.getEditableTop(event);
-            const offsetWidth = document.documentElement.offsetWidth;
-            const { left: editorLeft, top: editorTop, height } = this.editableElement.getBoundingClientRect();
-            let top = 0;
-            let 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;
-            }
-            const scrollTop = document.documentElement.scrollTop;
-            const 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);
-        }
-    }
-    setDropThumbLine(event) {
-        var _a;
-        let element = getCurrentTarget(this.editor, event);
-        const 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);
-            }
-        }
-    }
-    setDragIcon(event) {
-        if (!this.isDraging) {
-            const nodeEntry = findNodeEntryByPoint(this.editor, event.x, event.y, 'highest');
-            if (nodeEntry && !Editor.isEmpty(this.editor, nodeEntry[0])) {
-                const rootNode = AngularEditor.toDOMNode(this.editor, nodeEntry[0]);
-                this.dragNode = {
-                    node: nodeEntry[0],
-                    path: nodeEntry[1]
-                };
-                this.dragElement = rootNode;
-                let lineHeight = coercePixelsFromCssValue(window.getComputedStyle(rootNode)['lineHeight']);
-                const offsetTop = rootNode.offsetTop + rootNode.offsetParent.offsetTop + (lineHeight - DRAG_ICON_SIZE) / 2;
-                const 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);
-            }
-        }
-    }
-    setSnapshotStyle(event) {
-        const { width, height } = this.dragElement.getBoundingClientRect();
-        this.dragElementHeight = height;
-        this.dragElementWidth = width;
-        let 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;
-        }
-        let snapshotTop = 0;
-        let 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);
-    }
-    resetDragSnapshotContent() {
-        this.dragSnapshotContent.className = 'drag-snapshot-container';
-        this.dragSnapshotContent.setAttribute('style', '');
-        this.dragSnapshotContent.innerHTML = '';
-    }
-    setVisibility(visible = true) {
-        const dndContainer = this.nativeElement.parentNode;
-        dndContainer.style.display = visible ? 'block' : 'none';
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-TheDndComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheDndComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheDndComponent.ɵcmp = i0.ɵɵ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, 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.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheDndComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[theDnd]',
-                    templateUrl: './dnd.component.html',
-                    host: {
-                        class: 'the-drag-drop'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
-                type: Input
-            }], dragChange: [{
-                type: Output
-            }], content: [{
-                type: ViewChild,
-                args: ['content', { static: false }]
-            }] } });
-
 class ElementStylePipe {
     transform(element, align) {
         const style = {};
@@ -12944,16 +12618,10 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onSlaDragStart = (event) => { };
         this.onSlaDragOver = (event) => { };
         this.onDrop = (event) => {
-            if (this.isDraging) {
-                event.preventDefault();
-            }
             this.theOnDOMEvent.emit({
                 nativeEvent: event
             });
         };
-        this.onDragChange = isDraging => {
-            this.isDraging = isDraging;
-        };
     }
     get theGlobalToolbarInstance() {
         return this.theGlobalToolbar ? this.theGlobalToolbar : this.globalToolbarInstance;
@@ -13127,8 +12795,17 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         if (event.target === editableElement) {
             const rectEditable = editableElement.getBoundingClientRect();
             const centerX = rectEditable.x + rectEditable.width / 2;
-            const relativeElement = document.elementFromPoint(centerX, event.y);
-            const relativeBlockCardElement = relativeElement.closest('.slate-block-card');
+            let { paddingLeft, paddingRight } = window.getComputedStyle(editableElement, null);
+            const paddingLeftPixels = coercePixelsFromCssValue(paddingLeft);
+            const paddingRightPixels = coercePixelsFromCssValue(paddingRight);
+            const fakeLeftX = rectEditable.x + paddingLeftPixels + 50;
+            const fakeRightX = rectEditable.right - paddingRightPixels - 50;
+            let relativeElement = document.elementFromPoint(fakeLeftX, event.y);
+            let relativeBlockCardElement = relativeElement.closest('.slate-block-card');
+            if (!relativeBlockCardElement) {
+                relativeElement = document.elementFromPoint(fakeRightX, event.y);
+                relativeBlockCardElement = relativeElement.closest('.slate-block-card');
+            }
             if (relativeBlockCardElement) {
                 const blockCardEntry = AngularEditor.toSlateCardEntry(this.editor, relativeBlockCardElement.firstElementChild);
                 if (blockCardEntry && blockCardEntry[1]) {
@@ -13195,7 +12872,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => 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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -13440,8 +13117,7 @@ const PLUGIN_COMPONENTS = [
     TheTableComponent,
     TheTableRowComponent,
     TheTdComponent,
-    TheInlineCodeComponent,
-    TheDndComponent
+    TheInlineCodeComponent
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe];
 class TheEditorModule {
@@ -13482,8 +13158,7 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        TheInlineCodeComponent,
-        TheDndComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
+        TheInlineCodeComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
         ThyAvatarModule,
         ThyNavModule,
         ThyFormModule,
@@ -13532,5 +13207,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DROP_THUMB_LINE, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, plainToTheia, toolbarCompose, withTheEditor };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, coercePixelsFromCssValue, createEmptyParagraph, dataDeserialize, dataSerializing, findNodeEntryByPoint, findRelativeElementByPoint, getColsTotalWidth, getElementClassByPrefix, getElementHeight, getElementWidth, getRowsTotalHeight, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, mergeElementOptions, plainToTheia, toolbarCompose, useElementStyle, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map