@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

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

@@ -463,7 +463,11 @@ export const setMultipleCellAttrs =
     return false;
   };
 
-export const selectColumn = (column: number, expand?: boolean) =>
+export const selectColumn = (
+  column: number,
+  expand?: boolean,
+  triggeredByKeyboard = false,
+) =>
   createCommand(
     (state) => {
       const cells = getCellsInColumn(column)(state.tr.selection);
@@ -487,7 +491,9 @@ export const selectColumn = (column: number, expand?: boolean) =>
       };
     },
     (tr: Transaction) =>
-      selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false),
+      selectColumnTransform(column, expand)(tr)
+        .setMeta('addToHistory', false)
+        .setMeta('selectedColumnViaKeyboard', triggeredByKeyboard),
   );
 
 export const selectColumns = (columnIndexes: number[]) =>
@@ -537,7 +543,11 @@ export const selectColumns = (columnIndexes: number[]) =>
     },
   );
 
-export const selectRow = (row: number, expand?: boolean) =>
+export const selectRow = (
+  row: number,
+  expand?: boolean,
+  triggeredByKeyboard = false,
+) =>
   createCommand(
     (state) => {
       let targetCellPosition;
@@ -548,7 +558,10 @@ export const selectRow = (row: number, expand?: boolean) =>
 
       return { type: 'SET_TARGET_CELL_POSITION', data: { targetCellPosition } };
     },
-    (tr) => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false),
+    (tr) =>
+      selectRowTransform(row, expand)(tr)
+        .setMeta('addToHistory', false)
+        .setMeta('selectedRowViaKeyboard', triggeredByKeyboard),
   );
 
 export const selectRows = (rowIndexes: number[]) =>
@@ -616,6 +629,7 @@ export const addResizeHandleDecorations = (
   rowIndex: number,
   columnIndex: number,
   includeTooltip: boolean,
+  isKeyboardResize?: boolean,
 ) =>
   createCommand(
     (state) => {
@@ -644,6 +658,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 {
@@ -157,7 +157,7 @@ export const selectColumns =
       | ExtractInjectionAPI<typeof tablePlugin>['selection']
       | undefined,
   ) =>
-  (): Command =>
+  (triggeredByKeyboard = false): Command =>
   (state, dispatch) => {
     const { selection } = state;
     const table = findTable(selection);
@@ -170,7 +170,11 @@ export const selectColumns =
       })(state, dispatch);
     }
     if (table && rect) {
-      return selectColumn(rect.left)(state, dispatch);
+      return selectColumn(
+        rect.left,
+        undefined,
+        triggeredByKeyboard,
+      )(state, dispatch);
     }
     return false;
   };
@@ -181,7 +185,7 @@ export const selectRows =
       | ExtractInjectionAPI<typeof tablePlugin>['selection']
       | undefined,
   ) =>
-  (): Command =>
+  (triggeredByKeyboard = false): Command =>
   (state, dispatch) => {
     const { selection } = state;
     const table = findTable(selection);
@@ -194,7 +198,11 @@ export const selectRows =
       })(state, dispatch);
     }
     if (table && rect) {
-      return selectRow(rect.top)(state, dispatch);
+      return selectRow(
+        rect.top,
+        undefined,
+        triggeredByKeyboard,
+      )(state, dispatch);
     }
     return false;
   };
@@ -294,8 +302,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 +351,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/actions.ts

@@ -37,6 +37,7 @@ export type DragAndDropToggleDragMenuAction = DragAndDropAction<
     isDragMenuOpen: boolean;
     direction: TableDirection;
     index: number;
+    isKeyboardModeActive: boolean;
   }
 >;
 

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

@@ -18,6 +18,7 @@ import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import type { TriggerType } from './types';
 
 // TODO: This command is a placeholder example. Please replace this if required.
 export const getDecorations = (state: EditorState): DecorationSet => {
@@ -122,6 +123,7 @@ export const toggleDragMenu = (
   isDragMenuOpen: boolean | undefined,
   direction?: TableDirection,
   index?: number,
+  trigger: TriggerType = 'mouse',
 ) =>
   createCommand(
     (state) => {
@@ -165,6 +167,7 @@ export const toggleDragMenu = (
           isDragMenuOpen: updatedMenuOpenState,
           direction: direction ?? previousDragMenuDirection,
           index: index ?? previousDragMenuIndex,
+          isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard',
         },
       };
     },

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -242,6 +242,7 @@ export const createPlugin = (
       isDragMenuOpen: false,
       dragMenuIndex: 0,
       isDragging: false,
+      isKeyboardModeActive: false,
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -251,6 +252,21 @@ export const createPlugin = (
         getTablePluginState(newState);
       const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
 
+      transactions.forEach((transaction) => {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            (button as HTMLButtonElement).focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-column');
+          if (button) {
+            (button as HTMLButtonElement).focus();
+          }
+        }
+      });
+
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
       // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
@@ -296,6 +312,37 @@ export const createPlugin = (
         const { decorationSet } = getPluginState(state);
         return decorationSet;
       },
+      handleKeyDown: (view, event) => {
+        const isDragHandleFocused = [
+          'drag-handle-button-row',
+          'drag-handle-button-column',
+        ].includes(((event.target as HTMLElement) || null)?.id);
+        const keysToTrap = ['Enter', ' '];
+        const keysToTrapWhen = [
+          'ArrowUp',
+          'ArrowDown',
+          'ArrowLeft',
+          'ArrowRight',
+        ];
+        const { isDragMenuOpen } = getPluginState(view.state);
+
+        // drag handle is focused, and user presses any key return them back to editing
+        if (
+          isDragHandleFocused &&
+          !isDragMenuOpen &&
+          !keysToTrap.includes(event.key)
+        ) {
+          view.dom.focus();
+          return true;
+        }
+
+        if (
+          (isDragHandleFocused && keysToTrap.includes(event.key)) ||
+          (isDragMenuOpen && keysToTrapWhen.includes(event.key))
+        ) {
+          return true;
+        }
+      },
     },
   });
 };

package/src/pm-plugins/drag-and-drop/reducer.ts

@@ -30,6 +30,7 @@ export default (
         isDragMenuOpen: action.data.isDragMenuOpen,
         dragMenuDirection: action.data.direction,
         dragMenuIndex: action.data.index,
+        isKeyboardModeActive: action.data.isKeyboardModeActive,
       };
     default:
       return pluginState;

package/src/pm-plugins/drag-and-drop/types.ts

@@ -12,4 +12,7 @@ export interface DragAndDropPluginState {
   dragMenuDirection?: TableDirection;
   dragMenuIndex: number;
   isDragging: boolean;
+  isKeyboardModeActive: boolean;
 }
+
+export type TriggerType = 'mouse' | 'keyboard';

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;