@atlaskit/editor-plugin-table 22.4.17 → 22.4.19

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

@@ -5,6 +5,7 @@ import { addRowAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowAddBelowIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddRowBelowItem = props => {
@@ -32,6 +33,8 @@ export const AddRowBelowItem = props => {
       index,
       moveCursorToInsertedRow: true
     })(editorView.state, editorView.dispatch);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

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

@@ -6,7 +6,7 @@ import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-import { clearHoverSelection, hoverRows } from '../../../../pm-plugins/commands';
+import { clearHoverSelection, closeActiveTableMenu, hoverRows } from '../../../../pm-plugins/commands';
 import { deleteRowsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
@@ -57,6 +57,8 @@ export const DeleteRowItem = props => {
       return;
     }
     deleteRowsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

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

@@ -6,6 +6,7 @@ import { moveRowDown, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
@@ -43,6 +44,8 @@ export const MoveRowDownItem = props => {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_ROW, getSelectedRowIndexes(selectionRect), selectionRect.bottom)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowDown(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastRow)) {
     return null;

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

@@ -6,6 +6,7 @@ import { moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
@@ -43,6 +44,8 @@ export const MoveRowUpItem = props => {
       return;
     }
     moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_ROW, getSelectedRowIndexes(selectionRect), selectionRect.top - 1)(editorView.state, editorView.dispatch);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!tableNode || !shouldShowMoveRowUp(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstRow)) {
     return null;

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

@@ -1,18 +1,12 @@
-/* TableMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
-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 { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 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 _1bsb1178 _16qs130s _bfhk1bhr"
-};
 export const TableMenu = /*#__PURE__*/memo(({
   api,
   editorView,
@@ -64,10 +58,7 @@ export const TableMenu = /*#__PURE__*/memo(({
   }
   return /*#__PURE__*/React.createElement(TableMenuProvider, {
     value: tableMenuContext
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: tableMenuContainerStyles.container,
-    testId: surface.key
-  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+  }, /*#__PURE__*/React.createElement(ToolbarMenuContainer, null, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
   })));

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

@@ -22,7 +22,7 @@ const colorPaletteStyles = {
 export const BackgroundColorItem = ({
   api
 }) => {
-  var _useTableMenuContext, _api$analytics2;
+  var _useTableMenuContext;
   const {
     editorView
   } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
@@ -46,8 +46,9 @@ export const BackgroundColorItem = ({
       return;
     }
     setColorWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
-  }, [api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  }, [api, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   const colorPreviewStyle = useMemo(() => ({
     backgroundColor: selectedColor

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

@@ -29,7 +29,8 @@ export const ClearCellsItem = ({
       targetCellPosition
     } = getPluginState(editorView.state);
     emptyMultipleCellsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/esm/nodeviews/TableCell.js

@@ -39,6 +39,13 @@ function delayUntilIdle(cb) {
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp
 var cssVariablePattern = /^VAR\(--.*\)$/;
+var getCellDomAttrsForTableMenuUpdates = function getCellDomAttrsForTableMenuUpdates(node) {
+  var attrs = getCellDomAttrs(node);
+  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && node.attrs.valign) {
+    attrs['data-valign'] = node.attrs.valign;
+  }
+  return attrs;
+};
 var TableCell = /*#__PURE__*/function (_TableNodeView) {
   function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     var _this;
@@ -172,8 +179,8 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
       if (this.node.type !== node.type) {
         return false;
       }
-      var attrs = getCellDomAttrs(this.node);
-      var nextAttrs = getCellDomAttrs(node);
+      var attrs = getCellDomAttrsForTableMenuUpdates(this.node);
+      var nextAttrs = getCellDomAttrsForTableMenuUpdates(node);
       var _getCellAttrs = getCellAttrs(this.dom),
         colspan = _getCellAttrs.colspan,
         rowspan = _getCellAttrs.rowspan;

package/dist/esm/pm-plugins/commands/active-table-menu.js

@@ -1,22 +1,20 @@
-import { createCommand, getPluginState } from '../plugin-factory';
+import { pluginKey } from '../plugin-key';
 export var closeActiveTableMenu = function closeActiveTableMenu() {
-  return createCommand(function (state) {
-    var _getPluginState = getPluginState(state),
-      activeTableMenu = _getPluginState.activeTableMenu;
-    if (!activeTableMenu || activeTableMenu.type === 'none') {
-      return false;
-    }
-    return {
+  return function (_ref) {
+    var tr = _ref.tr;
+    tr.setMeta(pluginKey, {
       type: 'SET_ACTIVE_TABLE_MENU',
       data: {
         activeTableMenu: {
           type: 'none'
         }
       }
-    };
-  }, function (tr) {
-    return tr.setMeta('addToHistory', false);
-  });
+    });
+    if (!tr.docChanged) {
+      tr.setMeta('addToHistory', false);
+    }
+    return tr;
+  };
 };
 var isSameActiveTableMenu = function isSameActiveTableMenu(current, next) {
   if (!current || current.type !== next.type) {
@@ -27,19 +25,18 @@ var isSameActiveTableMenu = function isSameActiveTableMenu(current, next) {
   }
   return true;
 };
-export var toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu) {
-  return createCommand(function (state) {
-    var _getPluginState2 = getPluginState(state),
-      currentActiveTableMenu = _getPluginState2.activeTableMenu;
-    return {
+export var toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu, currentActiveTableMenu) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    tr.setMeta(pluginKey, {
       type: 'SET_ACTIVE_TABLE_MENU',
       data: {
         activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
           type: 'none'
         } : activeTableMenu
       }
-    };
-  }, function (tr) {
-    return tr.setMeta('addToHistory', false);
-  });
+    });
+    tr.setMeta('addToHistory', false);
+    return tr;
+  };
 };

package/dist/esm/pm-plugins/commands/commands-with-analytics.js

@@ -46,11 +46,18 @@ export var toggleActiveTableMenuWithAnalytics = function toggleActiveTableMenuWi
       };
     })(editorAnalyticsAPI)(function (state, dispatch) {
       if (dispatch) {
-        toggleActiveTableMenu({
+        var _getPluginState2 = getPluginState(state),
+          currentActiveTableMenu = _getPluginState2.activeTableMenu;
+        var newTr = toggleActiveTableMenu({
           type: direction,
           index: index,
           openedBy: trigger
-        })(state, dispatch);
+        }, currentActiveTableMenu)({
+          tr: state.tr
+        });
+        if (newTr) {
+          dispatch(newTr);
+        }
       }
       return true;
     });
@@ -220,8 +227,8 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState2 = getPluginState(state),
-        colIndex = _getPluginState2.hoveredCell.colIndex;
+      var _getPluginState3 = getPluginState(state),
+        colIndex = _getPluginState3.hoveredCell.colIndex;
       return {
         action: TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: ACTION_SUBJECT.TABLE,
@@ -341,8 +348,8 @@ export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function delete
     }
     var selectionType = getTableSelectionType(selection);
     if (selectionType === 'row') {
-      var _getPluginState3 = getPluginState(state),
-        pluginConfig = _getPluginState3.pluginConfig;
+      var _getPluginState4 = getPluginState(state),
+        pluginConfig = _getPluginState4.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -386,8 +393,8 @@ export var toggleHeaderRowWithAnalytics = function toggleHeaderRowWithAnalytics(
     var _getSelectedTableInfo7 = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState4 = getPluginState(state),
-      isHeaderRowEnabled = _getPluginState4.isHeaderRowEnabled;
+    var _getPluginState5 = getPluginState(state),
+      isHeaderRowEnabled = _getPluginState5.isHeaderRowEnabled;
     return {
       action: TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: ACTION_SUBJECT.TABLE,
@@ -406,8 +413,8 @@ export var toggleHeaderColumnWithAnalytics = function toggleHeaderColumnWithAnal
     var _getSelectedTableInfo8 = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState5 = getPluginState(state),
-      isHeaderColumnEnabled = _getPluginState5.isHeaderColumnEnabled;
+    var _getPluginState6 = getPluginState(state),
+      isHeaderColumnEnabled = _getPluginState6.isHeaderColumnEnabled;
     return {
       action: TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: ACTION_SUBJECT.TABLE,

package/dist/esm/pm-plugins/commands/index.js

@@ -6,7 +6,7 @@ export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { closeActiveTableMenu, toggleActiveTableMenu } from './active-table-menu';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setMultipleCellAttrsEditorCommand, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';

package/dist/esm/pm-plugins/commands/misc.js

@@ -358,6 +358,38 @@ export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, editorVie
     return false;
   };
 };
+
+/**
+ * EditorCommand variant of `setMultipleCellAttrs`.
+ */
+export var setMultipleCellAttrsEditorCommand = function setMultipleCellAttrsEditorCommand(attrs, targetCellPosition) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var cursorPos;
+    if (isSelectionType(tr.selection, 'cell')) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      var selection = tr.selection;
+      selection.forEachCell(function (_cell, pos) {
+        var $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
+        // Ignored via go/ees005
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setCellAttrs(findCellClosestToPos($pos), attrs)(tr);
+      });
+      cursorPos = selection.$headCell.pos;
+    } else if (typeof targetCellPosition === 'number') {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      var cell = findCellClosestToPos(tr.doc.resolve(targetCellPosition + 1));
+      setCellAttrs(cell, attrs)(tr);
+      cursorPos = cell.pos;
+    }
+    if (tr.docChanged && cursorPos !== undefined) {
+      return tr;
+    }
+    return null;
+  };
+};
 export var selectColumn = function selectColumn(column, expand) {
   var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return createCommand(function (state) {
@@ -609,8 +641,8 @@ export var updateWidthToWidest = function updateWidthToWidest(widthToWidest) {
   });
 };
 export var setTableAlignment = function setTableAlignment(newAlignment, isCommentEditor) {
-  return function (_ref2) {
-    var tr = _ref2.tr;
+  return function (_ref3) {
+    var tr = _ref3.tr;
     var tableObject = findTable(tr.selection);
     if (!tableObject) {
       return null;
@@ -632,8 +664,8 @@ export var setTableAlignment = function setTableAlignment(newAlignment, isCommen
   };
 };
 export var setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
-  return function (_ref3) {
-    var tr = _ref3.tr;
+  return function (_ref4) {
+    var tr = _ref4.tr;
     var table = tableNodeWithPos.node;
     var nextTableAttrs = _objectSpread(_objectSpread({}, table.attrs), {}, {
       layout: newAlignment

package/dist/esm/pm-plugins/drag-and-drop/plugin.js

@@ -82,19 +82,30 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
       return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
     },
     onDragStart: function onDragStart() {
-      var _api$userIntent;
       if (expValEquals('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
         var _insm$session3;
         (_insm$session3 = insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('tableDragAndDrop');
       }
-      toggleDragMenu(false)(editorView.state, editorView.dispatch);
       if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        closeActiveTableMenu()(editorView.state, editorView.dispatch);
+        api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
+          var _api$userIntent;
+          var tr = _ref7.tr;
+          closeActiveTableMenu()({
+            tr: tr
+          });
+          api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('dragging')({
+            tr: tr
+          });
+          return tr;
+        });
+      } else {
+        var _api$userIntent2;
+        toggleDragMenu(false)(editorView.state, editorView.dispatch);
+        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('dragging'));
       }
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag: function onDrag(event) {
-      var _api$userIntent2;
+      var _api$userIntent3;
       var data = getDraggableDataFromEvent(event);
       // If no data can be found then it's most like we do not want to perform any drag actions
       if (!data) {
@@ -109,10 +120,10 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
       var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
       var hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
       setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('dragging'));
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 ? void 0 : _api$userIntent3.commands.setCurrentUserIntent('dragging'));
     },
     onDrop: function onDrop(event) {
-      var _cell$row, _cell$col, _api$userIntent3;
+      var _cell$row, _cell$col, _api$userIntent4;
       var data = getDraggableDataFromEvent(event);
 
       // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
@@ -135,9 +146,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         }
       };
       tr.setMeta(tablePluginKey, action);
-      if ((api === null || api === void 0 || (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 || (_api$userIntent3 = _api$userIntent3.sharedState.currentState()) === null || _api$userIntent3 === void 0 ? void 0 : _api$userIntent3.currentUserIntent) === 'dragging') {
-        var _api$userIntent4;
-        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.commands.setCurrentUserIntent('default'));
+      if ((api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || (_api$userIntent4 = _api$userIntent4.sharedState.currentState()) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.currentUserIntent) === 'dragging') {
+        var _api$userIntent5;
+        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 ? void 0 : _api$userIntent5.commands.setCurrentUserIntent('default'));
       }
       // If no data can be found then it's most like we do not want to perform any drop action
       if (!data) {
@@ -298,7 +309,7 @@ export var createPlugin = function createPlugin(dispatch, editorAnalyticsAPI) {
         return decorationSet;
       },
       handleKeyDown: function handleKeyDown(view, event) {
-        var _ref7;
+        var _ref8;
         var tr = view.state.tr;
         var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
@@ -322,7 +333,7 @@ export var createPlugin = function createPlugin(dispatch, editorAnalyticsAPI) {
         var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'
         // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        ].includes((_ref7 = event.target || null) === null || _ref7 === void 0 ? void 0 : _ref7.id);
+        ].includes((_ref8 = event.target || null) === null || _ref8 === void 0 ? void 0 : _ref8.id);
         var keysToTrap = ['Enter', ' '];
         var _getPluginState3 = getPluginState(view.state),
           _getPluginState3$isDr = _getPluginState3.isDragMenuOpen,

package/dist/esm/tablePlugin.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect } from 'react';
-import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithLocalId, tableHeaderWithNestedTable, tableRow, tableRowWithNestedTable, tableRowWithLocalId, tableCellWithLocalId, tableCellWithNestedTableWithLocalId, tableRowWithNestedTableWithLocalId, tableHeaderWithNestedTableWithLocalId } from '@atlaskit/adf-schema';
+import { tableCell, tableCellStage0, tableCellWithNestedTable, tableCellWithNestedTableStage0, tableHeader, tableHeaderStage0, tableHeaderWithLocalId, tableHeaderWithNestedTable, tableHeaderWithNestedTableStage0, tableRow, tableRowWithNestedTable, tableRowWithLocalId, tableCellWithLocalId, tableCellWithNestedTableWithLocalId, tableRowWithNestedTableWithLocalId, tableHeaderWithNestedTableWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -16,6 +16,7 @@ import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/ut
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
 import { createPlugin as createActiveCellHighlightPlugin } from './pm-plugins/active-cell-highlight/plugin';
@@ -249,13 +250,13 @@ var tablePlugin = function tablePlugin(_ref) {
         })
       }, {
         name: 'tableHeader',
-        node: fg('platform_editor_adf_with_localid') ? tableHeaderWithNestedTableWithLocalId : tableHeaderWithNestedTable
+        node: expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) ? tableHeaderWithNestedTableStage0 : fg('platform_editor_adf_with_localid') ? tableHeaderWithNestedTableWithLocalId : tableHeaderWithNestedTable
       }, {
         name: 'tableRow',
         node: fg('platform_editor_adf_with_localid') ? tableRowWithNestedTableWithLocalId : tableRowWithNestedTable
       }, {
         name: 'tableCell',
-        node: fg('platform_editor_adf_with_localid') ? tableCellWithNestedTableWithLocalId : tableCellWithNestedTable
+        node: expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) ? tableCellWithNestedTableStage0 : fg('platform_editor_adf_with_localid') ? tableCellWithNestedTableWithLocalId : tableCellWithNestedTable
       }] : [{
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
@@ -270,13 +271,13 @@ var tablePlugin = function tablePlugin(_ref) {
         })
       }, {
         name: 'tableHeader',
-        node: fg('platform_editor_adf_with_localid') ? tableHeaderWithLocalId : tableHeader
+        node: expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) ? tableHeaderStage0 : fg('platform_editor_adf_with_localid') ? tableHeaderWithLocalId : tableHeader
       }, {
         name: 'tableRow',
         node: fg('platform_editor_adf_with_localid') ? tableRowWithLocalId : tableRow
       }, {
         name: 'tableCell',
-        node: fg('platform_editor_adf_with_localid') ? tableCellWithLocalId : tableCell
+        node: expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) ? tableCellStage0 : fg('platform_editor_adf_with_localid') ? tableCellWithLocalId : tableCell
       }];
     },
     pmPlugins: function pmPlugins() {

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

@@ -19,6 +19,7 @@ import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleActiveTableMenu, toggleContextualMenu } from '../../pm-plugins/commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
@@ -56,10 +57,21 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      toggleActiveTableMenu({
-        type: 'cell',
-        openedBy: 'mouse'
-      })(state, dispatch);
+      if (!api) {
+        return;
+      }
+      var _getPluginState = getPluginState(state),
+        currentActiveTableMenu = _getPluginState.activeTableMenu;
+      api.core.actions.execute(function (_ref) {
+        var tr = _ref.tr;
+        toggleActiveTableMenu({
+          type: 'cell',
+          openedBy: 'mouse'
+        }, currentActiveTableMenu)({
+          tr: tr
+        });
+        return tr;
+      });
       return;
     }
 
@@ -80,15 +92,26 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
         dispatch = editorView.dispatch;
       // open the menu when the keyboard shortcut is pressed
       if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        toggleActiveTableMenu({
-          type: 'cell',
-          openedBy: 'keyboard'
-        })(state, dispatch);
+        if (!api) {
+          return;
+        }
+        var _getPluginState2 = getPluginState(state),
+          currentActiveTableMenu = _getPluginState2.activeTableMenu;
+        api.core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          toggleActiveTableMenu({
+            type: 'cell',
+            openedBy: 'keyboard'
+          }, currentActiveTableMenu)({
+            tr: tr
+          });
+          return tr;
+        });
         return;
       }
       toggleContextualMenu()(state, dispatch);
     }
-  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView]);
+  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView, api]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }

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

@@ -29,11 +29,11 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
   var closeCellMenu = useCallback(function () {
     var _getPluginState = getPluginState(editorView.state),
       isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
     if (isCellMenuOpenByKeyboard) {
       setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
     }
-  }, [editorView]);
+  }, [api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
   var isEventInsideCellMenu = useCallback(function (event) {
     var _popupContentRef$curr;
     var target = event.target;