@atlaskit/editor-plugin-table 7.2.2 → 7.2.3

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

@@ -130,4 +130,69 @@ export var hasMergedCellsInBetween = function hasMergedCellsInBetween(indexes, t
       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.
+export var hasMergedCellsWithColumnNextToColumnIndex = function hasMergedCellsWithColumnNextToColumnIndex(colIndex, selection) {
+  var table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  var tableMap = 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.
+export var hasMergedCellsWithRowNextToRowIndex = function hasMergedCellsWithRowNextToRowIndex(rowIndex, selection) {
+  var table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  var tableMap = 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/types/utils/drag-menu.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
-import type { TableDirection } from '../types';
+import type { DraggableData, DraggableType, TableDirection } from '../types';
+export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
+export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;

package/dist/types/utils/merged-cells.d.ts

@@ -3,4 +3,6 @@ type MergeType = 'row' | 'column';
 export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
+export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
+export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;
 export {};

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
-import type { TableDirection } from '../types';
+import type { DraggableData, DraggableType, TableDirection } from '../types';
+export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
+export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;

package/dist/types-ts4.5/utils/merged-cells.d.ts

@@ -3,4 +3,6 @@ type MergeType = 'row' | 'column';
 export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
+export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
+export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.2.2",
+  "version": "7.2.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,15 +29,15 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.1",
-    "@atlaskit/custom-steps": "^0.0.12",
-    "@atlaskit/editor-common": "^77.2.0",
+    "@atlaskit/custom-steps": "^0.0.13",
+    "@atlaskit/editor-common": "^77.3.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
     "@atlaskit/editor-plugin-guideline": "^0.5.0",
     "@atlaskit/editor-plugin-selection": "^0.2.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
-    "@atlaskit/editor-prosemirror": "1.1.0",
+    "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.5.0",
     "@atlaskit/icon": "^22.0.0",
@@ -64,19 +64,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/editor-plugin-decorations": "^0.2.0",
-    "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
-    "@atlaskit/editor-plugin-grid": "^0.3.0",
-    "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
-    "@atlaskit/editor-test-helpers": "^18.16.0",
-    "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/feature-flags-test-utils": "^0.2.0",
-    "@testing-library/dom": "^8.17.1",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "raf-stub": "^2.0.1",
     "typescript": "~4.9.5"
   },
   "af:exports": {
@@ -107,6 +95,11 @@
       ]
     }
   },
