@atlaskit/editor-plugin-table 7.20.2 → 7.21.1

package/src/nodeviews/lazy-node-views.ts

@@ -0,0 +1,196 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import type { PluginInjectionAPI } from '../types';
+
+// TODO: Clean up ED-23976
+import { createTableView } from './table';
+import TableCell from './TableCell';
+import TableRow from './TableRow';
+
+type TableViewOptions = {
+	portalProviderAPI: PortalProviderAPI;
+	eventDispatcher: EventDispatcher;
+	getEditorContainerWidth: GetEditorContainerWidth;
+	getEditorFeatureFlags: GetEditorFeatureFlags;
+	dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+	pluginInjectionApi?: PluginInjectionAPI;
+	isTableAlignmentEnabled?: boolean;
+};
+
+export const lazyTableView = (options: TableViewOptions) => {
+	if (!fg('platform_editor_lazy-node-views')) {
+		return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
+			return createTableView(
+				node,
+				view,
+				getPos,
+				options.portalProviderAPI,
+				options.eventDispatcher,
+				options.getEditorContainerWidth,
+				options.getEditorFeatureFlags,
+				options.dispatchAnalyticsEvent,
+				options.pluginInjectionApi,
+				options.isTableAlignmentEnabled,
+			);
+		};
+	}
+
+	const loader = () => {
+		const result = import(
+			/* webpackChunkName: "@atlaskit-internal_editor-plugin-table_nodeview" */
+			'./table'
+		).then(({ createTableView }) => {
+			return (
+				node: PMNode,
+				view: EditorView,
+				getPos: () => number | undefined,
+				decorations: readonly Decoration[],
+				getNodeViewOptions: () => TableViewOptions,
+			) => {
+				const {
+					portalProviderAPI,
+					eventDispatcher,
+					getEditorContainerWidth,
+					getEditorFeatureFlags,
+					dispatchAnalyticsEvent,
+					pluginInjectionApi,
+					isTableAlignmentEnabled,
+				} = getNodeViewOptions();
+
+				return createTableView(
+					node,
+					view,
+					getPos,
+					portalProviderAPI,
+					eventDispatcher,
+					getEditorContainerWidth,
+					getEditorFeatureFlags,
+					dispatchAnalyticsEvent,
+					pluginInjectionApi,
+					isTableAlignmentEnabled,
+				);
+			};
+		});
+
+		return result;
+	};
+	return withLazyLoading({
+		nodeName: 'table',
+		getNodeViewOptions: () => options,
+		loader,
+	});
+};
+
+type TableCellViewOptions = {
+	eventDispatcher: EventDispatcher;
+};
+export const lazyTableCellView = (options: TableCellViewOptions) => {
+	if (!fg('platform_editor_lazy-node-views')) {
+		return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
+			return new TableCell(node, view, getPos, options.eventDispatcher);
+		};
+	}
+
+	const loader = () => {
+		const result = import(
+			/* webpackChunkName: "@atlaskit-internal_editor-plugin-table_nodeview" */
+			'./TableCell'
+		).then(({ default: TableCell }) => {
+			return (
+				node: PMNode,
+				view: EditorView,
+				getPos: () => number | undefined,
+				decorations: readonly Decoration[],
+				getNodeViewOptions: () => TableCellViewOptions,
+			) => {
+				const { eventDispatcher } = getNodeViewOptions();
+
+				return new TableCell(node, view, getPos, eventDispatcher);
+			};
+		});
+
+		return result;
+	};
+
+	return withLazyLoading({
+		nodeName: 'tableCell',
+		getNodeViewOptions: () => options,
+		loader,
+	});
+};
+
+export const lazyTableHeaderView = (options: TableCellViewOptions) => {
+	if (!fg('platform_editor_lazy-node-views')) {
+		return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
+			return new TableCell(node, view, getPos, options.eventDispatcher);
+		};
+	}
+
+	const loader = () => {
+		const result = import(
+			/* webpackChunkName: "@atlaskit-internal_editor-plugin-table-cell_nodeview" */
+			'./TableCell'
+		).then(({ default: TableCell }) => {
+			return (
+				node: PMNode,
+				view: EditorView,
+				getPos: () => number | undefined,
+				decorations: readonly Decoration[],
+				getNodeViewOptions: () => TableCellViewOptions,
+			) => {
+				const { eventDispatcher } = getNodeViewOptions();
+
+				return new TableCell(node, view, getPos, eventDispatcher);
+			};
+		});
+
+		return result;
+	};
+
+	return withLazyLoading({
+		nodeName: 'tableHeader',
+		getNodeViewOptions: () => options,
+		loader,
+	});
+};
+
+export const lazyTableRowView = (options: TableCellViewOptions) => {
+	if (!fg('platform_editor_lazy-node-views')) {
+		return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
+			return new TableRow(node, view, getPos, options.eventDispatcher);
+		};
+	}
+
+	const loader = () => {
+		const result = import(
+			/* webpackChunkName: "@atlaskit-internal_editor-plugin-table-row_nodeview" */
+			'./TableRow'
+		).then(({ default: TableRow }) => {
+			return (
+				node: PMNode,
+				view: EditorView,
+				getPos: () => number | undefined,
+				decorations: readonly Decoration[],
+				getNodeViewOptions: () => TableCellViewOptions,
+			) => {
+				const { eventDispatcher } = getNodeViewOptions();
+
+				return new TableRow(node, view, getPos, eventDispatcher);
+			};
+		});
+
+		return result;
+	};
+	return withLazyLoading({
+		nodeName: 'tableRow',
+		getNodeViewOptions: () => options,
+		loader,
+	});
+};

