@atlaskit/editor-plugin-table 7.5.11 → 7.5.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.12
+
+### Patch Changes
+
+- [#82347](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82347) [`1290405f274b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1290405f274b) - [ux] Updates move util used by move shortcuts and drag menu to cater for new merged cells logic.
+- Updated dependencies
+
 ## 7.5.11
 
 ### Patch Changes

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -203,9 +203,17 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
   var _getPluginState = (0, _pluginFactory.getPluginState)(state),
     isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
   var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
-  var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
-  var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
+  var shouldMoveDisabled;
+  var hasMergedCellsInTable;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+    var _tableMap$hasMergedCe;
+    shouldMoveDisabled = false;
+    hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
+  } else {
+    var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
+    shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+    hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
+  }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),

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

@@ -18,6 +18,7 @@ var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/edi
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _chevronDoubleDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-down"));
 var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-up"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commandsWithAnalytics = require("../commands-with-analytics");
 var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
@@ -40,17 +41,23 @@ var canMove = exports.canMove = function canMove(sourceType, direction, totalIte
     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
+  // We can't move column when target has merged cells with other columns
+  // We can't move row when target has merged cells 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;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+    // We can't move if selection in the source is not a rectangle
+    if ((0, _mergedCells.hasMergedCellsInSelection)(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
+      return false;
+    }
+  } else {
+    // 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;
 };

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -192,9 +192,17 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     isKeyboardModeActive
   } = getPluginState(state);
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-  const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
-  const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  let shouldMoveDisabled;
+  let hasMergedCellsInTable;
+  if (getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+    var _tableMap$hasMergedCe;
+    shouldMoveDisabled = false;
+    hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
+  } else {
+    const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+    shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+    hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
   const {

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

@@ -10,12 +10,13 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
 import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, sortColumnWithAnalytics } from '../commands-with-analytics';
 import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
-import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
+import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInSelection, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 export const getTargetIndex = (selectedIndexes, direction) => Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
 export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) => {
@@ -30,17 +31,23 @@ export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, sele
     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
+  // We can't move column when target has merged cells with other columns
+  // We can't move row when target has merged cells 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;
+  if (getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+    // We can't move if selection in the source is not a rectangle
+    if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
+      return false;
+    }
+  } else {
+    // 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;
 };

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -192,9 +192,17 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   var _getPluginState = getPluginState(state),
     isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-  var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
-  var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  var shouldMoveDisabled;
+  var hasMergedCellsInTable;
+  if (getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+    var _tableMap$hasMergedCe;
+    shouldMoveDisabled = false;
+    hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
+  } else {
+    var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+    shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+    hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),

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

@@ -11,12 +11,13 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
 import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, sortColumnWithAnalytics } from '../commands-with-analytics';
 import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
-import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
+import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInSelection, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 export var getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
   return Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
@@ -33,17 +34,23 @@ export var canMove = function canMove(sourceType, direction, totalItemsOfSourceT
     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
+  // We can't move column when target has merged cells with other columns
+  // We can't move row when target has merged cells 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;
+  if (getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+    // We can't move if selection in the source is not a rectangle
+    if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
+      return false;
+    }
+  } else {
+    // 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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.11",
+  "version": "7.5.12",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.6.0",
     "@atlaskit/custom-steps": "^0.0.15",
-    "@atlaskit/editor-common": "^78.14.0",
+    "@atlaskit/editor-common": "^78.15.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -110,6 +110,9 @@
     "platform.editor.table.insert-last-column-btn-stays-in-place": {
       "type": "boolean"
     },
+    "platform.editor.table.drag-move-options-logic-update_fp7xw": {
+      "type": "boolean"
+    },
     "platform.editor.resizing-table-height-improvement": {
       "type": "boolean"
     },

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -292,13 +292,23 @@ export const DragMenu = React.memo(
       ? getSelectionRect(selection)!
       : findCellRectClosestToPos(selection.$from);
 
-    const hasMergedCells =
-      direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+    let shouldMoveDisabled;
+    let hasMergedCellsInTable;
+    if (
+      getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')
+    ) {
+      shouldMoveDisabled = false;
+      hasMergedCellsInTable = tableMap?.hasMergedCells() ?? false;
+    } else {
+      const hasMergedCells =
+        direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
 
-    const shouldMoveDisabled =
-      index !== undefined && hasMergedCells(index)(selection);
+      shouldMoveDisabled =
+        index !== undefined && hasMergedCells(index)(selection);
+
+      hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+    }
 
-    const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
     const allowBackgroundColor = pluginConfig?.allowBackgroundColor ?? false;
 
     const dragMenuConfig = getDragMenuConfig(

package/src/utils/drag-menu.ts

@@ -37,6 +37,7 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
 import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   deleteColumnsWithAnalytics,
@@ -61,6 +62,7 @@ import {
 import {
   hasMergedCellsInColumn,
   hasMergedCellsInRow,
+  hasMergedCellsInSelection,
   hasMergedCellsWithColumnNextToColumnIndex,
   hasMergedCellsWithRowNextToRowIndex,
 } from './merged-cells';
@@ -94,8 +96,8 @@ export const canMove = (
     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
+  // We can't move column when target has merged cells with other columns
+  // We can't move row when target has merged cells with other rows
   const hasMergedCellsInTarget = isRow
     ? hasMergedCellsWithRowNextToRowIndex(targetIndex, selection)
     : hasMergedCellsWithColumnNextToColumnIndex(targetIndex, selection);
@@ -103,12 +105,27 @@ export const canMove = (
     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;
+  if (
+    getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')
+  ) {
+    // We can't move if selection in the source is not a rectangle
+    if (
+      hasMergedCellsInSelection(
+        selectedIndexes,
+        isRow ? 'row' : 'column',
+      )(selection)
+    ) {
+      return false;
+    }
+  } else {
+    // 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;