@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.2.2",
+  "version": "7.3.0",
   "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",
@@ -48,7 +48,7 @@
     "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.36.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -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/commands/column-resize.ts

@@ -3,6 +3,7 @@ import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables';
 import type { CellAttributes, Direction } from '@atlaskit/editor-tables/types';
 import {
@@ -15,10 +16,17 @@ import {
 } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import { getDecorations } from '../pm-plugins/decorations/plugin';
+import {
+  buildColumnResizingDecorations,
+  clearColumnResizingDecorations,
+} from '../pm-plugins/decorations/utils';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import {
   getPluginState as getTableResizingPluginState,
   createCommand as tableResizingPluginCreateCommand,
 } from '../pm-plugins/table-resizing/plugin-factory';
+import { pluginKey as tableResizingPK } from '../pm-plugins/table-resizing/plugin-key';
 import {
   currentColWidth,
   getResizeState,
@@ -27,9 +35,23 @@ import {
   updateControls,
 } from '../pm-plugins/table-resizing/utils';
 import { updateColumnWidths } from '../transforms';
-import { getSelectedColumnIndexes } from '../utils';
+import { TableDecorations } from '../types';
+import type { TablePluginAction } from '../types';
+import {
+  createColumnLineResize,
+  getSelectedColumnIndexes,
+  updateDecorations,
+} from '../utils';
 
-import { addResizeHandleDecorations, showResizeHandleLine } from './index';
+const getTablePluginCommand = (
+  actionPayload: TablePluginAction,
+  originalTr?: Transaction,
+): Command => {
+  return createCommand(
+    () => actionPayload,
+    (tr) => (originalTr || tr).setMeta('addToHistory', false),
+  );
+};
 
 const updateResizeHandleAndStatePosition =
   (
@@ -38,19 +60,64 @@ const updateResizeHandleAndStatePosition =
     nextResizeHandlePos: number,
   ): Command =>
   (state, dispatch) => {
-    addResizeHandleDecorations(rowIndex, columnIndex, true)(state, dispatch);
-    // Currently only 'right' position is used in showResizeHandleLine
-    showResizeHandleLine({
-      left: 0,
-      right: columnIndex,
-    })(state, dispatch);
+    let customTr = state.tr;
+    const {
+      pluginConfig: { allowColumnResizing },
+      getIntl,
+    } = getPluginState(state);
 
-    tableResizingPluginCreateCommand({
+    const fakeDispatch = (tr: Transaction) => {
+      customTr = tr;
+    };
+
+    if (!allowColumnResizing) {
+      return false;
+    }
+
+    const decorationsWithWidget = buildColumnResizingDecorations(
+      rowIndex,
+      columnIndex,
+      true,
+      getIntl,
+    )({
+      tr: customTr,
+      decorationSet: getDecorations(state),
+    });
+
+    const decorationsWithWidgetAndHandle = updateDecorations(
+      customTr.doc,
+      decorationsWithWidget,
+      createColumnLineResize(state.selection, {
+        right: columnIndex,
+      }),
+      TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+    );
+
+    getTablePluginCommand(
+      {
+        type: 'START_KEYBOARD_COLUMN_RESIZE',
+        data: {
+          resizeHandleRowIndex: rowIndex,
+          resizeHandleColumnIndex: columnIndex,
+          resizeHandleIncludeTooltip: true,
+          isKeyboardResize: true,
+          decorationSet: decorationsWithWidgetAndHandle,
+        },
+      },
+      customTr,
+    )(state, fakeDispatch);
+
+    customTr.setMeta(tableResizingPK, {
       type: 'SET_RESIZE_HANDLE_POSITION',
       data: {
         resizeHandlePos: nextResizeHandlePos,
       },
-    })(state, dispatch);
+    });
+
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
     return false;
   };
 
@@ -69,39 +136,24 @@ export const initiateKeyboardColumnResizing: Command = (
   const cell = findCellClosestToPos(selection.$from);
 
   if (selectionRect && cell && view) {
-    const cellAttrs = cell.node.attrs;
-    const width = currentColWidth(view, cell.pos, cellAttrs as CellAttributes);
-
-    updateResizeHandleAndStatePosition(
+    return updateResizeHandleAndStatePosition(
       selectionRect.top,
       selectionRect.right,
       cell.pos,
     )(state, dispatch);
-
-    tableResizingPluginCreateCommand({
-      type: 'SET_DRAGGING',
-      data: {
-        dragging: {
-          startX: 0,
-          startWidth: width,
-        },
-      },
-    })(state, dispatch);
-    return true;
   }
   return false;
 };
 
 export const activateNextResizeArea =
   (direction: Direction): Command =>
-  (state, dispatch) => {
+  (state, dispatch, view) => {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    const { resizeHandlePos, dragging } =
-      getTableResizingPluginState(state) || {};
+    const { resizeHandlePos } = getTableResizingPluginState(state) || {};
     // If No resizing has initiated, skip to regular handler
-    if (!resizeHandlePos || !dragging) {
+    if (!resizeHandlePos) {
       return false;
     }
 
@@ -135,11 +187,11 @@ export const activateNextResizeArea =
       // we are somewhere in between the side columns of the table
       const offset = $nextCell.pos - $nextCell.start(-1);
       const rectForNextCell = tableMap.findCell(offset);
-      updateResizeHandleAndStatePosition(
+      return updateResizeHandleAndStatePosition(
         rectForNextCell.top,
         rectForNextCell.right,
         $nextCell.pos,
-      )(state, dispatch);
+      )(state, dispatch, view);
     } else {
       // current position is in the one of the side columns of the table(left or right)
       if (currentCellRect.left === 0) {
@@ -151,25 +203,25 @@ export const activateNextResizeArea =
           ) + closestTable.start;
         const $lastCell = state.doc.resolve(lastCellInCurrentRow);
 
-        updateResizeHandleAndStatePosition(
+        return updateResizeHandleAndStatePosition(
           currentCellRect.top,
           tableMap.width,
           $lastCell.pos,
-        )(state, dispatch);
+        )(state, dispatch, view);
       } else if (tableMap.width === currentCellRect.right) {
         const firsCellInCurrentRow =
           tableMap.positionAt(currentCellRect.top, 0, tableNode) +
           closestTable.start;
         const $nextCell = state.doc.resolve(firsCellInCurrentRow);
 
-        updateResizeHandleAndStatePosition(
+        return updateResizeHandleAndStatePosition(
           currentCellRect.top,
           1,
           $nextCell.pos,
         )(state, dispatch);
       }
     }
-    return true;
+    return false;
   };
 
 export const changeColumnWidthByStep =
@@ -178,11 +230,16 @@ export const changeColumnWidthByStep =
     getEditorContainerWidth: GetEditorContainerWidth,
   ): Command =>
   (state, dispatch, view) => {
+    let customTr = state.tr;
+    const fakeDispatch = (tr: Transaction) => {
+      customTr = tr;
+    };
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    const { resizeHandlePos, dragging } = getTableResizingPluginState(state);
-    if (!view || !resizeHandlePos || !dragging) {
+    const { resizeHandlePos } = getTableResizingPluginState(state);
+    const cell = findCellClosestToPos(state.selection.$from);
+    if (!view || !resizeHandlePos || !cell) {
       return false;
     }
 
@@ -205,6 +262,18 @@ export const changeColumnWidthByStep =
       dom = dom.closest('table') as HTMLTableElement;
     }
 
+    const cellAttrs = cell?.node.attrs;
+    const width = currentColWidth(view, cell?.pos, cellAttrs as CellAttributes);
+    tableResizingPluginCreateCommand({
+      type: 'SET_DRAGGING',
+      data: {
+        dragging: {
+          startX: 0,
+          startWidth: width,
+        },
+      },
+    })(state, fakeDispatch);
+
     const maxSize = getTableMaxWidth({
       table: originalTable,
       tableStart: tableStartPosition,
@@ -240,15 +309,61 @@ export const changeColumnWidthByStep =
       resizingSelectedColumns ? selectedColumns : undefined,
     );
 
-    const tr = updateColumnWidths(
+    customTr = updateColumnWidths(
       newResizeState,
       originalTable,
       tableStartPosition,
-    )(state.tr);
+    )(customTr);
 
     if (dispatch) {
-      dispatch(tr);
+      dispatch(customTr);
     }
 
     return true;
   };
+
+export const stopKeyboardColumnResizing =
+  (originalTr?: Transaction): Command =>
+  (state, dispatch) => {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    let customTr = originalTr || state.tr;
+    const fakeDispatch = (tr: Transaction) => {
+      customTr = tr;
+    };
+
+    const decorationWithoutWidget = clearColumnResizingDecorations()({
+      tr: customTr,
+      decorationSet: getDecorations(state),
+    });
+
+    const decorationWithoutWidgetAndHandle = updateDecorations(
+      customTr.doc,
+      decorationWithoutWidget,
+      [],
+      TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+    );
+    getTablePluginCommand(
+      {
+        type: 'STOP_KEYBOARD_COLUMN_RESIZE',
+        data: {
+          decorationSet: decorationWithoutWidgetAndHandle,
+        },
+      },
+      customTr,
+    )(state, fakeDispatch);
+
+    tableResizingPluginCreateCommand(
+      {
+        type: 'STOP_RESIZING',
+      },
+      () => customTr.setMeta('scrollIntoView', false),
+    )(state, fakeDispatch);
+
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
+    return false;
+  };

package/src/commands/go-to-next-cell.ts

@@ -13,12 +13,9 @@ import {
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertRowWithAnalytics } from '../commands-with-analytics';
-import {
-  getPluginState as getResizePluginState,
-  createCommand as tableResizingPluginCreateCommand,
-} from '../pm-plugins/table-resizing/plugin-factory';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 
-import { hideResizeHandleLine } from './hover';
+import { stopKeyboardColumnResizing } from './column-resize';
 
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
@@ -26,23 +23,17 @@ const TAB_BACKWARD_DIRECTION = -1;
 export const goToNextCell =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
   (direction: Direction): Command =>
-  (state, dispatch) => {
+  (state, dispatch, view) => {
     const table = findTable(state.selection);
     if (!table) {
       return false;
     }
 
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const isColumnResizing = !!getResizePluginState(state)?.dragging;
+      const isColumnResizing = getPluginState(state)?.isKeyboardResize;
       if (isColumnResizing) {
-        tableResizingPluginCreateCommand(
-          {
-            type: 'STOP_RESIZING',
-          },
-          (originalTr) =>
-            (state.tr || originalTr).setMeta('scrollIntoView', false),
-        )(state, dispatch);
-        hideResizeHandleLine()(state, dispatch);
+        stopKeyboardColumnResizing()(state, dispatch, view);
+        return true;
       }
     }
 

package/src/commands/misc.ts

@@ -616,6 +616,7 @@ export const addResizeHandleDecorations = (
   rowIndex: number,
   columnIndex: number,
   includeTooltip: boolean,
+  isKeyboardResize?: boolean,
 ) =>
   createCommand(
     (state) => {
@@ -644,6 +645,7 @@ export const addResizeHandleDecorations = (
           resizeHandleRowIndex: rowIndex,
           resizeHandleColumnIndex: columnIndex,
           resizeHandleIncludeTooltip: includeTooltip,
+          isKeyboardResize: isKeyboardResize || false,
         },
       };
     },

package/src/commands/selection.ts

@@ -28,7 +28,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { selectColumn, selectRow } from '../commands/misc';
 import type tablePlugin from '../plugin';
-import { getPluginState as getResizePluginState } from '../pm-plugins/table-resizing/plugin-factory';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 
 export enum TableSelectionDirection {
@@ -294,8 +294,8 @@ const arrowLeftFromText =
       let isColumnResizing = false;
 
       if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-        const columResizePluginState = getResizePluginState(state) || {};
-        isColumnResizing = Boolean(columResizePluginState?.dragging);
+        const columResizePluginState = getPluginState(state) || {};
+        isColumnResizing = Boolean(columResizePluginState?.isKeyboardResize);
       }
 
       if (
@@ -343,8 +343,8 @@ const arrowRightFromText =
       let isColumnResizing = false;
 
       if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-        const columResizePluginState = getResizePluginState(state) || {};
-        isColumnResizing = Boolean(columResizePluginState?.dragging);
+        const columResizePluginState = getPluginState(state) || {};
+        isColumnResizing = Boolean(columResizePluginState?.isKeyboardResize);
       }
       if (
         isSelectionAtEndOfTable($to, selection) &&

package/src/event-handlers.ts

@@ -27,6 +27,7 @@ import {
   getSelectionRect,
   removeTable,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   addResizeHandleDecorations,
@@ -295,7 +296,16 @@ export const handleMouseOut = (
     !isResizeHandleDecoration(relatedTarget)
   ) {
     const { state, dispatch } = view;
-    return hideResizeHandleLine()(state, dispatch);
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      const { isKeyboardResize } = getPluginState(state);
+      if (isKeyboardResize) {
+        // no need to hide decoration if column resizing started by keyboard
+        return false;
+      }
+      return hideResizeHandleLine()(state, dispatch);
+    } else {
+      return hideResizeHandleLine()(state, dispatch);
+    }
   }
 
   return false;
@@ -421,6 +431,12 @@ export const handleMouseMove = (
       const { state, dispatch } = view;
       const { resizeHandleColumnIndex, resizeHandleRowIndex } =
         getPluginState(state);
+
+      const isKeyboardResize = getBooleanFF(
+        'platform.editor.a11y-column-resizing_emcvz',
+      )
+        ? getPluginState(state).isKeyboardResize
+        : false;
       const tableCell = closestElement(
         element,
         'td, th',
@@ -437,9 +453,10 @@ export const handleMouseMove = (
         const rowIndexTarget = rect.top;
 
         if (
-          columnEndIndexTarget !== resizeHandleColumnIndex ||
-          rowIndexTarget !== resizeHandleRowIndex ||
-          !hasResizeHandler({ target: element, columnEndIndexTarget })
+          (columnEndIndexTarget !== resizeHandleColumnIndex ||
+            rowIndexTarget !== resizeHandleRowIndex ||
+            !hasResizeHandler({ target: element, columnEndIndexTarget })) &&
+          !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
         ) {
           return addResizeHandleDecorations(
             rowIndexTarget,

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/pm-plugins/keymap.ts

@@ -16,6 +16,7 @@ import {
   decreaseMediaSize,
   deleteColumn,
   deleteRow,
+  escape,
   increaseMediaSize,
   moveColumnLeft,
   moveColumnRight,
@@ -45,6 +46,7 @@ import {
   activateNextResizeArea,
   changeColumnWidthByStep,
   initiateKeyboardColumnResizing,
+  stopKeyboardColumnResizing,
 } from '../commands/column-resize';
 import {
   addColumnAfter as addColumnAfterCommand,
@@ -190,6 +192,7 @@ export function keymapPlugin(
       changeColumnWidthByStep(10, getEditorContainerWidth),
       list,
     );
+    bindKeymapWithCommand(escape.common!, stopKeyboardColumnResizing(), list);
   }
 
   return keymap(list) as SafePlugin;