@atlaskit/editor-plugin-table 24.3.14 → 24.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-table
 
+## 24.4.0
+
+### Minor Changes
+
+- [`af0307ac8c91b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af0307ac8c91b) -
+  Fix nested tables rendering as non-nested during SSR streaming (guarded by isSSRStreaming; no
+  change to CSR)
+
+### Patch Changes
+
+- [`5fa08ff6d295a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5fa08ff6d295a) -
+  Re-add missing cell menu items behind the `platform_editor_table_cell_menu_update`.
+- [`075b6ae004392`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/075b6ae004392) -
+  [ux] fix toolbar table insertion for markdown syntax mode
+- [`e162cd8ab6b15`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e162cd8ab6b15) -
+  Fix malformed nested-table column width in SSR output: the min-width branch emitted `width: 48px)`
+  (stray parenthesis) instead of a valid `width: 48px`.
+- Updated dependencies
+
 ## 24.3.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableSSRReactContextsProvider.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableSSRReactContextsProvider = TableSSRReactContextsProvider;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+function TableSSRReactContextsProvider(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl;
+  if (!(0, _coreUtils.isSSR)() || !(0, _coreUtils.isSSRStreaming)()) {
+    return children;
+  }
+  if (!intl) {
+    return children;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactIntl.RawIntlProvider, {
+    value: intl
+  }, children);
+}

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

@@ -15,7 +15,7 @@ var _TableRowNativeStickyWithFallback = _interopRequireDefault(require("./TableR
 
 var tableView = exports.tableView = function tableView(options) {
   return function (node, view, getPos) {
-    return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
+    return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption, options.intl);
   };
 };
 var tableCellView = exports.tableCellView = function tableCellView(options) {

package/dist/cjs/nodeviews/table.js

@@ -31,6 +31,7 @@ var _nodes = require("../pm-plugins/utils/nodes");
 var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _roundedTableEdges = require("./rounded-table-edges");
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
+var _TableSSRReactContextsProvider = require("./TableSSRReactContextsProvider");
 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; })(); }
@@ -81,6 +82,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    _this.intl = props.intl;
     if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
       _this.roundedTableEdges = new _roundedTableEdges.RoundedTableEdges(function () {
         return _this.table;
@@ -168,7 +170,11 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         }
 
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-        if (this.dom && this.renderedDOM) {
+        // In SSR streaming the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
+        // `renderedDOM` from `dom` before this runs; require it to still be a child so `removeChild` doesn't throw
+        // `NotFoundError` (which would make EditorSSRRenderer fall back to the position-blind schema toDOM and lose
+        // nested detection). CSR keeps the original condition unchanged.
+        if (this.dom && this.renderedDOM && (!(0, _coreUtils.isSSRStreaming)() || this.renderedDOM.parentNode === this.dom)) {
           this.dom.removeChild(this.renderedDOM);
         }
         // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -272,7 +278,9 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      return /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.TableComponentWithSharedState, {
+      return /*#__PURE__*/_react.default.createElement(_TableSSRReactContextsProvider.TableSSRReactContextsProvider, {
+        intl: this.intl
+      }, /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.TableComponentWithSharedState, {
         forwardRef: forwardRef,
         getNode: this.getNode,
         view: props.view,
@@ -287,7 +295,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         getEditorFeatureFlags: props.getEditorFeatureFlags,
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
         allowFixedColumnWidthOption: props.allowFixedColumnWidthOption
-      });
+      }));
     }
   }, {
     key: "viewShouldUpdate",
@@ -358,7 +366,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
 }(_reactNodeView.default);
-var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption, intl) {
   var _pluginInjectionApi$t;
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
@@ -373,22 +381,6 @@ var createTableView = exports.createTableView = function createTableView(node, v
     allowTableAlignment = _getPluginConfig.allowTableAlignment;
   var isTableFixedColumnWidthsOptionEnabled = ((0, _platformFeatureFlags.fg)('platform_editor_table_fixed_column_width_prop') ? allowFixedColumnWidthOption : getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
-
-  // In SSR use native ProseMirror spec-based render for table nodes
-  if ((0, _coreUtils.isSSR)() && (0, _coreUtils.isSSRStreaming)()) {
-    var isNested = (0, _nodes.isTableNested)(view.state, typeof getPos === 'function' ? getPos() : undefined);
-    var tableDOMStructure = (0, _toDOM.tableNodeSpecWithFixedToDOM)({
-      allowColumnResizing: allowColumnResizing !== null && allowColumnResizing !== void 0 ? allowColumnResizing : false,
-      tableResizingEnabled: allowTableResizing !== null && allowTableResizing !== void 0 ? allowTableResizing : false,
-      getEditorContainerWidth: getEditorContainerWidth,
-      isTableScalingEnabled: isTableScalingEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-      isCommentEditor: isCommentEditor,
-      isChromelessEditor: isChromelessEditor,
-      isNested: isNested
-    }).toDOM(node);
-    return _model.DOMSerializer.renderSpec(document, tableDOMStructure);
-  }
   return new TableView({
     node: node,
     view: view,
@@ -412,6 +404,7 @@ var createTableView = exports.createTableView = function createTableView(node, v
     getEditorFeatureFlags: getEditorFeatureFlags,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     pluginInjectionApi: pluginInjectionApi,
-    allowFixedColumnWidthOption: allowFixedColumnWidthOption
+    allowFixedColumnWidthOption: allowFixedColumnWidthOption,
+    intl: intl
   }).init();
 };

package/dist/cjs/pm-plugins/commands/insert.js

@@ -15,7 +15,9 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _commands = require("../analytics/commands");
 var _tableAnalytics = require("../table-analytics");
 var _columnWidth = require("../transforms/column-width");
@@ -272,8 +274,15 @@ var insertTableWithNestingSupport = exports.insertTableWithNestingSupport = func
     _ref2$createTableProp = _ref2.createTableProps,
     createTableProps = _ref2$createTableProp === void 0 ? {} : _ref2$createTableProp;
   return function (_ref3) {
-    var _api$contentInsertion, _tr$selection$$from$n2;
+    var _api$markdownMode, _api$contentInsertion, _tr$selection$$from$n2;
     var tr = _ref3.tr;
+    // Delegate to the markdown plugin to insert a markdown table string at the CM cursor position.
+    var markdownState = api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.sharedState.currentState();
+    if (markdownState !== null && markdownState !== void 0 && markdownState.isMarkdownMode && (markdownState === null || markdownState === void 0 ? void 0 : markdownState.view) === 'syntax' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_markdown_compatible_toolbar')) {
+      var _api$markdownMode2;
+      api === null || api === void 0 || (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 || _api$markdownMode2.actions.insertSourceTable(createTableProps.rowsCount, createTableProps.colsCount);
+      return tr;
+    }
     var schema = tr.doc.type.schema;
 
     // If the cursor is inside a table

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

@@ -69,6 +69,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     }
     return editorView.state;
   };
+  var intl = (0, _coreUtils.isSSRStreaming)() ? getIntl() : undefined;
   var getNodeView = function getNodeView() {
     return {
       table: (0, _tableNodeViews.tableView)({
@@ -80,7 +81,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         pluginInjectionApi: pluginInjectionApi,
         isCommentEditor: isCommentEditor,
         isChromelessEditor: isChromelessEditor,
-        allowFixedColumnWidthOption: allowFixedColumnWidthOption
+        allowFixedColumnWidthOption: allowFixedColumnWidthOption,
+        intl: intl
       }),
       tableRow: (0, _tableNodeViews.tableRowView)({
         eventDispatcher: eventDispatcher,

package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroupFromNode = exports.generateColgroup = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -32,7 +33,7 @@ var generateColStyle = function generateColStyle(fixedColWidth, tableWidth, isCo
     if (hasTableBeenResized) {
       return "width: max(".concat(fixedColWidth, "px, ").concat(_styles.tableCellMinWidth, "px)");
     }
-    return "width: ".concat(_styles.tableCellMinWidth, "px)");
+    return (0, _coreUtils.isSSRStreaming)() ? "width: ".concat(_styles.tableCellMinWidth, "px") : "width: ".concat(_styles.tableCellMinWidth, "px)");
   }
   if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
     var scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");

package/dist/cjs/tablePlugin.js

@@ -22,6 +22,7 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toDOM = require("./nodeviews/toDOM");
 var _plugin = require("./pm-plugins/active-cell-highlight/plugin");
@@ -563,7 +564,7 @@ var tablePlugin = function tablePlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);
           },
           action: function action(insert, state) {
-            var _api$table, _options$tableOptions6, _tr$selection$$from$n;
+            var _api$markdownMode, _api$table, _options$tableOptions6, _tr$selection$$from$n;
             if (isTableSelectorEnabled) {
               var _tr = insert('');
               _tr.setMeta(_tableSizeSelector.pluginKey, {
@@ -572,6 +573,14 @@ var tablePlugin = function tablePlugin(_ref) {
               return _tr;
             }
 
+            // Delegate to the markdown plugin to insert a markdown table string at the CM cursor position.
+            var markdownState = api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.sharedState.currentState();
+            if (markdownState !== null && markdownState !== void 0 && markdownState.isMarkdownMode && (markdownState === null || markdownState === void 0 ? void 0 : markdownState.view) === 'syntax' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_markdown_compatible_toolbar')) {
+              var _api$markdownMode2;
+              api === null || api === void 0 || (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 || _api$markdownMode2.actions.insertSourceTable();
+              return state.tr;
+            }
+
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
             var tableNodeProps = {

package/dist/cjs/ui/TableMenu/cell/getCellMenuComponents.js

@@ -11,6 +11,7 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _alignPositionBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-bottom"));
 var _alignPositionCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-center-vertical"));
 var _alignPositionTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-top"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _MergeCellsItem = require("./items/MergeCellsItem");
 var _SplitCellItem = require("./items/SplitCellItem");
 var _VerticalAlignDropdownItem = require("./items/VerticalAlignDropdownItem");
@@ -18,7 +19,158 @@ var _VerticalAlignNestedMenu = require("./items/VerticalAlignNestedMenu");
 var _keys = require("./keys");
 var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenuComponents(_ref) {
   var api = _ref.api;
-  return [
+  return (0, _platformFeatureFlags.fg)('platform_editor_table_cell_menu_update') ? [
+  // --- Cell menu update ON ---
+  // Merge/Split cells move into the Add section (alongside the shared add/distribute
+  // items); the danger section gains the shared Delete column/row items.
+
+  // --- Menu surface ---
+  {
+    type: _keys.CELL_MENU.type,
+    key: _keys.CELL_MENU.key
+  },
+  // --- Main action section (Background color, Vertical align) ---
+  {
+    type: _keys.CELL_ACTION_SECTION.type,
+    key: _keys.CELL_ACTION_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.key,
+      rank: _keys.CELL_MENU_RANK[_keys.CELL_ACTION_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_MENU.type,
+    key: _keys.VERTICAL_ALIGN_MENU.key,
+    parents: [{
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys.VERTICAL_ALIGN_MENU.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignNestedMenu.VerticalAlignNestedMenu, null, props.children);
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+    key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU.type,
+      key: _keys.VERTICAL_ALIGN_MENU.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_RANK[_keys.VERTICAL_ALIGN_MENU_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_TOP_ITEM.type,
+    key: _keys.VERTICAL_ALIGN_TOP_ITEM.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+      key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_TOP_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        icon: _alignPositionTop.default,
+        label: _messages.tableMessages.cellAlignmentTop,
+        value: "top"
+      });
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_MIDDLE_ITEM.type,
+    key: _keys.VERTICAL_ALIGN_MIDDLE_ITEM.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+      key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_MIDDLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        icon: _alignPositionCenterVertical.default,
+        label: _messages.tableMessages.cellAlignmentMiddle,
+        value: "middle"
+      });
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_BOTTOM_ITEM.type,
+    key: _keys.VERTICAL_ALIGN_BOTTOM_ITEM.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+      key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_BOTTOM_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        icon: _alignPositionBottom.default,
+        label: _messages.tableMessages.cellAlignmentBottom,
+        value: "bottom"
+      });
+    }
+  },
+  // --- Add / Move section (shared Add column right / Add row below / Distribute
+  // columns are registered in `../shared/getSharedItems`; Merge/Split cells below) ---
+  {
+    type: _keys.CELL_ADD_SECTION.type,
+    key: _keys.CELL_ADD_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.key,
+      rank: _keys.CELL_MENU_RANK[_keys.CELL_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.MERGE_CELLS_ITEM.type,
+    key: _keys.MERGE_CELLS_ITEM.key,
+    parents: [{
+      type: _keys.CELL_ADD_SECTION.type,
+      key: _keys.CELL_ADD_SECTION.key,
+      rank: _keys.CELL_ADD_SECTION_RANK[_keys.MERGE_CELLS_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MergeCellsItem.MergeCellsItem, {
+        api: api
+      });
+    }
+  }, {
+    type: _keys.SPLIT_CELL_ITEM.type,
+    key: _keys.SPLIT_CELL_ITEM.key,
+    parents: [{
+      type: _keys.CELL_ADD_SECTION.type,
+      key: _keys.CELL_ADD_SECTION.key,
+      rank: _keys.CELL_ADD_SECTION_RANK[_keys.SPLIT_CELL_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SplitCellItem.SplitCellItem, {
+        api: api
+      });
+    }
+  },
+  // --- Danger section (Clear cell + shared Delete column / Delete row) ---
+  {
+    type: _keys.CELL_DANGER_SECTION.type,
+    key: _keys.CELL_DANGER_SECTION.key,
+    parents: [{
+      type: _keys.CELL_MENU.type,
+      key: _keys.CELL_MENU.key,
+      rank: _keys.CELL_MENU_RANK[_keys.CELL_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }] : [
+  // --- Cell menu update OFF: legacy cell menu (Merge/Split live in the action section) ---
+
   // --- Menu surface ---
   {
     type: _keys.CELL_MENU.type,

package/dist/cjs/ui/TableMenu/cell/keys.js

@@ -4,9 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_ALIGN_TOP_ITEM = exports.VERTICAL_ALIGN_MIDDLE_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_ITEM = exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
+exports.VERTICAL_ALIGN_TOP_ITEM = exports.VERTICAL_ALIGN_MIDDLE_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_ITEM = exports.SPLIT_CELL_ITEM = exports.MERGE_CELLS_ITEM = exports.CELL_MENU_RANK = exports.CELL_MENU = exports.CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION = exports.CELL_ADD_SECTION_RANK = exports.CELL_ADD_SECTION = exports.CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _keys = require("../shared/keys");
+var _keys = require("../column/keys");
+var _keys2 = require("../row/keys");
+var _keys3 = require("../shared/keys");
 // --- Menu surface ---
 
 var CELL_MENU = exports.CELL_MENU = {
@@ -20,11 +22,15 @@ var CELL_ACTION_SECTION = exports.CELL_ACTION_SECTION = {
   type: 'menu-section',
   key: 'cell-action-section'
 };
+var CELL_ADD_SECTION = exports.CELL_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'cell-add-section'
+};
 var CELL_DANGER_SECTION = exports.CELL_DANGER_SECTION = {
   type: 'menu-section',
   key: 'cell-danger-section'
 };
-var CELL_MENU_RANK = exports.CELL_MENU_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, CELL_ACTION_SECTION.key, 100), CELL_DANGER_SECTION.key, 200);
+var CELL_MENU_RANK = exports.CELL_MENU_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, CELL_ACTION_SECTION.key, 100), CELL_ADD_SECTION.key, 200), CELL_DANGER_SECTION.key, 300);
 var MERGE_CELLS_ITEM = exports.MERGE_CELLS_ITEM = {
   type: 'menu-item',
   key: 'merge-cells'
@@ -55,8 +61,16 @@ var VERTICAL_ALIGN_BOTTOM_ITEM = exports.VERTICAL_ALIGN_BOTTOM_ITEM = {
 };
 
 // --- Item ranks within their sections ---
+//
+// The add/delete items rendered in the cell menu are shared with the row/column
+// menus (registered once in `../shared/getSharedItems` with multiple parents), so
+// we reuse their existing keys here rather than declaring cell-specific ones.
 
-var CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200), MERGE_CELLS_ITEM.key, 300), SPLIT_CELL_ITEM.key, 400);
+var CELL_ACTION_SECTION_RANK = exports.CELL_ACTION_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys3.BACKGROUND_COLOR_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200), MERGE_CELLS_ITEM.key, 300), SPLIT_CELL_ITEM.key, 400);
 var VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU_RANK = (0, _defineProperty2.default)({}, VERTICAL_ALIGN_MENU_SECTION.key, 100);
 var VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_TOP_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_ITEM.key, 300);
-var CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100);
+
+// Merge/Split cells are relocated from the action section into the add section when the
+// cell menu update gate is on; they sit at the top of the section.
+var CELL_ADD_SECTION_RANK = exports.CELL_ADD_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, MERGE_CELLS_ITEM.key, 100), SPLIT_CELL_ITEM.key, 200), _keys.ADD_COLUMN_RIGHT_ITEM.key, 300), _keys2.ADD_ROW_BELOW_ITEM.key, 400), _keys.DISTRIBUTE_COLUMNS_ITEM.key, 500);
+var CELL_DANGER_SECTION_RANK = exports.CELL_DANGER_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys3.CLEAR_CELLS_ITEM.key, 100), _keys.DELETE_COLUMN_ITEM.key, 200), _keys2.DELETE_ROW_ITEM.key, 300);

