@atlaskit/editor-plugin-table 10.8.0 → 10.8.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-table
 
+## 10.8.2
+
+### Patch Changes
+
+- [#142852](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142852)
+  [`ca0f841e860ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca0f841e860ab) -
+  [ux] [ED-27466] When table option in quick insert typeahead is selected, shows table size picker
+  allow user selecting the table size before inserting
+- Updated dependencies
+
+## 10.8.1
+
+### Patch Changes
+
+- [#140847](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140847)
+  [`edf99b41dbfcb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/edf99b41dbfcb) -
+  ED-27529: The fix introduced to resolve tables flashing unstyled on init when R18 concurrent mode
+  was enabled resulted in sticky headers being broken for tables. In short, the logic for sticky
+  headers was not set up to handle initial prosemirror table structure being replaced with the
+  rendered react table node. This meant the sentinels for sticky headers were only setup on the
+  initial prosemirror table structure, which is removed once react is ready.
+
 ## 10.8.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableRow.js

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
-// timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
+// timeout for resetting the scroll class - if it's too long then users won't be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
@@ -144,6 +144,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         }
         this.emitOff(true);
       }
+      if (this.tableContainerObserver) {
+        this.tableContainerObserver.disconnect();
+      }
     }
   }, {
     key: "ignoreMutation",
@@ -252,26 +255,29 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         this.resizeObserver.observe(this.editorScrollableElement);
       }
       window.requestAnimationFrame(function () {
-        var _getTree;
+        var getTableContainer = function getTableContainer() {
+          var _getTree;
+          return (_getTree = (0, _dom2.getTree)(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+        };
+
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = (0, _dom2.getTree)(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = getTableContainer();
         if (tableContainer) {
           var getSentinelTop = function getSentinelTop() {
-            return (
-              // Ignored via go/ees005
-              // eslint-disable-next-line @atlaskit/editor/no-as-casting
-              tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0)
-            );
+            return tableContainer &&
+            // Ignored via go/ees005
+            // eslint-disable-next-line @atlaskit/editor/no-as-casting
+            tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
           };
           var getSentinelBottom = function getSentinelBottom() {
             // Multiple bottom sentinels may be found if there are nested tables.
             // We need to make sure we get the last one which will belong to the parent table.
-            var bottomSentinels = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM);
+            var bottomSentinels = tableContainer && tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM);
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             return (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_bottom_sentinel') ?
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
-            bottomSentinels.item(bottomSentinels.length - 1) :
+            bottomSentinels && bottomSentinels.item(bottomSentinels.length - 1) : tableContainer &&
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
           };
@@ -291,26 +297,60 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
               }
             });
           };
-          if (sentinelsInDom()) {
-            // great - DOM ready, observe as normal
-            observeStickySentinels();
-          } else {
-            // concurrent loading issue - here TableRow is too eager trying to
-            // observe sentinels before they are in the DOM, use MutationObserver
-            // to wait for sentinels to be added to the parent Table node DOM
-            // then attach the IntersectionObserver
-            var tableContainerObserver = new MutationObserver(function () {
-              if (sentinelsInDom()) {
-                observeStickySentinels();
-                tableContainerObserver.disconnect();
+          if ((0, _platformFeatureFlags.fg)('platform_editor_table_initial_load_fix')) {
+            var isInitialProsemirrorToDomRender = tableContainer.hasAttribute('data-prosemirror-initial-toDOM-render');
+
+            // Sentinels may be in the DOM but they're part of the prosemirror placeholder structure which is replaced with the fully rendered React node.
+            if (sentinelsInDom() && !isInitialProsemirrorToDomRender) {
+              // great - DOM ready, observe as normal
+              observeStickySentinels();
+            } else {
+              // concurrent loading issue - here TableRow is too eager trying to
+              // observe sentinels before they are in the DOM, use MutationObserver
+              // to wait for sentinels to be added to the parent Table node DOM
+              // then attach the IntersectionObserver
+              _this2.tableContainerObserver = new MutationObserver(function () {
+                // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
+                // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
+                if (!tableContainer || !tableContainer.isConnected) {
+                  tableContainer = getTableContainer();
+                }
+                if (sentinelsInDom()) {
+                  var _this2$tableContainer;
+                  observeStickySentinels();
+                  (_this2$tableContainer = _this2.tableContainerObserver) === null || _this2$tableContainer === void 0 || _this2$tableContainer.disconnect();
+                }
+              });
+              var mutatingNode = tableContainer;
+              if (mutatingNode && _this2.tableContainerObserver) {
+                _this2.tableContainerObserver.observe(mutatingNode, {
+                  subtree: true,
+                  childList: true
+                });
               }
-            });
-            var mutatingNode = tableContainer;
-            if (mutatingNode) {
-              tableContainerObserver.observe(mutatingNode, {
-                subtree: true,
-                childList: true
+            }
+          } else {
+            if (sentinelsInDom()) {
+              // great - DOM ready, observe as normal
+              observeStickySentinels();
+            } else {
+              // concurrent loading issue - here TableRow is too eager trying to
+              // observe sentinels before they are in the DOM, use MutationObserver
+              // to wait for sentinels to be added to the parent Table node DOM
+              // then attach the IntersectionObserver
+              var tableContainerObserver = new MutationObserver(function () {
+                if (sentinelsInDom()) {
+                  observeStickySentinels();
+                  tableContainerObserver.disconnect();
+                }
               });
+              var _mutatingNode = tableContainer;
+              if (_mutatingNode) {
+                tableContainerObserver.observe(_mutatingNode, {
+                  subtree: true,
+                  childList: true
+                });
+              }
             }
           }
         }

package/dist/cjs/nodeviews/table.js

@@ -68,7 +68,7 @@ var handleInlineTableWidth = function handleInlineTableWidth(table, width) {
   table.style.setProperty('width', "".concat(width, "px"));
 };
 
-// Leave as a fallback incase the table's NodeSpec.toDOM is not defined.
+// Remove after removing the platform_editor_table_initial_load_fix flag.
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {

package/dist/cjs/nodeviews/toDOM.js

@@ -68,7 +68,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       }]];
       if (!config.tableResizingEnabled) {
         return ['div', {
-          class: 'tableView-content-wrap'
+          class: 'tableView-content-wrap',
+          'data-prosemirror-initial-toDOM-render': 'true'
         }, tableContainerDiv];
       }
       var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
@@ -95,7 +96,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];
       return ['div', {
-        class: 'tableView-content-wrap'
+        class: 'tableView-content-wrap',
+        'data-prosemirror-initial-toDOM-render': 'true'
       }, tableResizingDiv];
     }
   });

package/dist/cjs/pm-plugins/table-size-selector.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+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) { (0, _defineProperty2.default)(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; }
+var pluginKey = exports.pluginKey = new _state.PluginKey('tableSizeSelectorPlugin');
+var createPlugin = exports.createPlugin = function createPlugin(dispatch) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          isSelectorOpen: false
+        };
+      },
+      apply: function apply(tr, currentPluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return currentPluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, currentPluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return currentPluginState;
+      }
+    }
+  });
+};

package/dist/cjs/tablePlugin.js

@@ -12,6 +12,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _icons = require("@atlaskit/editor-common/icons");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -48,6 +49,7 @@ var _plugin5 = require("./pm-plugins/table-resizing/plugin");
 var _pluginFactory2 = require("./pm-plugins/table-resizing/plugin-factory");
 var _pluginKey5 = require("./pm-plugins/table-resizing/plugin-key");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
+var _tableSizeSelector = require("./pm-plugins/table-size-selector");
 var _tableWidth = require("./pm-plugins/table-width");
 var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
 var _create = require("./pm-plugins/utils/create");
