@atlaskit/editor-plugin-table 7.18.2 → 7.18.4

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

@@ -8,7 +8,6 @@ import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import type { Direction } from '@atlaskit/editor-tables/types';
 import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertRowWithAnalytics } from '../commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -31,15 +30,13 @@ export const goToNextCell =
 			return false;
 		}
 
-		if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-			const isColumnResizing = getPluginState(state)?.isKeyboardResize;
-			if (isColumnResizing) {
-				stopKeyboardColumnResizing({
-					ariaNotify: ariaNotify,
-					getIntl: getIntl,
-				})(state, dispatch, view);
-				return true;
-			}
+		const isColumnResizing = getPluginState(state)?.isKeyboardResize;
+		if (isColumnResizing) {
+			stopKeyboardColumnResizing({
+				ariaNotify: ariaNotify,
+				getIntl: getIntl,
+			})(state, dispatch, view);
+			return true;
 		}
 
 		const map = TableMap.get(table.node);

package/src/commands/index.ts

@@ -40,6 +40,7 @@ export {
 	addBoldInEmptyHeaderCells,
 	addResizeHandleDecorations,
 	updateWidthToWidest,
+	setFocusToCellMenu,
 } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';

package/src/commands/misc.ts

@@ -773,3 +773,16 @@ export const setTableAlignmentWithTableContentWithPos =
 
 		return tr;
 	};
+
+export const setFocusToCellMenu = (isCellMenuOpenByKeyboard = true, originalTr?: Transaction) =>
+	createCommand(
+		() => {
+			return {
+				type: 'SET_CELL_MENU_OPEN',
+				data: {
+					isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+				},
+			};
+		},
+		(tr) => (originalTr || tr).setMeta('addToHistory', false),
+	);

package/src/commands/selection.ts

@@ -18,7 +18,6 @@ import {
 	isTableSelected,
 	selectedRect,
 } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { selectColumn, selectRow } from '../commands/misc';
 import type tablePlugin from '../plugin';
