@atlaskit/editor-plugin-table 24.3.14 → 24.4.0

package/dist/es2019/tablePlugin.js

@@ -13,6 +13,7 @@ import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/ut
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
 import { createPlugin as createActiveCellHighlightPlugin } from './pm-plugins/active-cell-highlight/plugin';
@@ -544,7 +545,7 @@ const tablePlugin = ({
         keyshortcut: tooltip(toggleTable),
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
         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) {
             const tr = insert('');
             tr.setMeta(sizeSelectorPluginKey, {
@@ -553,6 +554,14 @@ const tablePlugin = ({
             return tr;
           }
 
+          // Delegate to the markdown plugin to insert a markdown table string at the CM cursor position.
+          const markdownState = api === null || api === void 0 ? 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' && expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar')) {
+            var _api$markdownMode2;
+            api === null || api === void 0 ? void 0 : (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 ? void 0 : _api$markdownMode2.actions.insertSourceTable();
+            return state.tr;
+          }
+
           // see comment on tablesPlugin.getSharedState on usage
           const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
           const tableNodeProps = {

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

@@ -4,14 +4,146 @@ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
 import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
 import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MergeCellsItem } from './items/MergeCellsItem';
 import { SplitCellItem } from './items/SplitCellItem';
 import { VerticalAlignDropdownItem } from './items/VerticalAlignDropdownItem';
 import { VerticalAlignNestedMenu } from './items/VerticalAlignNestedMenu';
-import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK, VERTICAL_ALIGN_BOTTOM_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_ITEM, VERTICAL_ALIGN_TOP_ITEM } from './keys';
+import { CELL_MENU, CELL_ACTION_SECTION, CELL_ADD_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK, CELL_ADD_SECTION_RANK, VERTICAL_ALIGN_BOTTOM_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_ITEM, VERTICAL_ALIGN_TOP_ITEM } from './keys';
 export const getCellMenuComponents = ({
   api
-}) => [
+}) => 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: CELL_MENU.type,
+  key: CELL_MENU.key
+},
+// --- Main action section (Background color, Vertical align) ---
+{
+  type: CELL_ACTION_SECTION.type,
+  key: CELL_ACTION_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_RANK[CELL_ACTION_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: VERTICAL_ALIGN_MENU.type,
+  key: VERTICAL_ALIGN_MENU.key,
+  parents: [{
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[VERTICAL_ALIGN_MENU.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, null, props.children)
+}, {
+  type: VERTICAL_ALIGN_MENU_SECTION.type,
+  key: VERTICAL_ALIGN_MENU_SECTION.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU.type,
+    key: VERTICAL_ALIGN_MENU.key,
+    rank: VERTICAL_ALIGN_MENU_RANK[VERTICAL_ALIGN_MENU_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: VERTICAL_ALIGN_TOP_ITEM.type,
+  key: VERTICAL_ALIGN_TOP_ITEM.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_TOP_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+    api: api,
+    icon: AlignPositionTopIcon,
+    label: messages.cellAlignmentTop,
+    value: "top"
+  })
+}, {
+  type: VERTICAL_ALIGN_MIDDLE_ITEM.type,
+  key: VERTICAL_ALIGN_MIDDLE_ITEM.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_MIDDLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+    api: api,
+    icon: AlignPositionCenterVerticalIcon,
+    label: messages.cellAlignmentMiddle,
+    value: "middle"
+  })
+}, {
+  type: VERTICAL_ALIGN_BOTTOM_ITEM.type,
+  key: VERTICAL_ALIGN_BOTTOM_ITEM.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+    api: api,
+    icon: AlignPositionBottomIcon,
+    label: messages.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: CELL_ADD_SECTION.type,
+  key: CELL_ADD_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_RANK[CELL_ADD_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: MERGE_CELLS_ITEM.type,
+  key: MERGE_CELLS_ITEM.key,
+  parents: [{
+    type: CELL_ADD_SECTION.type,
+    key: CELL_ADD_SECTION.key,
+    rank: CELL_ADD_SECTION_RANK[MERGE_CELLS_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MergeCellsItem, {
+    api: api
+  })
+}, {
+  type: SPLIT_CELL_ITEM.type,
+  key: SPLIT_CELL_ITEM.key,
+  parents: [{
+    type: CELL_ADD_SECTION.type,
+    key: CELL_ADD_SECTION.key,
+    rank: CELL_ADD_SECTION_RANK[SPLIT_CELL_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(SplitCellItem, {
+    api: api
+  })
+},
+// --- Danger section (Clear cell + shared Delete column / Delete row) ---
+{
+  type: CELL_DANGER_SECTION.type,
+  key: CELL_DANGER_SECTION.key,
+  parents: [{
+    type: CELL_MENU.type,
+    key: CELL_MENU.key,
+    rank: CELL_MENU_RANK[CELL_DANGER_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}] : [
+// --- Cell menu update OFF: legacy cell menu (Merge/Split live in the action section) ---
+
 // --- Menu surface ---
 {
   type: CELL_MENU.type,

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

@@ -1,3 +1,5 @@
+import { ADD_COLUMN_RIGHT_ITEM, DELETE_COLUMN_ITEM, DISTRIBUTE_COLUMNS_ITEM } from '../column/keys';
+import { ADD_ROW_BELOW_ITEM, DELETE_ROW_ITEM } from '../row/keys';
 import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
 
 // --- Menu surface ---
@@ -13,13 +15,18 @@ export const CELL_ACTION_SECTION = {
   type: 'menu-section',
   key: 'cell-action-section'
 };
+export const CELL_ADD_SECTION = {
+  type: 'menu-section',
+  key: 'cell-add-section'
+};
 export const CELL_DANGER_SECTION = {
   type: 'menu-section',
   key: 'cell-danger-section'
 };
 export const CELL_MENU_RANK = {
   [CELL_ACTION_SECTION.key]: 100,
-  [CELL_DANGER_SECTION.key]: 200
+  [CELL_ADD_SECTION.key]: 200,
+  [CELL_DANGER_SECTION.key]: 300
 };
 export const MERGE_CELLS_ITEM = {
   type: 'menu-item',
@@ -51,6 +58,10 @@ export const 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.
 
 export const CELL_ACTION_SECTION_RANK = {
   [BACKGROUND_COLOR_ITEM.key]: 100,
@@ -66,6 +77,18 @@ export const VERTICAL_ALIGN_MENU_SECTION_RANK = {
   [VERTICAL_ALIGN_MIDDLE_ITEM.key]: 200,
   [VERTICAL_ALIGN_BOTTOM_ITEM.key]: 300
 };
+
+// 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.
+export const CELL_ADD_SECTION_RANK = {
+  [MERGE_CELLS_ITEM.key]: 100,
+  [SPLIT_CELL_ITEM.key]: 200,
+  [ADD_COLUMN_RIGHT_ITEM.key]: 300,
+  [ADD_ROW_BELOW_ITEM.key]: 400,
+  [DISTRIBUTE_COLUMNS_ITEM.key]: 500
+};
 export const CELL_DANGER_SECTION_RANK = {
-  [CLEAR_CELLS_ITEM.key]: 100
+  [CLEAR_CELLS_ITEM.key]: 100,
+  [DELETE_COLUMN_ITEM.key]: 200,
+  [DELETE_ROW_ITEM.key]: 300
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AddColumnLeftItem } from './items/AddColumnLeftItem';
 import { AddColumnRightItem } from './items/AddColumnRightItem';
 import { ColumnBackgroundSection } from './items/ColumnBackgroundSection';
@@ -14,7 +15,149 @@ import { SortIncreasingItem } from './items/SortIncreasingItem';
 import { COLUMN_MENU, COLUMN_TOGGLE_SECTION, COLUMN_BACKGROUND_SECTION, COLUMN_SORT_SECTION, COLUMN_ADD_SECTION, COLUMN_DANGER_SECTION, COLUMN_SECTION_RANK, HEADER_COLUMN_TOGGLE_ITEM, SORT_INCREASING_ITEM, SORT_DECREASING_ITEM, ADD_COLUMN_LEFT_ITEM, ADD_COLUMN_RIGHT_ITEM, MOVE_COLUMN_LEFT_ITEM, MOVE_COLUMN_RIGHT_ITEM, DISTRIBUTE_COLUMNS_ITEM, DELETE_COLUMN_ITEM, COLUMN_TOGGLE_SECTION_RANK, COLUMN_SORT_SECTION_RANK, COLUMN_ADD_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from './keys';
 export const getColumnMenuComponents = ({
   api
-}) => [
+}) => 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: COLUMN_MENU.type,
+  key: COLUMN_MENU.key
+},
+// --- Toggle section (Header column) ---
+{
+  type: COLUMN_TOGGLE_SECTION.type,
+  key: COLUMN_TOGGLE_SECTION.key,
+  parents: [{
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key,
+    rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ColumnToggleSection, {
+    api: api
+  }, props.children)
+}, {
+  type: HEADER_COLUMN_TOGGLE_ITEM.type,
+  key: HEADER_COLUMN_TOGGLE_ITEM.key,
+  parents: [{
+    type: COLUMN_TOGGLE_SECTION.type,
+    key: COLUMN_TOGGLE_SECTION.key,
+    rank: COLUMN_TOGGLE_SECTION_RANK[HEADER_COLUMN_TOGGLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(HeaderColumnToggleItem, {
+    api: api
+  })
+},
+// --- Background color section ---
+{
+  type: COLUMN_BACKGROUND_SECTION.type,
+  key: COLUMN_BACKGROUND_SECTION.key,
+  parents: [{
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key,
+    rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ColumnBackgroundSection, {
+    api: api
+  }, props.children)
+},
+// --- Sort section ---
+{
+  type: COLUMN_SORT_SECTION.type,
+  key: COLUMN_SORT_SECTION.key,
+  parents: [{
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key,
+    rank: COLUMN_SECTION_RANK[COLUMN_SORT_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: SORT_INCREASING_ITEM.type,
+  key: SORT_INCREASING_ITEM.key,
+  parents: [{
+    type: COLUMN_SORT_SECTION.type,
+    key: COLUMN_SORT_SECTION.key,
+    rank: COLUMN_SORT_SECTION_RANK[SORT_INCREASING_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(SortIncreasingItem, {
+    api: api
+  })
+}, {
+  type: SORT_DECREASING_ITEM.type,
+  key: SORT_DECREASING_ITEM.key,
+  parents: [{
+    type: COLUMN_SORT_SECTION.type,
+    key: COLUMN_SORT_SECTION.key,
+    rank: COLUMN_SORT_SECTION_RANK[SORT_DECREASING_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(SortDecreasingItem, {
+    api: api
+  })
+},
+// --- Add / Move section ---
+{
+  type: COLUMN_ADD_SECTION.type,
+  key: COLUMN_ADD_SECTION.key,
+  parents: [{
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key,
+    rank: COLUMN_SECTION_RANK[COLUMN_ADD_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: ADD_COLUMN_LEFT_ITEM.type,
+  key: ADD_COLUMN_LEFT_ITEM.key,
+  parents: [{
+    type: COLUMN_ADD_SECTION.type,
+    key: COLUMN_ADD_SECTION.key,
+    rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_LEFT_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(AddColumnLeftItem, {
+    api: api
+  })
+}, {
+  type: MOVE_COLUMN_LEFT_ITEM.type,
+  key: MOVE_COLUMN_LEFT_ITEM.key,
+  parents: [{
+    type: COLUMN_ADD_SECTION.type,
+    key: COLUMN_ADD_SECTION.key,
+    rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_LEFT_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MoveColumnLeftItem, {
+    api: api
+  })
+}, {
+  type: MOVE_COLUMN_RIGHT_ITEM.type,
+  key: MOVE_COLUMN_RIGHT_ITEM.key,
+  parents: [{
+    type: COLUMN_ADD_SECTION.type,
+    key: COLUMN_ADD_SECTION.key,
+    rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_RIGHT_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MoveColumnRightItem, {
+    api: api
+  })
+},
+// --- Danger section (Clear cells, Delete column) ---
+{
+  type: COLUMN_DANGER_SECTION.type,
+  key: COLUMN_DANGER_SECTION.key,
+  parents: [{
+    type: COLUMN_MENU.type,
+    key: COLUMN_MENU.key,
+    rank: COLUMN_SECTION_RANK[COLUMN_DANGER_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}] : [
+// --- Cell menu update OFF: legacy column menu (registers its own add/delete items) ---
+
 // --- Menu surface ---
 {
   type: COLUMN_MENU.type,

package/dist/es2019/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -4,10 +4,10 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getMenuSelectionRect } from '../../shared/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddColumnRightItem = ({
   api
@@ -36,7 +36,7 @@ export const AddColumnRightItem = ({
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
     if (index === undefined) {
       return;

package/dist/es2019/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -4,11 +4,11 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { clearHoverSelection, closeActiveTableMenu, hoverColumns } from '../../../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
+import { getMenuSelectionRect } from '../../shared/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const DeleteColumnItem = ({
   api
@@ -38,7 +38,7 @@ export const DeleteColumnItem = ({
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     if (!selectionRect) {
       return;
     }
@@ -55,7 +55,7 @@ export const DeleteColumnItem = ({
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     if (!selectionRect) {
       return;
     }

package/dist/es2019/ui/TableMenu/column/items/DistributeColumnsItem.js

@@ -3,11 +3,11 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getNewResizeStateFromSelectedColumns } from '../../../../pm-plugins/table-resizing/utils/resize-state';
+import { getMenuSelectionRect } from '../../shared/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 /** Distribute columns is only visible when more than one column is selected. */
 const shouldShowDistributeColumns = selectedColumnCount => (selectedColumnCount !== null && selectedColumnCount !== void 0 ? selectedColumnCount : 0) > 1;
@@ -38,7 +38,7 @@ export const DistributeColumnsItem = ({
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     const editorContainerWidth = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
     if (!selectionRect || !editorContainerWidth) {
       return;

package/dist/es2019/ui/TableMenu/row/getRowMenuComponents.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AddRowAboveItem } from './items/AddRowAboveItem';
 import { AddRowBelowItem } from './items/AddRowBelowItem';
 import { DeleteRowItem } from './items/DeleteRowItem';
@@ -10,7 +11,123 @@ import { NumberedRowsToggleItem } from './items/NumberedRowsToggleItem';
 import { ROW_MENU, ROW_TOGGLE_SECTION, ROW_BACKGROUND_SECTION, ROW_ADD_SECTION, ROW_DANGER_SECTION, ROW_MENU_SECTION_RANK, HEADER_ROW_TOGGLE_ITEM, NUMBERED_ROWS_TOGGLE_ITEM, ADD_ROW_ABOVE_ITEM, ADD_ROW_BELOW_ITEM, MOVE_ROW_UP_ITEM, MOVE_ROW_DOWN_ITEM, DELETE_ROW_ITEM, ROW_TOGGLE_SECTION_RANK, ROW_ADD_SECTION_RANK, ROW_DANGER_SECTION_RANK } from './keys';
 export const getRowMenuComponents = ({
   api
-}) => [
+}) => fg('platform_editor_table_cell_menu_update') ? [
+// --- Cell menu update ON ---
+// AddRowBelowItem/DeleteRowItem are registered in `../shared/getSharedItems`
+// (shared with the cell menu), so they are omitted here.
+
+// --- Menu surface ---
+{
+  type: ROW_MENU.type,
+  key: ROW_MENU.key
+},
+// --- Toggle section (Header row, Numbered rows) ---
+{
+  type: ROW_TOGGLE_SECTION.type,
+  key: ROW_TOGGLE_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_MENU_SECTION_RANK[ROW_TOGGLE_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: HEADER_ROW_TOGGLE_ITEM.type,
+  key: HEADER_ROW_TOGGLE_ITEM.key,
+  parents: [{
+    type: ROW_TOGGLE_SECTION.type,
+    key: ROW_TOGGLE_SECTION.key,
+    rank: ROW_TOGGLE_SECTION_RANK[HEADER_ROW_TOGGLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(HeaderRowToggleItem, {
+    api: api
+  })
+}, {
+  type: NUMBERED_ROWS_TOGGLE_ITEM.type,
+  key: NUMBERED_ROWS_TOGGLE_ITEM.key,
+  parents: [{
+    type: ROW_TOGGLE_SECTION.type,
+    key: ROW_TOGGLE_SECTION.key,
+    rank: ROW_TOGGLE_SECTION_RANK[NUMBERED_ROWS_TOGGLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(NumberedRowsToggleItem, {
+    api: api
+  })
+},
+// --- Background color section ---
+{
+  type: ROW_BACKGROUND_SECTION.type,
+  key: ROW_BACKGROUND_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_MENU_SECTION_RANK[ROW_BACKGROUND_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+},
+// --- Add / Move section ---
+{
+  type: ROW_ADD_SECTION.type,
+  key: ROW_ADD_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_MENU_SECTION_RANK[ROW_ADD_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}, {
+  type: ADD_ROW_ABOVE_ITEM.type,
+  key: ADD_ROW_ABOVE_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ROW_ADD_SECTION_RANK[ADD_ROW_ABOVE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(AddRowAboveItem, {
+    api: api
+  })
+}, {
+  type: MOVE_ROW_UP_ITEM.type,
+  key: MOVE_ROW_UP_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ROW_ADD_SECTION_RANK[MOVE_ROW_UP_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MoveRowUpItem, {
+    api: api
+  })
+}, {
+  type: MOVE_ROW_DOWN_ITEM.type,
+  key: MOVE_ROW_DOWN_ITEM.key,
+  parents: [{
+    type: ROW_ADD_SECTION.type,
+    key: ROW_ADD_SECTION.key,
+    rank: ROW_ADD_SECTION_RANK[MOVE_ROW_DOWN_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(MoveRowDownItem, {
+    api: api
+  })
+},
+// --- Danger section (Clear cells, Delete row) ---
+{
+  type: ROW_DANGER_SECTION.type,
+  key: ROW_DANGER_SECTION.key,
+  parents: [{
+    type: ROW_MENU.type,
+    key: ROW_MENU.key,
+    rank: ROW_MENU_SECTION_RANK[ROW_DANGER_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, props.children)
+}] : [
+// --- Cell menu update OFF: legacy row menu (registers its own add/delete items) ---
+
 // --- Menu surface ---
 {
   type: ROW_MENU.type,

package/dist/es2019/ui/TableMenu/row/items/AddRowBelowItem.js

@@ -3,10 +3,10 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addRowAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowAddBelowIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getMenuSelectionRect } from '../../shared/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddRowBelowItem = props => {
   var _useTableMenuContext, _tooltip;
@@ -24,7 +24,7 @@ export const AddRowBelowItem = props => {
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
     if (index === undefined) {
       return;

package/dist/es2019/ui/TableMenu/row/items/DeleteRowItem.js

@@ -4,11 +4,11 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { clearHoverSelection, closeActiveTableMenu, hoverRows } from '../../../../pm-plugins/commands';
 import { deleteRowsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
+import { getMenuSelectionRect } from '../../shared/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const DeleteRowItem = props => {
   var _tableMenuContext$sel, _tooltip;
@@ -35,7 +35,7 @@ export const DeleteRowItem = props => {
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     if (!selectionRect) {
       return;
     }
@@ -52,7 +52,7 @@ export const DeleteRowItem = props => {
     if (!editorView) {
       return;
     }
-    const selectionRect = getSelectionRect(editorView.state.selection);
+    const selectionRect = getMenuSelectionRect(editorView.state.selection);
     if (!selectionRect) {
       return;
     }