@atlaskit/editor-plugin-table 7.2.3 → 7.3.0

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/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;

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