+  "stricter": {
+    "no-unused-dependencies": {
+      "checkDevDependencies": true
+    }
+  },
   "platform-feature-flags": {
     "platform.editor.custom-table-width": {
       "type": "boolean"

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -22,10 +22,9 @@ import {
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
   getSelectedTableInfo,
-  hasMergedCellsInColumn,
-  hasMergedCellsInRow,
 } from '../../utils';
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
+import { canMove, getTargetIndex } from '../../utils/drag-menu';
 
 import { clearDropTarget, moveSource } from './commands';
 
@@ -132,44 +131,24 @@ export const moveSourceWithAnalyticsViaShortcut =
     const selectedIndexes = isRow
       ? getSelectedRowIndexes(selectionRect)
       : getSelectedColumnIndexes(selectionRect);
-
     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) {
+    if (
+      !canMove(
+        sourceType,
+        direction,
+        isRow ? totalRowCount : totalColumnCount,
+        selection,
+        selectionRect,
+      )
+    ) {
       return false;
     }
 
-    const hasMergedCellsInTarget = isRow
-      ? hasMergedCellsInRow(targetIndex)(selection)
-      : hasMergedCellsInColumn(targetIndex)(selection);
-    if (hasMergedCellsInTarget) {
-      return false;
-    }
+    const targetIndex = getTargetIndex(selectedIndexes, direction);
 
     return moveSourceWithAnalytics(editorAnalyticsAPI)(
       INPUT_METHOD.SHORTCUT,

package/src/utils/drag-menu.ts

@@ -22,7 +22,10 @@ import type {
   GetEditorContainerWidth,
   IconProps,
 } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type {
+  EditorState,
+  Selection,
+} from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
@@ -47,7 +50,7 @@ import { distributeColumnsWidths } from '../pm-plugins/table-resizing/commands';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
-import type { TableDirection } from '../types';
+import type { DraggableData, DraggableType, TableDirection } from '../types';
 import {
   AddColLeftIcon,
   AddColRightIcon,
@@ -55,12 +58,61 @@ import {
   AddRowBelowIcon,
 } from '../ui/icons';
 
+import {
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+  hasMergedCellsWithColumnNextToColumnIndex,
+  hasMergedCellsWithRowNextToRowIndex,
+} from './merged-cells';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 
-const canDecrease = (index?: number, min: number = 0) =>
-  index !== undefined && index > min;
-const canIncrease = (index?: number, max: number = 0) =>
-  index !== undefined && index < max;
+export const getTargetIndex = (
+  selectedIndexes: number[],
+  direction: DraggableData['direction'],
+) => Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
+
+export const canMove = (
+  sourceType: DraggableType,
+  direction: DraggableData['direction'],
+  totalItemsOfSourceTypeCount: number,
+  selection: Selection,
+  selectionRect?: Rect,
+) => {
+  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: EditorState) => {
   const rect = getClosestSelectionRect(state);
@@ -135,6 +187,8 @@ export const getDragMenuConfig = (
             keymap: addColumnAfter,
           },
         ];
+
+  const { selection } = editorView.state;
   const moveOptions =
     direction === 'row'
       ? [
@@ -142,8 +196,15 @@ export const getDragMenuConfig = (
             label: 'up',
             icon: ArrowUpIcon,
             keymap: moveRowUp,
-            canMove: (selectionRect?: Rect) =>
-              canDrag && canDecrease(selectionRect?.top),
+            canMove:
+              canDrag &&
+              canMove(
+                'table-row',
+                -1,
+                tableMap?.height ?? 0,
+                selection,
+                selectionRect,
+              ),
             getOriginIndexes: getSelectedRowIndexes,
             getTargetIndex: (selectionRect: Rect) => selectionRect.top - 1,
           },
@@ -151,11 +212,14 @@ export const getDragMenuConfig = (
             label: 'down',
             icon: ArrowDownIcon,
             keymap: moveRowDown,
-            canMove: (selectionRect?: Rect) =>
+            canMove:
               canDrag &&
-              canIncrease(
-                (selectionRect?.bottom ?? 0) - 1,
-                (tableMap?.height ?? 0) - 1,
+              canMove(
+                'table-row',
+                1,
+                tableMap?.height ?? 0,
+                selection,
+                selectionRect,
               ),
             getOriginIndexes: getSelectedRowIndexes,
             getTargetIndex: (selectionRect: Rect) => selectionRect.bottom,
@@ -166,8 +230,15 @@ export const getDragMenuConfig = (
             label: 'left',
             icon: ArrowLeftIcon,
             keymap: moveColumnLeft,
-            canMove: (selectionRect?: Rect) =>
-              canDrag && canDecrease(selectionRect?.left),
+            canMove:
+              canDrag &&
+              canMove(
+                'table-column',
+                -1,
+                tableMap?.width ?? 0,
+                selection,
+                selectionRect,
+              ),
             getOriginIndexes: getSelectedColumnIndexes,
             getTargetIndex: (selectionRect: Rect) => selectionRect.left - 1,
           },
@@ -175,11 +246,14 @@ export const getDragMenuConfig = (
             label: 'right',
             icon: ArrowRightIcon,
             keymap: moveColumnRight,
-            canMove: (selectionRect?: Rect) =>
+            canMove:
               canDrag &&
-              canIncrease(
-                (selectionRect?.right ?? 0) - 1,
-                (tableMap?.width ?? 0) - 1,
+              canMove(
+                'table-column',
+                1,
+                tableMap?.width ?? 0,
+                selection,
+                selectionRect,
               ),
             getOriginIndexes: getSelectedColumnIndexes,
             getTargetIndex: (selectionRect: Rect) => selectionRect.right,
@@ -275,10 +349,10 @@ export const getDragMenuConfig = (
       ({ label, canMove, icon, keymap, getOriginIndexes, getTargetIndex }) => ({
         id: `move_${direction}_${label}`,
         title: `Move ${direction} ${label}`,
-        disabled: !canMove(selectionRect),
+        disabled: !canMove,
         icon,
         onClick: (state: EditorState, dispatch?: CommandDispatch) => {
-          if (canMove(selectionRect)) {
+          if (canMove) {
             requestAnimationFrame(() => {
               moveSourceWithAnalytics(editorAnalyticsAPI)(
                 INPUT_METHOD.TABLE_CONTEXT_MENU,

package/src/utils/merged-cells.ts

@@ -147,3 +147,81 @@ export const hasMergedCellsInBetween =
       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: number,
+  selection: 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: number, // logical row index in the table. It starts at 0 and goes up to tableMap.height - 1.
+  selection: 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/tsconfig.dev.json

@@ -36,83 +36,14 @@
     {
       "path": "tsconfig.app.json"
     },
-    {
-      "path": "../../analytics/analytics-next/tsconfig.app.json"
-    },
-    {
-      "path": "../../design-system/button/tsconfig.app.json"
-    },
-    {
-      "path": "../custom-steps/tsconfig.app.json"
-    },
     {
       "path": "../../../build/website/docs/tsconfig.app.json"
     },
-    {
-      "path": "../editor-common/tsconfig.app.json"
-    },
     {
       "path": "../editor-core/tsconfig.app.json"
     },
-    {
-      "path": "../editor-plugin-analytics/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-content-insertion/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-decorations/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-feature-flags/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-grid/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-guideline/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-selection/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-plugin-width/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-shared-styles/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-tables/tsconfig.app.json"
-    },
-    {
-      "path": "../editor-test-helpers/tsconfig.app.json"
-    },
-    {
-      "path": "../../linking-platform/link-provider/tsconfig.app.json"
-    },
-    {
-      "path": "../../design-system/logo/tsconfig.app.json"
-    },
-    {
-      "path": "../../media/media-integration-test-helpers/tsconfig.app.json"
-    },
-    {
-      "path": "../../platform/feature-flags/tsconfig.app.json"
-    },
-    {
-      "path": "../synchrony-test-helpers/tsconfig.app.json"
-    },
-    {
-      "path": "../../design-system/theme/tsconfig.app.json"
-    },
     {
       "path": "../../design-system/tokens/tsconfig.app.json"
-    },
-    {
-      "path": "../../../build/test-tooling/visual-regression/tsconfig.app.json"
-    },
-    {
-      "path": "../../platform/feature-flags-test-utils/tsconfig.app.json"
     }
   ]
 }