@atlaskit/editor-plugin-table 7.20.2 → 7.21.0

package/dist/es2019/nodeviews/lazy-node-views.js

@@ -0,0 +1,116 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+// TODO: Clean up ED-23976
+import { createTableView } from './table';
+import TableCell from './TableCell';
+import TableRow from './TableRow';
+export const lazyTableView = options => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return (node, view, getPos) => {
+      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, view, getPos, decorations, getNodeViewOptions) => {
+        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
+  });
+};
+export const lazyTableCellView = options => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return (node, view, getPos) => {
+      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, view, getPos, decorations, getNodeViewOptions) => {
+        const {
+          eventDispatcher
+        } = getNodeViewOptions();
+        return new TableCell(node, view, getPos, eventDispatcher);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'tableCell',
+    getNodeViewOptions: () => options,
+    loader
+  });
+};
+export const lazyTableHeaderView = options => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return (node, view, getPos) => {
+      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, view, getPos, decorations, getNodeViewOptions) => {
+        const {
+          eventDispatcher
+        } = getNodeViewOptions();
+        return new TableCell(node, view, getPos, eventDispatcher);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'tableHeader',
+    getNodeViewOptions: () => options,
+    loader
+  });
+};
+export const lazyTableRowView = options => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return (node, view, getPos) => {
+      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, view, getPos, decorations, getNodeViewOptions) => {
+        const {
+          eventDispatcher
+        } = getNodeViewOptions();
+        return new TableRow(node, view, getPos, eventDispatcher);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'tableRow',
+    getNodeViewOptions: () => options,
+    loader
+  });
+};

package/dist/es2019/plugin.js

@@ -26,6 +26,7 @@ import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pl
 import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, 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, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
@@ -42,6 +43,41 @@ const defaultGetEditorFeatureFlags = () => ({});
 
 // TODO: duplicating type instead of importing media plugin causing a circular dependency
 
