@atlaskit/editor-plugin-table 7.20.2 → 7.21.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.21.0
+
+### Minor Changes
+
+- [#120893](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120893)
+  [`67a22e5eb05a2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/67a22e5eb05a2) -
+  [ux] [ECA11Y-113] This change adds the keyboard shortcut (Shift+F10) to the Cell Options Tooltip
+  and to the Editor Help dialog. This change is behind the `platform_editor_a11y_table_context_menu`
+  feature flag.
+
+### Patch Changes
+
+- [#120665](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120665)
+  [`a4ee6908e0e2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4ee6908e0e2c) -
+  [ED-23943] Milestone: Initial LazyNodeViewLoading implementation for Table
+- Updated dependencies
+
 ## 7.20.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -16,6 +16,7 @@ var _guideline = require("@atlaskit/editor-common/guideline");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
@@ -101,7 +102,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
   });
 };
 var TableResizer = exports.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,
@@ -142,7 +143,29 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var isTableSelected = ((_findTable = (0, _utils2.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 = (0, _react.useMemo)(function () {
+    return (0, _utils2.findTable)(currentSelection);
+  }, [currentSelection]);
+  var tableFromSelectionPosition = tableFromSelection === null || tableFromSelection === void 0 ? void 0 : tableFromSelection.pos;
+  var isTableSelected = (0, _react.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) {
+      (0, _monitoring.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 = (0, _analytics2.useMeasureFramerate)(),

package/dist/cjs/nodeviews/TableStickyScrollbar.js

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function () {
   function TableStickyScrollbar(wrapper, view) {
@@ -23,7 +24,13 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
     });
     this.wrapper = wrapper;
     this.view = view;
-    this.init();
+    if ((0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+      requestAnimationFrame(function () {
+        _this.init();
+      });
+    } else {
+      this.init();
+    }
   }
   (0, _createClass2.default)(TableStickyScrollbar, [{
     key: "dispose",

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

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyTableView = exports.lazyTableRowView = exports.lazyTableHeaderView = exports.lazyTableCellView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _table = require("./table");
+var _TableCell = _interopRequireDefault(require("./TableCell"));
+var _TableRow = _interopRequireDefault(require("./TableRow"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } // TODO: Clean up ED-23976
+var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled);
+    };
+  }
+  var loader = function loader() {
+    var result = Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* 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 (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'table',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};
+var lazyTableCellView = exports.lazyTableCellView = function lazyTableCellView(options) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return new _TableCell.default(node, view, getPos, options.eventDispatcher);
+    };
+  }
+  var loader = function loader() {
+    var result = Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* 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 (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'tableCell',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};
+var lazyTableHeaderView = exports.lazyTableHeaderView = function lazyTableHeaderView(options) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return new _TableCell.default(node, view, getPos, options.eventDispatcher);
+    };
+  }
+  var loader = function loader() {
+    var result = Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* 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 (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'tableHeader',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};
+var lazyTableRowView = exports.lazyTableRowView = function lazyTableRowView(options) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return function (node, view, getPos) {
+      return new _TableRow.default(node, view, getPos, options.eventDispatcher);
+    };
+  }
+  var loader = function loader() {
+    var result = Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* 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 (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'tableRow',
+    getNodeViewOptions: function getNodeViewOptions() {
+      return options;
+    },
+    loader: loader
+  });
+};

package/dist/cjs/plugin.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -34,6 +35,7 @@ var _stickyHeaders = require("./pm-plugins/sticky-headers");
 var _tableAnalytics = require("./pm-plugins/table-analytics");
 var _tableLocalId = require("./pm-plugins/table-local-id");
 var _tableResizing = require("./pm-plugins/table-resizing");
+var _colgroup = require("./pm-plugins/table-resizing/utils/colgroup");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableWidth = require("./pm-plugins/table-width");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
@@ -54,6 +56,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 (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.table;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.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 = (0, _createPluginConfig.pluginConfig)(tableOptions),
+        allowColumnResizing = _pluginConfig.allowColumnResizing;
+      if (allowColumnResizing) {
+        colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _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`.
@@ -137,7 +172,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'table',
-        node: _adfSchema.table
+        node: tableNodeSpecWithFixedToDOM(options === null || options === void 0 ? void 0 : options.tableOptions)
       }, {
         name: 'tableHeader',
         node: _adfSchema.tableHeader
@@ -180,8 +215,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableScalingEnabled = _ref5.isTableScalingEnabled,
             isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled,
             isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
-          var _pluginConfig = (0, _createPluginConfig.pluginConfig)(tableOptions),
-            allowColumnResizing = _pluginConfig.allowColumnResizing;
+          var _pluginConfig2 = (0, _createPluginConfig.pluginConfig)(tableOptions),
+            allowColumnResizing = _pluginConfig2.allowColumnResizing;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
           }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled) : undefined;
@@ -362,7 +397,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isCellMenuOpenByKeyboard = _ref19.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,

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

@@ -82,7 +82,7 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
     ariaNotify: ariaNotifyPlugin,
     getIntl: getIntl
   }), list);
-  if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.focusToContextMenuTrigger.common, (0, _commands2.setFocusToCellMenu)(), list);
   }
   return (0, _keymap.keymap)(list);

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

@@ -19,9 +19,7 @@ var _commands = require("../commands");
 var _columnResize = require("../commands/column-resize");
 var _misc = require("../commands/misc");
 var _eventHandlers = require("../event-handlers");
-var _table = require("../nodeviews/table");
-var _TableCell = _interopRequireDefault(require("../nodeviews/TableCell"));
-var _TableRow = _interopRequireDefault(require("../nodeviews/TableRow"));
+var _lazyNodeViews = require("../nodeviews/lazy-node-views");
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _transforms2 = require("../transforms");
 var _types = require("../types");
@@ -258,18 +256,24 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         return false;
       },
       nodeViews: {
-        table: function table(node, view, getPos) {
-          return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
-        },
-        tableRow: function tableRow(node, view, getPos) {
-          return new _TableRow.default(node, view, getPos, eventDispatcher);
-        },
-        tableCell: function tableCell(node, view, getPos) {
-          return new _TableCell.default(node, view, getPos, eventDispatcher);
-        },
-        tableHeader: function tableHeader(node, view, getPos) {
-          return new _TableCell.default(node, view, getPos, eventDispatcher);
-        }
+        table: (0, _lazyNodeViews.lazyTableView)({
+          portalProviderAPI: portalProviderAPI,
+          eventDispatcher: eventDispatcher,
+          getEditorContainerWidth: getEditorContainerWidth,
+          getEditorFeatureFlags: getEditorFeatureFlags,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          pluginInjectionApi: pluginInjectionApi,
+          isTableAlignmentEnabled: isTableAlignmentEnabled
+        }),
+        tableRow: (0, _lazyNodeViews.lazyTableRowView)({
+          eventDispatcher: eventDispatcher
+        }),
+        tableCell: (0, _lazyNodeViews.lazyTableCellView)({
+          eventDispatcher: eventDispatcher
+        }),
+        tableHeader: (0, _lazyNodeViews.lazyTableHeaderView)({
+          eventDispatcher: eventDispatcher
+        })
       },
       handleDOMEvents: {
         focus: _eventHandlers.handleFocus,

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

@@ -11,6 +11,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
@@ -56,7 +57,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var targetCellRef;
   targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
       if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
         var state = editorView.state,
           dispatch = editorView.dispatch;
@@ -81,12 +82,13 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
+    keymap: (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? _keymaps.focusToContextMenuTrigger : undefined,
     onClick: handleClick,
     iconBefore: (0, _react2.jsx)(_chevronDown.default, {
       label: ""
     }),
     "aria-label": labelCellOptions,
-    "aria-expanded": (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? isContextualMenuOpen : undefined
+    "aria-expanded": (0, _platformFeatureFlags.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/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -94,7 +94,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         var background = (0, _editorPalette.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 ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
           var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns);
           selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
           selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
@@ -122,7 +122,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
             className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
-          }), (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen && (0, _react2.jsx)("div", {
+          }), (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? isSubmenuOpen && (0, _react2.jsx)("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
@@ -167,7 +167,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
               hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
             }
           }))),
-          'aria-expanded': (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen : undefined
+          'aria-expanded': (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? isSubmenuOpen : undefined
         };
       }
     });
@@ -469,7 +469,7 @@ var ContextualMenu = exports.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) && (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen) && (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
         var tr = state.tr;
         tr.setMeta(_pluginKey.pluginKey, {
           type: 'SET_CELL_MENU_OPEN',
@@ -536,7 +536,7 @@ var ContextualMenu = exports.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 && (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+            if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen && (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
               _this.setState({
                 isSubmenuOpen: true
               });
@@ -565,7 +565,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         dispatch = _this$props12$editorV.dispatch,
         dom = _this$props12$editorV.dom,
         isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
-      if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
         if (payload) {
           var event = payload.event;
           if (event && event instanceof KeyboardEvent) {
@@ -657,7 +657,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
   (0, _createClass2.default)(ContextualMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if ((0, _platformFeatureFlags.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.
@@ -684,7 +684,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         isDragAndDropEnabled = _getPluginState13.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       var isOpenAllowed = false;
-      if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) {
         isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
       } else {
         isOpenAllowed = isOpen;
@@ -700,7 +700,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         ,
         arrowKeyNavigationProviderOptions: {
           type: _uiMenu.ArrowKeyNavigationType.MENU,
-          disableArrowKeyNavigation: isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen && (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? false : true
+          disableArrowKeyNavigation: isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen && (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? false : true
         },
         items: items,
         isOpen: isOpenAllowed,
@@ -710,7 +710,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
         fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
-        shouldFocusFirstItem: (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? function () {
+        shouldFocusFirstItem: (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? function () {
           return Boolean(isCellMenuOpenByKeyboard);
         } : undefined,
         boundariesElement: boundariesElement,
@@ -718,7 +718,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         section: isDragAndDropEnabled ? {
           hasSeparator: true
         } : undefined,
-        allowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
+        allowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? this.state.isSubmenuOpen : false
       }));
     }
   }]);

package/dist/es2019/nodeviews/TableResizer.js

@@ -6,6 +6,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';
@@ -110,7 +111,7 @@ export const TableResizer = ({
   pluginInjectionApi,
   isFullWidthModeEnabled
 }) => {
-  var _findTable, _editorView$state, _pluginInjectionApi$a2;
+  var _editorView$state, _pluginInjectionApi$a2;
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
@@ -129,7 +130,29 @@ export const TableResizer = ({
   const {
     formatMessage
   } = useIntl();
-  const 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();
+  const currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
+  const tableFromSelection = useMemo(() => {
+    return findTable(currentSelection);
+  }, [currentSelection]);
+  const tableFromSelectionPosition = tableFromSelection === null || tableFromSelection === void 0 ? void 0 : 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;
+    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]);
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
   const {

package/dist/es2019/nodeviews/TableStickyScrollbar.js

@@ -1,5 +1,6 @@
 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 class TableStickyScrollbar {
   constructor(wrapper, view) {
@@ -12,7 +13,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() {
     if (this.stickyScrollbarContainerElement) {