@atlaskit/editor-plugin-table 5.4.13 → 5.4.15

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -36,7 +38,7 @@ const FloatingContextualMenu = ({
     return null;
   }
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -52,9 +54,9 @@ const FloatingContextualMenu = ({
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: tablePopupStyles
-  }, /*#__PURE__*/React.createElement(ContextualMenu, {
+  }, jsx(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -24,15 +26,15 @@ const convertToDropdownItems = dragMenuConfig => {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
+      elemBefore: item.icon ? jsx("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, /*#__PURE__*/React.createElement(item.icon, {
+      }, jsx(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
+      elemAfter: item.keymap ? jsx("div", {
         css: shortcutStyle
       }, item.keymap) : undefined
     });
@@ -135,7 +137,7 @@ export const DragMenu = ({
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -27,9 +27,10 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
-  hasHeaderColumn
+  hasHeaderColumn,
+  isTableHovered
 }) => {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
@@ -73,10 +74,14 @@ export const ColumnControls = ({
       state,
       dispatch
     } = editorView;
-    if (tableActive && (hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) !== Number(colIndex)) {
-      hoverCell(hoveredCell === null || hoveredCell === void 0 ? void 0 : 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 === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, tableActive]);
+  }, [editorView, tableActive]);
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const {
@@ -96,6 +101,7 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex];
   }, [colIndex]);
+  const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -123,12 +129,14 @@ export const ColumnControls = ({
     style: columnParams.length - 1 === index ? {
       right: '0'
     } : {}
-  }))), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
+  }))), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
+      height: 'fit-content',
+      placeSelf: 'center',
       zIndex: 99
     },
     "data-column-control-index": hoveredCell.colIndex,
