@atlaskit/editor-plugin-table 5.4.14 → 5.4.16

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

@@ -16,7 +16,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("../../commands");
-var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
 var _CornerControls = require("./CornerControls");
@@ -59,10 +58,12 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableActive = _this$props.tableActive;
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-        hoveredCell = _getPluginState.hoveredCell;
-      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-        (0, _commands.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.
+        (0, _commands.hoverCell)(rowIndex, 0)(state, dispatch);
       }
     });
     _this.state = {
@@ -134,8 +135,9 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         ordering = _this$props2.ordering,
         headerRowHeight = _this$props2.headerRowHeight,
         stickyHeader = _this$props2.stickyHeader,
-        hoveredCell = _this$props2.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 || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
+        hoveredCell = _this$props2.hoveredCell,
+        isTableHovered = _this$props2.isTableHovered;
+      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 || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
     }
   }, {
     key: "componentWillUnmount",
@@ -161,7 +163,8 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         hoveredRows = _this$props3.hoveredRows,
         stickyHeader = _this$props3.stickyHeader,
         isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
-        hoveredCell = _this$props3.hoveredCell;
+        hoveredCell = _this$props3.hoveredCell,
+        isTableHovered = _this$props3.isTableHovered;
       if (!tableRef) {
         return null;
       }
@@ -195,6 +198,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableRef: tableRef,
         tableNode: tableNode,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         editorView: editorView,
         tableActive: tableActive,
         isInDanger: isInDanger,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
+exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
 var _consts = require("../ui/consts");
@@ -206,4 +206,19 @@ var getTop = exports.getTop = function getTop(element) {
     return 0;
   }
   return (_element$getBoundingC = element === null || element === void 0 || (_element$getBoundingC2 = element.getBoundingClientRect) === null || _element$getBoundingC2 === void 0 || (_element$getBoundingC2 = _element$getBoundingC2.call(element)) === null || _element$getBoundingC2 === void 0 ? void 0 : _element$getBoundingC2.top) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : 0;
+};
+var findNearestCellIndexToPoint = exports.findNearestCellIndexToPoint = function findNearestCellIndexToPoint(x, y) {
+  var _cell$parentElement;
+  var elements = document.elementsFromPoint(x, y);
+  var cell = elements.find(function (el) {
+    return el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH';
+  });
+  var 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/cjs/plugins/table/utils/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "findControlsHoverDecoration", {
     return _decoration.findControlsHoverDecoration;
   }
 });
