@atlaskit/editor-plugin-table 7.20.2 → 7.21.0

package/dist/esm/pm-plugins/main.js

@@ -14,9 +14,7 @@ import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleMouseUp, handleTripleClick, 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 { TableCssClassName as ClassName } from '../types';
@@ -251,18 +249,24 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         return false;
       },
       nodeViews: {
-        table: function table(node, view, getPos) {
-          return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
-        },
-        tableRow: function tableRow(node, view, getPos) {
-          return new TableRow(node, view, getPos, eventDispatcher);
-        },
-        tableCell: function tableCell(node, view, getPos) {
-          return new TableCell(node, view, getPos, eventDispatcher);
-        },
-        tableHeader: function tableHeader(node, view, getPos) {
-          return new TableCell(node, view, getPos, eventDispatcher);
-        }
+        table: lazyTableView({
+          portalProviderAPI: portalProviderAPI,
+          eventDispatcher: eventDispatcher,
+          getEditorContainerWidth: getEditorContainerWidth,
+          getEditorFeatureFlags: getEditorFeatureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          pluginInjectionApi: pluginInjectionApi,
+          isTableAlignmentEnabled: isTableAlignmentEnabled
+        }),
+        tableRow: lazyTableRowView({
+          eventDispatcher: eventDispatcher
+        }),
+        tableCell: lazyTableCellView({
+          eventDispatcher: eventDispatcher
+        }),
+        tableHeader: lazyTableHeaderView({
+          eventDispatcher: eventDispatcher
+        })
       },
       handleDOMEvents: {
         focus: handleFocus,

package/dist/esm/ui/FloatingContextualButton/index.js

@@ -6,13 +6,14 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 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';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 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 { TableCssClassName as ClassName } from '../../types';
 import FixedButton from './FixedButton';
@@ -45,7 +46,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   var targetCellRef;
   targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
   useEffect(function () {
-    if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+    if (fg('platform_editor_a11y_table_context_menu')) {
       if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
         var state = editorView.state,
           dispatch = editorView.dispatch;
@@ -70,12 +71,13 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
+    keymap: fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined,
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
       label: ""
     }),
     "aria-label": labelCellOptions,
-    "aria-expanded": getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isContextualMenuOpen : undefined
+    "aria-expanded": fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -87,7 +87,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         var selectedRowIndex;
         var selectedColumnIndex;
-        if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (fg('platform_editor_a11y_table_context_menu')) {
           var selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns);
           selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
           selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
@@ -115,7 +115,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
             className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
-          }), fg('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen && jsx("div", {
+          }), fg('platform_editor_a11y_table_context_menu') ? isSubmenuOpen && jsx("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -160,7 +160,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
           }))),
-          'aria-expanded': fg('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen : undefined
+          'aria-expanded': fg('platform_editor_a11y_table_context_menu') ? isSubmenuOpen : undefined
         };
       }
     });
@@ -462,7 +462,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
       // context menu opened by keyboard and any item except 'background' activated
       // or color has been chosen from color palette
