@atlaskit/editor-plugin-table 10.7.2 → 10.8.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#137973](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137973)
+  [`5cc195689bfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5cc195689bfb2) -
+  ED-27400 add resize layout to single column layout
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.7.2
 
 ### Patch 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/tablePlugin.js

@@ -18,6 +18,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _preset = require("@atlaskit/editor-common/preset");
+var _resizer = require("@atlaskit/editor-common/resizer");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -538,7 +539,9 @@ var tablePlugin = function tablePlugin(_ref) {
             api: api
           }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
             target: resizingTableRef,
-            content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
+            content: (0, _experiments.editorExperiment)('single_column_layouts', true) ? /*#__PURE__*/_react.default.createElement(_resizer.ResizerBreakoutModeLabel, {
+              layout: "full-width"
+            }) : /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
             alignX: 'center',
             alignY: 'bottom',
             stick: true,

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

package/dist/es2019/nodeviews/toDOM.js

@@ -52,7 +52,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }]];
       if (!config.tableResizingEnabled) {
         return ['div', {
-          class: 'tableView-content-wrap'
+          class: 'tableView-content-wrap',
+          'data-prosemirror-initial-toDOM-render': 'true'
         }, tableContainerDiv];
       }
       const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
@@ -79,7 +80,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];
       return ['div', {
-        class: 'tableView-content-wrap'
+        class: 'tableView-content-wrap',
+        'data-prosemirror-initial-toDOM-render': 'true'
       }, tableResizingDiv];
     }
   };

package/dist/es2019/tablePlugin.js

@@ -9,6 +9,7 @@ import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
@@ -533,7 +534,9 @@ const tablePlugin = ({
             api: api
           }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
             target: resizingTableRef,
-            content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+            content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+              layout: "full-width"
+            }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
             alignX: 'center',
             alignY: 'bottom',
             stick: true,

package/dist/esm/nodeviews/TableRow.js

@@ -24,7 +24,7 @@ import TableNodeView from './TableNodeViewBase';
 // 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 = /*#__PURE__*/function (_TableNodeView) {
@@ -137,6 +137,9 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         }
         this.emitOff(true);
       }
+      if (this.tableContainerObserver) {
+        this.tableContainerObserver.disconnect();
+      }
     }
   }, {
     key: "ignoreMutation",
@@ -245,26 +248,29 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         this.resizeObserver.observe(this.editorScrollableElement);
       }
       window.requestAnimationFrame(function () {
-        var _getTree;
+        var getTableContainer = function getTableContainer() {
+          var _getTree;
+          return (_getTree = getTree(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+        };
+
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = getTree(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(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(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0)
-            );
+            return tableContainer &&
+            // Ignored via go/ees005
+            // eslint-disable-next-line @atlaskit/editor/no-as-casting
+            tableContainer.getElementsByClassName(ClassName.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(ClassName.TABLE_STICKY_SENTINEL_BOTTOM);
+            var 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);
           };
@@ -284,26 +290,60 @@ var TableRow = /*#__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 (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/esm/nodeviews/table.js

@@ -61,7 +61,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/esm/nodeviews/toDOM.js

@@ -61,7 +61,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }]];
       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%";
@@ -88,7 +89,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];
       return ['div', {
-        class: 'tableView-content-wrap'
+        class: 'tableView-content-wrap',
+        'data-prosemirror-initial-toDOM-render': 'true'
       }, tableResizingDiv];
     }
   });

package/dist/esm/tablePlugin.js

@@ -12,6 +12,7 @@ import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
@@ -529,7 +530,9 @@ var tablePlugin = function tablePlugin(_ref) {
             api: api
           }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
             target: resizingTableRef,
-            content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+            content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+              layout: "full-width"
+            }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
             alignX: 'center',
             alignY: 'bottom',
             stick: true,

package/dist/types/nodeviews/TableRow.d.ts

@@ -17,6 +17,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private isSticky;
     private intersectionObserver?;
     private resizeObserver?;
+    private tableContainerObserver?;
     private sentinels;
     private sentinelData;
     private stickyRowHeight?;

package/dist/types-ts4.5/nodeviews/TableRow.d.ts

@@ -17,6 +17,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private isSticky;
     private intersectionObserver?;
     private resizeObserver?;
+    private tableContainerObserver?;
     private sentinels;
     private sentinelData;
     private stickyRowHeight?;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.7.2",
+	"version": "10.8.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.6.0",
+		"@atlaskit/editor-common": "^103.9.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
@@ -54,9 +54,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.11.0",
 		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",

package/src/nodeviews/TableRow.ts

@@ -39,7 +39,7 @@ interface SentinelData {
 // 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;
 
@@ -86,6 +86,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 	private isSticky: boolean;
 	private intersectionObserver?: IntersectionObserver;
 	private resizeObserver?: ResizeObserver;
+	private tableContainerObserver?: MutationObserver;
 	private sentinels: {
 		top?: HTMLElement | null;
 		bottom?: HTMLElement | null;
@@ -157,6 +158,10 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 
 			this.emitOff(true);
 		}
+
+		if (this.tableContainerObserver) {
+			this.tableContainerObserver.disconnect();
+		}
 	}
 
 	ignoreMutation(mutationRecord: MutationRecord | { type: 'selection'; target: Node }) {
@@ -289,32 +294,36 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		}
 
 		window.requestAnimationFrame(() => {
+			const getTableContainer = () =>
+				getTree(this.dom)?.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
+
 			// we expect tree to be defined after animation frame
-			const tableContainer = getTree(this.dom)?.wrapper.closest(
-				`.${TableCssClassName.NODEVIEW_WRAPPER}`,
-			);
+			let tableContainer = getTableContainer();
+
 			if (tableContainer) {
 				const getSentinelTop = () =>
+					tableContainer &&
 					// Ignored via go/ees005
 					// eslint-disable-next-line @atlaskit/editor/no-as-casting
-					tableContainer
+					(tableContainer
 						.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP)
-						.item(0) as HTMLElement;
+						.item(0) as HTMLElement);
 				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) as HTMLElement)
-						: // eslint-disable-next-line @atlaskit/editor/no-as-casting
-							(tableContainer
-								.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)
-								.item(0) as HTMLElement);
+							bottomSentinels && (bottomSentinels.item(bottomSentinels.length - 1) as HTMLElement)
+						: tableContainer &&
+								// eslint-disable-next-line @atlaskit/editor/no-as-casting
+								(tableContainer
+									.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)
+									.item(0) as HTMLElement);
 				};
 
 				const sentinelsInDom = () => getSentinelTop() !== null && getSentinelBottom() !== null;
@@ -333,24 +342,57 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 					});
 				};
 
-				if (sentinelsInDom()) {
-					// great - DOM ready, observe as normal
-					observeStickySentinels();
+				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()) {
+								observeStickySentinels();
+								this.tableContainerObserver?.disconnect();
+							}
+						});
+
+						const mutatingNode = tableContainer;
+						if (mutatingNode && this.tableContainerObserver) {
+							this.tableContainerObserver.observe(mutatingNode, { subtree: true, childList: true });
+						}
+					}
 				} 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 (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 });
 						}
-					});
-
-					const mutatingNode = tableContainer;
-					if (mutatingNode) {
-						tableContainerObserver.observe(mutatingNode, { subtree: true, childList: true });
 					}
 				}
 			}

package/src/nodeviews/table.tsx

@@ -81,7 +81,7 @@ const handleInlineTableWidth = (table: HTMLElement, width: number | undefined) =
 	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: PmNode, props: Props) => {
 	let colgroup: DOMOutputSpec = '';
 	if (props.allowColumnResizing) {

package/src/nodeviews/toDOM.ts

@@ -111,6 +111,7 @@ export const tableNodeSpecWithFixedToDOM = (
 					'div',
 					{
 						class: 'tableView-content-wrap',
+						'data-prosemirror-initial-toDOM-render': 'true',
 					},
 					tableContainerDiv,
 				];
@@ -161,6 +162,7 @@ export const tableNodeSpecWithFixedToDOM = (
 				'div',
 				{
 					class: 'tableView-content-wrap',
+					'data-prosemirror-initial-toDOM-render': 'true',
 				},
 				tableResizingDiv,
 			];

package/src/tablePlugin.tsx

@@ -27,6 +27,7 @@ import {
 	getPositionAfterTopParentNodeOfType,
 } from '@atlaskit/editor-common/nesting';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Command, EditorPlugin, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
@@ -679,7 +680,13 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 										widthToWidest[resizingTableLocalId] && (
 											<FloatingToolbarLabel
 												target={resizingTableRef}
-												content={<FullWidthDisplay />}
+												content={
+													editorExperiment('single_column_layouts', true) ? (
+														<ResizerBreakoutModeLabel layout="full-width" />
+													) : (
+														<FullWidthDisplay />
+													)
+												}
 												alignX={'center'}
 												alignY={'bottom'}
 												stick={true}