+Object.defineProperty(exports, "findNearestCellIndexToPoint", {
+  enumerable: true,
+  get: function get() {
+    return _dom.findNearestCellIndexToPoint;
+  }
+});
 Object.defineProperty(exports, "getColumnClassNames", {
   enumerable: true,
   get: function get() {

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

@@ -108,15 +108,32 @@ export const hideResizeHandleLine = () => createCommand(state => ({
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
   }
 }));
-export const hoverCell = (rowIndex, colIndex, colWidth, colHeight) => createCommand(() => {
+export const setTableHovered = hovered => createCommand(() => {
+  return {
+    type: 'TABLE_HOVERED',
+    data: {
+      isTableHovered: hovered
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));
+export const hoverCell = (rowIndex, colIndex) => 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 !== null && rowIndex !== void 0 ? rowIndex : prevHoveredCell.rowIndex;
+  const 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,
-        colIndex,
-        colWidth,
-        colHeight
+        rowIndex: nextRowIndex,
+        colIndex: nextColIndex
       }
     }
   };

package/dist/es2019/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/es2019/plugins/table/commands/misc.js

@@ -209,11 +209,16 @@ export const getTableElementMoveTypeBySlice = (slice, state) => {
 export const isInsideFirstCellOfRowOrColumn = (selection, type) => {
   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;
 };
 export const deleteTable = (state, dispatch) => {

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

@@ -4,7 +4,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';
@@ -102,7 +102,8 @@ export const handleMouseOver = (view, mouseEvent) => {
   const target = mouseEvent.target;
   const {
     insertColumnButtonIndex,
-    insertRowButtonIndex
+    insertRowButtonIndex,
+    isTableHovered
   } = getPluginState(state);
   if (isInsertRowButton(target)) {
     const [startIndex, endIndex] = getColumnOrRowIndex(target);
@@ -127,6 +128,9 @@ export const handleMouseOver = (view, mouseEvent) => {
       right: endIndex
     })(state, dispatch);
   }
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
   return false;
 };
 
@@ -163,6 +167,19 @@ export const handleMouseOut = (view, mouseEvent) => {
   }
   return false;
 };
+export const handleMouseEnter = (view, mouseEvent) => {
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    isTableHovered
+  } = getPluginState(state);
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
+  return false;
+};
 export const handleMouseLeave = (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
@@ -174,19 +191,29 @@ export const handleMouseLeave = (view, event) => {
   const {
     insertColumnButtonIndex,
     insertRowButtonIndex,
-    isDragAndDropEnabled
+    isDragAndDropEnabled,
+    isTableHovered
   } = getPluginState(state);
+  if (isTableHovered) {
+    if (isDragAndDropEnabled) {
+      const {
+        isDragMenuOpen
+      } = getDragDropPluginState(state);
+      !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;
+  }
   const target = event.target;
   if (isTableControlsButton(target)) {
     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 ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
   }
@@ -331,9 +358,12 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorV
   }
   return tr;
 };
-export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+export const isTableInFocus = view => {
   var _getPluginState, _getResizePluginState;
-  if (!((_getPluginState = getPluginState(view.state)) !== null && _getPluginState !== void 0 && _getPluginState.tableNode) || !!((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
+  return !!((_getPluginState = getPluginState(view.state)) !== null && _getPluginState !== void 0 && _getPluginState.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+};
+export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+  if (!isTableInFocus(view)) {
     return false;
   }
   return eventHandler(view, mouseEvent, elementContentRects);
@@ -342,10 +372,9 @@ const trackCellLocation = (view, mouseEvent) => {
   var _tableElement$dataset;
   const target = mouseEvent.target;
   const maybeTableCell = isElementInTableCell(target);
-  const tableRef = getPluginState(view.state).tableRef;
   const {
-    hoveredCell,
-    tableNode
+    tableNode,
+    tableRef
   } = getPluginState(view.state);
   const tableElement = closestElement(target, 'table');
 
@@ -359,17 +388,13 @@ const trackCellLocation = (view, mouseEvent) => {
   const htmlColIndex = maybeTableCell.cellIndex;
   const rowElement = closestElement(target, 'tr');
   const htmlRowIndex = rowElement && rowElement.rowIndex;
-  const colHeight = tableRef.offsetHeight;
-  const colWidth = maybeTableCell.offsetWidth;
   const tableMap = tableNode && TableMap.get(tableNode);
   let colIndex = htmlColIndex;
   if (tableMap) {
     const 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 const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {
   if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {

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

@@ -528,7 +528,8 @@ class TableComponent extends React.Component {
     const {
       isInDanger,
       hoveredRows,
-      hoveredCell
+      hoveredCell,
+      isTableHovered
     } = getPluginState(view.state);
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
@@ -540,6 +541,7 @@ class TableComponent extends React.Component {
       tableActive: tableActive,
       hoveredRows: hoveredRows,
       hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
       isInDanger: isInDanger,
       isResizing: isResizing,
       isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
@@ -562,6 +564,7 @@ class TableComponent extends React.Component {
       isInDanger: isInDanger,
       hoveredRows: hoveredRows,
       hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
       isResizing: isResizing,
       ordering: ordering,
       hasHeaderRow: hasHeaderRow

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

@@ -53,24 +53,25 @@ export const clearDropTarget = tr => createCommand(state => {
     }
   };
 }, originalTr => (tr || originalTr).setMeta('addToHistory', false));
-export const moveSource = (sourceType, sourceIndex, targetIndex) => createCommand(state => {
+export const moveSource = (sourceType, sourceIndex, targetIndex, tr) => createCommand(state => {
   return {
     type: DragAndDropActionType.CLEAR_DROP_TARGET,
     data: {
       decorationSet: DecorationSet.empty
     }
   };
-}, tr => {
+}, originalTr => {
+  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 => newTr.setSelection(TextSelection.create(newTr.doc, anchor));
   const 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 const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
   let {

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

@@ -3,8 +3,10 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+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 { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
 import { DropTargetType } from './consts';
@@ -112,29 +114,60 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
+            var _cell$row, _cell$col;
             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 = 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(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' ? hasMergedCellsInRow : hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
+              clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
             }
             const [sourceIndex] = sourceIndexes;
             requestAnimationFrame(() => {
-              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
             });
           }
         })

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

@@ -8,7 +8,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
-import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCell from '../nodeviews/TableCell';
 import TableRow from '../nodeviews/TableRow';
@@ -24,6 +24,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
   var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
+    isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
@@ -236,11 +237,12 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         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/dist/es2019/plugins/table/reducer.js

@@ -114,6 +114,7 @@ export 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/es2019/plugins/table/toolbar.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -87,7 +89,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
   }, {
@@ -106,7 +108,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
   }, {
@@ -239,7 +241,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(backspace))
   });

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import Tooltip from '@atlaskit/tooltip';
@@ -13,19 +15,19 @@ export const ColumnResizeWidget = ({
     formatMessage
   } = useIntl();
   if (!includeTooltip) {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: formatMessage(messages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
-  }, tooltipProps => /*#__PURE__*/React.createElement("div", _extends({
+  }, tooltipProps => jsx("div", _extends({
     className: TableCssClassName.RESIZE_HANDLE_DECORATION,
     "data-start-index": startIndex,
     "data-end-index": endIndex

package/dist/es2019/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -3,6 +3,7 @@ import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../
 export const HandleIconComponent = props => {
   const {
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -14,11 +15,8 @@ export const HandleIconComponent = props => {
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   const isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   const isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  const showNormalHandle = hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (forceDefaultHandle || isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
+    return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }
   return /*#__PURE__*/React.createElement(MinimisedHandleIcon, null);
 };

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

@@ -14,6 +14,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -45,6 +46,7 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,

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

@@ -1,5 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
-import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';

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

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -48,25 +50,25 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     return null;
   }
   const labelCellOptions = formatMessage(messages.cellOptions);
-  const button = /*#__PURE__*/React.createElement("div", {
+  const button = jsx("div", {
     css: theme => [tableFloatingCellButtonStyles({
       theme
     }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
       theme
     })]
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
     onClick: handleClick,
-    iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
+    iconBefore: jsx(ExpandIcon, {
       label: ""
     }),
     "aria-label": labelCellOptions
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {
-    return /*#__PURE__*/React.createElement(FixedButton, {
+    return jsx(FixedButton, {
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,
@@ -76,7 +78,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -91,9 +93,9 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
 });
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return jsx(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
+  }, jsx(FloatingContextualButton, props));
 }