@atlaskit/editor-plugin-table 22.4.7 → 22.4.9

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

@@ -0,0 +1,42 @@
+import { BACKGROUND_COLOR_ITEM, CLEAR_CELLS_ITEM } from '../shared/keys';
+
+// --- Menu surface ---
+
+export const CELL_MENU = {
+  type: 'menu',
+  key: 'cell-contextual-menu'
+};
+
+// --- Sections ---
+
+export const CELL_ACTION_SECTION = {
+  type: 'menu-section',
+  key: 'cell-action-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
+};
+export const MERGE_CELLS_ITEM = {
+  type: 'menu-item',
+  key: 'merge-cells'
+};
+export const SPLIT_CELL_ITEM = {
+  type: 'menu-item',
+  key: 'split-cell'
+};
+
+// --- Item ranks within their sections ---
+
+export const CELL_ACTION_SECTION_RANK = {
+  [BACKGROUND_COLOR_ITEM.key]: 100,
+  [MERGE_CELLS_ITEM.key]: 200,
+  [SPLIT_CELL_ITEM.key]: 300
+};
+export const CELL_DANGER_SECTION_RANK = {
+  [CLEAR_CELLS_ITEM.key]: 100
+};

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { AddColumnLeftItem } from './items/AddColumnLeftItem';
 import { AddColumnRightItem } from './items/AddColumnRightItem';
+import { ColumnBackgroundSection } from './items/ColumnBackgroundSection';
+import { ColumnToggleSection } from './items/ColumnToggleSection';
 import { DeleteColumnItem } from './items/DeleteColumnItem';
 import { DistributeColumnsItem } from './items/DistributeColumnsItem';
 import { HeaderColumnToggleItem } from './items/HeaderColumnToggleItem';
@@ -9,14 +11,6 @@ import { MoveColumnRightItem } from './items/MoveColumnRightItem';
 import { SortDecreasingItem } from './items/SortDecreasingItem';
 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_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';
-
-/**
- * Returns the RegisterComponent[] array defining the column menu surface.
- *
- * This is a **UI-only stub** — all items are always visible with no conditional
- * logic and no wired actions. Functional behaviour (actions, conditional visibility)
- * will be connected in follow-up tickets.
- */
 export const getColumnMenuComponents = () => [
 // --- Menu surface ---
 {
@@ -32,7 +26,7 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_MENU.key,
     rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
   }],
-  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+  component: props => /*#__PURE__*/React.createElement(ColumnToggleSection, null, props.children)
 }, {
   type: HEADER_COLUMN_TOGGLE_ITEM.type,
   key: HEADER_COLUMN_TOGGLE_ITEM.key,
@@ -52,9 +46,7 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_MENU.key,
     rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
   }],
-  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    hasSeparator: true
-  }, props.children)
+  component: props => /*#__PURE__*/React.createElement(ColumnBackgroundSection, null, props.children)
 },
 // --- Sort section ---
 {

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
+
+/**
+ * Background section sits directly below `ColumnToggleSection`. Its separator
+ * exists only to divide it from the toggle section; when the toggle section
+ * is hidden, the separator must drop too so we don't render a stray rule at
+ * the very top of the menu.
+ */
+export const ColumnBackgroundSection = ({
+  children
+}) => {
+  const tableMenuContext = useTableMenuContext();
+  const hasSeparator = shouldShowHeaderColumnToggle(tableMenuContext);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: hasSeparator
+  }, children);
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
+
+/**
+ * The toggle section currently contains only the Header column toggle. When
+ * that item is hidden, the whole section disappears so we don't render an
+ * empty wrapper (and so the section below can drop its leading separator).
+ */
+export const ColumnToggleSection = ({
+  children
+}) => {
+  const tableMenuContext = useTableMenuContext();
+  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+};

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

