@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

package/dist/esm/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';
@@ -12,7 +10,7 @@ export var getDecorations = function getDecorations(state) {
   return pluginKey.getState(state);
 };
 export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState, newState) {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
   var isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   var wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var changedResizing = isResizing !== wasResizing;
@@ -20,7 +18,7 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
   // 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: decorationSet,
       tr: tr
@@ -43,12 +41,16 @@ export var createPlugin = function createPlugin() {
         return DecorationSet.empty;
       },
       apply: function apply(tr, decorationSet, oldState, newState) {
+        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         var pluginState = decorationSet;
         var meta = tr.getMeta(tablePluginKey);
+        var previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
+        var newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
+        var 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/esm/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';
 var isColumnSelected = function isColumnSelected(tr) {
   return tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -23,13 +24,17 @@ var maybeUpdateColumnSelectedDecoration = function maybeUpdateColumnSelectedDeco
   return updateDecorations(tr.doc, decorationSet, createColumnSelectedDecoration(tr), TableDecorations.COLUMN_SELECTED);
 };
 var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDecoration(_ref3) {
+  var _meta$data;
   var decorationSet = _ref3.decorationSet,
     tr = _ref3.tr;
   var table = findTable(tr.selection);
-  if (!table) {
+  var 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 || (_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/esm/plugins/table/pm-plugins/default-table-selection.js

@@ -1,4 +1,17 @@
 export var 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 var defaultHoveredCell = {
+  hoveredCell: {
+    rowIndex: undefined,
+    colIndex: undefined
+  }
 };

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

@@ -1,21 +1,50 @@
+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 var getDecorations = function getDecorations(state) {
+  var _pluginKey$getState;
+  return ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || DecorationSet.empty;
+};
+export var updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
+  return updateDecorations(state.doc, getDecorations(state), decorations, key);
+};
 export var setDropTarget = function setDropTarget(type, index, tr) {
-  return createCommand({
-    type: DragAndDropActionType.SET_DROP_TARGET,
-    data: {
-      type: type,
-      index: index
+  return createCommand(function (state) {
+    var _getPluginState = getPluginState(state),
+      dropTargetType = _getPluginState.dropTargetType,
+      dropTargetIndex = _getPluginState.dropTargetIndex;
+    if (dropTargetType === type && dropTargetIndex === index) {
+      return false;
     }
+    var 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: decorationSet,
+        type: type,
+        index: index
+      }
+    };
   }, function (originalTr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
 };
 export var clearDropTarget = function clearDropTarget(tr) {
   return createCommand({
-    type: DragAndDropActionType.CLEAR_DROP_TARGET
+    type: DragAndDropActionType.CLEAR_DROP_TARGET,
+    data: {
+      decorationSet: DecorationSet.empty
+    }
   }, function (originalTr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });

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

@@ -1,8 +1,14 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 var createPlugin = function createPlugin(dispatch, eventDispatcher) {
   return new SafePlugin({
     state: createPluginState(dispatch, function (state) {
@@ -16,11 +22,66 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
     }),
     key: pluginKey,
     view: function view(editorView) {
-      // TODO: Add Pragmatic DnD monitor when the view is constructed.
-
       return {
-        // TODO: Cleanup monitor instance
-        // destroy: cleanup,
+        destroy: monitorForElements({
+          canMonitor: function canMonitor(_ref) {
+            var source = _ref.source;
+            var _ref2 = source.data,
+              type = _ref2.type,
+              localId = _ref2.localId,
+              indexes = _ref2.indexes;
+
+            // 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;
+            }
+            var _getTablePluginState = getTablePluginState(editorView.state),
+              tableNode = _getTablePluginState.tableNode;
+            // 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: function onDrag(event) {
+            var 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: function onDrop(event) {
+            var 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;
+            }
+            var sourceType = data.sourceType,
+              sourceIndexes = data.sourceIndexes,
+              targetAdjustedIndex = data.targetAdjustedIndex;
+
+            // If the drop target index contains merged cells then we should not allow the drop to occur.
+            var hasMergedCells = sourceType === 'table-row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+            if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
+              return;
+            }
+            var move = sourceType === 'table-row' ? moveRow : moveColumn;
+            var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
+              sourceIndex = _sourceIndexes[0];
+            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+          }
+        })
       };
     },
     props: {

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

@@ -7,11 +7,13 @@ export default (function (pluginState, action) {
   switch (action.type) {
     case DragAndDropActionType.SET_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
+        decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index
       });
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
+        decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0
       });

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

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

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

@@ -0,0 +1,53 @@
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+export var getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref) {
+  var _extractClosestEdge;
+  var location = _ref.location,
+    source = _ref.source;
+  var 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
+  var _ref2 = source.data,
+    sourceIndexes = _ref2.indexes,
+    sourceType = _ref2.type,
+    sourceLocalId = _ref2.localId;
+
+  // This is the drop target's data
+  var _ref3 = destination.data,
+    targetIndex = _ref3.targetIndex,
+    targetType = _ref3.type,
+    targetLocalId = _ref3.localId;
+
+  // 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;
+  }
+  var 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.
+  var targetOffset = targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+  return {
+    sourceType: sourceType,
+    sourceLocalId: sourceLocalId,
+    sourceIndexes: sourceIndexes,
+    targetType: targetType,
+    targetLocalId: targetLocalId,
+    targetIndex: targetIndex,
+    targetAdjustedIndex: targetIndex + targetOffset,
+    targetClosestEdge: targetClosestEdge
+  };
+};

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

@@ -11,7 +11,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';
@@ -20,12 +20,12 @@ 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 var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) {
+export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) {
   var _window;
-  var state = createPluginState(dispatch, _objectSpread(_objectSpread({
+  var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
@@ -36,7 +36,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     isDragAndDropEnabled: dragAndDropEnabled
-  }, defaultTableSelection), {}, {
+  }, defaultHoveredCell), defaultTableSelection), {}, {
     getIntl: getIntl
   }));
   var elementContentRects = {};
@@ -240,8 +240,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       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/esm/plugins/table/reducer.js

@@ -90,7 +90,8 @@ export default (function (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 _objectSpread(_objectSpread({}, pluginState), action.data);

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

@@ -42,10 +42,13 @@ export var 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 var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssClassName), {}, {
+  /** Classic controls */
   COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(tablePrefixSelector, "-column__selected"),
@@ -76,8 +79,13 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CORNER_CONTROLS_INSERT_ROW_MARKER: "".concat(tablePrefixSelector, "-corner-controls__insert-row-marker"),
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: "".concat(tablePrefixSelector, "-corner-controls__insert-column-marker"),
   CONTROLS_CORNER_BUTTON: "".concat(tablePrefixSelector, "-corner-button"),
+  /** Controls with drag handle */
+  COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: "".concat(tablePrefixSelector, "-column-controls-decoration-with-drag"),
+  ROW_CONTROLS_WITH_DRAG: "".concat(tablePrefixSelector, "-row-controls-with-drag"),
+  /** Other classes */
   NUMBERED_COLUMN: "".concat(tablePrefixSelector, "-numbered-column"),
   NUMBERED_COLUMN_BUTTON: "".concat(tablePrefixSelector, "-numbered-column__button"),
+  NUMBERED_COLUMN_BUTTON_DISABLED: "".concat(tablePrefixSelector, "-numbered-column__button-disabled"),
   HOVERED_COLUMN: "".concat(tablePrefixSelector, "-hovered-column"),
   HOVERED_ROW: "".concat(tablePrefixSelector, "-hovered-row"),
   HOVERED_TABLE: "".concat(tablePrefixSelector, "-hovered-table"),
@@ -108,8 +116,13 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   TABLE_STICKY: "".concat(tablePrefixSelector, "-sticky"),
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: "".concat(tablePrefixSelector, "-last-item-in-cell"),
+  WITH_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-column-insert-line"),
+  WITH_FIRST_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-first-column-insert-line"),
+  WITH_LAST_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-last-column-insert-line"),
   WITH_RESIZE_LINE: "".concat(tablePrefixSelector, "-column-resize-line"),
-  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(tablePrefixSelector, "-column-resize-line-last-column")
+  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(tablePrefixSelector, "-column-resize-line-last-column"),
+  WITH_ROW_INSERT_LINE: "".concat(tablePrefixSelector, "-row-insert-line"),
+  WITH_LAST_ROW_INSERT_LINE: "".concat(tablePrefixSelector, "-last-row-insert-line")
 });
 export var ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

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

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+// TODO: use for now, in future replace with custom @atlaskit/icon/glyph/drag-handler
+// width is too large (24px), should be 16px
+export var DragHandle = function DragHandle(_ref) {
+  var tableLocalId = _ref.tableLocalId,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    indexes = _ref.indexes,
+    onClick = _ref.onClick,
+    onMouseOver = _ref.onMouseOver,
+    onMouseOut = _ref.onMouseOut;
+  var dragHandleDivRef = useRef(null);
+  useEffect(function () {
+    var dragHandleDivRefCurrent = dragHandleDivRef.current;
+    if (dragHandleDivRefCurrent) {
+      return draggable({
+        element: dragHandleDivRefCurrent,
+        getInitialData: function getInitialData() {
+          return {
+            localId: tableLocalId,
+            type: "table-".concat(direction),
+            indexes: indexes
+          };
+        }
+      });
+    }
+  }, [tableLocalId, direction, indexes]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dragHandleDivRef,
+    style: {
+      backgroundColor: "var(--ds-surface, white)",
+      borderRadius: '4px',
+      border: "2px solid ".concat("var(--ds-surface, white)"),
+      transform: direction === 'column' ? 'rotate(90deg)' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(DragHandleButton, {
+    label: "blah"
+  }));
+};

package/dist/esm/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -8,11 +8,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React, { Component } from 'react';
+import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection } from '../../../commands';
+import { clearHoverSelection, hoverCell } from '../../../commands';
+import { getPluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
+import { tableBorderColor } from '../../consts';
 var NumberColumn = /*#__PURE__*/function (_Component) {
   _inherits(NumberColumn, _Component);
   var _super = _createSuper(NumberColumn);
@@ -59,14 +62,42 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         clearHoverSelection()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "getClassNames", function (index) {
+    _defineProperty(_assertThisInitialized(_this), "updateDragHandleLocation", function (rowIndex) {
       var _this$props3 = _this.props,
-        hoveredRows = _this$props3.hoveredRows,
         editorView = _this$props3.editorView,
-        isInDanger = _this$props3.isInDanger,
-        isResizing = _this$props3.isResizing;
+        tableActive = _this$props3.tableActive;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      var _getPluginState = getPluginState(state),
+        hoveredCell = _getPluginState.hoveredCell;
+      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getCellStyles", function (index, rowHeight) {
+      var _this$props4 = _this.props,
+        stickyTop = _this$props4.stickyTop,
+        hasHeaderRow = _this$props4.hasHeaderRow;
+      if (stickyTop && hasHeaderRow && index === 0) {
+        return {
+          height: rowHeight,
+          top: "".concat(stickyTop, "px")
+        };
+      }
+      return {
+        height: rowHeight
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "getClassNames", function (index) {
+      var _classnames;
+      var isButtonDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var _this$props5 = _this.props,
+        hoveredRows = _this$props5.hoveredRows,
+        editorView = _this$props5.editorView,
+        isInDanger = _this$props5.isInDanger,
+        isResizing = _this$props5.isResizing;
       var isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
-      return [ClassName.NUMBERED_COLUMN_BUTTON, isActive ? ClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
+      return classnames(ClassName.NUMBERED_COLUMN_BUTTON, (_classnames = {}, _defineProperty(_classnames, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _defineProperty(_classnames, ClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), _defineProperty(_classnames, ClassName.HOVERED_CELL_ACTIVE, isActive), _classnames));
     });
     return _this;
   }
@@ -74,25 +105,33 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props4 = this.props,
-        tableRef = _this$props4.tableRef,
-        hasHeaderRow = _this$props4.hasHeaderRow;
+      var _this$props6 = this.props,
+        tableRef = _this$props6.tableRef,
+        hasHeaderRow = _this$props6.hasHeaderRow,
+        isDragAndDropEnabled = _this$props6.isDragAndDropEnabled,
+        tableActive = _this$props6.tableActive;
       var rowHeights = getRowHeights(tableRef);
       return /*#__PURE__*/React.createElement("div", {
         className: ClassName.NUMBERED_COLUMN,
         style: {
-          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
+          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+          borderLeft: isDragAndDropEnabled && tableActive ? "1px solid ".concat(tableBorderColor()) : undefined
         },
         contentEditable: false
       }, rowHeights.map(function (rowHeight, index) {
-        return /*#__PURE__*/React.createElement("div", {
+        return isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {
+          key: "wrapper-".concat(index),
+          className: _this2.getClassNames(index, true),
+          "data-index": index,
+          style: _this2.getCellStyles(index, rowHeight),
+          onMouseOver: function onMouseOver() {
+            return _this2.updateDragHandleLocation(index);
+          }
+        }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
           key: "wrapper-".concat(index),
           className: _this2.getClassNames(index),
           "data-index": index,
-          style: {
-            height: rowHeight,
-            top: _this2.props.stickyTop !== undefined && hasHeaderRow && index === 0 ? "".concat(_this2.props.stickyTop, "px") : undefined
-          },
+          style: _this2.getCellStyles(index, rowHeight),
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
           },