fix(YfmTable): fixed position of floating row and column controls when table scrolling horizontally

Author: d3m1d0v

src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx

@@ -12,7 +12,7 @@ import {
 
 import {useBooleanState} from 'src/react-utils';
 
-import {FloatingPopup, type FloatingPopupProps} from '../FloatingPopup';
+import {FloatingPopup, type FloatingPopupProps, type ReferenceType} from '../FloatingPopup';
 
 const popupOffset: FloatingPopupProps['offset'] = {
     mainAxis: -9.5,
@@ -21,7 +21,7 @@ const popupOffset: FloatingPopupProps['offset'] = {
 export type FloatingMenuProps = {
     dirtype: 'row' | 'column';
     canDrag: boolean;
-    anchorElement: Element;
+    anchorElement: ReferenceType;
     dropdownItems: DropdownMenuProps<unknown>['items'];
     switcherMouseProps?: Pick<
         ButtonButtonProps,

src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx

@@ -1,5 +1,7 @@
 import {useMemo} from 'react';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type {ClientRectObject, VirtualElement} from '@floating-ui/dom';
 import {
     ArrowDown,
     ArrowLeft,
@@ -16,10 +18,13 @@ import {i18n} from 'src/i18n/yfm-table';
 import type {DnDControlHandler} from '../../dnd/dnd';
 import {FloatingMenu, type FloatingMenuProps} from '../FloatingMenu/FloatingMenu';
 
+type ControlType = FloatingMenuProps['dirtype'];
+
 export type FloatingMenuControlProps = {
-    acnhorElement: Element;
+    cellElement: Element;
+    tableElement: Element;
     multiple: boolean;
-    type: FloatingMenuProps['dirtype'];
+    type: ControlType;
     dndHandler?: DnDControlHandler;
     onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];
     onClearCellsClick: () => void;
@@ -34,7 +39,8 @@ export const FloatingMenuControl: React.FC<FloatingMenuControlProps> =
         type,
         multiple,
         dndHandler,
-        acnhorElement,
+        cellElement,
+        tableElement,
         onMenuOpenToggle,
         onClearCellsClick,
         onInsertBeforeClick,
@@ -94,12 +100,17 @@ export const FloatingMenuControl: React.FC<FloatingMenuControlProps> =
             ],
         );
 
+        const anchor = useMemo(
+            () => getVirtualAnchor(type, tableElement, cellElement),
+            [type, tableElement, cellElement],
+        );
+
         return (
             <FloatingMenu
                 dirtype={type}
                 canDrag={dndHandler ? dndHandler.canDrag() : false}
                 onOpenToggle={onMenuOpenToggle}
-                anchorElement={acnhorElement}
+                anchorElement={anchor}
                 switcherMouseProps={
                     dndHandler
                         ? {
@@ -114,3 +125,76 @@ export const FloatingMenuControl: React.FC<FloatingMenuControlProps> =
             />
         );
     };
+
+function getVirtualAnchor(
+    type: ControlType,
+    tableElem: Element,
+    cellElem: Element,
+): VirtualElement {
+    if (type === 'row') {
+        return {
+            contextElement: cellElem,
+            getBoundingClientRect() {
+                const cellRect = cellElem.getBoundingClientRect();
+                const tableRect: ClientRectObject = tableElem.getBoundingClientRect().toJSON();
+
+                {
+                    // fix table rect
+                    tableRect.x += 1;
+                    tableRect.width -= 2;
+                    tableRect.left += 1;
+                    tableRect.right -= 1;
+                }
+
+                return {
+                    // from table
+                    x: tableRect.x,
+                    width: tableRect.width,
+                    left: tableRect.left,
+                    right: tableRect.right,
+                    // from cell
+                    y: cellRect.y,
+                    height: cellRect.height,
+                    top: cellRect.top,
+                    bottom: cellRect.top,
+                };
+            },
+        };
+    }
+
+    if (type === 'column') {
+        return {
+            contextElement: cellElem,
+            getBoundingClientRect() {
+                const cellRect: ClientRectObject = cellElem.getBoundingClientRect().toJSON();
+                const tableRect = tableElem.getBoundingClientRect();
+
+                // I don't know why it's 32.
+                // It might have something to do with control width (20 px)
+                // and table border radius (8 px).
+                const MAGIC_NUMBER = 32;
+
+                const cellMiddle = cellRect.x + cellRect.width / 2;
+
+                // left border of table
+                if (cellMiddle - MAGIC_NUMBER / 2 <= tableRect.left) {
+                    const visible = cellRect.right - tableRect.left;
+                    cellRect.width = visible * 2 - MAGIC_NUMBER;
+                    cellRect.left = cellRect.right - cellRect.width;
+                    cellRect.x = cellRect.left;
+                }
+
+                // right border of table
+                if (cellMiddle + MAGIC_NUMBER / 2 >= tableRect.right) {
+                    const visible = tableRect.right - cellRect.left;
+                    cellRect.width = visible * 2 - MAGIC_NUMBER;
+                    cellRect.right = cellRect.left + cellRect.width;
+                }
+
+                return cellRect;
+            },
+        };
+    }
+
+    throw new Error(`Unknown control type: ${type}`);
+}

src/extensions/yfm/YfmTable/plugins/YfmTableControls/nodeviews/yfm-table-cell-view.tsx

@@ -66,6 +66,7 @@ class YfmTableCellView implements NodeView {
     private _decoRowUniqKey: number | null = null;
     private _decoColumnUniqKey: number | null = null;
     private _cellInfo: null | {
+        tablePos: number;
         rowIndex: number;
         columnIndex: number;
         rowRange: Readonly<TableRowRange>;
@@ -103,14 +104,18 @@ class YfmTableCellView implements NodeView {
             () => {
                 if (!this._cellInfo) return null;
 
-                const {showRowControl, showColumnControl, rowRange, columnRange} = this._cellInfo;
+                const {showRowControl, showColumnControl, rowRange, columnRange, tablePos} =
+                    this._cellInfo;
+
+                const tableElem = this._view.domAtPos(tablePos + 1).node as Element;
 
                 return (
                     <ErrorLoggerBoundary>
                         {showRowControl && (
                             <FloatingMenuControl
                                 type="row"
-                                acnhorElement={this.dom}
+                                cellElement={this.dom}
+                                tableElement={tableElem}
                                 dndHandler={this._dndHandler?.row}
                                 multiple={rowRange.rowsCount > 1}
                                 onMenuOpenToggle={this._onRowControlOpenToggle}
@@ -124,7 +129,8 @@ class YfmTableCellView implements NodeView {
                         {showColumnControl && (
                             <FloatingMenuControl
                                 type="column"
-                                acnhorElement={this.dom}
+                                cellElement={this.dom}
+                                tableElement={tableElem}
                                 dndHandler={this._dndHandler?.column}
                                 multiple={columnRange.columnsCount > 1}
                                 onMenuOpenToggle={this._onColumnControlOpenToggle}
@@ -154,6 +160,7 @@ class YfmTableCellView implements NodeView {
 
         if (cellInfo && (cellInfo.cell.row === 0 || cellInfo.cell.column === 0)) {
             const info = (this._cellInfo = {
+                tablePos: cellInfo.table.pos,
                 rowIndex: cellInfo.cell.row,
                 columnIndex: cellInfo.cell.column,
                 showRowControl: false as boolean,