fix(YfmTable): fixed dragging a row in horizontally scrolled table

Author: d3m1d0v

src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.ts

@@ -1,6 +1,6 @@
 import {findParentNodeClosestToPos} from '#pm/utils';
 import type {EditorView} from '#pm/view';
-import {isTableCellNode, isTableNode} from 'src/table-utils';
+import {isTableCellNode, isTableNode, isTableRowNode} from 'src/table-utils';
 
 /** Same as `DropCursorOptions` from _prosemirror-dropcursor_ package */
 export type DropCursorParams = {
@@ -131,6 +131,45 @@ export class DropCursor {
     }
 }
 
+export class TableRowDropCursor 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: 'top' | 'bottom';
+        let trowPos: number;
+        if ($cursorPos.nodeAfter && isTableRowNode($cursorPos.nodeAfter)) {
+            side = 'top';
+            trowPos = cursorPos;
+        } else if ($cursorPos.nodeBefore && isTableRowNode($cursorPos.nodeBefore)) {
+            side = 'bottom';
+            trowPos = cursorPos - $cursorPos.nodeBefore.nodeSize;
+        } else {
+            this.cursorElem?.remove();
+            this.cursorElem = null;
+            return;
+        }
+
+        const trElem = this.editorView.nodeDOM(trowPos);
+        const tableElem = this.editorView.nodeDOM(parentTable.pos);
+
+        const trRect = (trElem as HTMLElement).getBoundingClientRect();
+        const tableRect = (tableElem as HTMLElement).getBoundingClientRect();
+
+        const rect: Rect = {
+            top: trRect[side] - this.width / 2,
+            bottom: trRect[side] + this.width / 2,
+            left: tableRect.left,
+            right: tableRect.right,
+        };
+        this.render(rect, {isBlock: true});
+    }
+}
+
 export class TableColumnDropCursor extends DropCursor {
     update() {
         const cursorPos = this.getPos();

src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-ghost.ts

@@ -114,6 +114,7 @@ export class YfmTableDnDGhost {
     ): BuildGhostResult {
         let shiftX = 0;
         let shiftY = 0;
+        let isHorizontallyScrolled = false;
 
         const document = view.dom.ownerDocument;
         const container = this._buildGhostContainer(view);
@@ -122,10 +123,12 @@ export class YfmTableDnDGhost {
         const tbody = table.appendChild(document.createElement('tbody'));
 
         {
-            const tablePos = tableDesc.pos;
-            const tableNode = view.domAtPos(tablePos + 1).node;
-            const rect = (tableNode as Element).getBoundingClientRect();
-            table.style.width = rect.width + 'px';
+            const tableNode = view.domAtPos(tableDesc.pos + 1).node;
+            isHorizontallyScrolled = (tableNode as Element).scrollLeft > 0;
+
+            const tbodyNode = view.domAtPos(tableDesc.bodyPos + 1).node;
+            const tbodyRect = (tbodyNode as Element).getBoundingClientRect();
+            tbody.style.width = tbodyRect.width + 'px';
         }
 
         const range = tableDesc.base.getRowRanges()[rangeIdx];
@@ -150,6 +153,10 @@ export class YfmTableDnDGhost {
             }
         }
 
+        if (isHorizontallyScrolled) {
+            shiftX = 0;
+        }
+
         removeIdAttributes(table);
 
         return {domElement: container, shiftX, shiftY};

src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.ts

@@ -20,9 +20,10 @@ import {hideHoverDecos} from '../plugins/focus-plugin';
 import {getSelectedCellsForColumns, getSelectedCellsForRows} from '../utils';
 
 import {
+    type DropCursor,
     type DropCursorParams,
-    DropCursor as RowDropCursor,
     TableColumnDropCursor,
+    TableRowDropCursor,
 } from './dnd-drop-cursor';
 import {YfmTableDnDGhost} from './dnd-ghost';
 
@@ -85,7 +86,7 @@ abstract class YfmTableDnDAbstractHandler implements TableHandler, DnDControlHan
     protected readonly _cellGetPos: () => number | undefined;
     protected readonly _editorView: EditorView;
     protected readonly _logger: Logger2.ILogger;
-    protected readonly _dropCursor: RowDropCursor;
+    protected readonly _dropCursor: DropCursor;
 
     private __cellNode: Node;
     private __dragging = false;
@@ -94,7 +95,7 @@ abstract class YfmTableDnDAbstractHandler implements TableHandler, DnDControlHan
 
     constructor(
         view: EditorView,
-        params: Omit<YfmTableDnDHandlerParams, 'dropCursor'> & {dropCursor: RowDropCursor},
+        params: Omit<YfmTableDnDHandlerParams, 'dropCursor'> & {dropCursor: DropCursor},
     ) {
         this._editorView = view;
         this.__cellNode = params.cellNode;
@@ -192,7 +193,7 @@ class YfmTableRowDnDHandler extends YfmTableDnDAbstractHandler {
         super(view, {
             ...params,
             logger: params.logger.nested({component: 'row-dnd-handler'}),
-            dropCursor: new RowDropCursor(view, params.dropCursor),
+            dropCursor: new TableRowDropCursor(view, params.dropCursor),
         });
     }
 

src/table-utils/table-desc.ts

@@ -380,6 +380,10 @@ class TableDescBinded {
     readonly pos: number;
     readonly base: TableDesc;
 
+    get bodyPos(): number {
+        return this.pos + 1;
+    }
+
     get rows(): number {
         return this.base.rows;
     }