@atlaskit/editor-plugin-table 5.4.13 → 5.4.15

package/src/plugins/table/event-handlers.ts

@@ -37,6 +37,7 @@ import {
   hoverColumns,
   selectColumn,
   setEditorFocus,
+  setTableHovered,
   showInsertColumnButton,
   showInsertRowButton,
   showResizeHandleLine,
@@ -193,7 +194,7 @@ export const handleMouseOver = (
   }
   const { state, dispatch } = view;
   const target = mouseEvent.target;
-  const { insertColumnButtonIndex, insertRowButtonIndex } =
+  const { insertColumnButtonIndex, insertRowButtonIndex, isTableHovered } =
     getPluginState(state);
 
   if (isInsertRowButton(target)) {
@@ -230,6 +231,10 @@ export const handleMouseOver = (
     );
   }
 
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
+
   return false;
 };
 
@@ -284,6 +289,21 @@ export const handleMouseOut = (
   return false;
 };
 
+export const handleMouseEnter = (
+  view: EditorView,
+  mouseEvent: Event,
+): boolean => {
+  const { state, dispatch } = view;
+
+  const { isTableHovered } = getPluginState(state);
+
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
+
+  return false;
+};
+
 export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
@@ -294,17 +314,27 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
     insertColumnButtonIndex,
     insertRowButtonIndex,
     isDragAndDropEnabled,
+    isTableHovered,
   } = getPluginState(state);
 
