@atlaskit/editor-plugin-table 5.4.14 → 5.4.16

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.16
+
+### Patch Changes
+
+- [#58843](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58843) [`630177f9bf2e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/630177f9bf2e) - [ux] add selected handle and also keep hover handle
+
+## 5.4.15
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+- [#59075](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59075) [`f149e1b3253c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f149e1b3253c) - Fixed the apperance of a globe icon which occurs when dragging a column which generates a preview with 0px area. The preview width and height are now calculate when needed, rather then using the cached hovered cell value.
+- [#58846](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58846) [`99f05f5ee5b5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/99f05f5ee5b5) - normalise cell positions as table maps are offsets for rowOrColumMoved event
+- [#58451](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58451) [`174737fc3054`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/174737fc3054) - The table drag handles will now correctly display after dropping a row/column when previously the handle would disappear
+- Updated dependencies
+
 ## 5.4.14
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -0,0 +1,70 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "declaration": true,
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../",
+        "baseUrl": "../"
+    },
+    "include": [
+        "../src/**/*.ts",
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*"
+    ],
+    "references": [
+        {
+            "path": "../../custom-steps/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-common/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-palette/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-content-insertion/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-guideline/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-plugin-width/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-shared-styles/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-tables/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/icon/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/theme/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
+        }
+    ]
+}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showResizeHandleLine = exports.hoverTable = exports.hoverRows = exports.hoverMergedCells = exports.hoverColumns = exports.hoverCell = exports.hideResizeHandleLine = exports.clearHoverSelection = void 0;
+exports.showResizeHandleLine = exports.setTableHovered = exports.hoverTable = exports.hoverRows = exports.hoverMergedCells = exports.hoverColumns = exports.hoverCell = exports.hideResizeHandleLine = exports.clearHoverSelection = void 0;
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -144,16 +144,36 @@ var hideResizeHandleLine = exports.hideResizeHandleLine = function hideResizeHan
     };
   });
 };
