@gravity-ui/markdown-editor 15.19.1 → 15.20.0

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.js

@@ -0,0 +1,139 @@
+import { findParentNodeClosestToPos } from "../../../../../../pm/utils.js";
+import { isTableCellNode, isTableNode } from "../../../../../../table-utils/index.js";
+export class DropCursor {
+    editorView;
+    width;
+    color;
+    class;
+    cursorElem = null;
+    cursorPos = null;
+    constructor(editorView, params = {}) {
+        this.editorView = editorView;
+        this.width = params.width ?? 1;
+        this.color = params.color === false ? undefined : params.color || 'black';
+        this.class = params.class;
+    }
+    getPos() {
+        return this.cursorPos;
+    }
+    setPos(val) {
+        if (typeof val !== 'number' || isNaN(val))
+            throw new Error('"val" is not a number');
+        if (this.cursorPos === val)
+            return;
+        this.cursorPos = val;
+        this.update();
+    }
+    clear() {
+        this.cursorPos = null;
+        this.cursorElem?.remove();
+        this.cursorElem = null;
+    }
+    update() {
+        const { cursorPos } = this;
+        if (cursorPos === null)
+            return;
+        const $pos = this.editorView.state.doc.resolve(cursorPos);
+        const isBlock = !$pos.parent.inlineContent;
+        let rect;
+        if (isBlock) {
+            const before = $pos.nodeBefore, after = $pos.nodeAfter;
+            if (before || after) {
+                const node = this.editorView.nodeDOM(cursorPos - (before ? before.nodeSize : 0));
+                if (node) {
+                    const nodeRect = node.getBoundingClientRect();
+                    let top = before ? nodeRect.bottom : nodeRect.top;
+                    if (before && after)
+                        top =
+                            (top +
+                                this.editorView.nodeDOM(cursorPos).getBoundingClientRect().top) /
+                                2;
+                    rect = {
+                        left: nodeRect.left,
+                        right: nodeRect.right,
+                        top: top - this.width / 2,
+                        bottom: top + this.width / 2,
+                    };
+                }
+            }
+        }
+        if (!rect) {
+            const coords = this.editorView.coordsAtPos(cursorPos);
+            rect = {
+                left: coords.left - this.width / 2,
+                right: coords.left + this.width / 2,
+                top: coords.top,
+                bottom: coords.bottom,
+            };
+        }
+        this.render(rect, { isBlock });
+    }
+    render(rect, { isBlock }) {
+        const parent = this.editorView.dom.offsetParent;
+        if (!this.cursorElem) {
+            this.cursorElem = parent.appendChild(document.createElement('div'));
+            if (this.class)
+                this.cursorElem.className = this.class;
+            this.cursorElem.style.cssText =
+                'position: absolute; z-index: 50; pointer-events: none;';
+            if (this.color) {
+                this.cursorElem.style.backgroundColor = this.color;
+            }
+        }
+        this.cursorElem.classList.toggle('prosemirror-dropcursor-block', isBlock);
+        this.cursorElem.classList.toggle('prosemirror-dropcursor-inline', !isBlock);
+        let parentLeft, parentTop;
+        if (!parent ||
+            (parent === document.body && getComputedStyle(parent).position === 'static')) {
+            parentLeft = -pageXOffset;
+            parentTop = -pageYOffset;
+        }
+        else {
+            const rect = parent.getBoundingClientRect();
+            parentLeft = rect.left - parent.scrollLeft;
+            parentTop = rect.top - parent.scrollTop;
+        }
+        this.cursorElem.style.left = rect.left - parentLeft + 'px';
+        this.cursorElem.style.top = rect.top - parentTop + 'px';
+        this.cursorElem.style.width = rect.right - rect.left + 'px';
+        this.cursorElem.style.height = rect.bottom - rect.top + 'px';
+    }
+}
+export class TableColumnDropCursor extends DropCursor {
+    update() {
+        const cursorPos = this.getPos();
+        if (cursorPos === null)
+            return;
+        const $cursorPos = this.editorView.state.doc.resolve(cursorPos);
+        const parentTable = findParentNodeClosestToPos($cursorPos, isTableNode);
+        if (!parentTable)
+            return;
+        let side;
+        let tcellPos;
+        if ($cursorPos.nodeAfter && isTableCellNode($cursorPos.nodeAfter)) {
+            side = 'left';
+            tcellPos = cursorPos;
+        }
+        else if ($cursorPos.nodeBefore && isTableCellNode($cursorPos.nodeBefore)) {
+            side = 'right';
+            tcellPos = cursorPos - $cursorPos.nodeBefore.nodeSize;
+        }
+        else {
+            this.cursorElem?.remove();
+            this.cursorElem = null;
+            return;
+        }
+        const tdElem = this.editorView.nodeDOM(tcellPos);
+        const tableElem = this.editorView.nodeDOM(parentTable.pos);
+        const tdRect = tdElem.getBoundingClientRect();
+        const tableRect = tableElem.getBoundingClientRect();
+        const rect = {
+            left: tdRect[side] - this.width / 2,
+            right: tdRect[side] + this.width / 2,
+            top: tableRect.top,
+            bottom: tableRect.bottom,
+        };
+        this.render(rect, { isBlock: true });
+    }
+}
+//# sourceMappingURL=dnd-drop-cursor.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-drop-cursor.js","sourceRoot":"../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.ts"],"names":[],"mappings":"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","sourcesContent":["import {findParentNodeClosestToPos} from '#pm/utils';\nimport type {EditorView} from '#pm/view';\nimport {isTableCellNode, isTableNode} from 'src/table-utils';\n\n/** Same as `DropCursorOptions` from _prosemirror-dropcursor_ package */\nexport type DropCursorParams = {\n    /** The color of the cursor. Defaults to `black`. Use `false` to apply no color and rely only on class. */\n    color?: string | false;\n\n    /** The precise width of the cursor in pixels. Defaults to 1. */\n    width?: number;\n\n    /** A CSS class name to add to the cursor element. */\n    class?: string;\n};\n\ntype Rect = {\n    left: number;\n    right: number;\n    top: number;\n    bottom: number;\n};\n\nexport class DropCursor {\n    protected readonly editorView: EditorView;\n\n    protected readonly width: number;\n    protected readonly color: string | undefined;\n    protected readonly class: string | undefined;\n\n    protected cursorElem: HTMLElement | null = null;\n    private cursorPos: number | null = null;\n\n    constructor(editorView: EditorView, params: DropCursorParams = {}) {\n        this.editorView = editorView;\n        this.width = params.width ?? 1;\n        this.color = params.color === false ? undefined : params.color || 'black';\n        this.class = params.class;\n    }\n\n    getPos(): number | null {\n        return this.cursorPos;\n    }\n\n    setPos(val: number) {\n        if (typeof val !== 'number' || isNaN(val)) throw new Error('\"val\" is not a number');\n        if (this.cursorPos === val) return;\n        this.cursorPos = val;\n        this.update();\n    }\n\n    clear() {\n        this.cursorPos = null;\n        this.cursorElem?.remove();\n        this.cursorElem = null;\n    }\n\n    update() {\n        const {cursorPos} = this;\n        if (cursorPos === null) return;\n\n        const $pos = this.editorView.state.doc.resolve(cursorPos);\n        const isBlock = !$pos.parent.inlineContent;\n        let rect: Rect | undefined;\n        if (isBlock) {\n            const before = $pos.nodeBefore,\n                after = $pos.nodeAfter;\n            if (before || after) {\n                const node = this.editorView.nodeDOM(cursorPos - (before ? before.nodeSize : 0));\n                if (node) {\n                    const nodeRect = (node as HTMLElement).getBoundingClientRect();\n                    let top = before ? nodeRect.bottom : nodeRect.top;\n                    if (before && after)\n                        top =\n                            (top +\n                                (\n                                    this.editorView.nodeDOM(cursorPos) as HTMLElement\n                                ).getBoundingClientRect().top) /\n                            2;\n                    rect = {\n                        left: nodeRect.left,\n                        right: nodeRect.right,\n                        top: top - this.width / 2,\n                        bottom: top + this.width / 2,\n                    };\n                }\n            }\n        }\n        if (!rect) {\n            const coords = this.editorView.coordsAtPos(cursorPos);\n            rect = {\n                left: coords.left - this.width / 2,\n                right: coords.left + this.width / 2,\n                top: coords.top,\n                bottom: coords.bottom,\n            };\n        }\n\n        this.render(rect, {isBlock});\n    }\n\n    protected render(rect: Rect, {isBlock}: {isBlock: boolean}) {\n        const parent = this.editorView.dom.offsetParent!;\n        if (!this.cursorElem) {\n            this.cursorElem = parent.appendChild(document.createElement('div'));\n            if (this.class) this.cursorElem.className = this.class;\n            this.cursorElem.style.cssText =\n                'position: absolute; z-index: 50; pointer-events: none;';\n            if (this.color) {\n                this.cursorElem.style.backgroundColor = this.color;\n            }\n        }\n        this.cursorElem.classList.toggle('prosemirror-dropcursor-block', isBlock);\n        this.cursorElem.classList.toggle('prosemirror-dropcursor-inline', !isBlock);\n        let parentLeft, parentTop;\n        if (\n            !parent ||\n            (parent === document.body && getComputedStyle(parent).position === 'static')\n        ) {\n            parentLeft = -pageXOffset;\n            parentTop = -pageYOffset;\n        } else {\n            const rect = parent.getBoundingClientRect();\n            parentLeft = rect.left - parent.scrollLeft;\n            parentTop = rect.top - parent.scrollTop;\n        }\n        this.cursorElem.style.left = rect.left - parentLeft + 'px';\n        this.cursorElem.style.top = rect.top - parentTop + 'px';\n        this.cursorElem.style.width = rect.right - rect.left + 'px';\n        this.cursorElem.style.height = rect.bottom - rect.top + 'px';\n    }\n}\n\nexport class TableColumnDropCursor extends DropCursor {\n    update() {\n        const cursorPos = this.getPos();\n        if (cursorPos === null) return;\n\n        const $cursorPos = this.editorView.state.doc.resolve(cursorPos);\n        const parentTable = findParentNodeClosestToPos($cursorPos, isTableNode);\n        if (!parentTable) return;\n\n        let side: 'left' | 'right';\n        let tcellPos: number;\n        if ($cursorPos.nodeAfter && isTableCellNode($cursorPos.nodeAfter)) {\n            side = 'left';\n            tcellPos = cursorPos;\n        } else if ($cursorPos.nodeBefore && isTableCellNode($cursorPos.nodeBefore)) {\n            side = 'right';\n            tcellPos = cursorPos - $cursorPos.nodeBefore.nodeSize;\n        } else {\n            this.cursorElem?.remove();\n            this.cursorElem = null;\n            return;\n        }\n\n        const tdElem = this.editorView.nodeDOM(tcellPos);\n        const tableElem = this.editorView.nodeDOM(parentTable.pos);\n\n        const tdRect = (tdElem as HTMLElement).getBoundingClientRect();\n        const tableRect = (tableElem as HTMLElement).getBoundingClientRect();\n\n        const rect: Rect = {\n            left: tdRect[side] - this.width / 2,\n            right: tdRect[side] + this.width / 2,\n            top: tableRect.top,\n            bottom: tableRect.bottom,\n        };\n        this.render(rect, {isBlock: true});\n    }\n}\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.css

@@ -0,0 +1,19 @@
+.g-md-yfm-table-dnd-cursor-background {
+  position: fixed;
+  z-index: 100500;
+  inset: 0;
+  overflow: hidden;
+  cursor: grabbing;
+  background: transparent;
+}
+
+.yfm.ProseMirror .g-md-yfm-table-dnd-dragged-row,
+.yfm.ProseMirror .g-md-yfm-table-dnd-dragged-column-cell {
+  opacity: 0.3;
+  background-color: var(--g-color-base-selection);
+}
+
+.yfm.ProseMirror .g-md-yfm-table-active-row,
+.yfm.ProseMirror .g-md-yfm-table-active-column-cell {
+  background-color: var(--g-color-base-selection);
+}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.d.ts

@@ -0,0 +1,31 @@
+import { type Node } from "../../../../../../pm/model.js";
+import type { EditorView } from "../../../../../../pm/view.js";
+import type { Logger2 } from "../../../../../../logger.js";
+import { type DropCursorParams } from "./dnd-drop-cursor.js";
+import "./dnd.css";
+export type DnDControlHandler = {
+    canDrag(): boolean;
+    control_handleMouseDown: React.MouseEventHandler<HTMLButtonElement>;
+    control_handleMouseMove: React.MouseEventHandler<HTMLButtonElement>;
+    control_handleMouseUp: React.MouseEventHandler<HTMLButtonElement>;
+};
+interface TableHandler {
+    update(node: Node): void;
+    destroy(): void;
+}
+export type YfmTableDnDHandlerParams = {
+    cellNode: Node;
+    cellGetPos: () => number | undefined;
+    logger: Logger2.ILogger;
+    dropCursor?: DropCursorParams;
+};
+export declare class YfmTableDnDHandler implements TableHandler {
+    private readonly _rowHandler;
+    private readonly _columnHandler;
+    get row(): DnDControlHandler;
+    get column(): DnDControlHandler;
+    constructor(view: EditorView, params: YfmTableDnDHandlerParams);
+    update(node: Node): void;
+    destroy(): void;
+}
+export {};

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.js

