@atlaskit/editor-plugin-table 22.4.15 → 22.4.16

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

@@ -1,96 +1,81 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { bind } from 'bind-event-listener';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import React, { useCallback, useContext, useRef } from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
-import { setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { closeActiveTableMenu, setFocusToCellMenu } from '../../pm-plugins/commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
+import { tablePopupMenuFitHeight } from '../consts';
 import { CELL_MENU } from '../TableMenu/cell/keys';
+import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
 import { TableMenu } from '../TableMenu/shared/TableMenu';
+var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
+var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
+var CELL_MENU_TRIGGER_SELECTOR = ".".concat(ClassName.CONTEXTUAL_MENU_BUTTON);
 export var CellMenuPopup = function CellMenuPopup(_ref) {
   var api = _ref.api,
+    boundariesElement = _ref.boundariesElement,
     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;
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    targetCellRef = _ref.targetCellRef,
+    zIndex = _ref.zIndex;
+  var popupContentRef = useRef(null);
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  var handlePopupRef = useCallback(function (el) {
+    popupContentRef.current = el;
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
+  }, [setOutsideClickTargetRef]);
   var closeCellMenu = useCallback(function () {
-    var state = editorView.state,
-      dispatch = editorView.dispatch,
-      dom = editorView.dom;
-    toggleContextualMenu()(state, dispatch);
+    var _getPluginState = getPluginState(editorView.state),
+      isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
     if (isCellMenuOpenByKeyboard) {
-      setFocusToCellMenu(false)(state, dispatch);
-      dom.focus();
+      setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
     }
-  }, [editorView, isCellMenuOpenByKeyboard]);
-  useEffect(function () {
-    if (!isOpen || currentUserIntent !== 'tableDragMenuPopupOpen') {
-      return;
+  }, [editorView]);
+  var isEventInsideCellMenu = useCallback(function (event) {
+    var _popupContentRef$curr;
+    var target = event.target;
+    if (!(target instanceof Node)) {
+      return false;
     }
-    closeCellMenu();
-  }, [closeCellMenu, currentUserIntent, isOpen]);
-  useEffect(function () {
-    if (!isOpen) {
-      return;
+    if ((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target)) {
+      return true;
     }
-    if (!(targetCellRef instanceof HTMLElement)) {
+    return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
+  }, []);
+  var handleCellMenuClickOutside = useCallback(function (event) {
+    if (isEventInsideCellMenu(event)) {
       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, {
+    closeCellMenu();
+  }, [closeCellMenu, isEventInsideCellMenu]);
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    alignX: "right",
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitHeight: tablePopupMenuFitHeight,
+    fitWidth: TABLE_MENU_WIDTH,
+    zIndex: zIndex,
+    forcePlacement: true
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    offset: [-7, 0],
+    stick: true,
+    handleClickOutside: handleCellMenuClickOutside,
+    handleEscapeKeydown: closeCellMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handlePopupRef
+  }, /*#__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
-  })));
+  }))));
 };

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

@@ -4,6 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -11,7 +12,6 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
-import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
 import { CellMenuPopup } from './CellMenuPopup';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
@@ -31,6 +31,14 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isCommentEditor = _ref.isCommentEditor,
     api = _ref.api,
     isDragMenuOpen = _ref.isDragMenuOpen;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+      };
+    }),
+    activeTableMenu = _useSharedPluginState.activeTableMenu;
+  var isCellMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isOpen;
   if (!editorView) {
     return null;
   }
@@ -38,7 +46,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = getPluginState(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition;
-  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+  if (!isCellMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   var selection = editorView.state.selection;
@@ -55,6 +63,20 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+    return jsx(CellMenuPopup, {
+      api: api,
+      boundariesElement: boundariesElement,
+      editorView: editorView,
+      mountPoint: mountPoint,
+      scrollableElement: scrollableElement
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      ,
+      targetCellRef: targetCellRef,
+      zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
+    });
+  }
   return jsx(Popup, {
     alignX: "right",
     alignY: "top"
@@ -66,7 +88,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: tablePopupMenuFitHeight,
-    fitWidth: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : contextualMenuDropdownWidthDnD
+    fitWidth: contextualMenuDropdownWidthDnD
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -76,15 +98,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     ,
     offset: [-7, 0],
     stick: true
-  }, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? jsx(CellMenuPopup, {
-    api: api,
-    editorView: editorView,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-    isOpen: isOpen,
-    targetCellRef: targetCellRef
-  }) :
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("div", {
+  }, jsx("div", {
     css: tablePopupStyles()
   }, jsx(ContextualMenu, {
     editorView: editorView

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -34,11 +35,23 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     api = _ref.api,
     isCommentEditor = _ref.isCommentEditor,
     tableWrapper = _ref.tableWrapper;
-  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
+      };
+    }),
+    activeTableMenu = _useSharedPluginState.activeTableMenu;
+  var isActiveTableMenuDragMenu = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
+  var hasActiveTableMenuState = activeTableMenu !== undefined;
+  var isDragMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu : isOpen;
+  var dragMenuDirection = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.type : undefined : direction;
+  var dragMenuIndex = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.index : undefined : index;
+  if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && fg('platform_editor_table_sticky_header_patch_7');
-  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  var targetHandleRef = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
@@ -47,8 +60,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'right' : undefined,
-    alignY: direction === 'row' ? 'start' : undefined
+    alignX: dragMenuDirection === 'row' ? 'right' : undefined,
+    alignY: dragMenuDirection === 'row' ? 'start' : undefined
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     ,
@@ -72,13 +85,13 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }, /*#__PURE__*/React.createElement(TableMenu, {
     api: api,
     editorView: editorView,
-    surface: direction === 'row' ? ROW_MENU : COLUMN_MENU
+    surface: dragMenuDirection === 'row' ? ROW_MENU : COLUMN_MENU
   })) : /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
-    isOpen: isOpen,
+    isOpen: isDragMenuOpen,
     tableNode: tableNode,
-    direction: direction,
-    index: index,
+    direction: dragMenuDirection,
+    index: dragMenuIndex,
     target: targetHandleRef || undefined,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -8,6 +8,7 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
+import { toggleActiveTableMenuWithAnalytics } from '../../../pm-plugins/commands/commands-with-analytics';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
@@ -24,7 +25,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _api$analytics2;
+  var _colWidths$map$join, _api$analytics3;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -117,14 +118,21 @@ export var ColumnControls = function ColumnControls(_ref) {
     }
   }, [editorView, tableActive]);
   var toggleDragMenuHandler = useCallback(function (trigger, event) {
-    var _api$analytics;
+    var _api$analytics2;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      if (colIndex !== undefined) {
+        var _api$analytics;
+        toggleActiveTableMenuWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('column', colIndex, trigger)(state, dispatch);
+      }
+      return;
+    }
+    toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
+  }, [editorView, colIndex, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
   var colIndexes = useMemo(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -8,6 +8,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
+import { toggleActiveTableMenuWithAnalytics } from '../../../pm-plugins/commands/commands-with-analytics';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -27,7 +28,7 @@ var getSelectedRows = function getSelectedRows(selection) {
   return [];
 };
 export var DragControls = function DragControls(_ref) {
-  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics2;
+  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics3;
   var tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     tableWidth = _ref.tableWidth,
@@ -80,12 +81,20 @@ export var DragControls = function DragControls(_ref) {
     });
   }, [editorView]);
   var toggleDragMenuHandler = useCallback(function (trigger, event) {
-    var _api$analytics;
+    var _api$analytics2;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
+    var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+    if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+      if (rowIndex !== undefined) {
+        var _api$analytics;
+        toggleActiveTableMenuWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)('row', rowIndex, trigger)(editorView.state, editorView.dispatch);
+      }
+      return;
+    }
+    toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(undefined, 'row', rowIndex, trigger)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   var handleMouseOut = useCallback(function () {
     if (tableActive) {

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

@@ -3,7 +3,8 @@ 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_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
-export var getCellMenuComponents = function getCellMenuComponents() {
+export var getCellMenuComponents = function getCellMenuComponents(_ref) {
+  var api = _ref.api;
   return [
   // --- Menu surface ---
   {
@@ -31,7 +32,9 @@ export var getCellMenuComponents = function getCellMenuComponents() {
       rank: CELL_ACTION_SECTION_RANK[MERGE_CELLS_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(MergeCellsItem, null);
+      return /*#__PURE__*/React.createElement(MergeCellsItem, {
+        api: api
+      });
     }
   }, {
     type: SPLIT_CELL_ITEM.type,
@@ -42,7 +45,9 @@ export var getCellMenuComponents = function getCellMenuComponents() {
       rank: CELL_ACTION_SECTION_RANK[SPLIT_CELL_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(SplitCellItem, null);
+      return /*#__PURE__*/React.createElement(SplitCellItem, {
+        api: api
+      });
     }
   },
   // --- Danger section (Clear cell) ---

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableCellMergeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { mergeCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Merge cells is only visible when the active selection can actually be merged
  * (multi-cell, non-overlapping).
@@ -11,14 +13,26 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 var shouldShowMergeCells = function shouldShowMergeCells(tableMenuContext) {
   return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canMergeCells) === true;
 };
-export var MergeCellsItem = function MergeCellsItem() {
+export var MergeCellsItem = function MergeCellsItem(_ref) {
+  var api = _ref.api;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    mergeCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  };
   if (!shouldShowMergeCells(tableMenuContext)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableCellMergeIcon, {
       label: "",
       size: "small"

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableCellSplitIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { splitCellWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 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.
@@ -11,14 +13,26 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 var shouldShowSplitCell = function shouldShowSplitCell(tableMenuContext) {
   return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canSplitCell) === true;
 };
-export var SplitCellItem = function SplitCellItem() {
+export var SplitCellItem = function SplitCellItem(_ref) {
+  var api = _ref.api;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    splitCellWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  };
   if (!shouldShowSplitCell(tableMenuContext)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
       label: "",
       size: "small"

package/dist/esm/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -4,15 +4,15 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddColumnLeftItem = function AddColumnLeftItem(_ref) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {

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

@@ -4,15 +4,15 @@ 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 { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddColumnRightItem = function AddColumnRightItem(_ref) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {

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

@@ -4,7 +4,6 @@ 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 { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { clearHoverSelection, hoverColumns } from '../../../../pm-plugins/commands';
@@ -14,9 +13,9 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var DeleteColumnItem = function DeleteColumnItem(_ref) {
   var _tableMenuContext$sel, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;

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

@@ -3,7 +3,6 @@ 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 { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -15,9 +14,9 @@ var shouldShowDistributeColumns = function shouldShowDistributeColumns(selectedC
 };
 export var DistributeColumnsItem = function DistributeColumnsItem(_ref) {
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
 import { toggleHeaderColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -23,9 +22,9 @@ export var shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(
 };
 export var HeaderColumnToggleItem = function HeaderColumnToggleItem(props) {
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {

package/dist/esm/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnLeft, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
@@ -19,9 +18,9 @@ var shouldShowMoveColumnLeft = function shouldShowMoveColumnLeft(isFirstColumn)
 export var MoveColumnLeftItem = function MoveColumnLeftItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {