@atlaskit/editor-plugin-table 10.6.8 → 10.6.10

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#139053](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139053)
+  [`c1c6278a78c4a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1c6278a78c4a) -
+  [ux] Adds a new temporary floating toolbar's config option to hide any toolbars when any table's
+  menu is opend.
+- Updated dependencies
+
 ## 10.6.8
 
 ### 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/tablePlugin.js

@@ -610,7 +610,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           }
         }];
       },
-      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     },

package/dist/cjs/ui/toolbar.js

@@ -37,7 +37,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../pm-plugins/commands");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
-var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
+var _pluginFactory2 = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/table-resizing/plugin-key");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
@@ -155,7 +156,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     left = initialSelectionRect.left;
   var numberOfColumns = right - left;
   var numberOfRows = bottom - top;
-  var pluginState = (0, _pluginFactory.getPluginState)(editorState);
+  var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
   var options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(_messages.tableMessages.insertColumn),
@@ -318,7 +319,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
       0: Math.max(numberOfColumns, numberOfRows)
     }),
     onClick: function onClick(state, dispatch) {
-      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
         targetCellPosition = _getPluginState.targetCellPosition;
       (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
       return true;
@@ -361,21 +362,48 @@ var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(sta
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
 };
-var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   return function (config) {
     return function (state, intl) {
       var tableObject = (0, _utils3.findTable)(state.selection);
-      var pluginState = (0, _pluginFactory.getPluginState)(state);
+      var pluginState = (0, _pluginFactory2.getPluginState)(state);
       var resizeState = _pluginKey.pluginKey.getState(state);
       var tableWidthState = _tableWidth.pluginKey.getState(state);
       var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
+      var nodeType = state.schema.nodes.table;
+      var toolbarTitle = 'Table floating controls';
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+        var _api$editorViewMode;
+        var isDragHandleMenuOpened = false;
+        var isTableRowOrColumnDragged = false;
+        if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
+          var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
+            _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
+            isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
+            _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
+            isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
+          isDragHandleMenuOpened = isDragMenuOpen;
+          isTableRowOrColumnDragged = isDragging;
+        }
+        var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
+        var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+        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;
+        if (shouldSuppressAllToolbars) {
+          return {
+            title: toolbarTitle,
+            items: [],
+            nodeType: nodeType,
+            __suppressAllToolbars: true
+          };
+        }
+      }
 
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-        var nodeType = state.schema.nodes.table;
         var isNested = pluginState.tablePos && (0, _nodes.isTableNested)(state, pluginState.tablePos);
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
         var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -463,7 +491,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           } : undefined;
         };
         return {
-          title: 'Table floating controls',
+          title: toolbarTitle,
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 18],
@@ -581,7 +609,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var isCommentEditor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
-  var pluginState = (0, _pluginFactory.getPluginState)(editorState);
+  var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
   var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
@@ -617,7 +645,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
 var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, getEditorView) {
   var _node$attrs;
   var formatMessage = _ref5.formatMessage;
-  var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+  var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
     targetCellPosition = _getPluginState2.targetCellPosition,
     pluginConfig = _getPluginState2.pluginConfig;
   if (!pluginConfig.allowBackgroundColor) {

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/tablePlugin.js

@@ -605,7 +605,7 @@ const tablesPlugin = ({
           return tr;
         }
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
     usePluginHook({
       editorView

package/dist/es2019/ui/toolbar.js

@@ -32,6 +32,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
+import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
 import { getStaticTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -344,17 +345,43 @@ const getClosestSelectionOrTableRect = state => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
   const tableWidthState = tableWidthPluginKey.getState(state);
   const isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
+  const nodeType = state.schema.nodes.table;
+  const toolbarTitle = 'Table floating controls';
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+    var _api$editorViewMode, _api$editorViewMode$s;
+    let isDragHandleMenuOpened = false;
+    let isTableRowOrColumnDragged = false;
+    if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
+      const {
+        isDragMenuOpen = false,
+        isDragging = false
+      } = getDragDropPluginState(state);
+      isDragHandleMenuOpened = isDragMenuOpen;
+      isTableRowOrColumnDragged = isDragging;
+    }
+    const isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
+    const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+    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;
+    if (shouldSuppressAllToolbars) {
+      return {
+        title: toolbarTitle,
+        items: [],
+        nodeType,
+        __suppressAllToolbars: true
+      };
+    }
+  }
 
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-    const nodeType = state.schema.nodes.table;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
     const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
     const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -433,7 +460,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       onBlur: clearHoverSelection()
     } : undefined;
     return {
-      title: 'Table floating controls',
+      title: toolbarTitle,
       getDomRef,
       nodeType,
       offset: [0, 18],

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/tablePlugin.js

@@ -601,7 +601,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           }
         }];
       },
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     },

package/dist/esm/ui/toolbar.js

@@ -36,6 +36,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
+import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
 import { getStaticTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -353,9 +354,9 @@ var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(sta
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
+export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   return function (config) {
     return function (state, intl) {
       var tableObject = findTable(state.selection);
@@ -363,11 +364,38 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       var resizeState = tableResizingPluginKey.getState(state);
       var tableWidthState = tableWidthPluginKey.getState(state);
       var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
+      var nodeType = state.schema.nodes.table;
+      var toolbarTitle = 'Table floating controls';
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+        var _api$editorViewMode;
+        var isDragHandleMenuOpened = false;
+        var isTableRowOrColumnDragged = false;
+        if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
+          var _getDragDropPluginSta = getDragDropPluginState(state),
+            _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
+            isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
+            _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
+            isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
+          isDragHandleMenuOpened = isDragMenuOpen;
+          isTableRowOrColumnDragged = isDragging;
+        }
+        var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
+        var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+        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;
+        if (shouldSuppressAllToolbars) {
+          return {
+            title: toolbarTitle,
+            items: [],
+            nodeType: nodeType,
+            __suppressAllToolbars: true
+          };
+        }
+      }
 
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-        var nodeType = state.schema.nodes.table;
         var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
         var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -455,7 +483,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           } : undefined;
         };
         return {
-          title: 'Table floating controls',
+          title: toolbarTitle,
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 18],

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/ui/toolbar.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
@@ -8,4 +8,4 @@ import type { PluginConfig, PluginInjectionAPI, ToolbarMenuConfig, ToolbarMenuCo
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingWithFixedColumnWidthsOptionShown?: boolean, areTableColumnWidthsFixed?: boolean) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
-export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;

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/dist/types-ts4.5/ui/toolbar.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
@@ -8,4 +8,4 @@ import type { PluginConfig, PluginInjectionAPI, ToolbarMenuConfig, ToolbarMenuCo
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingWithFixedColumnWidthsOptionShown?: boolean, areTableColumnWidthsFixed?: boolean) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
-export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.6.8",
+	"version": "10.6.10",
 	"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.1.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",
@@ -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"
 		},
@@ -197,6 +200,9 @@
 		},
 		"platform_editor_controls_patch_2": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_4": {
+			"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/tablePlugin.tsx

@@ -768,7 +768,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				defaultGetEditorContainerWidth,
 				api,
 				editorAnalyticsAPI,
-				options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 				() => editorViewRef.current,
 				options,
 				isTableFixedColumnWidthsOptionEnabled,

package/src/ui/toolbar.tsx

@@ -23,7 +23,6 @@ import type {
 	FloatingToolbarHandler,
 	FloatingToolbarItem,
 	GetEditorContainerWidth,
-	GetEditorFeatureFlags,
 	Icon,
 	typeOption,
 } from '@atlaskit/editor-common/types';
@@ -87,6 +86,7 @@ import {
 	toggleNumberColumnWithAnalytics,
 	wrapTableInExpandWithAnalytics,
 } from '../pm-plugins/commands/commands-with-analytics';
+import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
 import { getStaticTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -479,7 +479,6 @@ export const getToolbarConfig =
 		getEditorContainerWidth: GetEditorContainerWidth,
 		api: PluginInjectionAPI | undefined | null,
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
 		isTableFixedColumnWidthsOptionEnabled = false,
@@ -492,12 +491,45 @@ export const getToolbarConfig =
 		const resizeState = tableResizingPluginKey.getState(state);
 		const tableWidthState = tableWidthPluginKey.getState(state);
 		const isTableScalingEnabled = options?.isTableScalingEnabled || false;
+		const nodeType = state.schema.nodes.table;
+		const toolbarTitle = 'Table floating controls';
+
+		if (
+			editorExperiment('platform_editor_controls', 'variant1') &&
+			fg('platform_editor_controls_patch_4')
+		) {
+			let isDragHandleMenuOpened = false;
+			let isTableRowOrColumnDragged = false;
+			if (options?.dragAndDropEnabled) {
+				const { isDragMenuOpen = false, isDragging = false } = getDragDropPluginState(state);
+				isDragHandleMenuOpened = isDragMenuOpen;
+				isTableRowOrColumnDragged = isDragging;
+			}
+
+			const isTableOrColumnResizing = !!(resizeState?.dragging || tableWidthState?.resizing);
+			const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
+			const isViewMode = api?.editorViewMode?.sharedState.currentState()?.mode === 'view';
+
+			const shouldSuppressAllToolbars =
+				(!pluginState.editorHasFocus && !isViewMode) ||
+				isTableMenuOpened ||
+				isTableOrColumnResizing ||
+				isTableRowOrColumnDragged;
+
+			if (shouldSuppressAllToolbars) {
+				return {
+					title: toolbarTitle,
+					items: [],
+					nodeType,
+					__suppressAllToolbars: true,
+				};
+			}
+		}
 
 		// We don't want to show floating toolbar while resizing the table
 		const isWidthResizing = tableWidthState?.resizing;
 
 		if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-			const nodeType = state.schema.nodes.table;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
 			const isTableScalingWithFixedColumnWidthsOptionShown =
 				isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
@@ -645,7 +677,7 @@ export const getToolbarConfig =
 					: undefined;
 
 			return {
-				title: 'Table floating controls',
+				title: toolbarTitle,
 				getDomRef,
 				nodeType,
 				offset: [0, 18],