@@ -137,8 +145,8 @@ export const ColumnControls = ({
     direction: "column",
     tableLocalId: localId || '',
     indexes: colIndexes,
-    previewWidth: hoveredCell.colWidth,
-    previewHeight: hoveredCell.colHeight,
+    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+    previewHeight: previewHeight,
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -14,7 +14,8 @@ export const TableFloatingColumnControls = ({
   isResizing,
   stickyHeader,
   selection,
-  isInDanger
+  isInDanger,
+  isTableHovered
 }) => {
   const [tableRect, setTableRect] = useState({
     width: 0,
@@ -84,6 +85,7 @@ export const TableFloatingColumnControls = ({
     tableRef: tableRef,
     isResizing: isResizing,
     tableActive: tableActive,
+    isTableHovered: isTableHovered,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
     isInDanger: isInDanger,

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -30,6 +30,7 @@ const DragControlsComponent = ({
   editorView,
   isInDanger,
   isResizing,
+  isTableHovered,
   hoverRows,
   selectRow,
   updateCellHoverLocation
@@ -146,7 +147,7 @@ const DragControlsComponent = ({
       position: 'relative',
       left: "var(--ds-space-negative-100, -8px)"
     }
-  }))), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+  }))), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: gridRowPosition,
       gridColumn: '2',

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow } from '../../commands';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls, DragCornerControls } from './CornerControls';
@@ -42,11 +41,12 @@ export default class TableFloatingControls extends Component {
         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);
       }
     });
     this.state = {
@@ -98,9 +98,10 @@ export default class TableFloatingControls extends Component {
       ordering,
       headerRowHeight,
       stickyHeader,
-      hoveredCell
+      hoveredCell,
+      isTableHovered
     } = this.props;
-    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
+    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
   }
   componentWillUnmount() {
     if (this.resizeObserver) {
@@ -122,7 +123,8 @@ export default class TableFloatingControls extends Component {
       hoveredRows,
       stickyHeader,
       isDragAndDropEnabled,
-      hoveredCell
+      hoveredCell,
+      isTableHovered
     } = this.props;
     if (!tableRef) {
       return null;
@@ -155,6 +157,7 @@ export default class TableFloatingControls extends Component {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
       editorView: editorView,
       tableActive: tableActive,
       isInDanger: isInDanger,

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -657,19 +657,21 @@ export const tableStyles = props => {
 
     .${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 ${`var(--ds-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: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
           }
@@ -683,7 +685,7 @@ export const tableStyles = props => {
       }
 
       &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
-        & > svg {
+        & svg {
           rect {
             fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
           }

package/dist/es2019/plugins/table/utils/dom.js

@@ -177,4 +177,17 @@ export const getTop = element => {
     return 0;
   }
   return (_element$getBoundingC = element === null || element === void 0 ? void 0 : (_element$getBoundingC2 = element.getBoundingClientRect) === null || _element$getBoundingC2 === void 0 ? void 0 : (_element$getBoundingC3 = _element$getBoundingC2.call(element)) === null || _element$getBoundingC3 === void 0 ? void 0 : _element$getBoundingC3.top) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : 0;
+};
+export const findNearestCellIndexToPoint = (x, y) => {
+  var _cell$parentElement;
+  const elements = document.elementsFromPoint(x, y);
+  const cell = elements.find(el => el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH');
+  const row = (_cell$parentElement = cell === null || cell === void 0 ? void 0 : cell.parentElement) !== null && _cell$parentElement !== void 0 ? _cell$parentElement : undefined;
+  if (!Number.isFinite(row === null || row === void 0 ? void 0 : row.rowIndex) || !Number.isFinite(cell === null || cell === void 0 ? void 0 : cell.cellIndex)) {
+    return undefined;
+  }
+  return {
+    row: row.rowIndex,
+    col: cell.cellIndex
+  };
 };

package/dist/es2019/plugins/table/utils/index.js

@@ -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 { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/esm/plugins/table/commands/hover.js

@@ -137,16 +137,36 @@ export var hideResizeHandleLine = function hideResizeHandleLine() {
     };
   });
 };
-export var hoverCell = function hoverCell(rowIndex, colIndex, colWidth, colHeight) {
+export var setTableHovered = function setTableHovered(hovered) {
   return createCommand(function () {
+    return {
+      type: 'TABLE_HOVERED',
+      data: {
+        isTableHovered: hovered
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+export var hoverCell = function hoverCell(rowIndex, colIndex) {
+  return createCommand(function (state) {
+    var _getPluginState4 = getPluginState(state),
+      prevHoveredCell = _getPluginState4.hoveredCell;
+
+    // If no arguments have been passed then the intention it to reset the hover cell data
+    var clear = rowIndex === undefined && colIndex === undefined;
+    var nextRowIndex = clear ? undefined : rowIndex !== null && rowIndex !== void 0 ? rowIndex : prevHoveredCell.rowIndex;
+    var nextColIndex = clear ? undefined : colIndex !== null && colIndex !== void 0 ? colIndex : prevHoveredCell.colIndex;
+    if (nextRowIndex === prevHoveredCell.rowIndex && nextColIndex === prevHoveredCell.colIndex) {
+      return false;
+    }
     return {
       type: 'HOVER_CELL',
       data: {
         hoveredCell: {
-          rowIndex: rowIndex,
-          colIndex: colIndex,
-          colWidth: colWidth,
-          colHeight: colHeight
+          rowIndex: nextRowIndex,
+          colIndex: nextColIndex
         }
       }
     };

package/dist/esm/plugins/table/commands/index.js

@@ -1,4 +1,4 @@
-export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine } from './hover';
+export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { clearMultipleCells } from './clear';

package/dist/esm/plugins/table/commands/misc.js

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

package/dist/esm/plugins/table/event-handlers.js

@@ -5,7 +5,7 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
@@ -98,7 +98,8 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
   var target = mouseEvent.target;
   var _getPluginState = getPluginState(state),
     insertColumnButtonIndex = _getPluginState.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState.insertRowButtonIndex;
+    insertRowButtonIndex = _getPluginState.insertRowButtonIndex,
+    isTableHovered = _getPluginState.isTableHovered;
   if (isInsertRowButton(target)) {
     var _getColumnOrRowIndex3 = getColumnOrRowIndex(target),
       _getColumnOrRowIndex4 = _slicedToArray(_getColumnOrRowIndex3, 2),
@@ -128,6 +129,9 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
       right: _endIndex
     })(state, dispatch);
   }
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
   return false;
 };
 
@@ -160,26 +164,46 @@ export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
   }
   return false;
 };
+export var handleMouseEnter = function handleMouseEnter(view, mouseEvent) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var _getPluginState2 = getPluginState(state),
+    isTableHovered = _getPluginState2.isTableHovered;
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
+  return false;
+};
 export var handleMouseLeave = function handleMouseLeave(view, event) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState2 = getPluginState(state),
-    insertColumnButtonIndex = _getPluginState2.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState2.insertRowButtonIndex,
-    isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+  var _getPluginState3 = getPluginState(state),
+    insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
+    insertRowButtonIndex = _getPluginState3.insertRowButtonIndex,
+    isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled,
+    isTableHovered = _getPluginState3.isTableHovered;
+  if (isTableHovered) {
+    if (isDragAndDropEnabled) {
+      var _getDragDropPluginSta = getDragDropPluginState(state),
+        isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
+      !isDragMenuOpen && setTableHovered(false)(state, dispatch);
+    } else {
+      setTableHovered(false)(state, dispatch);
+    }
+    return true;
+  }
+
+  // If this table doesn't have focus then we want to skip everything after this.
+  if (!isTableInFocus(view)) {
+    return false;
+  }
   var target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
-  if (isDragAndDropEnabled) {
-    var _getDragDropPluginSta = getDragDropPluginState(state),
-      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
-    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
-    !isDragMenuOpen && hoverCell()(state, dispatch);
-  }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
   }
@@ -193,9 +217,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState3 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
+    var _getPluginState4 = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
@@ -208,8 +232,8 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState4 = getPluginState(_state3),
-      insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+    var _getPluginState5 = getPluginState(_state3),
+      insertRowButtonIndex = _getPluginState5.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
       _startIndex3 = _getColumnOrRowIndex12[0],
@@ -224,9 +248,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState5 = getPluginState(_state4),
-        resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
+      var _getPluginState6 = getPluginState(_state4),
+        resizeHandleColumnIndex = _getPluginState6.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState6.resizeHandleRowIndex;
       var tableCell = closestElement(element, 'td, th');
       var cellStartPosition = view.posAtDOM(tableCell, 0);
       var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
@@ -301,8 +325,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
           if (isTableSelected) {
             tr = removeTable(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState6 = getPluginState(newState),
-              isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
+            var _getPluginState7 = getPluginState(newState),
+              isHeaderRowRequired = _getPluginState7.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
             tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
@@ -313,10 +337,13 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
   }
   return tr;
 };
+export var isTableInFocus = function isTableInFocus(view) {
+  var _getPluginState8, _getResizePluginState;
+  return !!((_getPluginState8 = getPluginState(view.state)) !== null && _getPluginState8 !== void 0 && _getPluginState8.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+};
 export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    var _getPluginState7, _getResizePluginState;
-    if (!((_getPluginState7 = getPluginState(view.state)) !== null && _getPluginState7 !== void 0 && _getPluginState7.tableNode) || !!((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
+    if (!isTableInFocus(view)) {
       return false;
     }
     return eventHandler(view, mouseEvent, elementContentRects);
@@ -326,10 +353,9 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var _tableElement$dataset;
   var target = mouseEvent.target;
   var maybeTableCell = isElementInTableCell(target);
-  var tableRef = getPluginState(view.state).tableRef;
-  var _getPluginState8 = getPluginState(view.state),
-    hoveredCell = _getPluginState8.hoveredCell,
-    tableNode = _getPluginState8.tableNode;
+  var _getPluginState9 = getPluginState(view.state),
+    tableNode = _getPluginState9.tableNode,
+    tableRef = _getPluginState9.tableRef;
   var tableElement = closestElement(target, 'table');
 
   // hover will only trigger if target localId is the same with selected localId
@@ -342,17 +368,13 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = closestElement(target, 'tr');
   var htmlRowIndex = rowElement && rowElement.rowIndex;
-  var colHeight = tableRef.offsetHeight;
-  var colWidth = maybeTableCell.offsetWidth;
   var tableMap = tableNode && TableMap.get(tableNode);
   var colIndex = htmlColIndex;
   if (tableMap) {
     var convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
     colIndex = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
   }
-  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 var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -520,7 +520,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getPluginState2 = getPluginState(view.state),
         isInDanger = _getPluginState2.isInDanger,
         hoveredRows = _getPluginState2.hoveredRows,
-        hoveredCell = _getPluginState2.hoveredCell;
+        hoveredCell = _getPluginState2.hoveredCell,
+        isTableHovered = _getPluginState2.isTableHovered;
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
@@ -531,6 +532,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableActive: tableActive,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         isInDanger: isInDanger,
         isResizing: isResizing,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
@@ -553,6 +555,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isInDanger: isInDanger,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         isResizing: isResizing,
         ordering: ordering,
         hasHeaderRow: hasHeaderRow

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -61,7 +61,7 @@ export var clearDropTarget = function clearDropTarget(tr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
 };
-export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex) {
+export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex, tr) {
   return createCommand(function (state) {
     return {
       type: DragAndDropActionType.CLEAR_DROP_TARGET,
@@ -69,19 +69,20 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
         decorationSet: DecorationSet.empty
       }
     };
-  }, function (tr) {
+  }, function (originalTr) {
+    var nextTr = tr || originalTr;
     if (sourceIndex === targetIndex) {
-      return tr.setMeta('addToHistory', false);
+      return nextTr.setMeta('addToHistory', false);
     }
-    var anchor = tr.selection.anchor;
+    var anchor = nextTr.selection.anchor;
     var selectStartOfTable = function selectStartOfTable(newTr) {
       return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
     };
     var isTableRow = sourceType === 'table-row';
     if (isTableRow) {
-      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], nextTr);
     }
-    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
+    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {