@atlaskit/editor-plugin-table 10.6.9 → 10.6.11

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 10.6.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.6.10
+
+### Patch Changes
+
+- [#134965](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134965)
+  [`6c2982045451c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6c2982045451c) -
+  ED-26568: Remove custom toDOM implementation as it was causing flickering of an unstyled table
+  node when loading the table with React18 concurrent mode. Add logic to temporarily ignore all
+  non-selection DOM mutations during table initialisation in order to prevent unstyled table
+  flashing. Restore mutation handler after react has finished applying the style and structure.
+
 ## 10.6.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/table.js

@@ -32,6 +32,7 @@ var _tableWidth = require("../pm-plugins/table-width");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
+var _toDOM = require("./toDOM");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
@@ -66,6 +67,8 @@ 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.
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {
@@ -86,16 +89,37 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_table_initial_load_fix')) {
+      _this.handleRef = function (node) {
+        return _this._handleTableRef(node);
+      };
+    }
     return _this;
   }
   (0, _inherits2.default)(TableView, _ReactNodeView);
   return (0, _createClass2.default)(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var rendered = _model.DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+      var tableDOMStructure;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_table_initial_load_fix')) {
+        tableDOMStructure = (0, _toDOM.tableNodeSpecWithFixedToDOM)({
+          allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
+          tableResizingEnabled: !!this.reactComponentProps.allowTableResizing,
+          getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth
+        }).toDOM(this.node);
+      } else {
+        tableDOMStructure = toDOM(this.node, this.reactComponentProps);
+      }
+      var rendered = _model.DOMSerializer.renderSpec(document, tableDOMStructure);
       if (rendered.dom) {
         var _this$options, _this$options2, _this$getEditorFeatur;
-        this.table = rendered.dom;
+        if ((0, _platformFeatureFlags.fg)('platform_editor_table_initial_load_fix')) {
+          var tableElement = rendered.dom.querySelector('table');
+          this.table = tableElement ? tableElement : rendered.dom;
+          this.renderedDOM = rendered.dom;
+        } else {
+          this.table = rendered.dom;
+        }
         if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && (_this$getEditorFeatur = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur !== void 0 && _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption && this.node.attrs.displayMode === 'fixed') {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
           if (tableInlineWidth) {
@@ -105,10 +129,79 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       }
       return rendered;
     }
+
+    /**
+     * Handles moving the table from ProseMirror's DOM structure into a React-rendered table node.
+     * Temporarily disables mutation observers (except for selection changes) during the move,
+     * preserves selection state, and restores it afterwards if mutations occurred and cursor
+     * wasn't at start of node. This prevents duplicate tables and maintains editor state during
+     * the DOM manipulation.
+     */
+  }, {
+    key: "_handleTableRef",
+    value: function _handleTableRef(node) {
+      var _this2 = this;
+      var oldIgnoreMutation;
+      var selectionBookmark;
+      var parentOffset = 0;
+      var mutationsIgnored = false;
+
+      // Only proceed if we have both a node and table, and the table isn't already inside the node
+      if (node && this.table && !node.contains(this.table)) {
+        var _this$view$state$sele;
+        // Store the current ignoreMutation handler so we can restore it later
+        oldIgnoreMutation = this.ignoreMutation;
+
+        // Set up a temporary mutation handler that:
+        // - Ignores all DOM mutations except selection changes
+        // - Tracks when mutations have been ignored via mutationsIgnored flag
+        this.ignoreMutation = function (m) {
+          var isSelectionMutation = m.target instanceof Selection;
+          if (!isSelectionMutation) {
+            mutationsIgnored = true;
+          }
+          return !isSelectionMutation;
+        };
+
+        // Store the current selection state if there is a visible selection
+        // This lets us restore it after DOM changes
+        if (this.view.state.selection.visible) {
+          selectionBookmark = this.view.state.selection.getBookmark();
+        }
+
+        // Store the current cursor position within the parent node
+        // Used to determine if we need to restore selection later
+        if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
+          var _this$view$state$sele2, _this$view$state$sele3;
+          parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
+        }
+
+        // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
+        if (this.renderedDOM) {
+          this.dom.removeChild(this.renderedDOM);
+        }
+        // Move the table from the ProseMirror table structure into the React rendered table node.
+        node.appendChild(this.table);
+
+        // After the next frame:
+        requestAnimationFrame(function () {
+          // Restore the original mutation handler
+          _this2.ignoreMutation = oldIgnoreMutation;
+
+          // Restore the selection only if:
+          // - We have a selection bookmark
+          // - Mutations were ignored during the table move
+          // - The cursor wasn't at the start of the node
+          if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
+            _this2.view.dispatch(_this2.view.state.tr.setSelection(selectionBookmark.resolve(_this2.view.state.tr.doc)));
+          }
+        });
+      }
+    }
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this2 = this,
+      var _this3 = this,
         _this$options3,
         _this$options4,
         _this$getEditorFeatur2;
@@ -119,7 +212,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       Object.keys(attrs).forEach(function (attr) {
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        _this2.table.setAttribute(attr, attrs[attr]);
+        _this3.table.setAttribute(attr, attrs[attr]);
       });
 
       // Preserve Table Width cannot have inline width set on the table
@@ -136,7 +229,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this3 = this;
+      var _this4 = this;
       if ((0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
         return /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.TableComponentWithSharedState, {
           forwardRef: forwardRef,
@@ -154,7 +247,6 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
         });
       }
-
       // Please, do not copy or use this kind of code below
       // @ts-ignore
       var fakePluginKey = {
@@ -246,7 +338,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             ,
             ordering: pluginState.ordering,
             isResizing: isResizing,
-            getNode: _this3.getNode
+            getNode: _this4.getNode
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             ,

package/dist/cjs/ui/toolbar.js

@@ -389,8 +389,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         }
         var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
         var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+        var isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
-        var shouldSuppressAllToolbars = !pluginState.editorHasFocus && !isViewMode || isTableMenuOpened || isTableOrColumnResizing || isTableRowOrColumnDragged;
+
+        // Note: when focus is in codeblocks, pluginState.editorHasFocus is false, so the codeblocks toolbar
+        // won't be suppressed.
+        var shouldSuppressAllToolbars = isTableState && pluginState.editorHasFocus && !isViewMode;
         if (shouldSuppressAllToolbars) {
           return {
             title: toolbarTitle,

package/dist/es2019/nodeviews/table.js

@@ -17,6 +17,7 @@ import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../pm-plugins/utils/nodes';
 import TableComponent from './TableComponent';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
+import { tableNodeSpecWithFixedToDOM } from './toDOM';
 const tableAttributes = node => {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -48,6 +49,8 @@ const handleInlineTableWidth = (table, width) => {
   }
   table.style.setProperty('width', `${width}px`);
 };
+
+// Leave as a fallback incase the table's NodeSpec.toDOM is not defined.
 const toDOM = (node, props) => {
   let colgroup = '';
   if (props.allowColumnResizing) {
@@ -66,12 +69,31 @@ export default class TableView extends ReactNodeView {
     this.eventDispatcher = props.eventDispatcher;
     this.options = props.options;
     this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    if (fg('platform_editor_table_initial_load_fix')) {
+      this.handleRef = node => this._handleTableRef(node);
+    }
   }
   getContentDOM() {
-    const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+    let tableDOMStructure;
+    if (fg('platform_editor_table_initial_load_fix')) {
+      tableDOMStructure = tableNodeSpecWithFixedToDOM({
+        allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
+        tableResizingEnabled: !!this.reactComponentProps.allowTableResizing,
+        getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth
+      }).toDOM(this.node);
+    } else {
+      tableDOMStructure = toDOM(this.node, this.reactComponentProps);
+    }
+    const rendered = DOMSerializer.renderSpec(document, tableDOMStructure);
     if (rendered.dom) {
       var _this$options, _this$options2, _this$getEditorFeatur;
-      this.table = rendered.dom;
+      if (fg('platform_editor_table_initial_load_fix')) {
+        const tableElement = rendered.dom.querySelector('table');
+        this.table = tableElement ? tableElement : rendered.dom;
+        this.renderedDOM = rendered.dom;
+      } else {
+        this.table = rendered.dom;
+      }
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && (_this$getEditorFeatur = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur !== void 0 && _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption && this.node.attrs.displayMode === 'fixed') {
         const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
         if (tableInlineWidth) {
@@ -81,6 +103,72 @@ export default class TableView extends ReactNodeView {
     }
     return rendered;
   }
+
+  /**
+   * Handles moving the table from ProseMirror's DOM structure into a React-rendered table node.
+   * Temporarily disables mutation observers (except for selection changes) during the move,
+   * preserves selection state, and restores it afterwards if mutations occurred and cursor
+   * wasn't at start of node. This prevents duplicate tables and maintains editor state during
+   * the DOM manipulation.
+   */
+  _handleTableRef(node) {
+    let oldIgnoreMutation;
+    let selectionBookmark;
+    let parentOffset = 0;
+    let mutationsIgnored = false;
+
+    // Only proceed if we have both a node and table, and the table isn't already inside the node
+    if (node && this.table && !node.contains(this.table)) {
+      var _this$view$state$sele;
+      // Store the current ignoreMutation handler so we can restore it later
+      oldIgnoreMutation = this.ignoreMutation;
+
+      // Set up a temporary mutation handler that:
+      // - Ignores all DOM mutations except selection changes
+      // - Tracks when mutations have been ignored via mutationsIgnored flag
+      this.ignoreMutation = m => {
+        const isSelectionMutation = m.target instanceof Selection;
+        if (!isSelectionMutation) {
+          mutationsIgnored = true;
+        }
+        return !isSelectionMutation;
+      };
+
+      // Store the current selection state if there is a visible selection
+      // This lets us restore it after DOM changes
+      if (this.view.state.selection.visible) {
+        selectionBookmark = this.view.state.selection.getBookmark();
+      }
+
+      // Store the current cursor position within the parent node
+      // Used to determine if we need to restore selection later
+      if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
+        var _this$view$state$sele2, _this$view$state$sele3, _this$view$state$sele4;
+        parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 ? void 0 : (_this$view$state$sele4 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele4 === void 0 ? void 0 : _this$view$state$sele4.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
+      }
+
+      // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
+      if (this.renderedDOM) {
+        this.dom.removeChild(this.renderedDOM);
+      }
+      // Move the table from the ProseMirror table structure into the React rendered table node.
+      node.appendChild(this.table);
+
+      // After the next frame:
+      requestAnimationFrame(() => {
+        // Restore the original mutation handler
+        this.ignoreMutation = oldIgnoreMutation;
+
+        // Restore the selection only if:
+        // - We have a selection bookmark
+        // - Mutations were ignored during the table move
+        // - The cursor wasn't at the start of the node
+        if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
+          this.view.dispatch(this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)));
+        }
+      });
+    }
+  }
   setDomAttrs(node) {
     var _this$options3, _this$options4, _this$getEditorFeatur2;
     if (!this.table) {
@@ -122,7 +210,6 @@ export default class TableView extends ReactNodeView {
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
       });
     }
-
     // Please, do not copy or use this kind of code below
     // @ts-ignore
     const fakePluginKey = {

package/dist/es2019/ui/toolbar.js

@@ -367,8 +367,12 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
     }
     const isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
     const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+    const isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
     const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
-    const shouldSuppressAllToolbars = !pluginState.editorHasFocus && !isViewMode || isTableMenuOpened || isTableOrColumnResizing || isTableRowOrColumnDragged;
+
+    // Note: when focus is in codeblocks, pluginState.editorHasFocus is false, so the codeblocks toolbar
+    // won't be suppressed.
+    const shouldSuppressAllToolbars = isTableState && pluginState.editorHasFocus && !isViewMode;
     if (shouldSuppressAllToolbars) {
       return {
         title: toolbarTitle,

package/dist/esm/nodeviews/table.js

@@ -28,6 +28,7 @@ import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../pm-plugins/utils/nodes';
 import TableComponent from './TableComponent';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
+import { tableNodeSpecWithFixedToDOM } from './toDOM';
 var tableAttributes = function tableAttributes(node) {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -59,6 +60,8 @@ 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.
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {
@@ -79,16 +82,37 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    if (fg('platform_editor_table_initial_load_fix')) {
+      _this.handleRef = function (node) {
+        return _this._handleTableRef(node);
+      };
+    }
     return _this;
   }
   _inherits(TableView, _ReactNodeView);
   return _createClass(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+      var tableDOMStructure;
+      if (fg('platform_editor_table_initial_load_fix')) {
+        tableDOMStructure = tableNodeSpecWithFixedToDOM({
+          allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
+          tableResizingEnabled: !!this.reactComponentProps.allowTableResizing,
+          getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth
+        }).toDOM(this.node);
+      } else {
+        tableDOMStructure = toDOM(this.node, this.reactComponentProps);
+      }
+      var rendered = DOMSerializer.renderSpec(document, tableDOMStructure);
       if (rendered.dom) {
         var _this$options, _this$options2, _this$getEditorFeatur;
-        this.table = rendered.dom;
+        if (fg('platform_editor_table_initial_load_fix')) {
+          var tableElement = rendered.dom.querySelector('table');
+          this.table = tableElement ? tableElement : rendered.dom;
+          this.renderedDOM = rendered.dom;
+        } else {
+          this.table = rendered.dom;
+        }
         if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && (_this$getEditorFeatur = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur !== void 0 && _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption && this.node.attrs.displayMode === 'fixed') {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
           if (tableInlineWidth) {
@@ -98,10 +122,79 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return rendered;
     }
+
+    /**
+     * Handles moving the table from ProseMirror's DOM structure into a React-rendered table node.
+     * Temporarily disables mutation observers (except for selection changes) during the move,
+     * preserves selection state, and restores it afterwards if mutations occurred and cursor
+     * wasn't at start of node. This prevents duplicate tables and maintains editor state during
+     * the DOM manipulation.
+     */
+  }, {
+    key: "_handleTableRef",
+    value: function _handleTableRef(node) {
+      var _this2 = this;
+      var oldIgnoreMutation;
+      var selectionBookmark;
+      var parentOffset = 0;
+      var mutationsIgnored = false;
+
+      // Only proceed if we have both a node and table, and the table isn't already inside the node
+      if (node && this.table && !node.contains(this.table)) {
+        var _this$view$state$sele;
+        // Store the current ignoreMutation handler so we can restore it later
+        oldIgnoreMutation = this.ignoreMutation;
+
+        // Set up a temporary mutation handler that:
+        // - Ignores all DOM mutations except selection changes
+        // - Tracks when mutations have been ignored via mutationsIgnored flag
+        this.ignoreMutation = function (m) {
+          var isSelectionMutation = m.target instanceof Selection;
+          if (!isSelectionMutation) {
+            mutationsIgnored = true;
+          }
+          return !isSelectionMutation;
+        };
+
+        // Store the current selection state if there is a visible selection
+        // This lets us restore it after DOM changes
+        if (this.view.state.selection.visible) {
+          selectionBookmark = this.view.state.selection.getBookmark();
+        }
+
+        // Store the current cursor position within the parent node
+        // Used to determine if we need to restore selection later
+        if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
+          var _this$view$state$sele2, _this$view$state$sele3;
+          parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
+        }
+
+        // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
+        if (this.renderedDOM) {
+          this.dom.removeChild(this.renderedDOM);
+        }
+        // Move the table from the ProseMirror table structure into the React rendered table node.
+        node.appendChild(this.table);
+
+        // After the next frame:
+        requestAnimationFrame(function () {
+          // Restore the original mutation handler
+          _this2.ignoreMutation = oldIgnoreMutation;
+
+          // Restore the selection only if:
+          // - We have a selection bookmark
+          // - Mutations were ignored during the table move
+          // - The cursor wasn't at the start of the node
+          if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
+            _this2.view.dispatch(_this2.view.state.tr.setSelection(selectionBookmark.resolve(_this2.view.state.tr.doc)));
+          }
+        });
+      }
+    }
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this2 = this,
+      var _this3 = this,
         _this$options3,
         _this$options4,
         _this$getEditorFeatur2;
@@ -112,7 +205,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       Object.keys(attrs).forEach(function (attr) {
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        _this2.table.setAttribute(attr, attrs[attr]);
+        _this3.table.setAttribute(attr, attrs[attr]);
       });
 
       // Preserve Table Width cannot have inline width set on the table
@@ -129,7 +222,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this3 = this;
+      var _this4 = this;
       if (fg('platform_editor_table_use_shared_state_hook_fg')) {
         return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
           forwardRef: forwardRef,
@@ -147,7 +240,6 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
         });
       }
-
       // Please, do not copy or use this kind of code below
       // @ts-ignore
       var fakePluginKey = {
@@ -239,7 +331,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             ,
             ordering: pluginState.ordering,
             isResizing: isResizing,
-            getNode: _this3.getNode
+            getNode: _this4.getNode
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             ,

package/dist/esm/ui/toolbar.js

@@ -381,8 +381,12 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         }
         var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
         var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+        var isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
-        var shouldSuppressAllToolbars = !pluginState.editorHasFocus && !isViewMode || isTableMenuOpened || isTableOrColumnResizing || isTableRowOrColumnDragged;
+
+        // Note: when focus is in codeblocks, pluginState.editorHasFocus is false, so the codeblocks toolbar
+        // won't be suppressed.
+        var shouldSuppressAllToolbars = isTableState && pluginState.editorHasFocus && !isViewMode;
         if (shouldSuppressAllToolbars) {
           return {
             title: toolbarTitle,

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

@@ -11,6 +11,7 @@ import type { Props } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;
+    private renderedDOM?;
     private resizeObserver?;
     eventDispatcher?: EventDispatcher;
     getPos: getPosHandlerNode;
@@ -21,6 +22,14 @@ export default class TableView extends ReactNodeView<Props> {
         dom: HTMLElement;
         contentDOM?: HTMLElement | undefined;
     };
+    /**
+     * Handles moving the table from ProseMirror's DOM structure into a React-rendered table node.
+     * Temporarily disables mutation observers (except for selection changes) during the move,
+     * preserves selection state, and restores it afterwards if mutations occurred and cursor
+     * wasn't at start of node. This prevents duplicate tables and maintains editor state during
+     * the DOM manipulation.
+     */
+    private _handleTableRef;
     setDomAttrs(node: PmNode): void;
     getNode: () => PmNode;
     render(props: Props, forwardRef: ForwardRef): React.JSX.Element;

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

@@ -1,10 +1,12 @@
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 type Config = {
     allowColumnResizing: boolean;
     tableResizingEnabled: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
     isNestingSupported?: boolean;
 };
-export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec;
+export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec & {
+    toDOM: (node: PMNode) => DOMOutputSpec;
+};
 export {};

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

@@ -11,6 +11,7 @@ import type { Props } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;
+    private renderedDOM?;
     private resizeObserver?;
     eventDispatcher?: EventDispatcher;
     getPos: getPosHandlerNode;
@@ -21,6 +22,14 @@ export default class TableView extends ReactNodeView<Props> {
         dom: HTMLElement;
         contentDOM?: HTMLElement | undefined;
     };
+    /**
+     * Handles moving the table from ProseMirror's DOM structure into a React-rendered table node.
+     * Temporarily disables mutation observers (except for selection changes) during the move,
+     * preserves selection state, and restores it afterwards if mutations occurred and cursor
+     * wasn't at start of node. This prevents duplicate tables and maintains editor state during
+     * the DOM manipulation.
+     */
+    private _handleTableRef;
     setDomAttrs(node: PmNode): void;
     getNode: () => PmNode;
     render(props: Props, forwardRef: ForwardRef): React.JSX.Element;

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

@@ -1,10 +1,12 @@
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 type Config = {
     allowColumnResizing: boolean;
     tableResizingEnabled: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
     isNestingSupported?: boolean;
 };
-export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec;
+export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec & {
+    toDOM: (node: PMNode) => DOMOutputSpec;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.6.9",
+	"version": "10.6.11",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,14 +32,14 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.2.0",
+		"@atlaskit/editor-common": "^103.3.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-extension": "5.2.2",
+		"@atlaskit/editor-plugin-extension": "5.2.3",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -123,6 +123,9 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
+		"platform_editor_table_initial_load_fix": {
+			"type": "boolean"
+		},
 		"platform_editor_table_overflow_in_full_width_fix": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableComponent.tsx

@@ -1033,6 +1033,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 						if (elem) {
 							this.props.contentDOM(elem);
 							const tableElement = elem.querySelector('table');
+
 							if (tableElement !== this.table) {
 								this.table = tableElement;
 								this.createShadowSentinels(this.table);

package/src/nodeviews/table.tsx

@@ -15,7 +15,7 @@ import type {
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, PluginKey, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -33,6 +33,7 @@ import type { PluginInjectionAPI } from '../types';
 
 import TableComponent from './TableComponent';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
+import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import type { Props } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
@@ -80,18 +81,18 @@ 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.
 const toDOM = (node: PmNode, props: Props) => {
 	let colgroup: DOMOutputSpec = '';
-
 	if (props.allowColumnResizing) {
 		colgroup = ['colgroup', {}, ...generateColgroup(node)];
 	}
-
 	return ['table', tableAttributes(node), colgroup, ['tbody', 0]] as DOMOutputSpec;
 };
 
 export default class TableView extends ReactNodeView<Props> {
 	private table: HTMLElement | undefined;
+	private renderedDOM?: HTMLElement;
 	private resizeObserver?: ResizeObserver;
 	eventDispatcher?: EventDispatcher;
 	getPos: getPosHandlerNode;
@@ -111,19 +112,37 @@ export default class TableView extends ReactNodeView<Props> {
 		this.eventDispatcher = props.eventDispatcher;
 		this.options = props.options;
 		this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+
+		if (fg('platform_editor_table_initial_load_fix')) {
+			this.handleRef = (node: HTMLElement | null) => this._handleTableRef(node);
+		}
 	}
 
 	getContentDOM() {
-		const rendered = DOMSerializer.renderSpec(
-			document,
-			toDOM(this.node, this.reactComponentProps as Props),
-		) as {
+		let tableDOMStructure;
+		if (fg('platform_editor_table_initial_load_fix')) {
+			tableDOMStructure = tableNodeSpecWithFixedToDOM({
+				allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
+				tableResizingEnabled: !!this.reactComponentProps.allowTableResizing,
+				getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth,
+			}).toDOM(this.node);
+		} else {
+			tableDOMStructure = toDOM(this.node, this.reactComponentProps as Props);
+		}
+
+		const rendered = DOMSerializer.renderSpec(document, tableDOMStructure) as {
 			dom: HTMLElement;
 			contentDOM?: HTMLElement;
 		};
 
 		if (rendered.dom) {
-			this.table = rendered.dom;
+			if (fg('platform_editor_table_initial_load_fix')) {
+				const tableElement = rendered.dom.querySelector('table');
+				this.table = tableElement ? tableElement : rendered.dom;
+				this.renderedDOM = rendered.dom;
+			} else {
+				this.table = rendered.dom;
+			}
 
 			if (
 				!this.options?.isTableScalingEnabled ||
@@ -147,6 +166,73 @@ export default class TableView extends ReactNodeView<Props> {
 		return rendered;
 	}
 
+	/**
+	 * Handles moving the table from ProseMirror's DOM structure into a React-rendered table node.
+	 * Temporarily disables mutation observers (except for selection changes) during the move,
+	 * preserves selection state, and restores it afterwards if mutations occurred and cursor
+	 * wasn't at start of node. This prevents duplicate tables and maintains editor state during
+	 * the DOM manipulation.
+	 */
+	private _handleTableRef(node: HTMLElement | null) {
+		let oldIgnoreMutation: (mutation: MutationRecord) => boolean;
+
+		let selectionBookmark: SelectionBookmark;
+		let parentOffset = 0;
+		let mutationsIgnored = false;
+
+		// Only proceed if we have both a node and table, and the table isn't already inside the node
+		if (node && this.table && !node.contains(this.table)) {
+			// Store the current ignoreMutation handler so we can restore it later
+			oldIgnoreMutation = this.ignoreMutation;
+
+			// Set up a temporary mutation handler that:
+			// - Ignores all DOM mutations except selection changes
+			// - Tracks when mutations have been ignored via mutationsIgnored flag
+			this.ignoreMutation = (m: MutationRecord) => {
+				const isSelectionMutation = m.target instanceof Selection;
+				if (!isSelectionMutation) {
+					mutationsIgnored = true;
+				}
+				return !isSelectionMutation;
+			};
+
+			// Store the current selection state if there is a visible selection
+			// This lets us restore it after DOM changes
+			if (this.view.state.selection.visible) {
+				selectionBookmark = this.view.state.selection.getBookmark();
+			}
+
+			// Store the current cursor position within the parent node
+			// Used to determine if we need to restore selection later
+			if (this.view.state.selection?.ranges.length > 0) {
+				parentOffset = this.view.state.selection?.ranges[0].$from?.parentOffset ?? 0;
+			}
+
+			// Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
+			if (this.renderedDOM) {
+				this.dom.removeChild(this.renderedDOM);
+			}
+			// Move the table from the ProseMirror table structure into the React rendered table node.
+			node.appendChild(this.table);
+
+			// After the next frame:
+			requestAnimationFrame(() => {
+				// Restore the original mutation handler
+				this.ignoreMutation = oldIgnoreMutation;
+
+				// Restore the selection only if:
+				// - We have a selection bookmark
+				// - Mutations were ignored during the table move
+				// - The cursor wasn't at the start of the node
+				if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
+					this.view.dispatch(
+						this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)),
+					);
+				}
+			});
+		}
+	}
+
 	setDomAttrs(node: PmNode) {
 		if (!this.table) {
 			return;
@@ -206,7 +292,6 @@ export default class TableView extends ReactNodeView<Props> {
 				/>
 			);
 		}
-
 		// Please, do not copy or use this kind of code below
 		// @ts-ignore
 		const fakePluginKey = {

package/src/nodeviews/toDOM.ts

@@ -17,7 +17,9 @@ type Config = {
 	getEditorContainerWidth: GetEditorContainerWidth;
 	isNestingSupported?: boolean;
 };
-export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
+export const tableNodeSpecWithFixedToDOM = (
+	config: Config,
+): NodeSpec & { toDOM: (node: PMNode) => DOMOutputSpec } => {
 	const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
 
 	return {

package/src/ui/toolbar.tsx

@@ -508,14 +508,13 @@ export const getToolbarConfig =
 
 			const isTableOrColumnResizing = !!(resizeState?.dragging || tableWidthState?.resizing);
 			const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+			const isTableState =
+				isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
 			const isViewMode = api?.editorViewMode?.sharedState.currentState()?.mode === 'view';
 
-			const shouldSuppressAllToolbars =
-				(!pluginState.editorHasFocus && !isViewMode) ||
-				isTableMenuOpened ||
-				isTableOrColumnResizing ||
-				isTableRowOrColumnDragged;
-
+			// Note: when focus is in codeblocks, pluginState.editorHasFocus is false, so the codeblocks toolbar
+			// won't be suppressed.
+			const shouldSuppressAllToolbars = isTableState && pluginState.editorHasFocus && !isViewMode;
 			if (shouldSuppressAllToolbars) {
 				return {
 					title: toolbarTitle,