@atlaskit/editor-plugin-table 5.2.2 → 5.3.1

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

@@ -404,4 +404,66 @@ export const createColumnLineResize = (selection, cellColumnPositioning) => {
       key: `${TableDecorations.COLUMN_RESIZING_HANDLE_LINE}_${cellColumnPositioning.right}_${index}`
     });
   }).filter(nonNullable);
+};
+export const createColumnInsertLine = (columnIndex, selection) => {
+  const table = findTable(selection);
+  if (!table) {
+    return [];
+  }
+  const map = TableMap.get(table.node);
+  const isFirstColumn = columnIndex === 0;
+  const isLastColumn = columnIndex === map.width;
+  if (isLastColumn) {
+    columnIndex -= 1;
+  }
+  const decorationClassName = isFirstColumn ? ClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? ClassName.WITH_LAST_COLUMN_INSERT_LINE : ClassName.WITH_COLUMN_INSERT_LINE;
+  const cellPositions = makeArray(map.height).map(rowIndex => map.map[map.width * rowIndex + columnIndex]).filter((cellPosition, rowIndex) => {
+    if (isLastColumn) {
+      return true; // If is the last column no filter applied
+    }
+
+    const nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
+    return cellPosition !== nextPosition; // Removed it if next position is merged
+  });
+
+  const cells = cellPositions.map(pos => ({
+    pos: pos + table.start,
+    node: table.node.nodeAt(pos)
+  }));
+  return cells.map((cell, index) => {
+    if (!cell || !cell.node) {
+      return;
+    }
+    return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+      class: decorationClassName
+    }, {
+      key: `${TableDecorations.COLUMN_INSERT_LINE}_${index}`
+    });
+  }).filter(nonNullable);
+};
+export const createRowInsertLine = (rowIndex, selection) => {
+  const table = findTable(selection);
+  if (!table) {
+    return [];
+  }
+  const map = TableMap.get(table.node);
+  const isLastRow = rowIndex === map.height;
+  if (isLastRow) {
+    rowIndex -= 1;
+  }
+  const cells = getCellsInRow(rowIndex)(selection);
+  if (!cells) {
+    return [];
+  }
+  const decorationClassName = isLastRow ? ClassName.WITH_LAST_ROW_INSERT_LINE : ClassName.WITH_ROW_INSERT_LINE;
+  return cells.map((cell, index) => {
+    if (!cell || !cell.node) {
+      return;
+    }
+    return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+      class: decorationClassName
+    }, {
+      key: `${TableDecorations.ROW_INSERT_LINE}_${index}`
+    });
+  }).filter(nonNullable);
 };

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

@@ -1,5 +1,5 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated } from './selection';
-export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnLineResize } from './decoration';
+export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
@@ -7,4 +7,5 @@ export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonPar
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
-export { updatePluginStateDecorations } from './update-plugin-state-decorations';
+export { updatePluginStateDecorations } from './update-plugin-state-decorations';
+export { hasMergedCellsInColumn, hasMergedCellsInRow } from './merged-cells';

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

@@ -0,0 +1,48 @@
+import { findTable, TableMap } from '@atlaskit/editor-tables';
+const hasMergedCells = (indexes, normalizeRect) => selection => {
+  const table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  const map = TableMap.get(table.node);
+  const cellPositions = new Set();
+  const mergedCells = new Set();
+  map.map.forEach(value => {
+    if (cellPositions.has(value)) {
+      mergedCells.add(value);
+    } else {
+      cellPositions.add(value);
+    }
+  });
+  if (!mergedCells.size) {
+    return false;
+  }
+  return (Array.isArray(indexes) ? indexes : [indexes]).map(index => normalizeRect(index, map)).filter(rect => rect.left < rect.right && rect.top < rect.bottom).some(rect => {
+    const n = (rect.right - rect.left) * (rect.bottom - rect.top);
+    const 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(nodePos => mergedCells.has(nodePos));
+  });
+};
+export const hasMergedCellsInColumn = columnIndexes => hasMergedCells(columnIndexes, (index, map) => {
+  const 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
+  };
+});
+export const hasMergedCellsInRow = rowIndexes => hasMergedCells(rowIndexes, (index, map) => {
+  const 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/esm/plugins/table/nodeviews/TableComponent.js

@@ -30,6 +30,7 @@ import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
+import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
@@ -452,7 +453,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props10.containerWidth,
         options = _this$props10.options,
         getPos = _this$props10.getPos,
-        pluginInjectionApi = _this$props10.pluginInjectionApi;
+        pluginInjectionApi = _this$props10.pluginInjectionApi,
+        isDragAndDropEnabled = _this$props10.isDragAndDropEnabled;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -485,6 +487,22 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
       }));