@@ -59,6 +61,7 @@ var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"))
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
 var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
 var _globalStyles = require("./ui/global-styles");
+var _SizeSelector = require("./ui/SizeSelector");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _toolbar = require("./ui/toolbar");
 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); }
@@ -75,7 +78,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
+  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -92,6 +95,9 @@ var tablePlugin = function tablePlugin(_ref) {
   var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
   options === null || options === void 0 ? void 0 : options.isCommentEditor));
+  var isTableSelectorEnabled =
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker');
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -395,6 +401,12 @@ var tablePlugin = function tablePlugin(_ref) {
             }
           });
         }
+      }, {
+        name: 'tableSizeSelectorPlugin',
+        plugin: function plugin(_ref19) {
+          var dispatch = _ref19.dispatch;
+          return isTableSelectorEnabled ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
+        }
       }];
 
       // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
@@ -409,13 +421,13 @@ var tablePlugin = function tablePlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref19) {
+    contentComponent: function contentComponent(_ref20) {
       var _api$featureFlags;
-      var editorView = _ref19.editorView,
-        popupsMountPoint = _ref19.popupsMountPoint,
-        popupsBoundariesElement = _ref19.popupsBoundariesElement,
-        popupsScrollableElement = _ref19.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
+      var editorView = _ref20.editorView,
+        popupsMountPoint = _ref20.popupsMountPoint,
+        popupsBoundariesElement = _ref20.popupsBoundariesElement,
+        popupsScrollableElement = _ref20.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -431,34 +443,38 @@ var tablePlugin = function tablePlugin(_ref) {
           tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _pluginKey5.pluginKey,
           stickyHeadersState: _pluginKey4.pluginKey,
-          dragAndDropState: _pluginKey2.pluginKey
+          dragAndDropState: _pluginKey2.pluginKey,
+          sizeSelectorPluginState: _tableSizeSelector.pluginKey
         },
-        render: function render(_ref20) {
-          var resizingPluginState = _ref20.tableResizingPluginState,
-            stickyHeadersState = _ref20.stickyHeadersState,
-            tablePluginState = _ref20.tablePluginState,
-            tableWidthPluginState = _ref20.tableWidthPluginState,
-            dragAndDropState = _ref20.dragAndDropState;
+        render: function render(_ref21) {
+          var _sizeSelectorPluginSt, _api$analytics3;
+          var resizingPluginState = _ref21.tableResizingPluginState,
+            stickyHeadersState = _ref21.stickyHeadersState,
+            tablePluginState = _ref21.tablePluginState,
+            tableWidthPluginState = _ref21.tableWidthPluginState,
+            dragAndDropState = _ref21.dragAndDropState,
+            sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref21 = tablePluginState,
-            tableNode = _ref21.tableNode,
-            tablePos = _ref21.tablePos,
-            targetCellPosition = _ref21.targetCellPosition,
-            isContextualMenuOpen = _ref21.isContextualMenuOpen,
-            tableRef = _ref21.tableRef,
-            pluginConfig = _ref21.pluginConfig,
-            insertColumnButtonIndex = _ref21.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref21.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref21.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref21.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref21.isDragAndDropEnabled,
-            tableWrapperTarget = _ref21.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref21.isCellMenuOpenByKeyboard;
+          var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
+          var _ref22 = tablePluginState,
+            tableNode = _ref22.tableNode,
+            tablePos = _ref22.tablePos,
+            targetCellPosition = _ref22.targetCellPosition,
+            isContextualMenuOpen = _ref22.isContextualMenuOpen,
+            tableRef = _ref22.tableRef,
+            pluginConfig = _ref22.pluginConfig,
+            insertColumnButtonIndex = _ref22.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref22.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref22.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref22.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref22.isDragAndDropEnabled,
+            tableWrapperTarget = _ref22.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref22.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -548,13 +564,20 @@ var tablePlugin = function tablePlugin(_ref) {
             forcePlacement: true,
             zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
             offset: [0, 10]
+          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/_react.default.createElement(_SizeSelector.SizeSelector, {
+            api: api,
+            isOpenedByKeyboard: false,
+            popupsMountPoint: popupsMountPoint,
+            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement
           }));
         }
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref22) {
-        var formatMessage = _ref22.formatMessage;
+      quickInsert: function quickInsert(_ref23) {
+        var formatMessage = _ref23.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
@@ -567,6 +590,14 @@ var tablePlugin = function tablePlugin(_ref) {
           },
           action: function action(insert, state) {
             var _api$table, _options$tableOptions6;
+            if (isTableSelectorEnabled) {
+              var _tr = insert('');
+              _tr.setMeta(_tableSizeSelector.pluginKey, {
+                isSelectorOpen: true
+              });
+              return _tr;
+            }
+
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
             var tableNodeProps = {
@@ -617,8 +648,8 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref23) {
-      var editorView = _ref23.editorView;
+    usePluginHook: function usePluginHook(_ref24) {
+      var editorView = _ref24.editorView;
       var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
         editorViewModeState = _useSharedPluginState.editorViewModeState;
       var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SizeSelector = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _tableSizeSelector = require("../../pm-plugins/table-size-selector");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var DEFAULT_TABLE_SELECTOR_COLS = 3;
+var DEFAULT_TABLE_SELECTOR_ROWS = 3;
+var SizeSelector = exports.SizeSelector = function SizeSelector(_ref) {
+  var api = _ref.api,
+    target = _ref.target,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var closeSelectorPopup = (0, _react.useCallback)(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(_tableSizeSelector.pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onSelection = (0, _react.useCallback)(function (rowsCount, colsCount) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      api === null || api === void 0 || api.table.commands.insertTableWithSize(rowsCount, colsCount)({
+        tr: tr
+      });
+      tr.setMeta(_tableSizeSelector.pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onUnmount = function onUnmount() {
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  return (0, _react2.jsx)(_ui.TableSelectorPopup, {
+    defaultSize: {
+      row: DEFAULT_TABLE_SELECTOR_ROWS,
+      col: DEFAULT_TABLE_SELECTOR_COLS
+    },
+    target: target,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    popupsBoundariesElement: popupsBoundariesElement,
+    isOpenedByKeyboard: true,
+    handleClickOutside: closeSelectorPopup,
+    handleEscapeKeydown: closeSelectorPopup
+  });
+};

package/dist/es2019/nodeviews/TableRow.js

@@ -17,7 +17,7 @@ import TableNodeView from './TableNodeViewBase';
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
-// timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
+// timeout for resetting the scroll class - if it's too long then users won't be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 export default class TableRow extends TableNodeView {
@@ -123,6 +123,9 @@ export default class TableRow extends TableNodeView {
       }
       this.emitOff(true);
     }
+    if (this.tableContainerObserver) {
+      this.tableContainerObserver.disconnect();
+    }
   }
   ignoreMutation(mutationRecord) {
     /* tableRows are not directly editable by the user
@@ -222,23 +225,27 @@ export default class TableRow extends TableNodeView {
       this.resizeObserver.observe(this.editorScrollableElement);
     }
     window.requestAnimationFrame(() => {
-      var _getTree;
+      const getTableContainer = () => {
+        var _getTree;
+        return (_getTree = getTree(this.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
+      };
+
       // we expect tree to be defined after animation frame
-      const tableContainer = (_getTree = getTree(this.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
+      let tableContainer = getTableContainer();
       if (tableContainer) {
-        const getSentinelTop = () =>
+        const getSentinelTop = () => tableContainer &&
         // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
         tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
         const getSentinelBottom = () => {
           // Multiple bottom sentinels may be found if there are nested tables.
           // We need to make sure we get the last one which will belong to the parent table.
-          const bottomSentinels = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM);
+          const bottomSentinels = tableContainer && tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM);
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
           return fg('platform_editor_nested_tables_bottom_sentinel') ?
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          bottomSentinels.item(bottomSentinels.length - 1) :
+          bottomSentinels && bottomSentinels.item(bottomSentinels.length - 1) : tableContainer &&
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
           tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
         };
@@ -256,26 +263,60 @@ export default class TableRow extends TableNodeView {
             }
           });
         };
-        if (sentinelsInDom()) {
-          // great - DOM ready, observe as normal
-          observeStickySentinels();
-        } else {
-          // concurrent loading issue - here TableRow is too eager trying to
-          // observe sentinels before they are in the DOM, use MutationObserver
-          // to wait for sentinels to be added to the parent Table node DOM
-          // then attach the IntersectionObserver
-          const tableContainerObserver = new MutationObserver(() => {
-            if (sentinelsInDom()) {
-              observeStickySentinels();
-              tableContainerObserver.disconnect();
+        if (fg('platform_editor_table_initial_load_fix')) {
+          const isInitialProsemirrorToDomRender = tableContainer.hasAttribute('data-prosemirror-initial-toDOM-render');
+
+          // Sentinels may be in the DOM but they're part of the prosemirror placeholder structure which is replaced with the fully rendered React node.
+          if (sentinelsInDom() && !isInitialProsemirrorToDomRender) {
+            // great - DOM ready, observe as normal
+            observeStickySentinels();
+          } else {
+            // concurrent loading issue - here TableRow is too eager trying to
+            // observe sentinels before they are in the DOM, use MutationObserver
+            // to wait for sentinels to be added to the parent Table node DOM
+            // then attach the IntersectionObserver
+            this.tableContainerObserver = new MutationObserver(() => {
+              // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
+              // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
+              if (!tableContainer || !tableContainer.isConnected) {
+                tableContainer = getTableContainer();
+              }
+              if (sentinelsInDom()) {
+                var _this$tableContainerO;
+                observeStickySentinels();
+                (_this$tableContainerO = this.tableContainerObserver) === null || _this$tableContainerO === void 0 ? void 0 : _this$tableContainerO.disconnect();
+              }
+            });
+            const mutatingNode = tableContainer;
+            if (mutatingNode && this.tableContainerObserver) {
+              this.tableContainerObserver.observe(mutatingNode, {
+                subtree: true,
+                childList: true
+              });
             }
-          });
-          const mutatingNode = tableContainer;
-          if (mutatingNode) {
-            tableContainerObserver.observe(mutatingNode, {
-              subtree: true,
-              childList: true
+          }
+        } else {
+          if (sentinelsInDom()) {
+            // great - DOM ready, observe as normal
+            observeStickySentinels();
+          } else {
+            // concurrent loading issue - here TableRow is too eager trying to
+            // observe sentinels before they are in the DOM, use MutationObserver
+            // to wait for sentinels to be added to the parent Table node DOM
+            // then attach the IntersectionObserver
+            const tableContainerObserver = new MutationObserver(() => {
+              if (sentinelsInDom()) {
+                observeStickySentinels();
+                tableContainerObserver.disconnect();
+              }
             });
+            const mutatingNode = tableContainer;
+            if (mutatingNode) {
+              tableContainerObserver.observe(mutatingNode, {
+                subtree: true,
+                childList: true
+              });
+            }
           }
         }
       }

package/dist/es2019/nodeviews/table.js

@@ -50,7 +50,7 @@ const handleInlineTableWidth = (table, width) => {
   table.style.setProperty('width', `${width}px`);
 };
 
-// Leave as a fallback incase the table's NodeSpec.toDOM is not defined.
+// Remove after removing the platform_editor_table_initial_load_fix flag.
 const toDOM = (node, props) => {
   let colgroup = '';
   if (props.allowColumnResizing) {