@atlaskit/editor-plugin-table 7.20.2 → 7.21.1

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

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

@@ -5,7 +5,7 @@ import { ACTION_SUBJECT, CHANGE_ALIGNMENT_REASON, EVENT_TYPE, INPUT_METHOD, TABL
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 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';
 import { updateColumnWidths } from '../../transforms';
@@ -68,7 +68,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     start: start,
     domAtPos: domAtPos,
     isTableScalingEnabled: shouldScale,
-    shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
+    shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent')
   });
   if (evenColumns({
     resizeState: resizeState,
@@ -145,7 +145,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         var resizedDelta = clientX - startX;
-        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
         if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
           var newResizeState = resizeColumnAndTable(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale,
           // isTableScalingEnabled
@@ -234,17 +234,18 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
       resizeHandlePos = _getPluginState2.resizeHandlePos;
     var _getTablePluginState3 = getTablePluginState(state),
       isTableHovered = _getTablePluginState3.isTableHovered;
-    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered) {
+    var tablePos = state.doc.resolve(start).start(-1);
+    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || (!isNewColumnResizingEnabled || isTableNested(state, tablePos)) && !isTableHovered) {
       return finish(event);
     }
     var $cell = state.doc.resolve(resizeHandlePos);
     var table = $cell.node(-1);
-    var tablePos = state.doc.resolve(start).start(-1);
+    // const tablePos = state.doc.resolve(start).start(-1);
     var tableDepth = state.doc.resolve(tablePos).depth;
     var map = TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     var shouldScale = tableDepth === 0 && isTableScalingEnabled;
-    var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }

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.1",
 	"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.2.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() {