@@ -219,12 +218,9 @@ const arrowLeftFromText =
 		const table = findTable(selection);
 		if (table) {
 			const { $from } = selection;
-			let isColumnResizing = false;
 
-			if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-				const columResizePluginState = getPluginState(state) || {};
-				isColumnResizing = Boolean(columResizePluginState?.isKeyboardResize);
-			}
+			const columResizePluginState = getPluginState(state) || {};
+			const isColumnResizing = Boolean(columResizePluginState?.isKeyboardResize);
 
 			if (
 				isSelectionAtStartOfTable($from, selection) &&
@@ -261,12 +257,9 @@ const arrowRightFromText =
 		const table = findTable(selection);
 		if (table) {
 			const { $to } = selection;
-			let isColumnResizing = false;
 
-			if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-				const columResizePluginState = getPluginState(state) || {};
-				isColumnResizing = Boolean(columResizePluginState?.isKeyboardResize);
-			}
+			const columResizePluginState = getPluginState(state) || {};
+			const isColumnResizing = Boolean(columResizePluginState?.isKeyboardResize);
 			if (
 				isSelectionAtEndOfTable($to, selection) &&
 				$to.parent.type.name === 'paragraph' &&

package/src/event-handlers.ts

@@ -286,16 +286,12 @@ export const handleMouseOut = (view: EditorView, mouseEvent: Event): boolean =>
 	// we don't need to hide the resize handle decoration
 	if (isResizeHandleDecoration(target) && !isResizeHandleDecoration(relatedTarget)) {
 		const { state, dispatch } = view;
-		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);
+		const { isKeyboardResize } = getPluginState(state);
+		if (isKeyboardResize) {
+			// no need to hide decoration if column resizing started by keyboard
+			return false;
 		}
+		return hideResizeHandleLine()(state, dispatch);
 	}
 
 	return false;
@@ -401,9 +397,7 @@ const handleMouseMoveDebounce = rafSchedule(
 				const { state, dispatch } = view;
 				const { resizeHandleColumnIndex, resizeHandleRowIndex } = getPluginState(state);
 
-				const isKeyboardResize = getBooleanFF('platform.editor.a11y-column-resizing_emcvz')
-					? getPluginState(state).isKeyboardResize
-					: false;
+				const isKeyboardResize = getPluginState(state).isKeyboardResize;
 				const tableCell = closestElement(element, 'td, th') as HTMLTableCellElement;
 				const cellStartPosition = view.posAtDOM(tableCell, 0);
 				const rect = findCellRectClosestToPos(state.doc.resolve(cellStartPosition));

package/src/plugin.tsx

@@ -514,6 +514,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 								isHeaderRowEnabled,
 								isDragAndDropEnabled,
 								tableWrapperTarget,
+								isCellMenuOpenByKeyboard,
 							} = tablePluginState!;
 
 							const { allowControls } = pluginConfig;
@@ -525,7 +526,9 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							return (
 								<>
 									{targetCellPosition &&
-										tableRef &&
+										(tableRef ||
+											(getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') &&
+												isCellMenuOpenByKeyboard)) &&
 										!isResizing &&
 										options &&
 										options.allowContextualMenu && (
@@ -540,6 +543,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 												isContextualMenuOpen={isContextualMenuOpen}
 												stickyHeader={stickyHeader}
 												tableWrapper={tableWrapperTarget}
+												isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
 											/>
 										)}
 									{allowControls && (
@@ -578,6 +582,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											getEditorFeatureFlags={
 												options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags
 											}
+											isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
 										/>
 									)}
 									{isDragAndDropEnabled && (

package/src/pm-plugins/keymap.ts

@@ -17,6 +17,7 @@ import {
 	deleteColumn,
 	deleteRow,
 	escape,
+	focusToContextMenuTrigger,
 	increaseMediaSize,
 	moveColumnLeft,
 	moveColumnRight,
@@ -35,7 +36,7 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { goToNextCell, moveCursorBackward } from '../commands';
+import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from '../commands';
 import {
 	addRowAroundSelection,
 	changeColumnWidthByStepWithAnalytics,
@@ -231,71 +232,73 @@ export function keymapPlugin(
 		);
 	}
 
-	if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-		bindKeymapWithCommand(
-			startColumnResizing.common!,
-			initiateKeyboardColumnResizing({
-				ariaNotify: ariaNotifyPlugin,
-				getIntl: getIntl,
-			}),
-			list,
-		);
+	bindKeymapWithCommand(
+		startColumnResizing.common!,
+		initiateKeyboardColumnResizing({
+			ariaNotify: ariaNotifyPlugin,
+			getIntl: getIntl,
+		}),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			moveRight.common!,
-			activateNextResizeArea({
-				direction: 1,
-				ariaNotify: ariaNotifyPlugin,
-				getIntl: getIntl,
-			}),
-			list,
-		);
+	bindKeymapWithCommand(
+		moveRight.common!,
+		activateNextResizeArea({
+			direction: 1,
+			ariaNotify: ariaNotifyPlugin,
+			getIntl: getIntl,
+		}),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			moveLeft.common!,
-			activateNextResizeArea({
-				direction: -1,
-				ariaNotify: ariaNotifyPlugin,
-				getIntl: getIntl,
-			}),
-			list,
-		);
+	bindKeymapWithCommand(
+		moveLeft.common!,
+		activateNextResizeArea({
+			direction: -1,
+			ariaNotify: ariaNotifyPlugin,
+			getIntl: getIntl,
+		}),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			decreaseMediaSize.common!,
-			changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
-				-10,
-				getEditorContainerWidth,
-				isTableScalingEnabled,
-				isTableFixedColumnWidthsOptionEnabled,
-				INPUT_METHOD.SHORTCUT,
-				ariaNotifyPlugin,
-				getIntl,
-			),
-			list,
-		);
+	bindKeymapWithCommand(
+		decreaseMediaSize.common!,
+		changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
+			-10,
+			getEditorContainerWidth,
+			isTableScalingEnabled,
+			isTableFixedColumnWidthsOptionEnabled,
+			INPUT_METHOD.SHORTCUT,
+			ariaNotifyPlugin,
+			getIntl,
+		),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			increaseMediaSize.common!,
-			changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
-				10,
-				getEditorContainerWidth,
-				isTableScalingEnabled,
-				isTableFixedColumnWidthsOptionEnabled,
-				INPUT_METHOD.SHORTCUT,
-				ariaNotifyPlugin,
-				getIntl,
-			),
-			list,
-		);
-		bindKeymapWithCommand(
-			escape.common!,
-			stopKeyboardColumnResizing({
-				ariaNotify: ariaNotifyPlugin,
-				getIntl: getIntl,
-			}),
-			list,
-		);
+	bindKeymapWithCommand(
+		increaseMediaSize.common!,
+		changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
+			10,
+			getEditorContainerWidth,
+			isTableScalingEnabled,
+			isTableFixedColumnWidthsOptionEnabled,
+			INPUT_METHOD.SHORTCUT,
+			ariaNotifyPlugin,
+			getIntl,
+		),
+		list,
+	);
+	bindKeymapWithCommand(
+		escape.common!,
+		stopKeyboardColumnResizing({
+			ariaNotify: ariaNotifyPlugin,
+			getIntl: getIntl,
+		}),
+		list,
+	);
+
+	if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+		bindKeymapWithCommand(focusToContextMenuTrigger.common!, setFocusToCellMenu(), list);
 	}
 
 	return keymap(list) as SafePlugin;

package/src/pm-plugins/main.ts

@@ -193,33 +193,31 @@ export const createPlugin = (
 								(parent as HTMLElement).querySelector<HTMLTableElement>('table') || undefined;
 						}
 						const tableNode = findTable(state.selection);
-						if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-							// when keyboard 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({
-											ariaNotify: ariaNotifyPlugin,
-											getIntl: getIntl,
-										})(state, dispatch);
-									}
-								} else if (!tableNode) {
-									// selection outside of table
+						// when keyboard 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({
 										ariaNotify: ariaNotifyPlugin,
 										getIntl: getIntl,
 									})(state, dispatch);
 								}
