@worktile/theia 2.4.6 → 2.4.9

package/fesm2015/worktile-theia.js

@@ -69,11 +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';
-var TheMode;
-(function (TheMode) {
-    TheMode["fullMode"] = "full";
-    TheMode["liteMode"] = "lite";
-})(TheMode || (TheMode = {}));
 
 var ElementKinds;
 (function (ElementKinds) {
@@ -281,19 +276,6 @@ const CODE_MODES = [
         value: 'htmlmixed'
     }
 ];
-const CodeMode = {
-    default: 'default',
-    print: 'print'
-};
-class TheCodeConfig {
-}
-const THE_CODE_MODE_TOKEN = new InjectionToken('the-code-mode');
-const THE_CODE_MODE_PROVIDER = {
-    provide: THE_CODE_MODE_TOKEN,
-    useValue: {
-        mode: CodeMode.default
-    }
-};
 const CODEMIRROR_PADDING_TOP = 10;
 
 const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
@@ -461,6 +443,20 @@ var TheDataMode;
     TheDataMode["json"] = "json";
     TheDataMode["html"] = "html";
 })(TheDataMode || (TheDataMode = {}));
+var TheMode;
+(function (TheMode) {
+    TheMode["default"] = "default";
+    TheMode["print"] = "print";
+})(TheMode || (TheMode = {}));
+class TheModeConfig {
+}
+const THE_MODE_TOKEN = new InjectionToken('the-mode');
+const THE_MODE_PROVIDER = {
+    provide: THE_MODE_TOKEN,
+    useValue: {
+        mode: TheMode.default
+    }
+};
 
 var ToolbarItemType;
 (function (ToolbarItemType) {
@@ -6766,7 +6762,7 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.config = config;
         this.startRenderCodemirror = false;
         this.dropdownMode = DropdownMode;
-        this.maxHeight = this.config.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
+        this.maxHeight = this.config.mode === TheMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
         this.menus = CODE_MODES.map(item => {
             return { key: item.value, name: item.showName };
         });
@@ -6780,7 +6776,7 @@ class TheCodeComponent extends TheBaseElementComponent {
             readOnly: false,
             autofocus: false,
             lineWiseCopyCut: true,
-            lineWrapping: this.config.mode === CodeMode.default ? false : true,
+            lineWrapping: this.config.mode === TheMode.default ? false : true,
             cursorBlinkRate: 500
         };
         this.actives = this.menus[0];
@@ -6956,7 +6952,7 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
 TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3$1.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3$1.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
@@ -6965,9 +6961,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     templateUrl: './code.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: TheCodeConfig, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: TheModeConfig, decorators: [{
                     type: Inject,
-                    args: [THE_CODE_MODE_TOKEN]
+                    args: [THE_MODE_TOKEN]
                 }] }]; }, propDecorators: { codemirror: [{
                 type: ViewChild,
                 args: ['codemirror', { read: CodeMirrorComponent, static: false }]
@@ -9055,7 +9051,8 @@ class TheTableComponent extends TheBaseElementComponent {
         this.getIsInTable();
     }
     ngAfterViewInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             const blockCardElement = this.nativeElement.closest('slate-block-card');
             if (blockCardElement) {
                 blockCardElement.classList.add(`slate-block-card-${this.element.type}`);
@@ -9065,9 +9062,21 @@ class TheTableComponent extends TheBaseElementComponent {
             this.subscribeCellPositionChange();
             this.listenTableContextMenuEvent();
             this.useTableWrapperWidth();
-            // need view render complete
-            this.useRowControls();
-        });
+            if ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) {
+                const loadImageDone = yield this.resolveImage();
+                // 等待序号列表格内图片加载完成后再去渲染表格行高度
+                if (loadImageDone) {
+                    setTimeout(() => {
+                        this.useRowControls();
+                        this.cdr.detectChanges();
+                    }, 200); // 200ms：通过通知打开页面动画加载时间
+                }
+            }
+            else {
+                this.useRowControls();
+                this.cdr.markForCheck();
+            }
+        }));
     }
     subscribeCellPositionChange() {
         this.tableStore
@@ -9100,7 +9109,6 @@ class TheTableComponent extends TheBaseElementComponent {
         var _a;
         if (this.selection || ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn)) {
             this.rowControls = this.calculateRowControls();
-            this.cdr.markForCheck();
         }
     }
     detectChanges() {
@@ -9202,6 +9210,24 @@ class TheTableComponent extends TheBaseElementComponent {
         });
         return belowRowlHeight;
     }