-var hoverCell = exports.hoverCell = function hoverCell(rowIndex, colIndex, colWidth, colHeight) {
+var setTableHovered = exports.setTableHovered = function setTableHovered(hovered) {
   return (0, _pluginFactory.createCommand)(function () {
+    return {
+      type: 'TABLE_HOVERED',
+      data: {
+        isTableHovered: hovered
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+var hoverCell = exports.hoverCell = function hoverCell(rowIndex, colIndex) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState4 = (0, _pluginFactory.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/cjs/plugins/table/commands/index.js

@@ -159,6 +159,12 @@ Object.defineProperty(exports, "setMultipleCellAttrs", {
     return _misc.setMultipleCellAttrs;
   }
 });
+Object.defineProperty(exports, "setTableHovered", {
+  enumerable: true,
+  get: function get() {
+    return _hover.setTableHovered;
+  }
+});
 Object.defineProperty(exports, "setTableRef", {
   enumerable: true,
   get: function get() {

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

@@ -202,12 +202,17 @@ var getTableElementMoveTypeBySlice = exports.getTableElementMoveTypeBySlice = fu
 var isInsideFirstCellOfRowOrColumn = exports.isInsideFirstCellOfRowOrColumn = function isInsideFirstCellOfRowOrColumn(selection, type) {
   var table = (0, _utils2.findTable)(selection);
   if (!table || !type) {
-    return;
+    return false;
   }
   var map = _tableMap.TableMap.get(table.node);
-  var cell = (0, _utils2.selectionCell)(selection);
+  var cell = (0, _utils2.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/cjs/plugins/table/event-handlers.js

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleMouseOver = exports.handleMouseOut = exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseDown = exports.handleFocus = exports.handleCut = exports.handleClick = exports.handleBlur = void 0;
+exports.handleMouseOver = exports.handleMouseOut = exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseEnter = exports.handleMouseDown = exports.handleFocus = exports.handleCut = exports.handleClick = exports.handleBlur = void 0;
 exports.handleTripleClick = handleTripleClick;
-exports.withCellTracking = exports.whenTableInFocus = void 0;
+exports.withCellTracking = exports.whenTableInFocus = exports.isTableInFocus = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -107,7 +107,8 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
   var target = mouseEvent.target;
   var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
     insertColumnButtonIndex = _getPluginState.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState.insertRowButtonIndex;
+    insertRowButtonIndex = _getPluginState.insertRowButtonIndex,
+    isTableHovered = _getPluginState.isTableHovered;
   if ((0, _utils3.isInsertRowButton)(target)) {
     var _getColumnOrRowIndex3 = (0, _utils3.getColumnOrRowIndex)(target),
       _getColumnOrRowIndex4 = (0, _slicedToArray2.default)(_getColumnOrRowIndex3, 2),
@@ -137,6 +138,9 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
       right: _endIndex
     })(state, dispatch);
   }
+  if (!isTableHovered) {
+    return (0, _commands.setTableHovered)(true)(state, dispatch);
+  }
   return false;
 };
 
@@ -169,26 +173,46 @@ var handleMouseOut = exports.handleMouseOut = function handleMouseOut(view, mous
   }
   return false;
 };
+var handleMouseEnter = exports.handleMouseEnter = function handleMouseEnter(view, mouseEvent) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
+    isTableHovered = _getPluginState2.isTableHovered;
+  if (!isTableHovered) {
+    return (0, _commands.setTableHovered)(true)(state, dispatch);
+  }
+  return false;
+};
 var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view, event) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
-    insertColumnButtonIndex = _getPluginState2.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState2.insertRowButtonIndex,
-    isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+  var _getPluginState3 = (0, _pluginFactory2.getPluginState)(state),
+    insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
+    insertRowButtonIndex = _getPluginState3.insertRowButtonIndex,
+    isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled,
+    isTableHovered = _getPluginState3.isTableHovered;
+  if (isTableHovered) {
+    if (isDragAndDropEnabled) {
+      var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
+        isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
+      !isDragMenuOpen && (0, _commands.setTableHovered)(false)(state, dispatch);
+    } else {
+      (0, _commands.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 ((0, _utils3.isTableControlsButton)(target)) {
     return true;
   }
-  if (isDragAndDropEnabled) {
-    var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
-      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
-    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
-    !isDragMenuOpen && (0, _commands.hoverCell)()(state, dispatch);
-  }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch)) {
     return true;
   }
@@ -202,9 +226,9 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState3 = (0, _pluginFactory2.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
+    var _getPluginState4 = (0, _pluginFactory2.getPluginState)(state),
+      insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
@@ -217,8 +241,8 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState4 = (0, _pluginFactory2.getPluginState)(_state3),
-      insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+    var _getPluginState5 = (0, _pluginFactory2.getPluginState)(_state3),
+      insertRowButtonIndex = _getPluginState5.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
       _startIndex3 = _getColumnOrRowIndex12[0],
@@ -233,9 +257,9 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState5 = (0, _pluginFactory2.getPluginState)(_state4),
-        resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
+      var _getPluginState6 = (0, _pluginFactory2.getPluginState)(_state4),
+        resizeHandleColumnIndex = _getPluginState6.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState6.resizeHandleRowIndex;
       var tableCell = (0, _utils.closestElement)(element, 'td, th');
       var cellStartPosition = view.posAtDOM(tableCell, 0);
       var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
@@ -310,8 +334,8 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
           if (isTableSelected) {
             tr = (0, _utils2.removeTable)(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState6 = (0, _pluginFactory2.getPluginState)(newState),
-              isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
+            var _getPluginState7 = (0, _pluginFactory2.getPluginState)(newState),
+              isHeaderRowRequired = _getPluginState7.pluginConfig.isHeaderRowRequired;
             tr = (0, _transforms.deleteRows)(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
             tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView)(tr);
@@ -322,10 +346,13 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
   }
   return tr;
 };
+var isTableInFocus = exports.isTableInFocus = function isTableInFocus(view) {
+  var _getPluginState8, _getResizePluginState;
+  return !!((_getPluginState8 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState8 !== void 0 && _getPluginState8.tableNode) && !((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+};
 var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    var _getPluginState7, _getResizePluginState;
-    if (!((_getPluginState7 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState7 !== void 0 && _getPluginState7.tableNode) || !!((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
+    if (!isTableInFocus(view)) {
       return false;
     }
     return eventHandler(view, mouseEvent, elementContentRects);
@@ -335,10 +362,9 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var _tableElement$dataset;
   var target = mouseEvent.target;
   var maybeTableCell = (0, _utils.isElementInTableCell)(target);
-  var tableRef = (0, _pluginFactory2.getPluginState)(view.state).tableRef;
-  var _getPluginState8 = (0, _pluginFactory2.getPluginState)(view.state),
-    hoveredCell = _getPluginState8.hoveredCell,
-    tableNode = _getPluginState8.tableNode;
+  var _getPluginState9 = (0, _pluginFactory2.getPluginState)(view.state),
+    tableNode = _getPluginState9.tableNode,
+    tableRef = _getPluginState9.tableRef;
   var tableElement = (0, _utils.closestElement)(target, 'table');
 
   // hover will only trigger if target localId is the same with selected localId
@@ -351,17 +377,13 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = (0, _utils.closestElement)(target, 'tr');
   var htmlRowIndex = rowElement && rowElement.rowIndex;
-  var colHeight = tableRef.offsetHeight;
-  var colWidth = maybeTableCell.offsetWidth;
   var tableMap = tableNode && _tableMap.TableMap.get(tableNode);
   var colIndex = htmlColIndex;
   if (tableMap) {
     var convertedColIndex = (0, _utils3.convertHTMLCellIndexToColumnIndex)(htmlColIndex, htmlRowIndex, tableMap);
     colIndex = (0, _utils3.getColumnIndexMappedToColumnIndexInFirstRow)(convertedColIndex, htmlRowIndex, tableMap);
   }
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    (0, _commands.hoverCell)(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
-  }
+  (0, _commands.hoverCell)(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {

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

@@ -527,7 +527,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getPluginState2 = (0, _pluginFactory.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 = (0, _utils4.containsHeaderRow)(node);
@@ -538,6 +539,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableActive: tableActive,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         isInDanger: isInDanger,
         isResizing: isResizing,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
@@ -560,6 +562,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isInDanger: isInDanger,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         isResizing: isResizing,
         ordering: ordering,
         hasHeaderRow: hasHeaderRow

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

@@ -66,7 +66,7 @@ var clearDropTarget = exports.clearDropTarget = function clearDropTarget(tr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
 };
-var moveSource = exports.moveSource = function moveSource(sourceType, sourceIndex, targetIndex) {
+var moveSource = exports.moveSource = function moveSource(sourceType, sourceIndex, targetIndex, tr) {
   return (0, _pluginFactory.createCommand)(function (state) {
     return {
       type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
@@ -74,19 +74,20 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
         decorationSet: _view.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(_state.TextSelection.create(newTr.doc, anchor));
     };
     var isTableRow = sourceType === 'table-row';
     if (isTableRow) {
-      return (0, _transforms.combineTransforms)([(0, _utils.moveRow)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectRow)(targetIndex)], tr);
+      return (0, _transforms.combineTransforms)([(0, _utils.moveRow)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectRow)(targetIndex)], nextTr);
     }
-    return (0, _transforms.combineTransforms)([(0, _utils.moveColumn)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectColumn)(targetIndex)], tr);
+    return (0, _transforms.combineTransforms)([(0, _utils.moveColumn)(sourceIndex, targetIndex), selectStartOfTable, (0, _utils.selectColumn)(targetIndex)], nextTr);
   });
 };
 var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -11,13 +11,15 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _utils2 = require("../../utils");
 var _mergedCells = require("../../utils/merged-cells");
 var _pluginFactory = require("../plugin-factory");
+var _pluginKey = require("../plugin-key");
 var _actions = require("./actions");
 var _commands = require("./commands");
 var _consts = require("./consts");
 var _pluginFactory2 = require("./plugin-factory");
-var _pluginKey = require("./plugin-key");
+var _pluginKey2 = require("./plugin-key");
 var _monitor = require("./utils/monitor");
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher) {
   return new _safePlugin.SafePlugin({
@@ -31,7 +33,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         isDragging: false
       };
     }),
-    key: _pluginKey.pluginKey,
+    key: _pluginKey2.pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       var _getTablePluginState = (0, _pluginFactory.getPluginState)(oldState),
         oldTargetCellPosition = _getTablePluginState.targetCellPosition;
@@ -62,10 +64,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             // should not close the drag menu.
             var isCellSelection = tr.selection instanceof _cellSelection.CellSelection;
             if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
-              return tr.setMeta(_pluginKey.pluginKey, action);
+              return tr.setMeta(_pluginKey2.pluginKey, action);
             } // else NOP
           } else {
-            return tr.setMeta(_pluginKey.pluginKey, action);
+            return tr.setMeta(_pluginKey2.pluginKey, action);
           }
         }
       }
@@ -113,28 +115,58 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
+            var _cell$row, _cell$col;
             var data = (0, _monitor.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.
+            var _getTablePluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
+              hoveredCell = _getTablePluginState4.hoveredCell;
+            var cell = (0, _utils2.findNearestCellIndexToPoint)(event.location.current.input.clientX, event.location.current.input.clientY);
+            var tr = editorView.state.tr;
+            var action = {
+              type: 'HOVER_CELL',
+              data: {
+                hoveredCell: {
+                  rowIndex: (_cell$row = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
+                  colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _cell$col : hoveredCell.colIndex
+                }
+              }
+            };
+            tr.setMeta(_pluginKey.pluginKey, action);
+
             // If no data can be found then it's most like we do not want to perform any drop action
             if (!data) {
-              (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
+              (0, _commands.clearDropTarget)(tr)(editorView.state, editorView.dispatch);
               return;
             }
             var sourceType = data.sourceType,
               sourceIndexes = data.sourceIndexes,
+              targetIndex = data.targetIndex,
               targetAdjustedIndex = data.targetAdjustedIndex,
               direction = data.direction;
 
+            // 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.
             var hasMergedCells = sourceType === 'table-row' ? _mergedCells.hasMergedCellsInRow : _mergedCells.hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
-              (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
+              (0, _commands.clearDropTarget)(tr)(editorView.state, editorView.dispatch);
               return;
             }
             var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
             requestAnimationFrame(function () {
-              (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+              (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
             });
           }
         })

package/dist/cjs/plugins/table/pm-plugins/main.js

@@ -34,6 +34,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
   var _window;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
+    isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
@@ -248,11 +249,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         focus: _eventHandlers.handleFocus,
         blur: _eventHandlers.handleBlur,
         mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
-        mouseover: (0, _eventHandlers.whenTableInFocus)((0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseOver)),
-        mouseleave: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseLeave),
+        mouseover: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver)),
+        mouseleave: _eventHandlers.handleMouseLeave,
         mouseout: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
         mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove, elementContentRects),
-        click: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleClick)
+        mouseenter: _eventHandlers.handleMouseEnter,
+        click: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleClick))
       },
       handleTripleClick: _eventHandlers.handleTripleClick
     }

package/dist/cjs/plugins/table/reducer.js

@@ -97,6 +97,7 @@ var _default = exports.default = function _default(pluginState, action) {
     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/dist/cjs/plugins/table/toolbar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
+var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -29,6 +30,8 @@ var _types = require("./types");
 var _utils4 = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var options = [{
@@ -95,7 +98,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: (0, _react.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
   }, {
@@ -114,7 +117,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: (0, _react.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
   }, {
@@ -246,7 +249,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: (0, _react.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.backspace))
   });

package/dist/cjs/plugins/table/ui/ColumnResizeWidget/index.js

@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColumnResizeWidget = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../../types");
+/** @jsx jsx */
+
 var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidget(_ref) {
   var startIndex = _ref.startIndex,
     endIndex = _ref.endIndex,
@@ -18,20 +21,20 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _react2.jsx)("div", {
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: formatMessage(_messages.tableMessages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
   }, function (tooltipProps) {
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex