@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

package/dist/cjs/plugins/table/utils/merged-cells.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasMergedCellsInRow = exports.hasMergedCellsInColumn = void 0;
+var _editorTables = require("@atlaskit/editor-tables");
+var hasMergedCells = function hasMergedCells(indexes, normalizeRect) {
+  return function (selection) {
+    var table = (0, _editorTables.findTable)(selection);
+    if (!table) {
+      return false;
+    }
+    var map = _editorTables.TableMap.get(table.node);
+    var cellPositions = new Set();
+    var mergedCells = new Set();
+    map.map.forEach(function (value) {
+      if (cellPositions.has(value)) {
+        mergedCells.add(value);
+      } else {
+        cellPositions.add(value);
+      }
+    });
+    if (!mergedCells.size) {
+      return false;
+    }
+    return (Array.isArray(indexes) ? indexes : [indexes]).map(function (index) {
+      return normalizeRect(index, map);
+    }).filter(function (rect) {
+      return rect.left < rect.right && rect.top < rect.bottom;
+    }).some(function (rect) {
+      var n = (rect.right - rect.left) * (rect.bottom - rect.top);
+      var cells = map.cellsInRect(rect);
+      if (cells.length !== n) {
+        // We can quickly assume that if the amount of cells from the map is different to what the rect says
+        // then there is most likely merged cells across this area which is removing cells
+        return true;
+      }
+      return cells.some(function (nodePos) {
+        return mergedCells.has(nodePos);
+      });
+    });
+  };
+};
+var hasMergedCellsInColumn = exports.hasMergedCellsInColumn = function hasMergedCellsInColumn(columnIndexes) {
+  return hasMergedCells(columnIndexes, function (index, map) {
+    var x = Math.max(Math.min(index, map.width - 1), 0); // clamped index
+    return {
+      left: x,
+      right: x === index ? x + 1 : x,
+      top: 0,
+      bottom: map.height
+    };
+  });
+};
+var hasMergedCellsInRow = exports.hasMergedCellsInRow = function hasMergedCellsInRow(rowIndexes) {
+  return hasMergedCells(rowIndexes, function (index, map) {
+    var y = Math.max(Math.min(index, map.height - 1), 0); // clamped index
+    return {
+      left: 0,
+      right: map.width,
+      top: y,
+      bottom: y === index ? y + 1 : y
+    };
+  });
+};

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

@@ -4,13 +4,7 @@ import { findTable, getCellsInColumn, getCellsInRow } from '@atlaskit/editor-tab
 import { createCommand } from '../pm-plugins/plugin-factory';
 import { TableDecorations } from '../types';
 import { createCellHoverDecoration, createColumnLineResize, createControlsHoverDecoration, getMergedCellsPositions, updatePluginStateDecorations } from '../utils';
-// #endregion
-
-// #region Utils
 const makeArray = n => Array.from(Array(n).keys());
-// #endregion
-
-// #region Commands
 export const hoverMergedCells = () => createCommand(state => {
   const mergedCellsPositions = getMergedCellsPositions(state.tr);
   if (!mergedCellsPositions.length) {
@@ -27,7 +21,7 @@ export const hoverMergedCells = () => createCommand(state => {
   }));
   const decorations = createCellHoverDecoration(mergedCells);
   return {
-    type: 'HOVER_CELLS',
+    type: 'HOVER_MERGED_CELLS',
     data: {
       decorationSet: updatePluginStateDecorations(state, decorations, TableDecorations.CELL_CONTROLS_HOVER)
     }
@@ -105,4 +99,14 @@ export const hideResizeHandleLine = () => createCommand(state => ({
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
   }
 }));
-// #endregion
+export const hoverCell = (rowIndex, colIndex) => createCommand(() => {
+  return {
+    type: 'HOVER_CELL',
+    data: {
+      hoveredCell: {
+        rowIndex,
+        colIndex
+      }
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));

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

@@ -1,4 +1,4 @@
-export { hoverColumns, hoverRows, hoverTable, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine } from './hover';
+export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine } 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

@@ -13,11 +13,6 @@ import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
-// #endregion
-
-// #endregion
-
-// #region Commands
 export const setEditorFocus = editorHasFocus => createCommand({
   type: 'SET_EDITOR_FOCUS',
   data: {
@@ -419,5 +414,4 @@ export const addBoldInEmptyHeaderCells = tableCellHeader => (state, dispatch) =>
     return true;
   }
   return false;
-};
-// #endregion
+};

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, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
@@ -171,12 +171,16 @@ export const handleMouseLeave = (view, event) => {
   } = view;
   const {
     insertColumnButtonIndex,
-    insertRowButtonIndex
+    insertRowButtonIndex,
+    isDragAndDropEnabled
   } = getPluginState(state);
   const target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
+  if (isDragAndDropEnabled) {
+    hoverCell(undefined, undefined)(state, dispatch);
+  }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
   }
@@ -326,4 +330,26 @@ export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mo
     return false;
   }
   return eventHandler(view, mouseEvent, elementContentRects);
+};
+const trackCellLocation = (view, mouseEvent) => {
+  const target = mouseEvent.target;
+  const maybeTableCell = isElementInTableCell(target);
+  if (!maybeTableCell) {
+    return;
+  }
+  const colIndex = maybeTableCell.cellIndex;
+  const rowElement = closestElement(target, 'tr');
+  const rowIndex = rowElement && rowElement.rowIndex;
+  const {
+    hoveredCell
+  } = getPluginState(view.state);
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
+    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  }
+};
+export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+  if (getPluginState(view.state).isDragAndDropEnabled) {
+    trackCellLocation(view, mouseEvent);
+  }
+  return eventHandler(view, mouseEvent, elementContentRects);
 };

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