+							} else if (!tableNode) {
+								// selection outside of table
+								stopKeyboardColumnResizing({
+									ariaNotify: ariaNotifyPlugin,
+									getIntl: getIntl,
+								})(state, dispatch);
 							}
 						}
 					}
@@ -337,15 +335,13 @@ export const createPlugin = (
 			},
 			handleTextInput: (view, _from, _to, text) => {
 				const { state, dispatch } = view;
-				if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-					const { isKeyboardResize } = getPluginState(state);
-					if (isKeyboardResize) {
-						stopKeyboardColumnResizing({
-							ariaNotify: ariaNotifyPlugin,
-							getIntl: getIntl,
-						})(state, dispatch);
-						return false;
-					}
+				const { isKeyboardResize } = getPluginState(state);
+				if (isKeyboardResize) {
+					stopKeyboardColumnResizing({
+						ariaNotify: ariaNotifyPlugin,
+						getIntl: getIntl,
+					})(state, dispatch);
+					return false;
 				}
 				const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
 				if (tr.selectionSet) {

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

@@ -152,15 +152,11 @@ export const handleMouseDown = (
 
 		// If we let go in the same place we started, don't need to do anything.
 		if (dragging && clientX === dragging.startX) {
-			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);
-				}
+			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);
 			}
@@ -255,15 +251,11 @@ export const handleMouseDown = (
 					},
 				})(tr);
 			}
-			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({ originalTr: tr })(state, dispatch, view);
-				} else {
-					return stopResizing(tr)(state, dispatch);
-				}
+			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({ originalTr: tr })(state, dispatch, view);
 			} else {
 				return stopResizing(tr)(state, dispatch);
 			}
@@ -280,7 +272,7 @@ export const handleMouseDown = (
 			!dragging ||
 			resizeHandlePos === null ||
 			!pointsAtCell(state.doc.resolve(resizeHandlePos)) ||
-			(!isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz'))
+			!isTableHovered
 		) {
 			return finish(event);
 		}

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

@@ -4,7 +4,6 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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';
@@ -55,15 +54,13 @@ export function createPlugin(
 
 					const { dragging } = getPluginState(state);
 					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;
-						}
+					/*
+						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)) {

package/src/reducer.ts

@@ -135,6 +135,7 @@ export default (pluginState: TablePluginState, action: TablePluginAction): Table
 		case 'HOVER_CELL':
 		case 'SHOW_RESIZE_HANDLE_LINE':
 		case 'SET_EDITOR_FOCUS':
+		case 'SET_CELL_MENU_OPEN':
 			return { ...pluginState, ...action.data };
 
 		default:

package/src/types.ts

@@ -178,6 +178,7 @@ export interface TablePluginState {
 	// use options.isTableScalingEnabled and avoid using pluginState.isTableScalingEnabled or
 	// const { isTableScalingEnabled } = getPluginState(state) for that purpose.
 	isTableScalingEnabled?: boolean;
+	isCellMenuOpenByKeyboard?: boolean;
 }
 
 export type TablePluginAction =
@@ -297,7 +298,13 @@ export type TablePluginAction =
 	| {
 			type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON';
 	  }
-	| { type: 'TOGGLE_CONTEXTUAL_MENU' };
+	| { type: 'TOGGLE_CONTEXTUAL_MENU' }
+	| {
+			type: 'SET_CELL_MENU_OPEN';
+			data: {
+				isCellMenuOpenByKeyboard: boolean;
+			};
+	  };
 
 export type ColumnResizingPluginAction =
 	| {

package/src/ui/FloatingContextualButton/index.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -17,6 +17,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { toggleContextualMenu } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -37,6 +38,7 @@ export interface Props {
 	isNumberColumnEnabled?: boolean;
 	stickyHeader?: RowStickyState;
 	dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+	isCellMenuOpenByKeyboard?: boolean;
 }
 
 const BUTTON_OFFSET = 3;
@@ -50,6 +52,7 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 		stickyHeader,
 		tableWrapper,
 		targetCellPosition,
+		isCellMenuOpenByKeyboard,
 		intl: { formatMessage },
 	} = props; //  : Props & WrappedComponentProps
 
@@ -69,6 +72,16 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 	let targetCellRef: Node | undefined;
 	targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
 
+	useEffect(() => {
+		if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+			if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
+				const { state, dispatch } = editorView;
+				// open the menu when the keyboard shortcut is pressed
+				toggleContextualMenu()(state, dispatch);
+			}
+		}
+	}, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
+
 	if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
 		return null;
 	}
@@ -92,6 +105,11 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 				onClick={handleClick}
 				iconBefore={<ExpandIcon label="" />}
 				aria-label={labelCellOptions}
+				aria-expanded={
+					getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
+						? isContextualMenuOpen
+						: undefined
+				}
 			/>
 		</div>
 	);