@atlaskit/editor-plugin-table 7.18.3 → 7.18.4

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

@@ -232,72 +232,70 @@ 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);

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/types.ts

@@ -195,7 +195,7 @@ export type TablePluginAction =
 				isHeaderRowEnabled: boolean;
 				isHeaderColumnEnabled: boolean;
 			};
-		}
+	  }
 	| {
 			type: 'HOVER_ROWS';
 			data: {
@@ -203,13 +203,13 @@ export type TablePluginAction =
 				hoveredRows: number[];
 				isInDanger?: boolean;
 			};
-		}
+	  }
 	| {
 			type: 'HOVER_MERGED_CELLS';
 			data: {
 				decorationSet: DecorationSet;
 			};
-		}
+	  }
 	| {
 			type: 'HOVER_COLUMNS';
 			data: {
@@ -217,7 +217,7 @@ export type TablePluginAction =
 				hoveredColumns: number[];
 				isInDanger?: boolean;
 			};
-		}
+	  }
 	| {
 			type: 'HOVER_TABLE';
 			data: {
@@ -226,7 +226,7 @@ export type TablePluginAction =
 				hoveredColumns: number[];
 				isInDanger?: boolean;
 			};
-		}
+	  }
 	| {
 			type: 'START_KEYBOARD_COLUMN_RESIZE';
 			data: {
@@ -236,7 +236,7 @@ export type TablePluginAction =
 				resizeHandleIncludeTooltip: boolean;
 				isKeyboardResize?: boolean;
 			};
-		}
+	  }
 	| {
 			type: 'ADD_RESIZE_HANDLE_DECORATIONS';
 			data: {
@@ -246,7 +246,7 @@ export type TablePluginAction =
 				resizeHandleIncludeTooltip: boolean;
 				isKeyboardResize?: boolean;
 			};
-		}
+	  }
 	| {
 			type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
 			data: {
@@ -255,21 +255,21 @@ export type TablePluginAction =
 				resizeHandleColumnIndex: number | undefined;
 				resizeHandleIncludeTooltip: boolean | undefined;
 			};
-		}
+	  }
 	| {
 			type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
 			data: {
 				widthToWidest: WidthToWidest | undefined;
 			};
-		}
+	  }
 	| {
 			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 } }
@@ -278,48 +278,48 @@ export type TablePluginAction =
 			data: {
 				hoveredCell: CellHoverMeta;
 			};
-		}
+	  }
 	| {
 			type: 'TABLE_HOVERED';
 			data: {
 				isTableHovered: boolean;
 			};
-		}
+	  }
 	| { type: 'SET_TARGET_CELL_POSITION'; data: { targetCellPosition?: number } }
 	| {
 			type: 'SELECT_COLUMN';
 			data: { targetCellPosition: number; decorationSet: DecorationSet };
-		}
+	  }
 	| { type: 'SHOW_INSERT_ROW_BUTTON'; data: { insertRowButtonIndex: number } }
 	| {
 			type: 'SHOW_INSERT_COLUMN_BUTTON';
 			data: { insertColumnButtonIndex: number };
-		}
+	  }
 	| {
 			type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON';
-		}
+	  }
 	| { type: 'TOGGLE_CONTEXTUAL_MENU' }
 	| {
 			type: 'SET_CELL_MENU_OPEN';
 			data: {
 				isCellMenuOpenByKeyboard: boolean;
 			};
-		};
+	  };
 
 export type ColumnResizingPluginAction =
 	| {
 			type: 'SET_RESIZE_HANDLE_POSITION';
 			data: { resizeHandlePos: number | null };
-		}
+	  }
 	| { type: 'STOP_RESIZING' }
 	| {
 			type: 'SET_DRAGGING';
 			data: { dragging: { startX: number; startWidth: number } | null };
-		}
+	  }
 	| {
 			type: 'SET_LAST_CLICK';
 			data: { lastClick: { x: number; y: number; time: number } | null };
-		};
+	  };
 
 export enum TableDecorations {
 	/** Classic controls */

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -116,7 +116,6 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 	};
 	private dropdownMenuRef = React.createRef<HTMLDivElement>();
 
-
 	componentDidMount() {
 		if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
 			// ArrowKeyNavigationProvider in DropdownMenu expects that menu handle will stay focused
@@ -127,8 +126,8 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			if (isCellMenuOpenByKeyboard) {
 				this.setState({
 					...this.state,
-					isOpenAllowed: isCellMenuOpenByKeyboard
-				})
+					isOpenAllowed: isCellMenuOpenByKeyboard,
+				});
 			}
 		}
 	}
@@ -179,10 +178,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					}
 					shouldFocusFirstItem={
 						getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
-							?
-							() => {
-								return Boolean(isCellMenuOpenByKeyboard);
-							}
+							? () => {
+									return Boolean(isCellMenuOpenByKeyboard);
+								}
 							: undefined
 					}
 					boundariesElement={boundariesElement}