@@ -106,7 +106,7 @@ const tablesPlugin = ({
             getEditorFeatureFlags,
             dragAndDropEnabled
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',

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

@@ -466,7 +466,8 @@ class TableComponent extends React.Component {
     // doesn't work well with WithPluginState
     const {
       isInDanger,
-      hoveredRows
+      hoveredRows,
+      hoveredCell
     } = getPluginState(view.state);
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
@@ -478,10 +479,12 @@ class TableComponent extends React.Component {
       tableRef: tableRef,
       tableActive: tableActive,
       hoveredRows: hoveredRows,
+      hoveredCell: hoveredCell,
       isInDanger: isInDanger,
       isResizing: isResizing,
       isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
       isHeaderRowEnabled: isHeaderRowEnabled,
+      isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
       ordering: ordering,
       isHeaderColumnEnabled: isHeaderColumnEnabled,
       hasHeaderRow: hasHeaderRow
@@ -489,8 +492,7 @@ class TableComponent extends React.Component {
       ,
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-      stickyHeader: this.state.stickyHeader,
-      getEditorFeatureFlags: this.props.getEditorFeatureFlags
+      stickyHeader: this.state.stickyHeader
     }));
     const colControls = /*#__PURE__*/React.createElement("div", {
       className: ClassName.COLUMN_CONTROLS_WRAPPER

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

@@ -223,7 +223,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     isBreakoutEnabled,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
-    isTableResizingEnabled
+    isTableResizingEnabled,
+    isDragAndDropEnabled
   } = getPluginState(view.state);
   const {
     allowColumnResizing
@@ -240,7 +241,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       isBreakoutEnabled,
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
-      isTableResizingEnabled
+      isTableResizingEnabled,
+      isDragAndDropEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -1,7 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-} from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { pluginKey as tablePluginKey } from '../plugin-key';
@@ -10,7 +8,7 @@ import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecora
 export const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);
 export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
   const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   const changedResizing = isResizing !== wasResizing;
@@ -18,7 +16,7 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   // Remove column controls when resizing
   if (isResizing) {
     return DecorationSet.empty;
-  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
+  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing || ((_tr$getMeta = tr.getMeta(tablePluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type) === 'HOVER_CELL') {
     return buildColumnControlsDecorations({
       decorationSet,
       tr
@@ -39,12 +37,16 @@ export const createPlugin = () => {
     state: {
       init: () => DecorationSet.empty,
       apply: (tr, decorationSet, oldState, newState) => {
+        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
+        const previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
+        const newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
+        const changedCellHover = (previousHover === null || previousHover === void 0 ? void 0 : previousHover.colIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.colIndex) || (previousHover === null || previousHover === void 0 ? void 0 : previousHover.rowIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.rowIndex);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey) || changedCellHover) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -4,6 +4,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
 import { composeDecorations } from './compose-decorations';
 const isColumnSelected = tr => tr.selection instanceof CellSelection && tr.selection.isColSelection();
 
@@ -24,11 +25,15 @@ const maybeUpdateColumnControlsDecoration = ({
   decorationSet,
   tr
 }) => {
+  var _meta$data;
   const table = findTable(tr.selection);
-  if (!table) {
+  const meta = tr.getMeta(tablePluginKey);
+
+  // avoid re-drawing state if dnd decorations don't need to be updated
+  if (!table && (meta === null || meta === void 0 ? void 0 : meta.type) !== 'HOVER_CELL') {
     return decorationSet;
   }
-  return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+  return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection, meta === null || meta === void 0 ? void 0 : (_meta$data = meta.data) === null || _meta$data === void 0 ? void 0 : _meta$data.hoveredCell), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
 };
 
 // @see: https://product-fabric.atlassian.net/browse/ED-7304

package/dist/es2019/plugins/table/pm-plugins/default-table-selection.js

@@ -1,4 +1,17 @@
 export const defaultTableSelection = {
   hoveredColumns: [],
   hoveredRows: []
+};
+
+/**
+ * Creating a separate object for hoveredCell so it doesn't get defaulted when `handleDocOrSelectionChanged` runs.
+ *
+ * It is safe to persist this value as it gets removed when the mouse cursor leaves the table, so no need to remove it
+ * when doc changes.
+ */
+export const defaultHoveredCell = {
+  hoveredCell: {
+    rowIndex: undefined,
+    colIndex: undefined
+  }
 };

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

@@ -1,14 +1,42 @@
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TableDecorations } from '../../types';
+import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
 import { DragAndDropActionType } from './actions';
-import { createCommand } from './plugin-factory';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
 
 // TODO: This command is a placeholder example. Please replace this if required.
-export const setDropTarget = (type, index, tr) => createCommand({
-  type: DragAndDropActionType.SET_DROP_TARGET,
-  data: {
-    type,
-    index
+export const getDecorations = state => {
+  var _pluginKey$getState;
+  return ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || DecorationSet.empty;
+};
+export const updatePluginStateDecorations = (state, decorations, key) => updateDecorations(state.doc, getDecorations(state), decorations, key);
+export const setDropTarget = (type, index, tr) => createCommand(state => {
+  const {
+    dropTargetType,
+    dropTargetIndex
+  } = getPluginState(state);
+  if (dropTargetType === type && dropTargetIndex === index) {
+    return false;
+  }
+  let decorationSet = DecorationSet.empty;
+  if (type === 'column') {
+    decorationSet = updatePluginStateDecorations(state, createColumnInsertLine(index, state.selection), TableDecorations.COLUMN_INSERT_LINE);
+  } else if (type === 'row') {
+    decorationSet = updatePluginStateDecorations(state, createRowInsertLine(index, state.selection), TableDecorations.ROW_INSERT_LINE);
   }
+  return {
+    type: DragAndDropActionType.SET_DROP_TARGET,
+    data: {
+      decorationSet,
+      type,
+      index
+    }
+  };
 }, originalTr => (tr || originalTr).setMeta('addToHistory', false));
 export const clearDropTarget = tr => createCommand({
-  type: DragAndDropActionType.CLEAR_DROP_TARGET
+  type: DragAndDropActionType.CLEAR_DROP_TARGET,
+  data: {
+    decorationSet: DecorationSet.empty
+  }
 }, originalTr => (tr || originalTr).setMeta('addToHistory', false));

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

@@ -1,8 +1,13 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import { getDraggableDataFromEvent } from './utils/monitor';
 export const createPlugin = (dispatch, eventDispatcher) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
@@ -14,11 +19,71 @@ export const createPlugin = (dispatch, eventDispatcher) => {
     })),
     key: pluginKey,
     view: editorView => {
-      // TODO: Add Pragmatic DnD monitor when the view is constructed.
-
       return {
-        // TODO: Cleanup monitor instance
-        // destroy: cleanup,
+        destroy: monitorForElements({
+          canMonitor({
+            source
+          }) {
+            const {
+              type,
+              localId,
+              indexes
+            } = source.data;
+
+            // First; Perform any quick checks so we can abort early.
+            if (!indexes || !localId ||
+            // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+            // of more then 1 item.
+            indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
+              return false;
+            }
+            const {
+              tableNode
+            } = getTablePluginState(editorView.state);
+            // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+            // watch for changes
+            return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
+          },
+          onDrag(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drag actions
+            if (!data) {
+              return;
+            }
+
+            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+            // insert location as to where the draggable will most likely be go. For example;
+            // const { sourceType, targetAdjustedIndex } = data;
+            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
+            // return editorView.dispatch(
+            //   highlight(targetAdjustedIndex)(editorView.state.tr),
+            // );
+          },
+
+          onDrop(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drop action
+            if (!data) {
+              return;
+            }
+            const {
+              sourceType,
+              sourceIndexes,
+              targetAdjustedIndex
+            } = data;
+
+            // 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)) {
+              return;
+            }
+            const move = sourceType === 'table-row' ? moveRow : moveColumn;
+            const [sourceIndex] = sourceIndexes;
+            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+          }
+        })
       };
     },
     props: {

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

@@ -5,12 +5,14 @@ export default ((pluginState, action) => {
     case DragAndDropActionType.SET_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0
       };

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

@@ -0,0 +1 @@
+export { getDraggableDataFromEvent } from './monitor';

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

@@ -0,0 +1,56 @@
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+export const getDraggableDataFromEvent = ({
+  location,
+  source
+}) => {
+  var _extractClosestEdge;
+  const destination = location.current.dropTargets.at(0);
+  // If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
+  // the current draggable.
+  if (!destination) {
+    return undefined;
+  }
+
+  // This is the draggable elements data
+  const {
+    indexes: sourceIndexes,
+    type: sourceType,
+    localId: sourceLocalId
+  } = source.data;
+
+  // This is the drop target's data
+  const {
+    targetIndex,
+    type: targetType,
+    localId: targetLocalId
+  } = destination.data;
+
+  // Some basic check to abort early with...
+  if (!sourceIndexes || targetIndex < 0 ||
+  // abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
+  sourceType !== targetType ||
+  // abort if the draggable is coming from a different table that the target is on.
+  sourceLocalId !== targetLocalId) {
+    return undefined;
+  }
+
+  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
+  if (sourceIndexes.length > 1) {
+    return undefined;
+  }
+  const targetClosestEdge = (_extractClosestEdge = extractClosestEdge(destination.data)) !== null && _extractClosestEdge !== void 0 ? _extractClosestEdge : targetType === 'table-row' ? 'top' : 'left';
+  // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
+  // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
+  // the new target index to be 1 index higher.
+  const targetOffset = targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+  return {
+    sourceType,
+    sourceLocalId,
+    sourceIndexes,
+    targetType,
+    targetLocalId,
+    targetIndex,
+    targetAdjustedIndex: targetIndex + targetOffset,
+    targetClosestEdge
+  };
+};

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 } from '../event-handlers';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, 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';
@@ -17,10 +17,10 @@ import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
 import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, updateResizeHandles } from '../utils';
 import { isHeaderRowRequired } from '../utils/paste';
-import { defaultTableSelection } from './default-table-selection';
+import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
   var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -33,6 +33,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     isDragAndDropEnabled: dragAndDropEnabled,
+    ...defaultHoveredCell,
     ...defaultTableSelection,
     getIntl
   });
@@ -234,8 +235,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: handleMouseDown,
-        mouseover: whenTableInFocus(handleMouseOver),
+        mousedown: withCellTracking(handleMouseDown),
+        mouseover: whenTableInFocus(withCellTracking(handleMouseOver)),
         mouseleave: whenTableInFocus(handleMouseLeave),
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),

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

@@ -114,7 +114,8 @@ export default ((pluginState, action) => {
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':
     case 'HOVER_TABLE':
-    case 'HOVER_CELLS':
+    case 'HOVER_MERGED_CELLS':
+    case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':
     case 'SET_EDITOR_FOCUS':
       return {

package/dist/es2019/plugins/table/types.js

@@ -39,11 +39,14 @@ export let TableDecorations = /*#__PURE__*/function (TableDecorations) {
   TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
   TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
+  TableDecorations["COLUMN_INSERT_LINE"] = "COLUMN_INSERT_LINE";
+  TableDecorations["ROW_INSERT_LINE"] = "ROW_INSERT_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
   return TableDecorations;
 }({});
 export const TableCssClassName = {
   ...TableSharedCssClassName,
+  /** Classic controls */
   COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
@@ -74,8 +77,13 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_ROW_MARKER: `${tablePrefixSelector}-corner-controls__insert-row-marker`,
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
+  /** Controls with drag handle */
+  COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: `${tablePrefixSelector}-column-controls-decoration-with-drag`,
+  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
+  NUMBERED_COLUMN_BUTTON_DISABLED: `${tablePrefixSelector}-numbered-column__button-disabled`,
   HOVERED_COLUMN: `${tablePrefixSelector}-hovered-column`,
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
@@ -106,8 +114,13 @@ export const TableCssClassName = {
   TABLE_STICKY: `${tablePrefixSelector}-sticky`,
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
+  WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
+  WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
+  WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
-  WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`
+  WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
+  WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
+  WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`
 };
 export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";