@atlaskit/editor-plugin-table 7.20.1 → 7.21.0

package/src/pm-plugins/main.ts

@@ -51,9 +51,12 @@ import {
 	whenTableInFocus,
 	withCellTracking,
 } from '../event-handlers';
-import { createTableView } from '../nodeviews/table';
-import TableCell from '../nodeviews/TableCell';
-import TableRow from '../nodeviews/TableRow';
+import {
+	lazyTableCellView,
+	lazyTableHeaderView,
+	lazyTableRowView,
+	lazyTableView,
+} from '../nodeviews/lazy-node-views';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import type {
@@ -350,22 +353,18 @@ export const createPlugin = (
 				return false;
 			},
 			nodeViews: {
-				table: (node, view, getPos) =>
-					createTableView(
-						node,
-						view,
-						getPos,
-						portalProviderAPI,
-						eventDispatcher,
-						getEditorContainerWidth,
-						getEditorFeatureFlags,
-						dispatchAnalyticsEvent,
-						pluginInjectionApi,
-						isTableAlignmentEnabled,
-					),
-				tableRow: (node, view, getPos) => new TableRow(node, view, getPos, eventDispatcher),
-				tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher),
-				tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher),
+				table: lazyTableView({
+					portalProviderAPI,
+					eventDispatcher,
+					getEditorContainerWidth,
+					getEditorFeatureFlags,
+					dispatchAnalyticsEvent,
+					pluginInjectionApi,
+					isTableAlignmentEnabled,
+				}),
+				tableRow: lazyTableRowView({ eventDispatcher }),
+				tableCell: lazyTableCellView({ eventDispatcher }),
+				tableHeader: lazyTableHeaderView({ eventDispatcher }),
 			},
 			handleDOMEvents: {
 				focus: handleFocus,

package/src/ui/FloatingContextualButton/index.tsx

@@ -9,6 +9,7 @@ import { injectIntl } from 'react-intl-next';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { focusToContextMenuTrigger } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
@@ -17,7 +18,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 { fg } from '@atlaskit/platform-feature-flags';
 
 import { toggleContextualMenu } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -73,7 +74,7 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 	targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
 
 	useEffect(() => {
-		if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform_editor_a11y_table_context_menu')) {
 			if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
 				const { state, dispatch } = editorView;
 				// open the menu when the keyboard shortcut is pressed
@@ -102,13 +103,14 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 				className={ClassName.CONTEXTUAL_MENU_BUTTON}
 				selected={isContextualMenuOpen}
 				title={labelCellOptions}
+				keymap={
+					fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined
+				}
 				onClick={handleClick}
 				iconBefore={<ExpandIcon label="" />}
 				aria-label={labelCellOptions}
 				aria-expanded={
-					getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
-						? isContextualMenuOpen
-						: undefined
+					fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined
 				}
 			/>
 		</div>

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -117,7 +117,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 	private dropdownMenuRef = React.createRef<HTMLDivElement>();
 
 	componentDidMount() {
-		if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform_editor_a11y_table_context_menu')) {
 			// ArrowKeyNavigationProvider in DropdownMenu expects that menu handle will stay focused
 			// until user pressed ArrowDown.
 			// Behavior above fails the A11Y requirement about first item in menu should be focused immediately.
@@ -141,7 +141,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			: this.createOriginalContextMenuItems();
 		let isOpenAllowed = false;
 
-		if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform_editor_a11y_table_context_menu')) {
 			isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
 		} else {
 			isOpenAllowed = isOpen;
@@ -162,7 +162,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 						disableArrowKeyNavigation:
 							isCellMenuOpenByKeyboard &&
 							!this.state.isSubmenuOpen &&
-							fg('platform.editor.a11y-table-context-menu_y4c9c')
+							fg('platform_editor_a11y_table_context_menu')
 								? false
 								: true,
 					}}
@@ -177,7 +177,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 						isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
 					}
 					shouldFocusFirstItem={
-						fg('platform.editor.a11y-table-context-menu_y4c9c')
+						fg('platform_editor_a11y_table_context_menu')
 							? () => {
 									return Boolean(isCellMenuOpenByKeyboard);
 								}
@@ -187,7 +187,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					offset={offset}
 					section={isDragAndDropEnabled ? { hasSeparator: true } : undefined}
 					allowEnterDefaultBehavior={
-						fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
+						fg('platform_editor_a11y_table_context_menu') ? this.state.isSubmenuOpen : false
 					}
 				/>
 			</div>
@@ -227,7 +227,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			let selectedRowIndex;
 			let selectedColumnIndex;
 
-			if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+			if (fg('platform_editor_a11y_table_context_menu')) {
 				const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(
 					cellBackgroundColorPalette,
 					background!,
@@ -263,7 +263,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 									: ClassName.CONTEXTUAL_MENU_ICON
 							}
 						/>
-						{fg('platform.editor.a11y-table-context-menu_y4c9c')
+						{fg('platform_editor_a11y_table_context_menu')
 							? isSubmenuOpen && (
 									<div
 										// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -318,9 +318,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 								)}
 					</div>
 				),
-				'aria-expanded': fg('platform.editor.a11y-table-context-menu_y4c9c')
-					? isSubmenuOpen
-					: undefined,
+				'aria-expanded': fg('platform_editor_a11y_table_context_menu') ? isSubmenuOpen : undefined,
 			} as MenuItem;
 		}
 	};
@@ -650,7 +648,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			isCellMenuOpenByKeyboard &&
 			(item.value.name !== 'background' ||
 				(item.value.name === 'background' && this.state.isSubmenuOpen)) &&
-			fg('platform.editor.a11y-table-context-menu_y4c9c')
+			fg('platform_editor_a11y_table_context_menu')
 		) {
 			const { tr } = state;
 			tr.setMeta(tablePluginKey, {
@@ -767,7 +765,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				if (
 					isCellMenuOpenByKeyboard &&
 					!this.state.isSubmenuOpen &&
-					fg('platform.editor.a11y-table-context-menu_y4c9c')
+					fg('platform_editor_a11y_table_context_menu')
 				) {
 					this.setState({ isSubmenuOpen: true });
 				}
@@ -798,7 +796,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			isCellMenuOpenByKeyboard,
 		} = this.props;
 
-		if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform_editor_a11y_table_context_menu')) {
 			if (payload) {
 				const { event } = payload;
 				if (event && event instanceof KeyboardEvent) {