package/dist/cjs/ui/TableMenu/column/getColumnMenuComponents.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getColumnMenuComponents = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AddColumnLeftItem = require("./items/AddColumnLeftItem");
 var _AddColumnRightItem = require("./items/AddColumnRightItem");
 var _ColumnBackgroundSection = require("./items/ColumnBackgroundSection");
@@ -21,7 +22,171 @@ var _SortIncreasingItem = require("./items/SortIncreasingItem");
 var _keys = require("./keys");
 var getColumnMenuComponents = exports.getColumnMenuComponents = function getColumnMenuComponents(_ref) {
   var api = _ref.api;
-  return [
+  return (0, _platformFeatureFlags.fg)('platform_editor_table_cell_menu_update') ? [
+  // --- Cell menu update ON ---
+  // AddColumnRightItem/DistributeColumnsItem/DeleteColumnItem are registered in
+  // `../shared/getSharedItems` (shared with the cell menu), so they are omitted here.
+
+  // --- Menu surface ---
+  {
+    type: _keys.COLUMN_MENU.type,
+    key: _keys.COLUMN_MENU.key
+  },
+  // --- Toggle section (Header column) ---
+  {
+    type: _keys.COLUMN_TOGGLE_SECTION.type,
+    key: _keys.COLUMN_TOGGLE_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_TOGGLE_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_ColumnToggleSection.ColumnToggleSection, {
+        api: api
+      }, props.children);
+    }
+  }, {
+    type: _keys.HEADER_COLUMN_TOGGLE_ITEM.type,
+    key: _keys.HEADER_COLUMN_TOGGLE_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_TOGGLE_SECTION.type,
+      key: _keys.COLUMN_TOGGLE_SECTION.key,
+      rank: _keys.COLUMN_TOGGLE_SECTION_RANK[_keys.HEADER_COLUMN_TOGGLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeaderColumnToggleItem.HeaderColumnToggleItem, {
+        api: api
+      });
+    }
+  },
+  // --- Background color section ---
+  {
+    type: _keys.COLUMN_BACKGROUND_SECTION.type,
+    key: _keys.COLUMN_BACKGROUND_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_BACKGROUND_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_ColumnBackgroundSection.ColumnBackgroundSection, {
+        api: api
+      }, props.children);
+    }
+  },
+  // --- Sort section ---
+  {
+    type: _keys.COLUMN_SORT_SECTION.type,
+    key: _keys.COLUMN_SORT_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_SORT_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.SORT_INCREASING_ITEM.type,
+    key: _keys.SORT_INCREASING_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_SORT_SECTION.type,
+      key: _keys.COLUMN_SORT_SECTION.key,
+      rank: _keys.COLUMN_SORT_SECTION_RANK[_keys.SORT_INCREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SortIncreasingItem.SortIncreasingItem, {
+        api: api
+      });
+    }
+  }, {
+    type: _keys.SORT_DECREASING_ITEM.type,
+    key: _keys.SORT_DECREASING_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_SORT_SECTION.type,
+      key: _keys.COLUMN_SORT_SECTION.key,
+      rank: _keys.COLUMN_SORT_SECTION_RANK[_keys.SORT_DECREASING_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_SortDecreasingItem.SortDecreasingItem, {
+        api: api
+      });
+    }
+  },
+  // --- Add / Move section ---
+  {
+    type: _keys.COLUMN_ADD_SECTION.type,
+    key: _keys.COLUMN_ADD_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_ADD_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }, {
+    type: _keys.ADD_COLUMN_LEFT_ITEM.type,
+    key: _keys.ADD_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.ADD_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_AddColumnLeftItem.AddColumnLeftItem, {
+        api: api
+      });
+    }
+  }, {
+    type: _keys.MOVE_COLUMN_LEFT_ITEM.type,
+    key: _keys.MOVE_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.MOVE_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MoveColumnLeftItem.MoveColumnLeftItem, {
+        api: api
+      });
+    }
+  }, {
+    type: _keys.MOVE_COLUMN_RIGHT_ITEM.type,
+    key: _keys.MOVE_COLUMN_RIGHT_ITEM.key,
+    parents: [{
+      type: _keys.COLUMN_ADD_SECTION.type,
+      key: _keys.COLUMN_ADD_SECTION.key,
+      rank: _keys.COLUMN_ADD_SECTION_RANK[_keys.MOVE_COLUMN_RIGHT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MoveColumnRightItem.MoveColumnRightItem, {
+        api: api
+      });
+    }
+  },
+  // --- Danger section (Clear cells, Delete column) ---
+  {
+    type: _keys.COLUMN_DANGER_SECTION.type,
+    key: _keys.COLUMN_DANGER_SECTION.key,
+    parents: [{
+      type: _keys.COLUMN_MENU.type,
+      key: _keys.COLUMN_MENU.key,
+      rank: _keys.COLUMN_SECTION_RANK[_keys.COLUMN_DANGER_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, props.children);
+    }
+  }] : [
+  // --- Cell menu update OFF: legacy column menu (registers its own add/delete items) ---
+
   // --- Menu surface ---
   {
     type: _keys.COLUMN_MENU.type,