@atlaskit/editor-plugin-table 7.2.2 → 7.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.2.3
+
+### Patch Changes
+
+- [#68572](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68572) [`15d407fe5143`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15d407fe5143) - Upgrading @atlaskit/editor-prosemirror dependency
+- [#70707](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70707) [`01c10b920070`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01c10b920070) - [ux] Move options in drag menu now have disabled state when target has merged cells.
+- Updated dependencies
+
 ## 7.2.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -11,6 +11,7 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../../utils");
 var _analytics2 = require("../../utils/analytics");
+var _dragMenu = require("../../utils/drag-menu");
 var _commands = require("./commands");
 var clearDropTargetWithAnalytics = exports.clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, sourceType, sourceIndexes, status, tr) {
@@ -91,30 +92,13 @@ var moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalyticsViaShort
       if (selectedIndexes.length === 0) {
         return false;
       }
-
-      // const sourceIndex = selectedIndexes[0];
-      // we can move only by one row/column
-      // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-      var targetIndex = Math[direction < 0 ? 'min' : 'max'].apply(Math, (0, _toConsumableArray2.default)(selectedIndexes)) + direction;
-
-      // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
       var _getSelectedTableInfo3 = (0, _utils2.getSelectedTableInfo)(selection),
         totalRowCount = _getSelectedTableInfo3.totalRowCount,
         totalColumnCount = _getSelectedTableInfo3.totalColumnCount;
-      var isValidTargetIndex = targetIndex < 0 ? false : isRow ? targetIndex <= totalRowCount - 1 : targetIndex <= totalColumnCount - 1;
-      if (!isValidTargetIndex) {
-        return false;
-      }
-
-      // We can move only if there are no merged cells in the source or target row/column
-      var hasMergedCellsInSource = isRow ? (0, _utils2.hasMergedCellsInRow)(selectedIndexes)(selection) : (0, _utils2.hasMergedCellsInColumn)(selectedIndexes)(selection);
-      if (hasMergedCellsInSource) {
-        return false;
-      }
-      var hasMergedCellsInTarget = isRow ? (0, _utils2.hasMergedCellsInRow)(targetIndex)(selection) : (0, _utils2.hasMergedCellsInColumn)(targetIndex)(selection);
-      if (hasMergedCellsInTarget) {
+      if (!(0, _dragMenu.canMove)(sourceType, direction, isRow ? totalRowCount : totalColumnCount, selection, selectionRect)) {
         return false;
       }
+      var targetIndex = (0, _dragMenu.getTargetIndex)(selectedIndexes, direction);
       return moveSourceWithAnalytics(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
     };
   };

package/dist/cjs/utils/drag-menu.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDragMenuConfig = void 0;
+exports.getTargetIndex = exports.getDragMenuConfig = exports.canMove = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -26,14 +26,36 @@ var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _toolbar = require("../toolbar");
 var _transforms = require("../transforms");
 var _icons = require("../ui/icons");
+var _mergedCells = require("./merged-cells");
 var _selection = require("./selection");
-var canDecrease = function canDecrease(index) {
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return index !== undefined && index > min;
+var getTargetIndex = exports.getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
+  return Math[direction < 0 ? 'min' : 'max'].apply(Math, (0, _toConsumableArray2.default)(selectedIndexes)) + direction;
 };
-var canIncrease = function canIncrease(index) {
-  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return index !== undefined && index < max;
+var canMove = exports.canMove = function canMove(sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) {
+  if (!selectionRect) {
+    return false;
+  }
+  var isRow = sourceType === 'table-row';
+  var selectedIndexes = isRow ? (0, _selection.getSelectedRowIndexes)(selectionRect) : (0, _selection.getSelectedColumnIndexes)(selectionRect);
+  var targetIndex = getTargetIndex(selectedIndexes, direction);
+  var isValidTargetIndex = targetIndex >= 0 && targetIndex < totalItemsOfSourceTypeCount;
+  if (!isValidTargetIndex) {
+    return false;
+  }
+
+  // We can't move column when target has merges with other columns
+  // We can't move row when target has merges with other rows
+  var hasMergedCellsInTarget = isRow ? (0, _mergedCells.hasMergedCellsWithRowNextToRowIndex)(targetIndex, selection) : (0, _mergedCells.hasMergedCellsWithColumnNextToColumnIndex)(targetIndex, selection);
+  if (hasMergedCellsInTarget) {
+    return false;
+  }
+
+  // Currently we can't move in any direction if there are merged cells in the source
+  var hasMergedCellsInSource = isRow ? (0, _mergedCells.hasMergedCellsInRow)(selectedIndexes)(selection) : (0, _mergedCells.hasMergedCellsInColumn)(selectedIndexes)(selection);
+  if (hasMergedCellsInSource) {
+    return false;
+  }
+  return true;
 };
 var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   var rect = (0, _toolbar.getClosestSelectionRect)(state);
@@ -44,6 +66,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   return false;
 };
 var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) {
+  var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -65,13 +88,12 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     icon: _icons.AddColRightIcon,
     keymap: _keymaps.addColumnAfter
   }];
+  var selection = editorView.state.selection;
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: _arrowUp.default,
     keymap: _keymaps.moveRowUp,
-    canMove: function canMove(selectionRect) {
-      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top);
-    },
+    canMove: canDrag && canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedRowIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.top - 1;
@@ -80,10 +102,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     label: 'down',
     icon: _arrowDown.default,
     keymap: _keymaps.moveRowDown,
-    canMove: function canMove(selectionRect) {
-      var _selectionRect$bottom, _tableMap$height;
-      return canDrag && canIncrease(((_selectionRect$bottom = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom) !== null && _selectionRect$bottom !== void 0 ? _selectionRect$bottom : 0) - 1, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedRowIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.bottom;
@@ -92,9 +111,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     label: 'left',
     icon: _arrowLeft.default,
     keymap: _keymaps.moveColumnLeft,
-    canMove: function canMove(selectionRect) {
-      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left);
-    },
+    canMove: canDrag && canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedColumnIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.left - 1;
@@ -103,10 +120,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     label: 'right',
     icon: _arrowRight.default,
     keymap: _keymaps.moveColumnRight,
-    canMove: function canMove(selectionRect) {
-      var _selectionRect$right, _tableMap$width;
-      return canDrag && canIncrease(((_selectionRect$right = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right) !== null && _selectionRect$right !== void 0 ? _selectionRect$right : 0) - 1, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedColumnIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.right;
@@ -191,10 +205,10 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: !canMove(selectionRect),
+      disabled: !canMove,
       icon: icon,
       onClick: function onClick(state, dispatch) {
-        if (canMove(selectionRect)) {
+        if (canMove) {
           requestAnimationFrame(function () {
             (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
           });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hasMergedCellsInRow = exports.hasMergedCellsInColumn = exports.hasMergedCellsInBetween = void 0;
+exports.hasMergedCellsWithRowNextToRowIndex = exports.hasMergedCellsWithColumnNextToColumnIndex = exports.hasMergedCellsInRow = exports.hasMergedCellsInColumn = exports.hasMergedCellsInBetween = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _editorTables = require("@atlaskit/editor-tables");
 var hasMergedCells = function hasMergedCells(indexes, normalizeRect) {
@@ -137,4 +137,69 @@ var hasMergedCellsInBetween = exports.hasMergedCellsInBetween = function hasMerg
       return mergedCellsInRectArr[1].includes(cell);
     });
   };
+};
+
+// Checks if any cell in the column with colIndex is merged with a cell in a column to the left or to the right of it.
+// colIndex is a logical index of the column. It starts at 0 and goes up to tableMap.width - 1.
+var hasMergedCellsWithColumnNextToColumnIndex = exports.hasMergedCellsWithColumnNextToColumnIndex = function hasMergedCellsWithColumnNextToColumnIndex(colIndex, selection) {
+  var table = (0, _editorTables.findTable)(selection);
+  if (!table) {
+    return false;
+  }
+  var tableMap = _editorTables.TableMap.get(table.node);
+  var width = tableMap.width;
+  if (width <= 1) {
+    return false;
+  }
+  if (colIndex < 0 || colIndex > width - 1) {
+    return false;
+  }
+  var map = tableMap.map;
+  // j is an index in the tableMap.map array. tableMap.map is a flat array.
+  // Each item of this array contains a number.
+  // The number represents the position of the corresponding cell in the tableMap. It exists for each cell.
+  // If there are merged cells, their positions will be represented by the same number.
+  var isFirstColumn = colIndex === 0;
+  var isLastColumn = colIndex === width - 1;
+  for (var j = colIndex; j < map.length; j += width) {
+    if (!isFirstColumn && map[j] === map[j - 1] ||
+    // compare with a cell in the column on the left
+    !isLastColumn && map[j] === map[j + 1] // compare with a cell in the column on the right
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
+
+// Checks if any cell in the row with rowIndex is merged with a cell in a row above or below it.
+var hasMergedCellsWithRowNextToRowIndex = exports.hasMergedCellsWithRowNextToRowIndex = function hasMergedCellsWithRowNextToRowIndex(rowIndex, selection) {
+  var table = (0, _editorTables.findTable)(selection);
+  if (!table) {
+    return false;
+  }
+  var tableMap = _editorTables.TableMap.get(table.node);
+  var height = tableMap.height;
+  if (height <= 1) {
+    return false;
+  }
+  if (rowIndex < 0 || rowIndex > height - 1) {
+    return false;
+  }
+  var map = tableMap.map,
+    width = tableMap.width; // map is a flat array representing position of each cell in the table.
+  var indexOfFirstCellInTheRow = rowIndex * width;
+  var indexOfLastCellInTheRow = indexOfFirstCellInTheRow + width - 1;
+  var isFirstRow = rowIndex === 0;
+  var isLastRow = rowIndex === height - 1;
+  // j is an index of a cell in a row
+  for (var j = indexOfFirstCellInTheRow; j <= indexOfLastCellInTheRow; j++) {
+    if (!isFirstRow && map[j] === map[j - width] ||
+    // compare with a cell in the row above
+    !isLastRow && map[j] === map[j + width] // compare with a cell in the row below
+    ) {
+      return true;
+    }
+  }
+  return false;
 };

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

@@ -1,8 +1,9 @@
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo } from '../../utils';
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
+import { canMove, getTargetIndex } from '../../utils/drag-menu';
 import { clearDropTarget, moveSource } from './commands';
 export const clearDropTargetWithAnalytics = editorAnalyticsAPI => (inputMethod, sourceType, sourceIndexes, status, tr) => {
   return withEditorAnalyticsAPI(({
@@ -81,30 +82,13 @@ export const moveSourceWithAnalyticsViaShortcut = editorAnalyticsAPI => (sourceT
   if (selectedIndexes.length === 0) {
     return false;
   }
-
-  // const sourceIndex = selectedIndexes[0];
-  // we can move only by one row/column
-  // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-  const targetIndex = Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
-
-  // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
   const {
     totalRowCount,
     totalColumnCount
   } = getSelectedTableInfo(selection);
-  const isValidTargetIndex = targetIndex < 0 ? false : isRow ? targetIndex <= totalRowCount - 1 : targetIndex <= totalColumnCount - 1;
-  if (!isValidTargetIndex) {
-    return false;
-  }
-
-  // We can move only if there are no merged cells in the source or target row/column
-  const hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
-  if (hasMergedCellsInSource) {
-    return false;
-  }
-  const hasMergedCellsInTarget = isRow ? hasMergedCellsInRow(targetIndex)(selection) : hasMergedCellsInColumn(targetIndex)(selection);
-  if (hasMergedCellsInTarget) {
+  if (!canMove(sourceType, direction, isRow ? totalRowCount : totalColumnCount, selection, selectionRect)) {
     return false;
   }
+  const targetIndex = getTargetIndex(selectedIndexes, direction);
   return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
 };

package/dist/es2019/utils/drag-menu.js

@@ -18,9 +18,35 @@ import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizi
 import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
+import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
-const canDecrease = (index, min = 0) => index !== undefined && index > min;
-const canIncrease = (index, max = 0) => index !== undefined && index < max;
+export const getTargetIndex = (selectedIndexes, direction) => Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
+export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) => {
+  if (!selectionRect) {
+    return false;
+  }
+  const isRow = sourceType === 'table-row';
+  const selectedIndexes = isRow ? getSelectedRowIndexes(selectionRect) : getSelectedColumnIndexes(selectionRect);
+  const targetIndex = getTargetIndex(selectedIndexes, direction);
+  const isValidTargetIndex = targetIndex >= 0 && targetIndex < totalItemsOfSourceTypeCount;
+  if (!isValidTargetIndex) {
+    return false;
+  }
+
+  // We can't move column when target has merges with other columns
+  // We can't move row when target has merges with other rows
+  const hasMergedCellsInTarget = isRow ? hasMergedCellsWithRowNextToRowIndex(targetIndex, selection) : hasMergedCellsWithColumnNextToColumnIndex(targetIndex, selection);
+  if (hasMergedCellsInTarget) {
+    return false;
+  }
+
+  // Currently we can't move in any direction if there are merged cells in the source
+  const hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
+  if (hasMergedCellsInSource) {
+    return false;
+  }
+  return true;
+};
 const isDistributeColumnsEnabled = state => {
   const rect = getClosestSelectionRect(state);
   if (rect) {
@@ -30,6 +56,7 @@ const isDistributeColumnsEnabled = state => {
   return false;
 };
 export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) => {
+  var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -51,38 +78,35 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     icon: AddColRightIcon,
     keymap: addColumnAfter
   }];
+  const {
+    selection
+  } = editorView.state;
   const moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: ArrowUpIcon,
     keymap: moveRowUp,
-    canMove: selectionRect => canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top),
+    canMove: canDrag && canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: selectionRect => selectionRect.top - 1
   }, {
     label: 'down',
     icon: ArrowDownIcon,
     keymap: moveRowDown,
-    canMove: selectionRect => {
-      var _selectionRect$bottom, _tableMap$height;
-      return canDrag && canIncrease(((_selectionRect$bottom = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom) !== null && _selectionRect$bottom !== void 0 ? _selectionRect$bottom : 0) - 1, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: selectionRect => selectionRect.bottom
   }] : [{
     label: 'left',
     icon: ArrowLeftIcon,
     keymap: moveColumnLeft,
-    canMove: selectionRect => canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left),
+    canMove: canDrag && canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: selectionRect => selectionRect.left - 1
   }, {
     label: 'right',
     icon: ArrowRightIcon,
     keymap: moveColumnRight,
-    canMove: selectionRect => {
-      var _selectionRect$right, _tableMap$width;
-      return canDrag && canIncrease(((_selectionRect$right = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right) !== null && _selectionRect$right !== void 0 ? _selectionRect$right : 0) - 1, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: selectionRect => selectionRect.right
   }];
@@ -166,10 +190,10 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
-    disabled: !canMove(selectionRect),
+    disabled: !canMove,
     icon,
     onClick: (state, dispatch) => {
-      if (canMove(selectionRect)) {
+      if (canMove) {
         requestAnimationFrame(() => {
           moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, `table-${direction}`, getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
         });

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

@@ -107,4 +107,77 @@ export const hasMergedCellsInBetween = (indexes, type) => selection => {
 
   // Currently only support 2 indexes, but we can extend this to support more indexes in the future.
   return mergedCellsInRectArr[0].some(cell => mergedCellsInRectArr[1].includes(cell));
+};
+
+// Checks if any cell in the column with colIndex is merged with a cell in a column to the left or to the right of it.
+// colIndex is a logical index of the column. It starts at 0 and goes up to tableMap.width - 1.
+export const hasMergedCellsWithColumnNextToColumnIndex = (colIndex, selection) => {
+  const table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  const tableMap = TableMap.get(table.node);
+  const {
+    width
+  } = tableMap;
+  if (width <= 1) {
+    return false;
+  }
+  if (colIndex < 0 || colIndex > width - 1) {
+    return false;
+  }
+  const {
+    map
+  } = tableMap;
+  // j is an index in the tableMap.map array. tableMap.map is a flat array.
+  // Each item of this array contains a number.
+  // The number represents the position of the corresponding cell in the tableMap. It exists for each cell.
+  // If there are merged cells, their positions will be represented by the same number.
+  const isFirstColumn = colIndex === 0;
+  const isLastColumn = colIndex === width - 1;
+  for (let j = colIndex; j < map.length; j += width) {
+    if (!isFirstColumn && map[j] === map[j - 1] ||
+    // compare with a cell in the column on the left
+    !isLastColumn && map[j] === map[j + 1] // compare with a cell in the column on the right
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
+
+// Checks if any cell in the row with rowIndex is merged with a cell in a row above or below it.
+export const hasMergedCellsWithRowNextToRowIndex = (rowIndex, selection) => {
+  const table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  const tableMap = TableMap.get(table.node);
+  const {
+    height
+  } = tableMap;
+  if (height <= 1) {
+    return false;
+  }
+  if (rowIndex < 0 || rowIndex > height - 1) {
+    return false;
+  }
+  const {
+    map,
+    width
+  } = tableMap; // map is a flat array representing position of each cell in the table.
+  const indexOfFirstCellInTheRow = rowIndex * width;
+  const indexOfLastCellInTheRow = indexOfFirstCellInTheRow + width - 1;
+  const isFirstRow = rowIndex === 0;
+  const isLastRow = rowIndex === height - 1;
+  // j is an index of a cell in a row
+  for (let j = indexOfFirstCellInTheRow; j <= indexOfLastCellInTheRow; j++) {
+    if (!isFirstRow && map[j] === map[j - width] ||
+    // compare with a cell in the row above
+    !isLastRow && map[j] === map[j + width] // compare with a cell in the row below
+    ) {
+      return true;
+    }
+  }
+  return false;
 };

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

@@ -2,8 +2,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo } from '../../utils';
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
+import { canMove, getTargetIndex } from '../../utils/drag-menu';
 import { clearDropTarget, moveSource } from './commands';
 export var clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, sourceType, sourceIndexes, status, tr) {
@@ -84,30 +85,13 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       if (selectedIndexes.length === 0) {
         return false;
       }
-
-      // const sourceIndex = selectedIndexes[0];
-      // we can move only by one row/column
-      // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-      var targetIndex = Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
-
-      // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
       var _getSelectedTableInfo3 = getSelectedTableInfo(selection),
         totalRowCount = _getSelectedTableInfo3.totalRowCount,
         totalColumnCount = _getSelectedTableInfo3.totalColumnCount;
-      var isValidTargetIndex = targetIndex < 0 ? false : isRow ? targetIndex <= totalRowCount - 1 : targetIndex <= totalColumnCount - 1;
-      if (!isValidTargetIndex) {
-        return false;
-      }
-
-      // We can move only if there are no merged cells in the source or target row/column
-      var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
-      if (hasMergedCellsInSource) {
-        return false;
-      }
-      var hasMergedCellsInTarget = isRow ? hasMergedCellsInRow(targetIndex)(selection) : hasMergedCellsInColumn(targetIndex)(selection);
-      if (hasMergedCellsInTarget) {
+      if (!canMove(sourceType, direction, isRow ? totalRowCount : totalColumnCount, selection, selectionRect)) {
         return false;
       }
+      var targetIndex = getTargetIndex(selectedIndexes, direction);
       return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
     };
   };

package/dist/esm/utils/drag-menu.js

@@ -19,14 +19,36 @@ import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizi
 import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
+import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
-var canDecrease = function canDecrease(index) {
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return index !== undefined && index > min;
+export var getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
+  return Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
 };
-var canIncrease = function canIncrease(index) {
-  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return index !== undefined && index < max;
+export var canMove = function canMove(sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) {
+  if (!selectionRect) {
+    return false;
+  }
+  var isRow = sourceType === 'table-row';
+  var selectedIndexes = isRow ? getSelectedRowIndexes(selectionRect) : getSelectedColumnIndexes(selectionRect);
+  var targetIndex = getTargetIndex(selectedIndexes, direction);
+  var isValidTargetIndex = targetIndex >= 0 && targetIndex < totalItemsOfSourceTypeCount;
+  if (!isValidTargetIndex) {
+    return false;
+  }
+
+  // We can't move column when target has merges with other columns
+  // We can't move row when target has merges with other rows
+  var hasMergedCellsInTarget = isRow ? hasMergedCellsWithRowNextToRowIndex(targetIndex, selection) : hasMergedCellsWithColumnNextToColumnIndex(targetIndex, selection);
+  if (hasMergedCellsInTarget) {
+    return false;
+  }
+
+  // Currently we can't move in any direction if there are merged cells in the source
+  var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
+  if (hasMergedCellsInSource) {
+    return false;
+  }
+  return true;
 };
 var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   var rect = getClosestSelectionRect(state);
@@ -37,6 +59,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   return false;
 };
 export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) {
+  var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -58,13 +81,12 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     icon: AddColRightIcon,
     keymap: addColumnAfter
   }];
+  var selection = editorView.state.selection;
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: ArrowUpIcon,
     keymap: moveRowUp,
-    canMove: function canMove(selectionRect) {
-      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top);
-    },
+    canMove: canDrag && canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.top - 1;
@@ -73,10 +95,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     label: 'down',
     icon: ArrowDownIcon,
     keymap: moveRowDown,
-    canMove: function canMove(selectionRect) {
-      var _selectionRect$bottom, _tableMap$height;
-      return canDrag && canIncrease(((_selectionRect$bottom = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom) !== null && _selectionRect$bottom !== void 0 ? _selectionRect$bottom : 0) - 1, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.bottom;
@@ -85,9 +104,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     label: 'left',
     icon: ArrowLeftIcon,
     keymap: moveColumnLeft,
-    canMove: function canMove(selectionRect) {
-      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left);
-    },
+    canMove: canDrag && canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.left - 1;
@@ -96,10 +113,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     label: 'right',
     icon: ArrowRightIcon,
     keymap: moveColumnRight,
-    canMove: function canMove(selectionRect) {
-      var _selectionRect$right, _tableMap$width;
-      return canDrag && canIncrease(((_selectionRect$right = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right) !== null && _selectionRect$right !== void 0 ? _selectionRect$right : 0) - 1, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.right;
@@ -184,10 +198,10 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: !canMove(selectionRect),
+      disabled: !canMove,
       icon: icon,
       onClick: function onClick(state, dispatch) {
-        if (canMove(selectionRect)) {
+        if (canMove) {
           requestAnimationFrame(function () {
             moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
           });