+// TODO: ED-23944 Move this override to `toDOM` function on table adf-schema nodespec
+const tableNodeSpecWithFixedToDOM = tableOptions => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return table;
+  }
+  return {
+    ...table,
+    toDOM: node => {
+      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 = '';
+      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`.
@@ -126,7 +162,7 @@ const tablesPlugin = ({
     nodes() {
       return [{
         name: 'table',
-        node: table
+        node: tableNodeSpecWithFixedToDOM(options === null || options === void 0 ? void 0 : options.tableOptions)
       }, {
         name: 'tableHeader',
         node: tableHeader
@@ -357,7 +393,7 @@ const tablesPlugin = ({
             allowControls
           } = pluginConfig;
           const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && fg('platform.editor.a11y-table-context-menu_y4c9c')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && fg('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,

package/dist/es2019/pm-plugins/keymap.js

@@ -67,7 +67,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     ariaNotify: ariaNotifyPlugin,
     getIntl: getIntl
   }), list);
-  if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+  if (fg('platform_editor_a11y_table_context_menu')) {
     bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
   }
   return keymap(list);

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

@@ -11,9 +11,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';
@@ -256,10 +254,24 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         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/dist/es2019/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';
@@ -51,7 +52,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   let targetCellRef;
   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,
@@ -78,12 +79,13 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(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
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -77,7 +77,7 @@ export class ContextualMenu extends Component {
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         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, colorPalletteColumns);
           selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
           selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
@@ -105,7 +105,7 @@ export class ContextualMenu extends 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
@@ -150,7 +150,7 @@ export class ContextualMenu extends 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
         };
       }
     });
@@ -500,7 +500,7 @@ export class ContextualMenu extends Component {
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       // 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')) {
         const {
           tr
         } = state;
@@ -572,7 +572,7 @@ export class ContextualMenu extends 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
               });
@@ -605,7 +605,7 @@ export class ContextualMenu extends Component {
         },
         isCellMenuOpenByKeyboard
       } = this.props;
-      if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (fg('platform_editor_a11y_table_context_menu')) {
         if (payload) {
           const {
             event
@@ -704,7 +704,7 @@ export class ContextualMenu extends Component {
     });
   }
   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.
@@ -734,7 +734,7 @@ export class ContextualMenu extends Component {
     } = getPluginState(editorView.state);
     const items = isDragAndDropEnabled ? this.createNewContextMenuItems() : 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;
@@ -750,7 +750,7 @@ export class ContextualMenu extends 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,
@@ -760,7 +760,7 @@ export class ContextualMenu extends Component {
       onMouseLeave: this.handleItemMouseLeave,
       fitHeight: 188,
       fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
-      shouldFocusFirstItem: fg('platform.editor.a11y-table-context-menu_y4c9c') ? () => {
+      shouldFocusFirstItem: fg('platform_editor_a11y_table_context_menu') ? () => {
         return Boolean(isCellMenuOpenByKeyboard);
       } : undefined,
       boundariesElement: boundariesElement,
@@ -768,7 +768,7 @@ export class ContextualMenu extends 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/esm/nodeviews/TableResizer.js

@@ -10,6 +10,7 @@ import { getGuidelinesWithHighlights } 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 { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
@@ -91,7 +92,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
   });
 };
 export var TableResizer = function TableResizer(_ref) {
-  var _findTable, _editorView$state, _pluginInjectionApi$a2;
+  var _editorView$state, _pluginInjectionApi$a2;
   var children = _ref.children,
     width = _ref.width,
     maxWidth = _ref.maxWidth,
@@ -132,7 +133,29 @@ export var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
+  var currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
+  var tableFromSelection = useMemo(function () {
+    return findTable(currentSelection);
+  }, [currentSelection]);
+  var tableFromSelectionPosition = tableFromSelection === null || tableFromSelection === void 0 ? void 0 : tableFromSelection.pos;
+  var isTableSelected = useMemo(function () {
+    // Avoid call getPos if there is no table in the current selection,
+    if (typeof tableFromSelectionPosition !== 'number') {
+      return false;
+    }
+    var currentNodePosition;
+    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, {
+        location: 'editor-plugin-table/table-resizer'
+      });
+      return false;
+    }
+    return tableFromSelectionPosition === currentNodePosition;
+  }, [tableFromSelectionPosition, getPos]);
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _useMeasureFramerate = useMeasureFramerate(),

package/dist/esm/nodeviews/TableStickyScrollbar.js

@@ -2,6 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../types';
 export var TableStickyScrollbar = /*#__PURE__*/function () {
   function TableStickyScrollbar(wrapper, view) {
@@ -16,7 +17,13 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
     });
     this.wrapper = wrapper;
     this.view = view;
-    this.init();
+    if (fg('platform_editor_lazy-node-views')) {
+      requestAnimationFrame(function () {
+        _this.init();
+      });
+    } else {
+      this.init();
+    }
   }
   _createClass(TableStickyScrollbar, [{
     key: "dispose",

package/dist/esm/nodeviews/lazy-node-views.js

@@ -0,0 +1,116 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+// TODO: Clean up ED-23976
+import { createTableView } from './table';
+import TableCell from './TableCell';
+import TableRow from './TableRow';
+export var lazyTableView = function lazyTableView(options) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled);
+    };
+  }
+  var loader = function loader() {
+    var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-table_nodeview" */
+    './table').then(function (_ref) {
+      var createTableView = _ref.createTableView;
+      return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _getNodeViewOptions = getNodeViewOptions(),
+          portalProviderAPI = _getNodeViewOptions.portalProviderAPI,
+          eventDispatcher = _getNodeViewOptions.eventDispatcher,
+          getEditorContainerWidth = _getNodeViewOptions.getEditorContainerWidth,
+          getEditorFeatureFlags = _getNodeViewOptions.getEditorFeatureFlags,
+          dispatchAnalyticsEvent = _getNodeViewOptions.dispatchAnalyticsEvent,
+          pluginInjectionApi = _getNodeViewOptions.pluginInjectionApi,
+          isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled;
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'table',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};
+export var lazyTableCellView = function lazyTableCellView(options) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return new TableCell(node, view, getPos, options.eventDispatcher);
+    };
+  }
+  var loader = function loader() {
+    var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-table_nodeview" */
+    './TableCell').then(function (_ref2) {
+      var TableCell = _ref2.default;
+      return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _getNodeViewOptions2 = getNodeViewOptions(),
+          eventDispatcher = _getNodeViewOptions2.eventDispatcher;
+        return new TableCell(node, view, getPos, eventDispatcher);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'tableCell',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};
+export var lazyTableHeaderView = function lazyTableHeaderView(options) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return new TableCell(node, view, getPos, options.eventDispatcher);
+    };
+  }
+  var loader = function loader() {
+    var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-table-cell_nodeview" */
+    './TableCell').then(function (_ref3) {
+      var TableCell = _ref3.default;
+      return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _getNodeViewOptions3 = getNodeViewOptions(),
+          eventDispatcher = _getNodeViewOptions3.eventDispatcher;
+        return new TableCell(node, view, getPos, eventDispatcher);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'tableHeader',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};
+export var lazyTableRowView = function lazyTableRowView(options) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return new TableRow(node, view, getPos, options.eventDispatcher);
+    };
+  }
+  var loader = function loader() {
+    var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-table-row_nodeview" */
+    './TableRow').then(function (_ref4) {
+      var TableRow = _ref4.default;
+      return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _getNodeViewOptions4 = getNodeViewOptions(),
+          eventDispatcher = _getNodeViewOptions4.eventDispatcher;
+        return new TableRow(node, view, getPos, eventDispatcher);
+      };
+    });
+    return result;
+  };
+  return withLazyLoading({
+    nodeName: 'tableRow',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};

package/dist/esm/plugin.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -29,6 +30,7 @@ import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pl
 import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, 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, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
@@ -47,6 +49,39 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
 
 // TODO: duplicating type instead of importing media plugin causing a circular dependency
 
+// TODO: ED-23944 Move this override to `toDOM` function on table adf-schema nodespec
+var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(tableOptions) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return table;
+  }
+  return _objectSpread(_objectSpread({}, table), {}, {
+    toDOM: function toDOM(node) {
+      var 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
+      };
+      var colgroup = '';
+      var _pluginConfig = pluginConfig(tableOptions),
+        allowColumnResizing = _pluginConfig.allowColumnResizing;
+      if (allowColumnResizing) {
+        colgroup = ['colgroup', {}].concat(_toConsumableArray(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`.
@@ -130,7 +165,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'table',
-        node: table
+        node: tableNodeSpecWithFixedToDOM(options === null || options === void 0 ? void 0 : options.tableOptions)
       }, {
         name: 'tableHeader',
         node: tableHeader
@@ -173,8 +208,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableScalingEnabled = _ref5.isTableScalingEnabled,
             isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled,
             isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
-          var _pluginConfig = pluginConfig(tableOptions),
-            allowColumnResizing = _pluginConfig.allowColumnResizing;
+          var _pluginConfig2 = pluginConfig(tableOptions),
+            allowColumnResizing = _pluginConfig2.allowColumnResizing;
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
           }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled) : undefined;
@@ -355,7 +390,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isCellMenuOpenByKeyboard = _ref19.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && fg('platform.editor.a11y-table-context-menu_y4c9c')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && fg('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,

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

@@ -75,7 +75,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     ariaNotify: ariaNotifyPlugin,
     getIntl: getIntl
   }), list);
-  if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+  if (fg('platform_editor_a11y_table_context_menu')) {
     bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
   }
   return keymap(list);