+    resolveImage() {
+        const imageElements = this.nativeElement.querySelectorAll('img');
+        if (imageElements.length) {
+            const imageResolves = [];
+            imageElements.forEach(item => {
+                const image = new Image();
+                const imageLoad = new Promise(resolve => {
+                    image.onload = () => {
+                        resolve(true);
+                    };
+                    image.src = item.getAttribute('src');
+                });
+                imageResolves.push(imageLoad);
+            });
+            return Promise.all(imageResolves);
+        }
+        return Promise.resolve(true);
+    }
     getColControls() {
         var _a, _b;
         this.colControls = ((_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children) || [];
@@ -11783,78 +11809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 args: ['class.disabled']
             }] } });
 
-const onKeydownTextIndent = (editor, event, kinds, textIndentDisabled) => {
-    const { selection } = editor;
-    const isExpanded = Range.isExpanded(selection);
-    const nodes = Array.from(Editor.nodes(editor, {
-        mode: 'highest',
-        match: node => Element$1.isElement(node) && kinds.includes(node.type)
-    }));
-    const [startBlock] = nodes;
-    if (!startBlock) {
-        return false;
-    }
-    const [block, path] = startBlock;
-    const isStart = Editor.isStart(editor, selection.anchor, path);
-    if (isKeyHotkey('Tab', event)) {
-        event.preventDefault();
-        if (startBlock && (isExpanded || isStart)) {
-            if (!editor.isVoid(block)) {
-                let { textIndent, type } = block;
-                // do not apply first-line indentation for lists
-                if (!textIndent && !textIndentDisabled.includes(type)) {
-                    IndentEditor.setTextIndent(editor, kinds, 2);
-                    return true;
-                }
-                else {
-                    IndentEditor.setIndent(editor);
-                    return true;
-                }
-            }
-        }
-        else {
-            editor.insertText(TAB_SPACE);
-            return true;
-        }
-    }
-    if (isKeyHotkey('shift+Tab', event)) {
-        if (startBlock && (isExpanded || isStart)) {
-            if (!editor.isVoid(block)) {
-                return IndentEditor.cancelTextIntent(editor, event, block, kinds);
-            }
-        }
-    }
-    if (selection && Range.isCollapsed(selection) && hotkeys.isDeleteBackward(event)) {
-        if (startBlock && isStart) {
-            return IndentEditor.cancelTextIntent(editor, event, block, kinds);
-        }
-    }
-    return false;
-};
-
-const withIndent = (kinds) => (editor) => {
-    const { onKeydown } = editor;
-    editor.onKeydown = (event) => {
-        var _a, _b, _c, _d;
-        let indentTypes = kinds;
-        let disableIndentTypes = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem];
-        if ((_b = (_a = editor.extraIndentOptions) === null || _a === void 0 ? void 0 : _a.indentTypes) === null || _b === void 0 ? void 0 : _b.length) {
-            indentTypes = mergIndentTypes(kinds, editor.extraIndentOptions.indentTypes);
-        }
-        if ((_d = (_c = editor.extraIndentOptions) === null || _c === void 0 ? void 0 : _c.disabledIndentTypes) === null || _d === void 0 ? void 0 : _d.length) {
-            disableIndentTypes = mergIndentTypes(disableIndentTypes, editor.extraIndentOptions.disabledIndentTypes);
-        }
-        const isContinue = !onKeydownTextIndent(editor, event, indentTypes, disableIndentTypes);
-        if (isContinue) {
-            onKeydown(event);
-        }
-    };
-    return editor;
-};
-const mergIndentTypes = (defaultTypes, indentTypes) => {
-    return Array.from(new Set([...defaultTypes, ...indentTypes]));
-};
-
 const MaxIndent = 11;
 const includesIndentTypes = [
     ElementKinds.checkItem,
@@ -11863,15 +11817,11 @@ const includesIndentTypes = [
     ElementKinds.paragraph,
     ...HEADING_TYPES
 ];
-const getIndentTypes = editor => {
-    let indentTypes = editor.extraIndentOptions ? editor.extraIndentOptions.indentTypes : [];
-    return mergIndentTypes(includesIndentTypes, indentTypes);
-};
 const IndentEditor = {
     setIndent(editor) {
         const nodes = Array.from(Editor.nodes(editor, {
             mode: 'highest',
-            match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
+            match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
         }));
         const [startBlock] = nodes;
         if (startBlock) {
@@ -11881,7 +11831,7 @@ const IndentEditor = {
             if (indent <= MaxIndent) {
                 Transforms.setNodes(editor, { indent }, {
                     mode: 'highest',
-                    match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
+                    match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
                 });
             }
         }
@@ -11889,7 +11839,7 @@ const IndentEditor = {
     cancelIndent(editor) {
         const nodes = Array.from(Editor.nodes(editor, {
             mode: 'highest',
-            match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
+            match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
         }));
         const [startBlock] = nodes;
         if (startBlock) {
@@ -11897,7 +11847,7 @@ const IndentEditor = {
             indent = indent === 1 ? null : (indent -= 1);
             Transforms.setNodes(editor, { indent }, {
                 mode: 'highest',
-                match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
+                match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
             });
         }
     },
@@ -11930,7 +11880,7 @@ const IndentEditor = {
     isDisabled(editor) {
         if (editor.selection) {
             const anchorBlock$1 = anchorBlock(editor);
-            return anchorBlock$1 && !getIndentTypes(editor).includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
+            return anchorBlock$1 && !includesIndentTypes.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
         }
         return false;
     }
@@ -11960,6 +11910,71 @@ const IndentOptions = [
     }
 ];
 
+const onKeydownTextIndent = (editor, event, kinds, textIndentDisabled) => {
+    const { selection } = editor;
+    const isExpanded = Range.isExpanded(selection);
+    const nodes = Array.from(Editor.nodes(editor, {
+        mode: 'highest',
+        match: node => Element$1.isElement(node) && kinds.includes(node.type)
+    }));
+    const [startBlock] = nodes;
+    if (!startBlock) {
+        return false;
+    }
+    const [block, path] = startBlock;
+    const isStart = Editor.isStart(editor, selection.anchor, path);
+    if (isKeyHotkey('Tab', event)) {
+        event.preventDefault();
+        if (startBlock && (isExpanded || isStart)) {
+            if (!editor.isVoid(block)) {
+                let { textIndent, type } = block;
+                // do not apply first-line indentation for lists
+                if (!textIndent && !textIndentDisabled.includes(type)) {
+                    IndentEditor.setTextIndent(editor, kinds, 2);
+                    return true;
+                }
+                else {
+                    IndentEditor.setIndent(editor);
+                    return true;
+                }
+            }
+        }
+        else {
+            editor.insertText(TAB_SPACE);
+            return true;
+        }
+    }
+    if (isKeyHotkey('shift+Tab', event)) {
+        if (startBlock && (isExpanded || isStart)) {
+            if (!editor.isVoid(block)) {
+                return IndentEditor.cancelTextIntent(editor, event, block, kinds);
+            }
+        }
+    }
+    if (selection && Range.isCollapsed(selection) && hotkeys.isDeleteBackward(event)) {
+        if (startBlock && isStart) {
+            return IndentEditor.cancelTextIntent(editor, event, block, kinds);
+        }
+    }
+    return false;
+};
+
+const withIndent = (kinds) => (editor) => {
+    const { onKeydown } = editor;
+    editor.onKeydown = (event) => {
+        let indentTypes = kinds;
+        let disableIndentTypes = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem];
+        const isContinue = !onKeydownTextIndent(editor, event, indentTypes, disableIndentTypes);
+        if (isContinue) {
+            onKeydown(event);
+        }
+    };
+    return editor;
+};
+const mergIndentTypes = (defaultTypes, indentTypes) => {
+    return Array.from(new Set([...defaultTypes, ...indentTypes]));
+};
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -12859,13 +12874,12 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         super.ngOnDestroy();
     }
     initialize() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.editor = withTheEditor(this.thePlugins, withHistory(withAngular(createEditor(), CLIPBOARD_FORMAT_KEY)));
         this.generateDecorate();
         this.editor.disabled = (_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled;
         this.editor.extraElementOptions = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.extraElementOptions;
         this.editor.extraAutoFormatRules = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.extraAutoFormatRules;
-        this.editor.extraIndentOptions = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.extraIndentOptions;
         this.editor.options = this.theOptions;
         setEditorUUID(this.editor, idCreator());
         this.theContextService.initialize({
@@ -12996,30 +13010,24 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
     }
     mousedown(event) {
         const editableElement = AngularEditor.toDOMNode(this.editor, this.editor);
-        if (event.target === editableElement) {
-            const rectEditable = editableElement.getBoundingClientRect();
+        const rectEditable = editableElement.getBoundingClientRect();
+        const absoluteElement = document.elementFromPoint(event.x, event.y);
+        if (!editableElement.isEqualNode(absoluteElement)) {
+            const blockCardElement = absoluteElement.querySelector('.slate-block-card');
+            if (!blockCardElement)
+                return;
+        }
+        let { paddingRight } = window.getComputedStyle(editableElement, null);
+        const paddingRightPixels = coercePixelsFromCssValue(paddingRight);
+        const fakeRightX = rectEditable.right - paddingRightPixels - 50;
+        let relativeElement = document.elementFromPoint(fakeRightX, event.y);
+        let relativeBlockCardElement = relativeElement.closest('.slate-block-card');
+        if (relativeBlockCardElement) {
             const centerX = rectEditable.x + rectEditable.width / 2;
-            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]) {
-                    const rootNodePath = blockCardEntry[1].slice(0, 1);
-                    const rootNode = getNode(this.editor, rootNodePath);
-                    if (this.editor.isBlockCard(rootNode)) {
-                        event.preventDefault();
-                        AngularEditor.moveBlockCard(this.editor, rootNode, { direction: event.x < centerX ? 'left' : 'right' });
-                    }
-                }
+            const blockCardEntry = AngularEditor.toSlateCardEntry(this.editor, relativeBlockCardElement.firstElementChild);
+            if (blockCardEntry && this.editor.isBlockCard(blockCardEntry[0])) {
+                event.preventDefault();
+                AngularEditor.moveBlockCard(this.editor, blockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
             }
         }
     }
@@ -13384,7 +13392,7 @@ TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             provide: TheToolbarGroupToken,
             useValue: TheToolbarGroupComponent
         },
-        THE_CODE_MODE_PROVIDER
+        THE_MODE_PROVIDER
     ], imports: [[CommonModule, SlateModule, FormsModule, ...TETHYS, CodemirrorModule, TheColumnSizeModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
@@ -13398,7 +13406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                             provide: TheToolbarGroupToken,
                             useValue: TheToolbarGroupComponent
                         },
-                        THE_CODE_MODE_PROVIDER
+                        THE_MODE_PROVIDER
                     ]
                 }]
         }] });
@@ -13411,5 +13419,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, 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, getColsTotalWidth, getElementClassByPrefix, getElementHeight, getElementWidth, getRowsTotalHeight, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, isPureEmptyParagraph, mergeElementOptions, plainToTheia, toolbarCompose, useElementStyle, 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, 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, IndentEditor, 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_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheIndentToolbarComponent, TheMode, TheModeConfig, 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, getColsTotalWidth, getElementClassByPrefix, getElementHeight, getElementWidth, getRowsTotalHeight, getToolbarClass, htmlToTheia, inValidTypes, includesIndentTypes, isCleanEmptyParagraph, isPureEmptyParagraph, mergeElementOptions, plainToTheia, toolbarCompose, useElementStyle, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map