+      var colControls = /*#__PURE__*/React.createElement("div", {
+        className: ClassName.COLUMN_CONTROLS_WRAPPER
+      }, /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
+        editorView: view,
+        tableRef: tableRef,
+        tableActive: tableActive,
+        hoveredRows: hoveredRows,
+        ordering: ordering,
+        hasHeaderRow: hasHeaderRow
+        // pass `selection` and `tableHeight` to control re-render
+        ,
+        selection: view.state.selection,
+        headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
+        stickyHeader: this.state.stickyHeader,
+        getEditorFeatureFlags: this.props.getEditorFeatureFlags
+      }));
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
         return {
@@ -522,7 +540,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
-      }), allowControls && rowControls, /*#__PURE__*/React.createElement("div", {
+      }), allowControls && rowControls, isDragAndDropEnabled && allowControls && colControls, /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {

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

@@ -169,6 +169,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             allowControls: pluginState.pluginConfig.allowControls,
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
+            isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,

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/handlers.js

@@ -0,0 +1,18 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
+import { findTable } from '@atlaskit/editor-tables/utils';
+var buildPluginState = function buildPluginState(builders) {
+  return function (props) {
+    return function (pluginState) {
+      return builders.reduce(function (_pluginState, transform) {
+        return transform(props)(_pluginState);
+      }, pluginState);
+    };
+  };
+};
+export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, pluginState) {
+  return buildPluginState([])({
+    tr: tr,
+    table: findTable(tr.selection)
+  })(pluginState);
+};

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

@@ -1,7 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey as tablePluginKey } from '../plugin-key';
+import { handleDocOrSelectionChanged } from './handlers';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
-var _pluginFactory = pluginFactory(pluginKey, reducer),
+var _pluginFactory = pluginFactory(pluginKey, reducer, {
+    mapping: function mapping(tr, pluginState) {
+      if (tr.docChanged) {
+        var decorationSet = pluginState.decorationSet;
+        var meta = tr.getMeta(tablePluginKey);
+        if (meta && meta.data && meta.data.decorationSet) {
+          decorationSet = meta.data.decorationSet;
+        }
+        if (decorationSet) {
+          decorationSet = decorationSet.map(tr.mapping, tr.doc);
+        }
+        return _objectSpread(_objectSpread({}, pluginState), {
+          decorationSet: decorationSet
+        });
+      }
+      return pluginState;
+    },
+    onDocChanged: handleDocOrSelectionChanged,
+    onSelectionChanged: handleDocOrSelectionChanged
+  }),
   createPluginState = _pluginFactory.createPluginState,
-  createCommand = _pluginFactory.createCommand;
-export { createPluginState, createCommand };
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState;
+export { createPluginState, createCommand, getPluginState };

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

@@ -1,22 +1,95 @@
+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 } from './plugin-factory';
+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, {
-      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
-      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
-      dropTargetType: DropTargetType.NONE,
-      dropTargetIndex: 0
+    state: createPluginState(dispatch, function (state) {
+      return {
+        decorationSet: DecorationSet.empty,
+        // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
+        // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
+        dropTargetType: DropTargetType.NONE,
+        dropTargetIndex: 0
+      };
     }),
     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: {
+      decorations: function decorations(state) {
+        var _getPluginState = getPluginState(state),
+          decorationSet = _getPluginState.decorationSet;
+        return decorationSet;
+      }
     }
   });
 };

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/types.js