package/src/plugin.tsx

@@ -34,6 +34,7 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -66,6 +67,7 @@ import {
 	getPluginState as getFlexiResizingPlugin,
 	pluginKey as tableResizingPluginKey,
 } from './pm-plugins/table-resizing';
+import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import {
 	createPlugin as createTableWidthPlugin,
@@ -141,6 +143,55 @@ export type TablePlugin = NextEditorPlugin<
 	}
 >;
 
+// TODO: ED-23944 Move this override to `toDOM` function on table adf-schema nodespec
+const tableNodeSpecWithFixedToDOM = (tableOptions?: PluginConfig): typeof table => {
+	if (!fg('platform_editor_lazy-node-views')) {
+		return table;
+	}
+
+	return {
+		...table,
+		toDOM: (node: PMNode): DOMOutputSpec => {
+			const attrs = {
+				'data-number-column': node.attrs.isNumberColumnEnabled,
+				'data-layout': node.attrs.layout,
+				'data-autosize': node.attrs.__autoSize,
+				'data-table-local-id': node.attrs.localId,
+				'data-table-width': node.attrs.width,
+			};
+
+			let colgroup: DOMOutputSpec = '';
+
+			const { allowColumnResizing } = pluginConfig(tableOptions);
+			if (allowColumnResizing) {
+				colgroup = ['colgroup', {}, ...generateColgroup(node)];
+			}
+
+			return [
+				'div',
+				{
+					class: 'tableView-content-wrap',
+				},
+				[
+					'div',
+					{
+						class: 'pm-table-container',
+					},
+					[
+						'div',
+						{
+							class: 'pm-table-wrapper',
+							'data-number-column': node.attrs.isNumberColumnEnabled,
+							'data-layout': node.attrs.layout,
+						},
+						['table', attrs, colgroup, ['tbody', 0]],
+					],
+				],
+			];
+		},
+	};
+};
+
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -245,7 +296,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
 		nodes() {
 			return [
-				{ name: 'table', node: table },
+				{ name: 'table', node: tableNodeSpecWithFixedToDOM(options?.tableOptions) },
 				{ name: 'tableHeader', node: tableHeader },
 				{ name: 'tableRow', node: tableRow },
 				{ name: 'tableCell', node: tableCell },
@@ -531,7 +582,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									{targetCellPosition &&
 										(tableRef ||
 											(isCellMenuOpenByKeyboard &&
-												fg('platform.editor.a11y-table-context-menu_y4c9c'))) &&
+												fg('platform_editor_a11y_table_context_menu'))) &&
 										!isResizing &&
 										options &&
 										options.allowContextualMenu && (

package/src/pm-plugins/keymap.ts

@@ -313,7 +313,7 @@ export function keymapPlugin(
 		list,
 	);
 
-	if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+	if (fg('platform_editor_a11y_table_context_menu')) {
 		bindKeymapWithCommand(focusToContextMenuTrigger.common!, setFocusToCellMenu(), list);
 	}
 

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/pm-plugins/table-resizing/event-handlers.ts

@@ -13,7 +13,7 @@ import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/e
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
@@ -112,7 +112,7 @@ export const handleMouseDown = (
 		isTableScalingEnabled: shouldScale,
 		shouldUseIncreasedScalingPercent:
 			isTableScalingWithFixedColumnWidthsOptionEnabled &&
-			getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
+			fg('platform.editor.table.use-increased-scaling-percent'),
 	});
 
 	if (
@@ -200,7 +200,7 @@ export const handleMouseDown = (
 				const resizedDelta = clientX - startX;
 				const shouldUseIncreasedScalingPercent =
 					isTableScalingWithFixedColumnWidthsOptionEnabled &&
-					getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+					fg('platform.editor.table.use-increased-scaling-percent');
 				if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
 					const newResizeState = resizeColumnAndTable(
 						resizeState,
@@ -311,19 +311,21 @@ export const handleMouseDown = (
 		const { state } = view;
 		const { dragging, resizeHandlePos } = getPluginState(state);
 		const { isTableHovered } = getTablePluginState(state);
+		const tablePos = state.doc.resolve(start).start(-1);
+
 		if (
 			!which ||
 			!dragging ||
 			resizeHandlePos === null ||
 			!pointsAtCell(state.doc.resolve(resizeHandlePos)) ||
-			!isTableHovered
+			((!isNewColumnResizingEnabled || isTableNested(state, tablePos)) && !isTableHovered)
 		) {
 			return finish(event);
 		}
 
 		const $cell = state.doc.resolve(resizeHandlePos);
 		const table = $cell.node(-1);
-		const tablePos = state.doc.resolve(start).start(-1);
+		// const tablePos = state.doc.resolve(start).start(-1);
 		const tableDepth = state.doc.resolve(tablePos).depth;
 		const map = TableMap.get(table);
 		const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter!.attrs.colspan - 1;
@@ -332,7 +334,7 @@ export const handleMouseDown = (
 
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingWithFixedColumnWidthsOptionEnabled &&
-			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+			fg('platform.editor.table.use-increased-scaling-percent');
 		if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 			shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 		}

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) {