-      if (isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen) && fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen) && fg('platform_editor_a11y_table_context_menu')) {
         var tr = state.tr;
         tr.setMeta(tablePluginKey, {
           type: 'SET_CELL_MENU_OPEN',
@@ -529,7 +529,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             // 1st time when user chooses the background color item.
             // 2nd when color has been chosen from color palette.
             // here we are handling the 1st call relying on the isSubmenuOpen state value
-            if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen && fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+            if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen && fg('platform_editor_a11y_table_context_menu')) {
               _this.setState({
                 isSubmenuOpen: true
               });
@@ -558,7 +558,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         dispatch = _this$props12$editorV.dispatch,
         dom = _this$props12$editorV.dom,
         isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
-      if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (fg('platform_editor_a11y_table_context_menu')) {
         if (payload) {
           var event = payload.event;
           if (event && event instanceof KeyboardEvent) {
@@ -650,7 +650,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _createClass(ContextualMenu, [{
     key: "componentDidMount",
     value: function 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.
@@ -677,7 +677,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isDragAndDropEnabled = _getPluginState13.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       var 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;
@@ -693,7 +693,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         ,
         arrowKeyNavigationProviderOptions: {
           type: ArrowKeyNavigationType.MENU,
-          disableArrowKeyNavigation: isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen && fg('platform.editor.a11y-table-context-menu_y4c9c') ? false : true
+          disableArrowKeyNavigation: isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen && fg('platform_editor_a11y_table_context_menu') ? false : true
         },
         items: items,
         isOpen: isOpenAllowed,
@@ -703,7 +703,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
         fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
-        shouldFocusFirstItem: fg('platform.editor.a11y-table-context-menu_y4c9c') ? function () {
+        shouldFocusFirstItem: fg('platform_editor_a11y_table_context_menu') ? function () {
           return Boolean(isCellMenuOpenByKeyboard);
         } : undefined,
         boundariesElement: boundariesElement,
@@ -711,7 +711,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         section: isDragAndDropEnabled ? {
           hasSeparator: true
         } : undefined,
-        allowEnterDefaultBehavior: fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
+        allowEnterDefaultBehavior: fg('platform_editor_a11y_table_context_menu') ? this.state.isSubmenuOpen : false
       }));
     }
   }]);

package/dist/types/nodeviews/lazy-node-views.d.ts

@@ -0,0 +1,26 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+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 { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
+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 declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
+type TableCellViewOptions = {
+    eventDispatcher: EventDispatcher;
+};
+export declare const lazyTableCellView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);
+export declare const lazyTableHeaderView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);
+export declare const lazyTableRowView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableRow);
+export {};

package/dist/types-ts4.5/nodeviews/lazy-node-views.d.ts

@@ -0,0 +1,26 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+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 { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
+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 declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
+type TableCellViewOptions = {
+    eventDispatcher: EventDispatcher;
+};
+export declare const lazyTableCellView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);
+export declare const lazyTableHeaderView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);
+export declare const lazyTableRowView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableRow);
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.20.2",
+	"version": "7.21.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/button": "^18.4.0",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/editor-common": "^86.0.0",
+		"@atlaskit/editor-common": "^86.1.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
@@ -102,6 +102,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_lazy-node-views": {
+			"type": "boolean"
+		},
 		"platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
 			"type": "boolean"
 		},
@@ -120,7 +123,7 @@
 		"platform.editor.table.editor-num-col-style-changes": {
 			"type": "boolean"
 		},
-		"platform.editor.a11y-table-context-menu_y4c9c": {
+		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},
 		"platform_editor_element_drag_and_drop_ed_24041": {

package/src/nodeviews/TableResizer.tsx

@@ -15,6 +15,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -217,7 +218,31 @@ export const TableResizer = ({
 
 	const { formatMessage } = useIntl();
 
-	const isTableSelected = findTable(editorView.state?.selection)?.pos === getPos();
+	const currentSelection = editorView.state?.selection;
+	const tableFromSelection = useMemo(() => {
+		return findTable(currentSelection);
+	}, [currentSelection]);
+	const tableFromSelectionPosition = tableFromSelection?.pos;
+	const isTableSelected = useMemo(() => {
+		// Avoid call getPos if there is no table in the current selection,
+		if (typeof tableFromSelectionPosition !== 'number') {
+			return false;
+		}
+
+		let currentNodePosition: number | undefined;
+		try {
+			// The React Table and the ProseMirror can endup out-of-sync
+			// ProseMirror always assume the DOM is not managed by other framework
+			currentNodePosition = getPos();
+		} catch (e) {
+			logException(e as Error, {
+				location: 'editor-plugin-table/table-resizer',
+			});
+			return false;
+		}
+
+		return tableFromSelectionPosition === currentNodePosition;
+	}, [tableFromSelectionPosition, getPos]);
 
 	const resizerMinWidth = getResizerMinWidth(node);
 	const handleSize = getResizerHandleHeight(tableRef);

package/src/nodeviews/TableStickyScrollbar.ts

@@ -1,5 +1,6 @@
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName } from '../types';
 
@@ -24,7 +25,13 @@ export class TableStickyScrollbar {
 		this.wrapper = wrapper;
 		this.view = view;
 
-		this.init();
+		if (fg('platform_editor_lazy-node-views')) {
+			requestAnimationFrame(() => {
+				this.init();
+			});
+		} else {
+			this.init();
+		}
 	}
 
 	dispose() {

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);
 	}