@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

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

@@ -43,13 +43,13 @@ export function tableSelectionKeymapPlugin(
   if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
     bindKeymapArrayWithCommand(
       selectColumn,
-      selectColumns(editorSelectionAPI)(),
+      selectColumns(editorSelectionAPI)(true),
       list,
     );
 
     bindKeymapArrayWithCommand(
       selectRow,
-      selectRows(editorSelectionAPI)(),
+      selectRows(editorSelectionAPI)(true),
       list,
     );
   }

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/ui/DragHandle/HandleIconComponent.tsx

@@ -8,19 +8,12 @@ import {
 
 type HandleIconProps = {
   forceDefaultHandle: boolean;
-  isRowHandleHovered: boolean;
-  isColumnHandleHovered: boolean;
+  isHandleHovered: boolean;
   hasMergedCells: boolean;
 };
 
 export const HandleIconComponent = (props: HandleIconProps) => {
-  const {
-    forceDefaultHandle,
-    isRowHandleHovered,
-    isColumnHandleHovered,
-    hasMergedCells,
-  } = props;
-  const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
+  const { forceDefaultHandle, isHandleHovered, hasMergedCells } = props;
 
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />;

package/src/ui/DragHandle/index.tsx

@@ -13,6 +13,8 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { token } from '@atlaskit/tokens';
 
+import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
+import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
@@ -22,7 +24,12 @@ import { DragPreview } from '../DragPreview';
 
 import { HandleIconComponent } from './HandleIconComponent';
 
-type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
+export type DragHandleAppearance =
+  | 'default'
+  | 'selected'
+  | 'disabled'
+  | 'danger'
+  | 'placeholder';
 
 type DragHandleProps = {
   tableLocalId: string;
@@ -35,7 +42,10 @@ type DragHandleProps = {
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
-  onMouseUp?: MouseEventHandler;
+  toggleDragMenu?: (
+    trigger: TriggerType,
+    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
   editorView: EditorView;
   isDragMenuTarget: boolean; // this is identify which current handle component is
 };
@@ -51,7 +61,7 @@ const DragHandleComponent = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
-  onMouseUp,
+  toggleDragMenu,
   onClick,
   editorView,
   intl: { formatMessage },
@@ -60,10 +70,13 @@ const DragHandleComponent = ({
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
+  const {
+    state,
+    state: { selection },
+  } = editorView;
+  const { hoveredColumns, hoveredRows } = getPluginState(state);
+  const { isDragMenuOpen } = getDnDPluginState(state);
 
-  const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
-
-  const { selection } = editorView.state;
   const isRow = direction === 'row';
   const isColumn = direction === 'column';
 
@@ -80,8 +93,7 @@ const DragHandleComponent = ({
 
   const handleIconProps = {
     forceDefaultHandle,
-    isColumnHandleHovered,
-    isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells,
   };
 
@@ -179,24 +191,33 @@ const DragHandleComponent = ({
         aria-label={formatMessage(
           isRow ? messages.rowDragHandle : messages.columnDragHandle,
         )}
+        aria-expanded={isDragMenuOpen && isDragMenuTarget ? 'true' : 'false'}
+        aria-haspopup="menu"
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
         onMouseUp={(e) => {
           // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
           // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
           editorView.focus();
-          onMouseUp && onMouseUp(e);
+          toggleDragMenu && toggleDragMenu('mouse', e);
         }}
         onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            toggleDragMenu && toggleDragMenu('keyboard');
+          }
+        }}
       >
-        {/* cannot block pointer events in Firefox as it breaks Dragging functionality */}
-        {browser.gecko ? (
-          <HandleIconComponent {...handleIconProps} />
-        ) : (
-          <span style={{ pointerEvents: 'none' }}>
+        {appearance !== 'placeholder' ? (
+          //  cannot block pointer events in Firefox as it breaks Dragging functionality
+          browser.gecko ? (
             <HandleIconComponent {...handleIconProps} />
-          </span>
-        )}
+          ) : (
+            <span style={{ pointerEvents: 'none' }}>
+              <HandleIconComponent {...handleIconProps} />
+            </span>
+          )
+        ) : null}
       </button>
       {previewContainer &&
         previewWidth !== undefined &&