-  const target = event.target;
-  if (isTableControlsButton(target)) {
+  if (isTableHovered) {
+    if (isDragAndDropEnabled) {
+      const { isDragMenuOpen } = getDragDropPluginState(state);
+      !isDragMenuOpen && setTableHovered(false)(state, dispatch);
+    } else {
+      setTableHovered(false)(state, dispatch);
+    }
     return true;
   }
 
-  if (isDragAndDropEnabled) {
-    const { isDragMenuOpen } = getDragDropPluginState(state);
-    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
-    !isDragMenuOpen && hoverCell()(state, dispatch);
+  // If this table doesn't have focus then we want to skip everything after this.
+  if (!isTableInFocus(view)) {
+    return false;
+  }
+
+  const target = event.target;
+  if (isTableControlsButton(target)) {
+    return true;
   }
 
   if (
@@ -509,6 +539,13 @@ export const handleCut = (
   return tr;
 };
 
+export const isTableInFocus = (view: EditorView) => {
+  return (
+    !!getPluginState(view.state)?.tableNode &&
+    !getResizePluginState(view.state)?.dragging
+  );
+};
+
 export const whenTableInFocus =
   (
     eventHandler: (
@@ -519,10 +556,7 @@ export const whenTableInFocus =
     elementContentRects?: ElementContentRects,
   ) =>
   (view: EditorView, mouseEvent: Event): boolean => {
-    if (
-      !getPluginState(view.state)?.tableNode ||
-      !!getResizePluginState(view.state)?.dragging
-    ) {
+    if (!isTableInFocus(view)) {
       return false;
     }
 
@@ -534,8 +568,7 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
   const maybeTableCell = isElementInTableCell(
     target as HTMLElement,
   ) as HTMLTableCellElement | null;
-  const tableRef = getPluginState(view.state).tableRef;
-  const { hoveredCell, tableNode } = getPluginState(view.state);
+  const { tableNode, tableRef } = getPluginState(view.state);
 
   const tableElement = closestElement(
     target as HTMLElement,
@@ -561,9 +594,6 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
   ) as HTMLTableRowElement;
   const htmlRowIndex = rowElement && rowElement.rowIndex;
 
-  const colHeight = tableRef.offsetHeight;
-  const colWidth = maybeTableCell.offsetWidth;
-
   const tableMap = tableNode && TableMap.get(tableNode);
   let colIndex = htmlColIndex;
   if (tableMap) {
@@ -580,19 +610,7 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
     );
   }
 
-  if (
-    hoveredCell.colIndex !== colIndex ||
-    hoveredCell.rowIndex !== htmlRowIndex ||
-    hoveredCell.colWidth !== colWidth ||
-    hoveredCell.colHeight !== colHeight
-  ) {
-    hoverCell(
-      htmlRowIndex,
-      colIndex,
-      colWidth,
-      colHeight,
-    )(view.state, view.dispatch);
-  }
+  hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
 
 export const withCellTracking =

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -474,7 +474,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
     // doesn't work well with WithPluginState
-    const { isInDanger, hoveredRows, hoveredCell } = getPluginState(view.state);
+    const { isInDanger, hoveredRows, hoveredCell, isTableHovered } =
+      getPluginState(view.state);
 
     const tableRef = this.table || undefined;
     const headerRow = tableRef
@@ -490,6 +491,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         tableActive={tableActive}
         hoveredRows={hoveredRows}
         hoveredCell={hoveredCell}
+        isTableHovered={isTableHovered}
         isInDanger={isInDanger}
         isResizing={isResizing}
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
@@ -514,6 +516,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isInDanger={isInDanger}
         hoveredRows={hoveredRows}
         hoveredCell={hoveredCell}
+        isTableHovered={isTableHovered}
         isResizing={isResizing}
         ordering={ordering}
         hasHeaderRow={hasHeaderRow}

package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts

@@ -101,6 +101,7 @@ export const moveSource = (
   sourceType: DraggableType,
   sourceIndex: number,
   targetIndex: number,
+  tr?: Transaction,
 ) =>
   createCommand(
     (state) => {
@@ -111,12 +112,13 @@ export const moveSource = (
         },
       };
     },
-    (tr: Transaction) => {
+    (originalTr: Transaction) => {
+      const nextTr = tr || originalTr;
       if (sourceIndex === targetIndex) {
-        return tr.setMeta('addToHistory', false);
+        return nextTr.setMeta('addToHistory', false);
       }
 
-      const anchor = tr.selection.anchor;
+      const anchor = nextTr.selection.anchor;
       const selectStartOfTable = (newTr: Transaction) =>
         newTr.setSelection(TextSelection.create(newTr.doc, anchor));
 
@@ -129,7 +131,7 @@ export const moveSource = (
             selectStartOfTable,
             selectRow(targetIndex),
           ],
-          tr,
+          nextTr,
         );
       }
 
@@ -139,7 +141,7 @@ export const moveSource = (
           selectStartOfTable,
           selectColumn(targetIndex),
         ],
-        tr,
+        nextTr,
       );
     },
   );

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -10,11 +10,13 @@ import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { DraggableSourceData } from '../../types';
+import { findNearestCellIndexToPoint } from '../../utils';
 import {
   hasMergedCellsInColumn,
   hasMergedCellsInRow,
 } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
+import { pluginKey as tablePluginKey } from '../plugin-key';
 
 import { DragAndDropActionType } from './actions';
 import {
@@ -135,19 +137,51 @@ export const createPlugin = (
           onDrop(event) {
             const data = getDraggableDataFromEvent(event);
 
+            // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
+            // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
+            // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
+            // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
+            // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
+            // triggered by this on drop event.
+            const { hoveredCell } = getTablePluginState(editorView.state);
+
+            const cell = findNearestCellIndexToPoint(
+              event.location.current.input.clientX,
+              event.location.current.input.clientY,
+            );
+            const tr = editorView.state.tr;
+            const action = {
+              type: 'HOVER_CELL',
+              data: {
+                hoveredCell: {
+                  rowIndex: cell?.row ?? hoveredCell.rowIndex,
+                  colIndex: cell?.col ?? hoveredCell.colIndex,
+                },
+              },
+            };
+            tr.setMeta(tablePluginKey, action);
+
             // If no data can be found then it's most like we do not want to perform any drop action
             if (!data) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
+              clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
             }
 
             const {
               sourceType,
               sourceIndexes,
+              targetIndex,
               targetAdjustedIndex,
               direction,
             } = data;
 
+            // When we drop on a target we will know the targets row/col index for certain,
+            if (sourceType === 'table-row') {
+              action.data.hoveredCell.rowIndex = targetIndex;
+            } else {
+              action.data.hoveredCell.colIndex = targetIndex;
+            }
+
             // If the drop target index contains merged cells then we should not allow the drop to occur.
             const hasMergedCells =
               sourceType === 'table-row'
@@ -156,7 +190,7 @@ export const createPlugin = (
             if (
               hasMergedCells(targetAdjustedIndex)(editorView.state.selection)
             ) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
+              clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
             }
 
@@ -167,6 +201,7 @@ export const createPlugin = (
                 sourceType,
                 sourceIndex,
                 targetAdjustedIndex + (direction === -1 ? 0 : -1),
+                tr,
               )(editorView.state, editorView.dispatch);
             });
           },

package/src/plugins/table/pm-plugins/main.ts

@@ -57,6 +57,7 @@ import {
   handleCut,
   handleFocus,
   handleMouseDown,
+  handleMouseEnter,
   handleMouseLeave,
   handleMouseMove,
   handleMouseOut,
@@ -112,6 +113,7 @@ export const createPlugin = (
 ) => {
   const state = createPluginState(dispatch, {
     pluginConfig,
+    isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
@@ -382,11 +384,12 @@ export const createPlugin = (
         focus: handleFocus,
         blur: handleBlur,
         mousedown: withCellTracking(handleMouseDown),
-        mouseover: whenTableInFocus(withCellTracking(handleMouseOver)),
-        mouseleave: whenTableInFocus(handleMouseLeave),
+        mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
+        mouseleave: handleMouseLeave,
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
-        click: whenTableInFocus(handleClick),
+        mouseenter: handleMouseEnter,
+        click: withCellTracking(whenTableInFocus(handleClick)),
       },
 
       handleTripleClick,

package/src/plugins/table/reducer.ts

@@ -145,6 +145,7 @@ export default (
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':
     case 'HOVER_TABLE':
+    case 'TABLE_HOVERED':
     case 'HOVER_MERGED_CELLS':
     case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':

package/src/plugins/table/types.ts

@@ -88,8 +88,6 @@ export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
 export interface CellHoverMeta {
   colIndex?: number;
   rowIndex?: number;
-  colWidth?: number;
-  colHeight?: number;
 }
 
 export interface TablePluginState {
@@ -130,6 +128,7 @@ export interface TablePluginState {
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
+  isTableHovered?: boolean;
 }
 
 export type TablePluginAction =
@@ -210,6 +209,12 @@ export type TablePluginAction =
         hoveredCell: CellHoverMeta;
       };
     }
+  | {
+      type: 'TABLE_HOVERED';
+      data: {
+        isTableHovered: boolean;
+      };
+    }
   | { type: 'SET_TARGET_CELL_POSITION'; data: { targetCellPosition?: number } }
   | {
       type: 'SELECT_COLUMN';

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -50,8 +50,9 @@ export const DragHandle = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
-  const { isDragAndDropEnabled, hoveredColumns, hoveredRows, hoveredCell } =
-    getPluginState(editorView.state);
+  const { hoveredColumns, hoveredRows, hoveredCell } = getPluginState(
+    editorView.state,
+  );
 
   const { dragMenuDirection, isDragMenuOpen, dragMenuIndex } =
     getDragDropPluginState(editorView.state);
@@ -138,17 +139,14 @@ export const DragHandle = ({
       <button
         className={classnames(
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
-          ClassName.CONTROLS_BUTTON,
           appearance,
           {
-            [ClassName.DRAG_HANDLE_DISABLED]:
-              isDragAndDropEnabled && hasMergedCells,
+            [ClassName.DRAG_HANDLE_DISABLED]: hasMergedCells,
           },
         )}
         ref={dragHandleDivRef}
         style={{
           transform: direction === 'column' ? 'none' : 'rotate(90deg)',
-          pointerEvents: 'auto',
         }}
         data-testid="table-floating-column-controls-drag-handle"
         onMouseOver={onMouseOver}
@@ -161,7 +159,9 @@ export const DragHandle = ({
         }}
         onClick={onClick}
       >
-        <HandleIconComponent {...handleIconProps} />
+        <span style={{ pointerEvents: 'none' }}>
+          <HandleIconComponent {...handleIconProps} />
+        </span>
       </button>
       {previewContainer &&
         previewWidth !== undefined &&

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -30,6 +30,7 @@ export interface ColumnControlsProps {
   rowHeights?: number[];
   colWidths?: (number | undefined)[];
   hasHeaderColumn?: boolean;
+  isTableHovered?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -55,6 +56,7 @@ export const ColumnControls = ({
   rowHeights,
   colWidths,
   hasHeaderColumn,
+  isTableHovered,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
@@ -109,11 +111,15 @@ export const ColumnControls = ({
 
       // update hovered cell location
       const { state, dispatch } = editorView;
-      if (tableActive && hoveredCell?.colIndex !== Number(colIndex)) {
-        hoverCell(hoveredCell?.rowIndex, Number(colIndex))(state, dispatch);
+      if (tableActive) {
+        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+        // of the opposite dimension. For example; here when we mouse over the column drag handle then we're technically
+        // also hovering over row 0 index. And vice-versa with rows. This means we don't need to worry about knowing the
+        // current row index. We can just force it to 0.
+        hoverCell(0, Number(colIndex))(state, dispatch);
       }
     },
-    [editorView, hoveredCell?.colIndex, hoveredCell?.rowIndex, tableActive],
+    [editorView, tableActive],
   );
 
   const handleMouseOut = useCallback(() => {
@@ -132,6 +138,8 @@ export const ColumnControls = ({
     return [colIndex!];
   }, [colIndex]);
 
+  const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -175,6 +183,7 @@ export const ColumnControls = ({
           ))}
         {tableActive &&
           !isResizing &&
+          isTableHovered &&
           !!hoveredCell &&
           Number.isFinite(hoveredCell.colIndex) && (
             <div
@@ -183,6 +192,8 @@ export const ColumnControls = ({
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
+                height: 'fit-content',
+                placeSelf: 'center',
                 zIndex: 99,
               }}
               data-column-control-index={hoveredCell.colIndex}
@@ -192,8 +203,8 @@ export const ColumnControls = ({
                 direction="column"
                 tableLocalId={localId || ''}
                 indexes={colIndexes}
-                previewWidth={hoveredCell.colWidth}
-                previewHeight={hoveredCell.colHeight}
+                previewWidth={colWidths?.[colIndex!] ?? 48}
+                previewHeight={previewHeight}
                 appearance={
                   selectedColIndexes.includes(hoveredCell.colIndex!)
                     ? isInDanger

package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx

@@ -34,6 +34,7 @@ export interface Props {
   isResizing?: boolean;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
+  isTableHovered?: boolean;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -47,6 +48,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   stickyHeader,
   selection,
   isInDanger,
+  isTableHovered,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
@@ -130,6 +132,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         tableRef={tableRef}
         isResizing={isResizing}
         tableActive={tableActive}
+        isTableHovered={isTableHovered}
         stickyTop={tableActive ? stickyTop : undefined}
         localId={currentNodeLocalId}
         isInDanger={isInDanger}

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -41,6 +41,7 @@ type DragControlsProps = {
   hoveredCell?: CellHoverMeta;
   isInDanger?: boolean;
   isResizing?: boolean;
+  isTableHovered?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
@@ -66,6 +67,7 @@ const DragControlsComponent = ({
   editorView,
   isInDanger,
   isResizing,
+  isTableHovered,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
@@ -217,7 +219,7 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && Number.isFinite(rowIndex) && (
+      {!isResizing && isTableHovered && Number.isFinite(rowIndex) && (
         <div
           style={{
             gridRow: gridRowPosition,

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -7,7 +7,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverCell, hoverRows, selectRow } from '../../commands';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
@@ -24,6 +23,7 @@ export interface Props {
   tableNode?: PmNode;
   tableActive?: boolean;
   isInDanger?: boolean;
+  isTableHovered?: boolean;
   isResizing?: boolean;
   isHeaderRowEnabled?: boolean;
   isHeaderColumnEnabled?: boolean;
@@ -105,6 +105,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       headerRowHeight,
       stickyHeader,
       hoveredCell,
+      isTableHovered,
     } = this.props;
     return (
       this.state.tableWrapperWidth !== nextState.tableWrapperWidth ||
@@ -121,7 +122,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       isSelectionUpdated(selection!, nextProps.selection) ||
       headerRowHeight !== nextProps.headerRowHeight ||
       stickyHeader !== nextProps.stickyHeader ||
-      hoveredCell !== nextProps.hoveredCell
+      hoveredCell !== nextProps.hoveredCell ||
+      isTableHovered !== nextProps.isTableHovered
     );
   }
 
@@ -147,6 +149,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader,
       isDragAndDropEnabled,
       hoveredCell,
+      isTableHovered,
     } = this.props;
 
     if (!tableRef) {
@@ -196,6 +199,7 @@ export default class TableFloatingControls extends Component<Props, State> {
                     tableRef={tableRef}
                     tableNode={tableNode}
                     hoveredCell={hoveredCell}
+                    isTableHovered={isTableHovered}
                     editorView={editorView}
                     tableActive={tableActive}
                     isInDanger={isInDanger}
@@ -256,10 +260,13 @@ export default class TableFloatingControls extends Component<Props, State> {
   private updateCellHoverLocation = (rowIndex: number) => {
     const { editorView, tableActive } = this.props;
     const { state, dispatch } = editorView;
-    const { hoveredCell } = getPluginState(state);
 
-    if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-      hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+    if (tableActive) {
+      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+      // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+      // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+      // current column index. We can just force it to 0.
+      hoverCell(rowIndex, 0)(state, dispatch);
     }
   };
 }

package/src/plugins/table/ui/common-styles.ts

@@ -766,19 +766,21 @@ export const tableStyles = (
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
-      padding: 0;
+      pointer-events: auto;
 
+      line-height: 0;
+      padding: 0;
       border-radius: 6px;
       width: max-content;
-      height: max-content;
       border: 2px solid ${token('elevation.surface', N0)};
+
       display: flex;
       justify-content: center;
       align-items: center;
       outline: none !important;
 
       &.${ClassName.DRAG_HANDLE_DISABLED} {
-        & > svg {
+        & svg {
           & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
             fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
           }
@@ -792,7 +794,7 @@ export const tableStyles = (
       }
 
       &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
-        & > svg {
+        & svg {
           rect {
             fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
           }

package/src/plugins/table/utils/dom.ts

@@ -264,3 +264,25 @@ export const getTop = (element: HTMLElement | Window | undefined): number => {
 
   return element?.getBoundingClientRect?.()?.top ?? 0;
 };
+
+export const findNearestCellIndexToPoint = (
+  x: number,
+  y: number,
+): { row: number; col: number } | undefined => {
+  const elements = document.elementsFromPoint(x, y);
+  const cell = elements.find(
+    (el) =>
+      el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH',
+  ) as HTMLTableCellElement | undefined;
+  const row = (cell?.parentElement ?? undefined) as
+    | HTMLTableRowElement
+    | undefined;
+
+  if (!Number.isFinite(row?.rowIndex) || !Number.isFinite(cell?.cellIndex)) {
+    return undefined;
+  }
+  return {
+    row: row!.rowIndex,
+    col: cell!.cellIndex,
+  };
+};

package/src/plugins/table/utils/index.ts

@@ -57,6 +57,7 @@ export {
   updateResizeHandles,
   isResizeHandleDecoration,
   hasResizeHandler,
+  findNearestCellIndexToPoint,
 } from './dom';
 export {
   convertHTMLCellIndexToColumnIndex,