@atlaskit/editor-plugin-table 22.4.8 → 22.4.10

package/dist/es2019/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 const canSplitCellSelection = selection => {
+  let 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/es2019/pm-plugins/transforms/merge.js

@@ -116,10 +116,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) {
-  const {
-    selection
-  } = tr;
+export function canMergeCellSelection(selection) {
   if (!(selection instanceof CellSelection) || selection.$anchorCell.pos === selection.$headCell.pos) {
     return false;
   }
@@ -134,6 +131,9 @@ export function canMergeCells(tr) {
   }
   return true;
 }
+export function canMergeCells(tr) {
+  return canMergeCellSelection(tr.selection);
+}
 function isEmptyCell(cell) {
   const {
     content

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

@@ -94,6 +94,7 @@ export const CellMenuPopup = ({
     ref: tableMenuRef
   }, /*#__PURE__*/React.createElement(TableMenu, {
     api: api,
+    editorView: editorView,
     surface: CELL_MENU
   })));
 };

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -66,10 +67,14 @@ const FloatingDragMenu = ({
     forcePlacement: true,
     offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TableMenu, {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
     api: api,
+    userIntent: "tableDragMenuPopupOpen"
+  }, /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    editorView: editorView,
     surface: direction === 'row' ? ROW_MENU : COLUMN_MENU
-  }) : /*#__PURE__*/React.createElement(DragMenu, {
+  })) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,

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

@@ -2,15 +2,7 @@ import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { MergeCellsItem } from './items/MergeCellsItem';
 import { SplitCellItem } from './items/SplitCellItem';
-import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_SECTION_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
-
-/**
- * Returns the RegisterComponent[] array defining the cell contextual 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.
- */
+import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
 export const getCellMenuComponents = () => [
 // --- Menu surface ---
 {
@@ -24,7 +16,7 @@ export const getCellMenuComponents = () => [
   parents: [{
     type: CELL_MENU.type,
     key: CELL_MENU.key,
-    rank: CELL_MENU_SECTION_RANK[CELL_ACTION_SECTION.key]
+    rank: CELL_MENU_RANK[CELL_ACTION_SECTION.key]
   }],
   component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
 }, {
@@ -53,7 +45,7 @@ export const getCellMenuComponents = () => [
   parents: [{
     type: CELL_MENU.type,
     key: CELL_MENU.key,
-    rank: CELL_MENU_SECTION_RANK[CELL_DANGER_SECTION.key]
+    rank: CELL_MENU_RANK[CELL_DANGER_SECTION.key]
   }],
   component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: true

package/dist/es2019/ui/TableMenu/cell/items/MergeCellsItem.js

@@ -2,10 +2,21 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableCellMergeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/**
+ * Merge cells is only visible when the active selection can actually be merged
+ * (multi-cell, non-overlapping).
+ */
+const shouldShowMergeCells = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canMergeCells) === true;
 export const MergeCellsItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  if (!shouldShowMergeCells(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableCellMergeIcon, {
       label: "",

package/dist/es2019/ui/TableMenu/cell/items/SplitCellItem.js

@@ -2,10 +2,21 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableCellSplitIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+
+/**
+ * Split cell is only visible when the active selection sits in a cell whose
+ * `rowspan` or `colspan` is greater than one.
+ */
+const shouldShowSplitCell = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canSplitCell) === true;
 export const SplitCellItem = () => {
+  const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  if (!shouldShowSplitCell(tableMenuContext)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
       label: "",

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

@@ -17,7 +17,7 @@ export const CELL_DANGER_SECTION = {
   type: 'menu-section',
   key: 'cell-danger-section'
 };
-export const CELL_MENU_SECTION_RANK = {
+export const CELL_MENU_RANK = {
   [CELL_ACTION_SECTION.key]: 100,
   [CELL_DANGER_SECTION.key]: 200
 };

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/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,28 +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/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/FloatingContextualMenu/CellMenuPopup.js

@@ -90,6 +90,7 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
     ref: tableMenuRef
   }, /*#__PURE__*/React.createElement(TableMenu, {
     api: api,
+    editorView: editorView,
     surface: CELL_MENU
   })));
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -65,10 +66,14 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     forcePlacement: true,
     offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
     stick: true
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TableMenu, {
+  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
     api: api,
+    userIntent: "tableDragMenuPopupOpen"
+  }, /*#__PURE__*/React.createElement(TableMenu, {
+    api: api,
+    editorView: editorView,
     surface: direction === 'row' ? ROW_MENU : COLUMN_MENU
-  }) : /*#__PURE__*/React.createElement(DragMenu, {
+  })) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
     tableNode: tableNode,