@@ -37,10 +37,13 @@ export var TableDecorations = /*#__PURE__*/function (TableDecorations) {
   TableDecorations["TABLE_CONTROLS_HOVER"] = "TABLE_CONTROLS_HOVER";
   TableDecorations["CELL_CONTROLS_HOVER"] = "CELL_CONTROLS_HOVER";
   TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
+  TableDecorations["COLUMN_DROP_TARGET_DECORATIONS"] = "COLUMN_DROP_TARGET_DECORATIONS";
   TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
   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;
 }({});
@@ -48,6 +51,9 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(tablePrefixSelector, "-column__selected"),
+  COLUMN_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-col-controls-wrapper"),
+  COLUMN_DROP_TARGET_CONTROLS: "".concat(tablePrefixSelector, "-col-drop-target-controls"),
+  COLUMN_CONTROLS_INNER: "".concat(tablePrefixSelector, "-col-controls__inner"),
   ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-row-controls-wrapper"),
   ROW_CONTROLS: "".concat(tablePrefixSelector, "-row-controls"),
   ROW_CONTROLS_INNER: "".concat(tablePrefixSelector, "-row-controls__inner"),
@@ -104,8 +110,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/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getColumnsWidths, getRowHeights } from '../../../utils';
+export var ColumnDropTargets = function ColumnDropTargets(_ref) {
+  var _rowHeights$;
+  var editorView = _ref.editorView,
+    tableRef = _ref.tableRef,
+    tableHeight = _ref.tableHeight,
+    stickyTop = _ref.stickyTop,
+    localId = _ref.localId;
+  var colWidths = getColumnsWidths(editorView);
+  var rowHeights = useMemo(function () {
+    // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
+    if (tableRef && !!tableHeight) {
+      return getRowHeights(tableRef);
+    }
+    return [0];
+  }, [tableRef, tableHeight]);
+  if (!tableRef) {
+    return null;
+  }
+  var firstRow = tableRef.querySelector('tr');
+  var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+  var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ClassName.COLUMN_DROP_TARGET_CONTROLS
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.COLUMN_CONTROLS_INNER,
+    "data-testid": "table-floating-column-controls-drop-targets"
+  }, colWidths.map(function (width, index) {
+    return /*#__PURE__*/React.createElement(ColumnDropTarget, {
+      key: index,
+      index: index,
+      localId: localId,
+      width: width,
+      height: tableHeight,
+      marginTop: marginTop
+    });
+  })));
+};
+export default ColumnDropTargets;
+var ColumnDropTarget = function ColumnDropTarget(_ref2) {
+  var index = _ref2.index,
+    localId = _ref2.localId,
+    width = _ref2.width,
+    height = _ref2.height,
+    marginTop = _ref2.marginTop;
+  var dropTargetRef = useRef(null);
+  useEffect(function () {
+    if (!dropTargetRef.current) {
+      return;
+    }
+    return dropTargetForElements({
+      element: dropTargetRef.current,
+      canDrop: function canDrop(_ref3) {
+        var _data$indexes, _data$indexes2;
+        var source = _ref3.source;
+        var data = source.data;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-column' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
+        );
+      },
+      getData: function getData(_ref4) {
+        var input = _ref4.input,
+          element = _ref4.element;
+        var data = {
+          localId: localId,
+          type: 'table-column',
+          targetIndex: index
+        };
+        return attachClosestEdge(data, {
+          input: input,
+          element: element,
+          allowedEdges: ['left', 'right']
+        });
+      }
+    });
+  }, [index, localId]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropTargetRef,
+    style: {
+      width: width && "".concat(width - 1, "px"),
+      height: height && "".concat(height, "px"),
+      marginTop: marginTop && "".concat(marginTop, "px")
+    },
+    "data-drop-target-index": index,
+    "data-drop-target-localid": localId,
+    "data-testid": "table-floating-column-controls-drop-target"
+  });
+};