@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/src/pm-plugins/main.ts

@@ -38,12 +38,16 @@ import {
   findParentNodeOfType,
 } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   addBoldInEmptyHeaderCells,
   clearHoverSelection,
   setTableRef,
 } from '../commands';
+import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import {
   removeResizeHandleDecorations,
   transformSliceRemoveCellBackgroundColor,
@@ -202,7 +206,7 @@ export const createPlugin = (
       editorViewRef = editorView;
 
       return {
-        update: (view: EditorView) => {
+        update: (view: EditorView, prevState: EditorState) => {
           const { state, dispatch } = view;
           const { selection } = state;
           const pluginState = getPluginState(state);
@@ -218,6 +222,39 @@ export const createPlugin = (
                   'table',
                 ) || undefined;
             }
+            const tableNode = findTable(state.selection);
+            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              const pluginPrevState = getPluginState(prevState);
+              const isStopKeyboardColumResizing =
+                pluginPrevState.isResizeHandleWidgetAdded &&
+                pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                const isTableNodesDifferent =
+                  pluginPrevState?.tableNode !== tableNode?.node;
+                if (
+                  pluginPrevState?.tableNode &&
+                  tableNode &&
+                  isTableNodesDifferent
+                ) {
+                  const oldRowsNumber = TableMap.get(
+                    pluginPrevState.tableNode,
+                  ).height;
+                  const newRowsNumber = TableMap.get(tableNode.node).height;
+                  if (
+                    oldRowsNumber !== newRowsNumber || // Add/delete row
+                    tableNode.node.attrs.localId !==
+                      pluginPrevState.tableNode.attrs.localId
+                  ) {
+                    // Jump to another table
+                    stopKeyboardColumnResizing()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  stopKeyboardColumnResizing()(state, dispatch);
+                }
+              }
+            }
           }
 
           if (pluginState.tableRef !== tableRef) {
@@ -333,7 +370,15 @@ export const createPlugin = (
         const maybeTr = closestElement(domRef as HTMLElement | undefined, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: ({ state, dispatch }, _from, _to, text) => {
+      handleTextInput: (view, _from, _to, text) => {
+        const { state, dispatch } = view;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          const { isKeyboardResize } = getPluginState(state);
+          if (isKeyboardResize) {
+            stopKeyboardColumnResizing()(state, dispatch);
+            return false;
+          }
+        }
         const tr = replaceSelectedTable(
           state,
           text,

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -18,9 +18,11 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes } from '../../utils';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -54,6 +56,7 @@ export const handleMouseDown = (
   ) {
     return false;
   }
+  const { isKeyboardResize } = getTablePluginState(state);
   event.preventDefault();
 
   const tr = view.state.tr;
@@ -147,6 +150,7 @@ export const handleMouseDown = (
     const { clientX } = event;
     const { state, dispatch } = view;
     const { dragging, resizeHandlePos } = getPluginState(state);
+    const { isTableHovered } = getTablePluginState(state);
     if (resizeHandlePos === null) {
       return stopResizing()(state, dispatch);
     }
@@ -160,9 +164,20 @@ export const handleMouseDown = (
     const start = $cell.start(-1);
     const table = $cell.node(-1);
 
-    // If we let go in the same place we started, dont need to do anything.
+    // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
-      return stopResizing()(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing()(state, dispatch, view);
+        } else {
+          return stopResizing()(state, dispatch);
+        }
+      } else {
+        return stopResizing()(state, dispatch);
+      }
     }
 
     let { tr } = state;
@@ -211,8 +226,18 @@ export const handleMouseDown = (
           })(tr);
         }
       }
-
-      return stopResizing(tr)(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+        } else {
+          return stopResizing(tr)(state, dispatch);
+        }
+      } else {
+        return stopResizing(tr)(state, dispatch);
+      }
     }
   }
 
@@ -220,11 +245,14 @@ export const handleMouseDown = (
     const { clientX, which } = event;
     const { state } = view;
     const { dragging, resizeHandlePos } = getPluginState(state);
+    const { isTableHovered } = getTablePluginState(state);
     if (
       !which ||
       !dragging ||
       resizeHandlePos === null ||
-      !pointsAtCell(state.doc.resolve(resizeHandlePos))
+      !pointsAtCell(state.doc.resolve(resizeHandlePos)) ||
+      (!isTableHovered &&
+        getBooleanFF('platform.editor.a11y-column-resizing_emcvz'))
     ) {
       return finish(event);
     }

package/src/pm-plugins/table-resizing/plugin.ts

@@ -7,9 +7,11 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName } from '../../types';
 import type { ColumnResizingPluginState } from '../../types';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
@@ -54,7 +56,22 @@ export function createPlugin(
             getResizeCellPos(view, event as MouseEvent);
 
           const { dragging } = getPluginState(state);
-          if (resizeHandlePos !== null && !dragging) {
+          let isColumnKeyboardResizeStarted = false;
+          if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+            /*
+              We need to start listening mouse events if column resize started from keyboard.
+              This will allow continue resizing via mouse
+            */
+            const { isKeyboardResize } = getTablePluginState(state);
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+
+          if (
+            resizeHandlePos !== null &&
+            (!dragging || isColumnKeyboardResizeStarted)
+          ) {
             if (
               handleMouseDown(
                 view,

package/src/reducer.ts

@@ -82,14 +82,15 @@ export default (
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
       };
-
+    case 'START_KEYBOARD_COLUMN_RESIZE':
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
       if (
         action.data.resizeHandleColumnIndex ===
           pluginState.resizeHandleColumnIndex &&
         action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex &&
         action.data.resizeHandleIncludeTooltip ===
-          pluginState.resizeHandleIncludeTooltip
+          pluginState.resizeHandleIncludeTooltip &&
+        action.data.isKeyboardResize === pluginState.isKeyboardResize
       ) {
         return pluginState;
       }
@@ -128,6 +129,7 @@ export default (
           resizeHandleIncludeTooltip ?? pluginState.resizeHandleIncludeTooltip,
       };
 
+    case 'STOP_KEYBOARD_COLUMN_RESIZE':
     case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
       if (!pluginState.isResizeHandleWidgetAdded) {
         return pluginState;
@@ -139,6 +141,7 @@ export default (
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
         isResizeHandleWidgetAdded: false,
+        isKeyboardResize: undefined,
       };
 
     case 'SET_TABLE_REF':

package/src/types.ts

@@ -119,6 +119,7 @@ export interface TablePluginState {
   resizeHandleRowIndex?: number;
   resizeHandleColumnIndex?: number;
   resizeHandleIncludeTooltip?: boolean;
+  isKeyboardResize?: boolean;
   // for table wrap/collapse
   isTableCollapsed?: boolean; // is the current table already in an expand?
   canCollapseTable?: boolean; // enabled/disabled state of collapse option
@@ -179,6 +180,16 @@ export type TablePluginAction =
         isInDanger?: boolean;
       };
     }
+  | {
+      type: 'START_KEYBOARD_COLUMN_RESIZE';
+      data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
+      };
+    }
   | {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS';
       data: {
@@ -186,6 +197,7 @@ export type TablePluginAction =
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
         resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
       };
     }
   | {
@@ -201,6 +213,10 @@ export type TablePluginAction =
       type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';
       data: { decorationSet: DecorationSet };
     }
+  | {
+      type: 'STOP_KEYBOARD_COLUMN_RESIZE';
+      data: { decorationSet: DecorationSet };
+    }
   | { type: 'CLEAR_HOVER_SELECTION'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
   | { type: 'HIDE_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }

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"
     }
   ]
 }