@atlaskit/editor-plugin-table 5.4.14 → 5.4.16

package/dist/types-ts4.5/plugins/table/event-handlers.d.ts

@@ -8,9 +8,11 @@ export declare const handleClick: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseOver: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
+export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView) => Transaction;
+export declare const isTableInFocus: (view: EditorView) => boolean;
 export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
 export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/commands.d.ts

@@ -8,5 +8,5 @@ export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
-export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number) => import("@atlaskit/editor-common/types").Command;
+export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -47,8 +47,6 @@ export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
 export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
-    colWidth?: number;
-    colHeight?: number;
 }
 export interface TablePluginState {
     editorHasFocus?: boolean;
@@ -82,6 +80,7 @@ export interface TablePluginState {
     wasFullWidthModeEnabled?: boolean;
     isTableResizingEnabled?: boolean;
     isDragAndDropEnabled?: boolean;
+    isTableHovered?: boolean;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';
@@ -175,6 +174,11 @@ export type TablePluginAction = {
     data: {
         hoveredCell: CellHoverMeta;
     };
+} | {
+    type: 'TABLE_HOVERED';
+    data: {
+        isTableHovered: boolean;
+    };
 } | {
     type: 'SET_TARGET_CELL_POSITION';
     data: {
@@ -416,3 +420,4 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
+export type HandleTypes = 'hover' | 'selected';

package/dist/types-ts4.5/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -2,6 +2,7 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
+    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -5,6 +5,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -15,5 +16,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -13,6 +13,7 @@ export interface ColumnControlsProps {
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
     hasHeaderColumn?: boolean;
+    isTableHovered?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -21,6 +21,7 @@ export interface Props {
     isResizing?: boolean;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
+    isTableHovered?: boolean;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -12,6 +12,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;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     tableNode?: PmNode;
     tableActive?: boolean;
     isInDanger?: boolean;
+    isTableHovered?: boolean;
     isResizing?: boolean;
     isHeaderRowEnabled?: boolean;
     isHeaderColumnEnabled?: boolean;

package/dist/types-ts4.5/plugins/table/utils/dom.d.ts

@@ -29,3 +29,7 @@ export type TableDOMElements = {
 };
 export declare const getTree: (tr: HTMLTableRowElement) => TableDOMElements | null;
 export declare const getTop: (element: HTMLElement | Window | undefined) => number;
+export declare const findNearestCellIndexToPoint: (x: number, y: number) => {
+    row: number;
+    col: number;
+} | undefined;

package/dist/types-ts4.5/plugins/table/utils/index.d.ts

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.14",
+  "version": "5.4.16",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.0.0",
-    "@atlaskit/custom-steps": "^0.0.6",
+    "@atlaskit/custom-steps": "^0.0.7",
     "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",

package/src/__tests__/unit/event-handlers.ts

@@ -191,7 +191,7 @@ describe('table event handlers', () => {
 
   describe('#handleMouseOver', () => {
     describe('when insert col/row button is hidden', () => {
-      it('should return false', () => {
+      it('should set table as hovered', () => {
         const { editorView } = editor(
           doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
         );
@@ -205,7 +205,7 @@ describe('table event handlers', () => {
         const event = {
           target: editorView.dom.querySelector('td'),
         };
-        expect(handleMouseOver(editorView, event as MouseEvent)).toEqual(false);
+        expect(handleMouseOver(editorView, event as MouseEvent)).toEqual(true);
       });
     });
 

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -71,6 +71,7 @@ describe('NumberColumn', () => {
           tableActive
           editorView={editorView}
           hoveredCell={{ rowIndex: 1, colIndex: 1 }}
+          isTableHovered={true}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
           updateCellHoverLocation={jest.fn()}

package/src/plugins/table/commands/hover.ts

@@ -202,18 +202,48 @@ export const hideResizeHandleLine = () =>
     },
   }));
 
-export const hoverCell = (
-  rowIndex?: number,
-  colIndex?: number,
-  colWidth?: number,
-  colHeight?: number,
-) =>
+export const setTableHovered = (hovered: boolean) =>
   createCommand(
     () => {
+      return {
+        type: 'TABLE_HOVERED',
+        data: {
+          isTableHovered: hovered,
+        },
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
+export const hoverCell = (rowIndex?: number, colIndex?: number) =>
+  createCommand(
+    (state) => {
+      const { hoveredCell: prevHoveredCell } = getPluginState(state);
+
+      // If no arguments have been passed then the intention it to reset the hover cell data
+      const clear = rowIndex === undefined && colIndex === undefined;
+
+      const nextRowIndex = clear
+        ? undefined
+        : rowIndex ?? prevHoveredCell.rowIndex;
+      const nextColIndex = clear
+        ? undefined
+        : colIndex ?? prevHoveredCell.colIndex;
+
+      if (
+        nextRowIndex === prevHoveredCell.rowIndex &&
+        nextColIndex === prevHoveredCell.colIndex
+      ) {
+        return false;
+      }
+
       return {
         type: 'HOVER_CELL',
         data: {
-          hoveredCell: { rowIndex, colIndex, colWidth, colHeight },
+          hoveredCell: {
+            rowIndex: nextRowIndex,
+            colIndex: nextColIndex,
+          },
         },
       };
     },

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

@@ -7,6 +7,7 @@ export {
   clearHoverSelection,
   showResizeHandleLine,
   hideResizeHandleLine,
+  setTableHovered,
 } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export {

package/src/plugins/table/commands/misc.ts

@@ -317,11 +317,17 @@ export const isInsideFirstCellOfRowOrColumn = (
   const table = findTable(selection);
 
   if (!table || !type) {
-    return;
+    return false;
   }
+
   const map = TableMap.get(table.node!);
-  const cell = selectionCell(selection);
-  const index = map.map.findIndex((value) => value === cell!.pos! - 1);
+  const cell = findCellClosestToPos(selection.$anchor);
+  if (!cell) {
+    return false;
+  }
+  const pos = cell.pos - table.pos - 1;
+  // cell positions in table map always start at 1, as they're offsets not positions
+  const index = map.map.findIndex((value) => value === pos);
 
   return type === 'row' ? index % map.width === 0 : index < map.width;
 };

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';
@@ -457,3 +462,5 @@ export interface DraggableData {
   targetClosestEdge: Edge;
   direction: 1 | -1;
 }
+
+export type HandleTypes = 'hover' | 'selected';