@@ -2,10 +2,21 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/** Distribute columns is only visible when more than one column is selected. */
+const shouldShowDistributeColumns = tableMenuContext => {
+  var _tableMenuContext$sel;
+  return ((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 0) > 1;
+};
 export const DistributeColumnsItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  if (!shouldShowDistributeColumns(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
       color: "currentColor",

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

@@ -3,11 +3,26 @@ import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/**
+ * Header column toggle is only visible when the first column is the entire
+ * selection.
+ *
+ * Exported so `ColumnToggleSection` (which can become empty) and
+ * `ColumnBackgroundSection` (which drops its leading separator alongside)
+ * can stay in lockstep with this rule without redefining it.
+ */
+export const shouldShowHeaderColumnToggle = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn) === true && tableMenuContext.selectedColumnCount === 1;
 export const HeaderColumnToggleItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
   const label = formatMessage(messages.headerColumn);
+  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,

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

@@ -1,12 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { moveColumnRight, moveColumnRightOld, tooltip } from '@atlaskit/editor-common/keymaps';
+import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-const getMoveColumnRightShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveColumnRight : moveColumnRightOld);
 export const MoveColumnRightItem = () => {
-  var _getMoveColumnRightSh;
+  var _tooltip;
   const {
     formatMessage
   } = useIntl();
@@ -17,7 +15,7 @@ export const MoveColumnRightItem = () => {
       size: "small"
     }),
     elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
-      shortcut: (_getMoveColumnRightSh = getMoveColumnRightShortcut()) !== null && _getMoveColumnRightSh !== void 0 ? _getMoveColumnRightSh : ''
+      shortcut: (_tooltip = tooltip(moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveColumnRight, {
     0: 1

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

@@ -2,12 +2,14 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const SortDecreasingItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    isDisabled: true,
+    isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       color: "currentColor",
       label: "",

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

@@ -2,12 +2,14 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const SortIncreasingItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    isDisabled: true,
+    isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       color: "currentColor",
       label: "",

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

@@ -8,14 +8,6 @@ import { MoveRowDownItem } from './items/MoveRowDownItem';
 import { MoveRowUpItem } from './items/MoveRowUpItem';
 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';
-
-/**
- * Returns the RegisterComponent[] array defining the row menu surface.
- *
- * This is a **UI-only stub** — all items are always visible with no conditional
- * logic and no wired actions. Functional behaviour (actions, conditional visibility)
- * will be connected in follow-up tickets.
- */
 export const getRowMenuComponents = () => [
 // --- Menu surface ---
 {

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

@@ -3,11 +3,19 @@ import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/** Header row toggle is only visible when the first row is the entire selection. */
+const shouldShowHeaderRowToggle = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow) === true && tableMenuContext.selectedRowCount === 1;
 export const HeaderRowToggleItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
   const label = formatMessage(messages.headerRow);
+  if (!shouldShowHeaderRowToggle(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,

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

@@ -4,12 +4,20 @@ import { moveRowDown, moveRowDownOld, tooltip } from '@atlaskit/editor-common/ke
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 const getMoveRowDownShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowDown : moveRowDownOld);
+
+/** Move row down is hidden when the selection includes the last row (cannot move further down). */
+const shouldShowMoveRowDown = tableMenuContext => !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isLastRow);
 export const MoveRowDownItem = () => {
   var _getMoveRowDownShortc;
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  if (!shouldShowMoveRowDown(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
       color: "currentColor",

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

@@ -4,12 +4,20 @@ import { moveRowUp, moveRowUpOld, tooltip } from '@atlaskit/editor-common/keymap
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 const getMoveRowUpShortcut = () => tooltip(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveRowUp : moveRowUpOld);
+
+/** Move row up is hidden when the selection includes row 0 (cannot move further up). */
+const shouldShowMoveRowUp = tableMenuContext => !(tableMenuContext !== null && tableMenuContext !== void 0 && tableMenuContext.isFirstRow);
 export const MoveRowUpItem = () => {
   var _getMoveRowUpShortcut;
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  if (!shouldShowMoveRowUp(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
       color: "currentColor",

package/dist/es2019/ui/TableMenu/shared/TableMenu.js

@@ -2,27 +2,75 @@
 import "./TableMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo, useMemo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { Box } from '@atlaskit/primitives/compiled';
+import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
+import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
+import { TableMenuProvider } from './TableMenuContext';
 const tableMenuContainerStyles = {
   container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
 };
+const EMPTY_CONTEXT = {};
 export const TableMenu = /*#__PURE__*/memo(({
   api,
+  editorView,
   surface
 }) => {
   const components = useMemo(() => {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     return (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   }, [api, surface.key]);
+  const {
+    tableNode,
+    selection
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table', 'selection'], states => {
+    var _states$tableState, _states$selectionStat;
+    return {
+      tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode,
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
+  const tableMenuContext = useMemo(() => {
+    if (!selection || !tableNode) {
+      return EMPTY_CONTEXT;
+    }
+    const tableMap = TableMap.get(tableNode);
+    const selectionRect = getSelectionRect(selection);
+    const cellOps = {
+      canMergeCells: canMergeCellSelection(selection),
+      canSplitCell: canSplitCellSelection(selection),
+      hasMergedCellsInTable: tableMap.hasMergedCells()
+    };
+    if (!selectionRect) {
+      return cellOps;
+    }
+    return {
+      ...cellOps,
+      isFirstRow: selectionRect.top === 0,
+      isLastRow: selectionRect.bottom === tableMap.height,
+      selectedRowCount: selectionRect.bottom - selectionRect.top,
+      isFirstColumn: selectionRect.left === 0,
+      isLastColumn: selectionRect.right === tableMap.width,
+      selectedColumnCount: selectionRect.right - selectionRect.left
+    };
+  }, [selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+  }, /*#__PURE__*/React.createElement(TableMenuProvider, {
+    value: tableMenuContext
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: tableMenuContainerStyles.container,
     testId: surface.key
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
-  }));
-});
+  }))));
+});
+TableMenu.displayName = 'TableMenu';

package/dist/es2019/ui/TableMenu/shared/TableMenuContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const TableMenuContext = /*#__PURE__*/React.createContext(undefined);
+export const TableMenuProvider = TableMenuContext.Provider;
+export const useTableMenuContext = () => React.useContext(TableMenuContext);

package/dist/es2019/ui/TableMenu/shared/consts.js

@@ -1 +1,2 @@
-export const TABLE_MENU_WIDTH = 280;
+export const TABLE_MENU_WIDTH = 280;
+export const TABLE_MENU_SELECTOR = '[data-testid="column-handle-menu"], [data-testid="row-handle-menu"], [data-toolbar-nested-dropdown-menu]';

package/dist/es2019/ui/TableMenu/shared/getSharedItems.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_ACTION_SECTION_RANK, CELL_DANGER_SECTION_RANK } from '../cell/keys';
 import { COLUMN_BACKGROUND_SECTION, COLUMN_DANGER_SECTION, COLUMN_BACKGROUND_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from '../column/keys';
 import { ROW_BACKGROUND_SECTION, ROW_DANGER_SECTION, ROW_BACKGROUND_SECTION_RANK, ROW_DANGER_SECTION_RANK } from '../row/keys';
 import { BackgroundColorItem } from './items/BackgroundColorItem';
@@ -15,6 +16,10 @@ export const getSharedItems = () => [{
     type: COLUMN_BACKGROUND_SECTION.type,
     key: COLUMN_BACKGROUND_SECTION.key,
     rank: COLUMN_BACKGROUND_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
+  }, {
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
   }],
   component: () => /*#__PURE__*/React.createElement(BackgroundColorItem, null)
 }, {
@@ -28,6 +33,10 @@ export const getSharedItems = () => [{
     type: COLUMN_DANGER_SECTION.type,
     key: COLUMN_DANGER_SECTION.key,
     rank: COLUMN_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
+  }, {
+    type: CELL_DANGER_SECTION.type,
+    key: CELL_DANGER_SECTION.key,
+    rank: CELL_DANGER_SECTION_RANK[CLEAR_CELLS_ITEM.key]
   }],
   component: () => /*#__PURE__*/React.createElement(ClearCellsItem, null)
 }];

package/dist/es2019/ui/TableMenu/shared/getTableMenuComponents.js

@@ -1,4 +1,5 @@
+import { getCellMenuComponents } from '../cell/getCellMenuComponents';
 import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
-export const getTableMenuComponents = () => [...getRowMenuComponents(), ...getColumnMenuComponents(), ...getSharedItems()];
+export const getTableMenuComponents = () => [...getRowMenuComponents(), ...getColumnMenuComponents(), ...getCellMenuComponents(), ...getSharedItems()];

package/dist/es2019/ui/event-handlers.js

@@ -8,6 +8,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from '../pm-plugins/commands';
 import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -19,11 +20,13 @@ import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInF
 import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from '../pm-plugins/utils/dom';
 import { getAllowAddColumnCustomStep } from '../pm-plugins/utils/get-allow-add-column-custom-step';
 import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
+import { TABLE_MENU_SELECTOR } from './TableMenu/shared/consts';
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
 const isFocusingFloatingToolbar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
 const isFocusingDragHandles = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
 const isFocusingDragHandlesClickableZone = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.classList.contains(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE);
+const isFocusingTableMenu = event => expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && Boolean(event.relatedTarget.closest(TABLE_MENU_SELECTOR));
 export const handleBlur = (view, event) => {
   const {
     state,
@@ -31,7 +34,7 @@ export const handleBlur = (view, event) => {
   } = view;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (getBrowserInfo().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
+  if (getBrowserInfo().ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event) && !isFocusingTableMenu(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();

package/dist/esm/pm-plugins/commands/split-cell.js

@@ -1,5 +1,21 @@
-import { splitCellWithType } from '@atlaskit/editor-tables/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { cellWrapping, splitCellWithType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../plugin-factory';
+export var canSplitCellSelection = function canSplitCellSelection(selection) {
+  var cellNode;
+  if (!(selection instanceof CellSelection)) {
+    cellNode = cellWrapping(selection.$from);
+    if (!cellNode) {
+      return false;
+    }
+  } else {
+    if (selection.$anchorCell.pos !== selection.$headCell.pos) {
+      return false;
+    }
+    cellNode = selection.$anchorCell.nodeAfter;
+  }
+  return Boolean(cellNode && (cellNode.attrs.colspan !== 1 || cellNode.attrs.rowspan !== 1));
+};
 
 /**
  * We need to split cell keeping the right type of cell given current table configuration.

package/dist/esm/pm-plugins/transforms/merge.js

@@ -113,8 +113,7 @@ export function mergeCells(tr) {
   }
   return tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable).setSelection(Selection.near(tr.doc.resolve((mergedCellPos || 0) + table.start)));
 }
-export function canMergeCells(tr) {
-  var selection = tr.selection;
+export function canMergeCellSelection(selection) {
   if (!(selection instanceof CellSelection) || selection.$anchorCell.pos === selection.$headCell.pos) {
     return false;
   }
@@ -129,6 +128,9 @@ export function canMergeCells(tr) {
   }
   return true;
 }
+export function canMergeCells(tr) {
+  return canMergeCellSelection(tr.selection);
+}
 function isEmptyCell(cell) {
   var content = cell.content;
   return content.childCount === 1 && content.firstChild && content.firstChild.isTextblock && content.firstChild.childCount === 0;

package/dist/esm/ui/FloatingContextualButton/index.js

@@ -46,6 +46,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   var handleClick = function handleClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      toggleContextualMenu()(state, dispatch);
+      return;
+    }
+
     // Clicking outside the dropdown handles toggling the menu closed
     // (otherwise these two toggles combat each other).
     // In the event a user clicks the chevron button again

package/dist/esm/ui/FloatingContextualMenu/CellMenuPopup.js

@@ -0,0 +1,96 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
+import { setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { TableCssClassName as ClassName } from '../../types';
+import { CELL_MENU } from '../TableMenu/cell/keys';
+import { TableMenu } from '../TableMenu/shared/TableMenu';
+export var CellMenuPopup = function CellMenuPopup(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
+    isOpen = _ref.isOpen,
+    targetCellRef = _ref.targetCellRef;
+  var tableMenuRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['userIntent'], function (states) {
+      var _states$userIntentSta;
+      return {
+        currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
+      };
+    }),
+    currentUserIntent = _useSharedPluginState.currentUserIntent;
+  var closeCellMenu = useCallback(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch,
+      dom = editorView.dom;
+    toggleContextualMenu()(state, dispatch);
+    if (isCellMenuOpenByKeyboard) {
+      setFocusToCellMenu(false)(state, dispatch);
+      dom.focus();
+    }
+  }, [editorView, isCellMenuOpenByKeyboard]);
+  useEffect(function () {
+    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
+      return;
+    }
+    closeCellMenu();
+  }, [closeCellMenu, currentUserIntent, isOpen]);
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    if (!(targetCellRef instanceof HTMLElement)) {
+      return;
+    }
+    var ownerDocument = targetCellRef.ownerDocument;
+    var handlePointerDown = function handlePointerDown(event) {
+      var _tableMenuRef$current;
+      var target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if ((_tableMenuRef$current = tableMenuRef.current) !== null && _tableMenuRef$current !== void 0 && _tableMenuRef$current.contains(target)) {
+        return;
+      }
+      var cellMenuButton = ownerDocument.querySelector(".".concat(ClassName.CONTEXTUAL_MENU_BUTTON));
+      if (cellMenuButton !== null && cellMenuButton !== void 0 && cellMenuButton.contains(target)) {
+        return;
+      }
+      closeCellMenu();
+    };
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        closeCellMenu();
+      }
+    };
+    var unbindPointerDown = bind(ownerDocument, {
+      type: 'pointerdown',
+      listener: handlePointerDown,
+      options: {
+        capture: true
+      }
+    });
+    var unbindKeyDown = bind(ownerDocument, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: true
+      }
+    });
+    return function () {
+      unbindPointerDown();
+      unbindKeyDown();
+    };
+  }, [closeCellMenu, isOpen, targetCellRef]);
+  return /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "tableContextualMenuPopupOpen"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tableMenuRef
+  }, /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    editorView: editorView,
+    surface: CELL_MENU
+  })));
+};