@atlaskit/editor-plugin-table 5.3.0 → 5.3.1

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

@@ -39,6 +39,8 @@ 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;
 }({});
@@ -106,8 +108,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";

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -7,7 +7,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -210,6 +210,7 @@ export const tableStyles = props => {
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
     ${hoveredWarningCell};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
     ${rangeSelectionStyles};
 

package/dist/es2019/plugins/table/ui/consts.js

@@ -89,6 +89,7 @@ export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -5,7 +5,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -635,4 +635,117 @@ export const resizeHandle = props => css`
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
     }
   }
+`;
+export const insertLine = props => css`
+  .${ClassName.TABLE_CONTAINER} {
+    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      left: -1px;
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      right: -1px;
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      right: -1px;
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_ROW_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      top: -1px;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_ROW_INSERT_LINE}::before {
+      content: ' ';
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      position: absolute;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -1px;
+    }
+
+    td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      bottom: 0;
+      height: ${insertLineWidth}px;
+      width: calc(100% + 2px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+      content: ' ';
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      bottom: 0;
+      position: absolute;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+  }
 `;

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/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);
   });