@@ -0,0 +1,463 @@
+import { Slice } from "../../../../../../pm/model.js";
+import { TextSelection } from "../../../../../../pm/state.js";
+import { findParentNodeClosestToPos } from "../../../../../../pm/utils.js";
+import { debounce, range as iterate } from "../../../../../../lodash.js";
+import { isTableNode } from "../../../../../../table-utils/index.js";
+import { TableDesc, } from "../../../../../../table-utils/table-desc.js";
+import { YfmTableNode } from "../../../YfmTableSpecs/index.js";
+import { clearAllSelections, selectDraggedColumn, selectDraggedRow } from "../plugins/dnd-plugin.js";
+import { hideHoverDecos } from "../plugins/focus-plugin.js";
+import { DropCursor as RowDropCursor, TableColumnDropCursor, } from "./dnd-drop-cursor.js";
+import "./dnd.css";
+const MOUSE_MOVE_DEBOUNCE = 100; // ms
+const DRAG_START_THRESHOLD = 4; // px
+export class YfmTableDnDHandler {
+    _rowHandler;
+    _columnHandler;
+    get row() {
+        return this._rowHandler;
+    }
+    get column() {
+        return this._columnHandler;
+    }
+    constructor(view, params) {
+        this._rowHandler = new YfmTableRowDnDHandler(view, params);
+        this._columnHandler = new YfmTableColumnDnDHandler(view, params);
+    }
+    update(node) {
+        this._rowHandler.update(node);
+        this._columnHandler.update(node);
+    }
+    destroy() {
+        this._rowHandler.destroy();
+        this._columnHandler.destroy();
+    }
+}
+class YfmTableDnDAbstractHandler {
+    _cellGetPos;
+    _editorView;
+    _logger;
+    _dropCursor;
+    __cellNode;
+    __dragging = false;
+    __destroyed = false;
+    __dragMouseDown = false;
+    constructor(view, params) {
+        this._editorView = view;
+        this.__cellNode = params.cellNode;
+        this._cellGetPos = params.cellGetPos;
+        this._logger = params.logger;
+        this._dropCursor = params.dropCursor;
+    }
+    update(cellnode) {
+        this.__cellNode = cellnode;
+    }
+    destroy() {
+        this.__destroyed = true;
+        this._clearDragging();
+    }
+    control_handleMouseDown = (event) => {
+        this.__dragMouseDown = { pageX: event.pageX, pageY: event.pageY };
+        this._dropCursor.clear();
+    };
+    control_handleMouseUp = () => {
+        this.__dragMouseDown = false;
+    };
+    control_handleMouseMove = (event) => {
+        if (!this._dragMouseDown || !isDragThresholdPassed(this._dragMouseDown, event))
+            return;
+        if (this._editorView.dragging || this._dragging)
+            return;
+        this._startDragging();
+    };
+    get _cellNode() {
+        return this.__cellNode;
+    }
+    get _dragging() {
+        return this.__dragging;
+    }
+    set _dragging(val) {
+        this.__dragging = val;
+    }
+    get _destroyed() {
+        return this.__destroyed;
+    }
+    get _dragMouseDown() {
+        return this.__dragMouseDown;
+    }
+    _getTableDescAndCellInfo() {
+        const tcellPos = this._cellGetPos();
+        const tableNode = tcellPos === undefined
+            ? undefined
+            : findParentNodeClosestToPos(this._editorView.state.doc.resolve(tcellPos), isTableNode);
+        const tableDesc = tableNode && TableDesc.create(tableNode.node)?.bind(tableNode.pos);
+        const cellInfo = tableDesc?.base.getCellInfo(this._cellNode);
+        return cellInfo
+            ? {
+                cellPos: tcellPos,
+                table: tableNode,
+                tableDesc: tableDesc,
+                cellInfo,
+            }
+            : null;
+    }
+    _clearDragging() {
+        this.__dragging = false;
+        this.__dragMouseDown = false;
+        this._dropCursor.clear();
+        this._editorView.dragging = null;
+        this._editorView.dispatch(clearAllSelections(this._editorView.state.tr));
+    }
+}
+class YfmTableRowDnDHandler extends YfmTableDnDAbstractHandler {
+    constructor(view, params) {
+        super(view, {
+            ...params,
+            logger: params.logger.nested({ component: 'row-dnd-handler' }),
+            dropCursor: new RowDropCursor(view, params.dropCursor),
+        });
+    }
+    canDrag() {
+        const res = this._getTableDescAndCellInfo();
+        if (!res)
+            return false;
+        const rowRange = res.tableDesc.base.getRowRangeByRowIdx(res.cellInfo.row);
+        return rowRange.safeTopBoundary && rowRange.safeBottomBoundary;
+    }
+    _startDragging = () => {
+        const info = this._getTableDescAndCellInfo();
+        if (!info)
+            return;
+        const { tableDesc, cellInfo } = info;
+        const rowRanges = tableDesc.base.getRowRanges();
+        const currRowRange = tableDesc.base.getRowRangeByRowIdx(cellInfo.row);
+        if (!currRowRange.safeTopBoundary || !currRowRange.safeBottomBoundary)
+            return;
+        this._dragging = true;
+        this._logger.event({ event: 'row-drag-start' });
+        {
+            const { tr } = this._editorView.state;
+            hideHoverDecos(tr);
+            selectDraggedRow(tr, iterate(currRowRange.startIdx, currRowRange.endIdx + 1).map((rowIdx) => tableDesc.getPosForRow(rowIdx)));
+            this._editorView.dispatch(tr);
+        }
+        {
+            const from = tableDesc.getPosForRow(currRowRange.startIdx).from;
+            const to = tableDesc.getPosForRow(currRowRange.endIdx).to;
+            this._editorView.dragging = {
+                move: true,
+                slice: this._editorView.state.doc.slice(from, to, false),
+            };
+        }
+        const dndBackground = document.createElement('div');
+        dndBackground.classList.add('g-md-yfm-table-dnd-cursor-background');
+        document.body.append(dndBackground);
+        const draggedRangeIdx = rowRanges.indexOf(currRowRange);
+        const onMove = debounce((event) => {
+            this._moveDragging(event, {
+                rangeIdx: draggedRangeIdx,
+                tableDesc,
+            });
+        }, MOUSE_MOVE_DEBOUNCE, { maxWait: MOUSE_MOVE_DEBOUNCE });
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', () => {
+            onMove.flush();
+            dndBackground.remove();
+            document.removeEventListener('mousemove', onMove);
+            this._endDragging(currRowRange, tableDesc);
+        }, { once: true });
+    };
+    _moveDragging(event, { rangeIdx, tableDesc: initialTableDesc, }) {
+        if (this._destroyed || !this._dragging)
+            return;
+        const info = this._getTableDescAndCellInfo();
+        if (!info || info.tableDesc.base !== initialTableDesc.base) {
+            this._clearDragging();
+            return;
+        }
+        const { tableDesc } = info;
+        const ranges = tableDesc.base.getRowRanges();
+        const boxes = ranges.map((range) => {
+            const firstRowStartPos = tableDesc.getPosForRow(range.startIdx).from;
+            const lastRowPos = tableDesc.getPosForRow(range.endIdx);
+            const lastRowStartPos = lastRowPos.from;
+            const lastRowEndPos = lastRowPos.to;
+            const firstRowElem = this._editorView.domAtPos(firstRowStartPos + 1).node;
+            const firstRowBox = firstRowElem.getBoundingClientRect();
+            const lastRowElem = this._editorView.domAtPos(lastRowStartPos + 1).node;
+            const lastRowBox = lastRowElem.getBoundingClientRect();
+            return {
+                pos: { from: firstRowStartPos, to: lastRowEndPos },
+                rect: {
+                    top: firstRowBox.top,
+                    bottom: lastRowBox.bottom,
+                },
+                safeTopBoundary: range.safeTopBoundary,
+                safeBottomBoundary: range.safeBottomBoundary,
+            };
+        });
+        const pos = (() => {
+            const { clientY } = event;
+            const draggedRangeBox = boxes[rangeIdx];
+            const isDraggedFirst = rangeIdx === 0;
+            const isDraggedLast = rangeIdx === boxes.length - 1;
+            if (!isDraggedFirst && clientY < draggedRangeBox.rect.top) {
+                for (const box of boxes.slice(0, rangeIdx).reverse()) {
+                    if (clientY < box.rect.top)
+                        continue;
+                    if (!box.safeTopBoundary)
+                        continue;
+                    return box.pos.from;
+                }
+                return boxes[0].pos.from;
+            }
+            if (!isDraggedLast && clientY > draggedRangeBox.rect.bottom) {
+                for (const box of boxes.slice(rangeIdx + 1)) {
+                    if (clientY > box.rect.bottom)
+                        continue;
+                    if (!box.safeBottomBoundary)
+                        continue;
+                    return box.pos.to;
+                }
+                return boxes.at(-1).pos.to;
+            }
+            return null;
+        })();
+        if (typeof pos === 'number')
+            this._dropCursor.setPos(pos);
+        else
+            this._dropCursor.clear();
+    }
+    _endDragging(draggedRange, initialTableDesc) {
+        if (this._destroyed || !this._dragging)
+            return;
+        const point = this._dropCursor.getPos();
+        this._clearDragging();
+        this._logger.event({ event: 'row-drag-end' });
+        if (point === null) {
+            this._editorView.focus();
+            return;
+        }
+        const info = this._getTableDescAndCellInfo();
+        if (!info || info.tableDesc.base !== initialTableDesc.base) {
+            this._editorView.focus();
+            return;
+        }
+        const rangeFrom = info.tableDesc.getPosForRow(draggedRange.startIdx).from;
+        const rangeTo = info.tableDesc.getPosForRow(draggedRange.endIdx).to;
+        if (point === rangeFrom || point === rangeTo) {
+            this._editorView.focus();
+            return;
+        }
+        const { tr } = this._editorView.state;
+        const fragment = tr.doc.slice(rangeFrom, rangeTo, false).content;
+        if (point > rangeFrom) {
+            tr.insert(point, fragment);
+            tr.delete(rangeFrom, rangeTo);
+        }
+        else {
+            tr.delete(rangeFrom, rangeTo);
+            tr.insert(point, fragment);
+        }
+        tr.setSelection(TextSelection.near(tr.doc.resolve(tr.mapping.map(point + 1)), 1));
+        tr.scrollIntoView();
+        this._editorView.dispatch(tr);
+        this._editorView.focus();
+    }
+}
+class YfmTableColumnDnDHandler extends YfmTableDnDAbstractHandler {
+    constructor(view, params) {
+        super(view, {
+            ...params,
+            logger: params.logger.nested({ component: 'column-dnd-handler' }),
+            dropCursor: new TableColumnDropCursor(view, params.dropCursor),
+        });
+    }
+    canDrag() {
+        const res = this._getTableDescAndCellInfo();
+        if (!res)
+            return false;
+        const rowRange = res.tableDesc.base.getColumnRangeByColumnIdx(res.cellInfo.column);
+        return rowRange.safeLeftBoundary && rowRange.safeRightBoundary;
+    }
+    _startDragging() {
+        const info = this._getTableDescAndCellInfo();
+        if (!info)
+            return;
+        const { tableDesc, cellInfo } = info;
+        const columnRanges = tableDesc.base.getColumnRanges();
+        const currColumnRange = tableDesc.base.getColumnRangeByColumnIdx(cellInfo.column);
+        if (!currColumnRange.safeLeftBoundary || !currColumnRange.safeRightBoundary)
+            return;
+        this._dragging = true;
+        this._logger.event({ event: 'column-drag-start' });
+        {
+            const columnCellsPos = [];
+            for (const i of iterate(currColumnRange.startIdx, currColumnRange.endIdx + 1)) {
+                columnCellsPos.push(...tableDesc.getPosForColumn(i));
+            }
+            const realPos = columnCellsPos.filter((cell) => cell.type === 'real');
+            const { tr } = this._editorView.state;
+            hideHoverDecos(tr);
+            selectDraggedColumn(tr, realPos);
+            this._editorView.dispatch(tr);
+        }
+        {
+            this._editorView.dragging = {
+                move: true,
+                slice: Slice.empty,
+            };
+        }
+        const dndBackground = document.createElement('div');
+        dndBackground.classList.add('g-md-yfm-table-dnd-cursor-background');
+        document.body.append(dndBackground);
+        const draggedRangeIdx = columnRanges.indexOf(currColumnRange);
+        const onMove = debounce((event) => {
+            this._moveDragging(event, {
+                rangeIdx: draggedRangeIdx,
+                tableDesc,
+            });
+        }, MOUSE_MOVE_DEBOUNCE, { maxWait: MOUSE_MOVE_DEBOUNCE });
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', () => {
+            onMove.flush();
+            dndBackground.remove();
+            document.removeEventListener('mousemove', onMove);
+            this._endDragging(currColumnRange, tableDesc);
+        }, { once: true });
+    }
+    _moveDragging(event, { rangeIdx, tableDesc: initialTableDesc, }) {
+        if (this._destroyed || !this._dragging)
+            return;
+        const info = this._getTableDescAndCellInfo();
+        if (!info || info.tableDesc.base !== initialTableDesc.base) {
+            this._clearDragging();
+            return;
+        }
+        const { tableDesc } = info;
+        const ranges = tableDesc.base.getColumnRanges();
+        const boxes = ranges.map((range) => {
+            const firstColStartPos = getCellPos(tableDesc.getPosForCell(0, range.startIdx), 'start');
+            const lastColPos = tableDesc.getPosForCell(0, range.startIdx);
+            const lastColStartPos = getCellPos(lastColPos, 'start');
+            const lastColEndPos = getCellPos(lastColPos, 'end');
+            const firstColElem = this._editorView.domAtPos(firstColStartPos + 1).node;
+            const firstColBox = firstColElem.getBoundingClientRect();
+            const lastColElem = this._editorView.domAtPos(lastColStartPos + 1).node;
+            const lastColBox = lastColElem.getBoundingClientRect();
+            return {
+                pos: { from: firstColStartPos, to: lastColEndPos },
+                rect: {
+                    left: firstColBox.left,
+                    right: lastColBox.right,
+                },
+                safeLeftBoundary: range.safeLeftBoundary,
+                safeRightBoundary: range.safeRightBoundary,
+            };
+        });
+        const pos = (() => {
+            const { clientX } = event;
+            const draggedRangeBox = boxes[rangeIdx];
+            const isDraggedFirst = rangeIdx === 0;
+            const isDraggedLast = rangeIdx === boxes.length - 1;
+            if (!isDraggedFirst && clientX < draggedRangeBox.rect.left) {
+                for (const box of boxes.slice(0, rangeIdx).reverse()) {
+                    if (clientX < box.rect.left)
+                        continue;
+                    if (!box.safeLeftBoundary)
+                        continue;
+                    return box.pos.from;
+                }
+                return boxes[0].pos.from;
+            }
+            if (!isDraggedLast && clientX > draggedRangeBox.rect.right) {
+                for (const box of boxes.slice(rangeIdx + 1)) {
+                    if (clientX > box.rect.right)
+                        continue;
+                    if (!box.safeRightBoundary)
+                        continue;
+                    return box.pos.to;
+                }
+                return boxes.at(-1).pos.to;
+            }
+            return null;
+        })();
+        if (typeof pos === 'number')
+            this._dropCursor.setPos(pos);
+        else
+            this._dropCursor.clear();
+    }
+    _endDragging(draggedRange, initialTableDesc) {
+        if (this._destroyed || !this._dragging)
+            return;
+        const point = this._dropCursor.getPos();
+        this._clearDragging();
+        this._logger.event({ event: 'column-drag-end' });
+        if (point === null) {
+            this._editorView.focus();
+            return;
+        }
+        const info = this._getTableDescAndCellInfo();
+        if (!info || info.tableDesc.base !== initialTableDesc.base) {
+            this._editorView.focus();
+            return;
+        }
+        const currRangeFrom = info.tableDesc.getPosForCell(0, draggedRange.startIdx).from;
+        const currRangeTo = info.tableDesc.getPosForCell(0, draggedRange.endIdx)
+            .to;
+        if (point === currRangeFrom || point === currRangeTo)
+            return;
+        const targetColumnIndex = (() => {
+            if (point === info.tableDesc.getPosForRow(0).to - 1) {
+                return info.tableDesc.cols;
+            }
+            const cellNode = this._editorView.state.doc.nodeAt(point);
+            if (!cellNode || cellNode.type.name !== YfmTableNode.Cell)
+                return null;
+            const cellInfo = info.tableDesc.base.getCellInfo(cellNode);
+            if (!cellInfo)
+                return null;
+            return cellInfo.column;
+        })();
+        if (targetColumnIndex === null ||
+            targetColumnIndex === info.cellInfo.column ||
+            targetColumnIndex === info.cellInfo.column + 1) {
+            this._editorView.focus();
+            return;
+        }
+        const { tr } = this._editorView.state;
+        for (let rowIdx = 0; rowIdx < info.tableDesc.rows; rowIdx++) {
+            const from = getCellPos(info.tableDesc.getPosForCell(rowIdx, draggedRange.startIdx), 'start');
+            const to = getCellPos(info.tableDesc.getPosForCell(rowIdx, draggedRange.endIdx), 'end');
+            if (from === to)
+                continue;
+            let targetPos;
+            if (targetColumnIndex === info.tableDesc.cols) {
+                targetPos = info.tableDesc.getPosForRow(rowIdx).to - 1;
+            }
+            else if (targetColumnIndex === 0) {
+                targetPos = info.tableDesc.getPosForRow(rowIdx).from + 1;
+            }
+            else {
+                targetPos = getCellPos(info.tableDesc.getPosForCell(rowIdx, targetColumnIndex), 'start');
+            }
+            if (targetPos !== from && targetPos !== to) {
+                const fragment = tr.doc.slice(from, to, false).content;
+                tr.insert(tr.mapping.map(targetPos), fragment);
+                tr.delete(tr.mapping.map(from), tr.mapping.map(to));
+            }
+        }
+        this._editorView.dispatch(tr.scrollIntoView());
+        this._editorView.focus();
+    }
+}
+function getCellPos(pos, dir) {
+    if (pos.type === 'virtual')
+        return pos.closestPos;
+    return dir === 'start' ? pos.from : pos.to;
+}
+function isDragThresholdPassed(init, curr) {
+    return (Math.abs(init.pageX - curr.pageX) >= DRAG_START_THRESHOLD ||
+        Math.abs(init.pageY - curr.pageY) >= DRAG_START_THRESHOLD);
+}
+//# sourceMappingURL=dnd.js.map