@atlaskit/editor-plugin-table 22.4.17 → 22.4.19

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.19
+
+### Patch Changes
+
+- [`304fee6127fd5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/304fee6127fd5) -
+  Add valign to table cell menu, support renderer.
+- Updated dependencies
+
+## 22.4.18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.4.17
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableCell.js

@@ -46,6 +46,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 = (0, _adfSchema.getCellDomAttrs)(node);
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) && node.attrs.valign) {
+    attrs['data-valign'] = node.attrs.valign;
+  }
+  return attrs;
+};
 var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
   function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     var _this;
@@ -179,8 +186,8 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
       if (this.node.type !== node.type) {
         return false;
       }
-      var attrs = (0, _adfSchema.getCellDomAttrs)(this.node);
-      var nextAttrs = (0, _adfSchema.getCellDomAttrs)(node);
+      var attrs = getCellDomAttrsForTableMenuUpdates(this.node);
+      var nextAttrs = getCellDomAttrsForTableMenuUpdates(node);
       var _getCellAttrs = (0, _adfSchema.getCellAttrs)(this.dom),
         colspan = _getCellAttrs.colspan,
         rowspan = _getCellAttrs.rowspan;

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

@@ -4,25 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toggleActiveTableMenu = exports.closeActiveTableMenu = void 0;
-var _pluginFactory = require("../plugin-factory");
+var _pluginKey = require("../plugin-key");
 var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu() {
-  return (0, _pluginFactory.createCommand)(function (state) {
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-      activeTableMenu = _getPluginState.activeTableMenu;
-    if (!activeTableMenu || activeTableMenu.type === 'none') {
-      return false;
-    }
-    return {
+  return function (_ref) {
+    var tr = _ref.tr;
+    tr.setMeta(_pluginKey.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) {
@@ -33,19 +31,18 @@ var isSameActiveTableMenu = function isSameActiveTableMenu(current, next) {
   }
   return true;
 };
-var toggleActiveTableMenu = exports.toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu) {
-  return (0, _pluginFactory.createCommand)(function (state) {
-    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-      currentActiveTableMenu = _getPluginState2.activeTableMenu;
-    return {
+var toggleActiveTableMenu = exports.toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu, currentActiveTableMenu) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    tr.setMeta(_pluginKey.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/cjs/pm-plugins/commands/commands-with-analytics.js

@@ -53,11 +53,18 @@ var toggleActiveTableMenuWithAnalytics = exports.toggleActiveTableMenuWithAnalyt
       };
     })(editorAnalyticsAPI)(function (state, dispatch) {
       if (dispatch) {
-        (0, _activeTableMenu.toggleActiveTableMenu)({
+        var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+          currentActiveTableMenu = _getPluginState2.activeTableMenu;
+        var newTr = (0, _activeTableMenu.toggleActiveTableMenu)({
           type: direction,
           index: index,
           openedBy: trigger
-        })(state, dispatch);
+        }, currentActiveTableMenu)({
+          tr: state.tr
+        });
+        if (newTr) {
+          dispatch(newTr);
+        }
       }
       return true;
     });
@@ -227,8 +234,8 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-        colIndex = _getPluginState2.hoveredCell.colIndex;
+      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+        colIndex = _getPluginState3.hoveredCell.colIndex;
       return {
         action: _analytics.TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -348,8 +355,8 @@ var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteSelected
     }
     var selectionType = (0, _misc.getTableSelectionType)(selection);
     if (selectionType === 'row') {
-      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-        pluginConfig = _getPluginState3.pluginConfig;
+      var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+        pluginConfig = _getPluginState4.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -393,8 +400,8 @@ var toggleHeaderRowWithAnalytics = exports.toggleHeaderRowWithAnalytics = functi
     var _getSelectedTableInfo7 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderRowEnabled = _getPluginState4.isHeaderRowEnabled;
+    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderRowEnabled = _getPluginState5.isHeaderRowEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -413,8 +420,8 @@ var toggleHeaderColumnWithAnalytics = exports.toggleHeaderColumnWithAnalytics =
     var _getSelectedTableInfo8 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderColumnEnabled = _getPluginState5.isHeaderColumnEnabled;
+    var _getPluginState6 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderColumnEnabled = _getPluginState6.isHeaderColumnEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,

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

@@ -183,6 +183,12 @@ Object.defineProperty(exports, "setMultipleCellAttrs", {
     return _misc.setMultipleCellAttrs;
   }
 });
+Object.defineProperty(exports, "setMultipleCellAttrsEditorCommand", {
+  enumerable: true,
+  get: function get() {
+    return _misc.setMultipleCellAttrsEditorCommand;
+  }
+});
 Object.defineProperty(exports, "setTableDisplayMode", {
   enumerable: true,
   get: function get() {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToFixDarkModeDefaultBackgroundColor = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setFocusToCellMenu = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToFixDarkModeDefaultBackgroundColor = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrsEditorCommand = exports.setMultipleCellAttrs = exports.setFocusToCellMenu = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -365,6 +365,38 @@ var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCe
     return false;
   };
 };
+
+/**
+ * EditorCommand variant of `setMultipleCellAttrs`.
+ */
+var setMultipleCellAttrsEditorCommand = exports.setMultipleCellAttrsEditorCommand = function setMultipleCellAttrsEditorCommand(attrs, targetCellPosition) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var cursorPos;
+    if ((0, _utils2.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
+        (0, _utils2.setCellAttrs)((0, _utils2.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 = (0, _utils2.findCellClosestToPos)(tr.doc.resolve(targetCellPosition + 1));
+      (0, _utils2.setCellAttrs)(cell, attrs)(tr);
+      cursorPos = cell.pos;
+    }
+    if (tr.docChanged && cursorPos !== undefined) {
+      return tr;
+    }
+    return null;
+  };
+};
 var selectColumn = exports.selectColumn = function selectColumn(column, expand) {
   var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return (0, _pluginFactory.createCommand)(function (state) {
@@ -616,8 +648,8 @@ var updateWidthToWidest = exports.updateWidthToWidest = function updateWidthToWi
   });
 };
 var setTableAlignment = exports.setTableAlignment = function setTableAlignment(newAlignment, isCommentEditor) {
-  return function (_ref2) {
-    var tr = _ref2.tr;
+  return function (_ref3) {
+    var tr = _ref3.tr;
     var tableObject = (0, _utils2.findTable)(tr.selection);
     if (!tableObject) {
       return null;
@@ -639,8 +671,8 @@ var setTableAlignment = exports.setTableAlignment = function setTableAlignment(n
   };
 };
 var setTableAlignmentWithTableContentWithPos = exports.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/cjs/pm-plugins/drag-and-drop/plugin.js

@@ -88,19 +88,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 ((0, _expValEquals.expValEquals)('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
         var _insm$session3;
         (_insm$session3 = _insm.insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('tableDragAndDrop');
       }
-      (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
       if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        (0, _activeTableMenu.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
+        api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
+          var _api$userIntent;
+          var tr = _ref7.tr;
+          (0, _activeTableMenu.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;
+        (0, _commands.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 = (0, _monitor.getDraggableDataFromEvent)(event);
       // If no data can be found then it's most like we do not want to perform any drag actions
       if (!data) {
@@ -115,10 +126,10 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
       var dropTargetType = sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN;
       var hasMergedCells = (0, _mergedCells.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
       (0, _commands.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 = (0, _monitor.getDraggableDataFromEvent)(event);
 
       // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
@@ -141,9 +152,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         }
       };
       tr.setMeta(_pluginKey.pluginKey, 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) {
@@ -304,7 +315,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, editor
         return decorationSet;
       },
       handleKeyDown: function handleKeyDown(view, event) {
-        var _ref7;
+        var _ref8;
         var tr = view.state.tr;
         var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
@@ -328,7 +339,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, editor
         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 = (0, _pluginFactory2.getPluginState)(view.state),
           _getPluginState3$isDr = _getPluginState3.isDragMenuOpen,

package/dist/cjs/tablePlugin.js

@@ -22,6 +22,7 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toDOM = require("./nodeviews/toDOM");
 var _plugin = require("./pm-plugins/active-cell-highlight/plugin");
@@ -258,13 +259,13 @@ var tablePlugin = function tablePlugin(_ref) {
         })
       }, {
         name: 'tableHeader',
-        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableHeaderWithNestedTableWithLocalId : _adfSchema.tableHeaderWithNestedTable
+        node: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) ? _adfSchema.tableHeaderWithNestedTableStage0 : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableHeaderWithNestedTableWithLocalId : _adfSchema.tableHeaderWithNestedTable
       }, {
         name: 'tableRow',
         node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableRowWithNestedTableWithLocalId : _adfSchema.tableRowWithNestedTable
       }, {
         name: 'tableCell',
-        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableCellWithNestedTableWithLocalId : _adfSchema.tableCellWithNestedTable
+        node: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) ? _adfSchema.tableCellWithNestedTableStage0 : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableCellWithNestedTableWithLocalId : _adfSchema.tableCellWithNestedTable
       }] : [{
         name: 'table',
         node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
@@ -279,13 +280,13 @@ var tablePlugin = function tablePlugin(_ref) {
         })
       }, {
         name: 'tableHeader',
-        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableHeaderWithLocalId : _adfSchema.tableHeader
+        node: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) ? _adfSchema.tableHeaderStage0 : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableHeaderWithLocalId : _adfSchema.tableHeader
       }, {
         name: 'tableRow',
         node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableRowWithLocalId : _adfSchema.tableRow
       }, {
         name: 'tableCell',
-        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableCellWithLocalId : _adfSchema.tableCell
+        node: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) ? _adfSchema.tableCellStage0 : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.tableCellWithLocalId : _adfSchema.tableCell
       }];
     },
     pmPlugins: function pmPlugins() {

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

@@ -22,6 +22,7 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-d
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../pm-plugins/commands");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
 var _types = require("../../types");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
@@ -67,10 +68,21 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      (0, _commands.toggleActiveTableMenu)({
-        type: 'cell',
-        openedBy: 'mouse'
-      })(state, dispatch);
+      if (!api) {
+        return;
+      }
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        currentActiveTableMenu = _getPluginState.activeTableMenu;
+      api.core.actions.execute(function (_ref) {
+        var tr = _ref.tr;
+        (0, _commands.toggleActiveTableMenu)({
+          type: 'cell',
+          openedBy: 'mouse'
+        }, currentActiveTableMenu)({
+          tr: tr
+        });
+        return tr;
+      });
       return;
     }
 
@@ -91,15 +103,26 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
         dispatch = editorView.dispatch;
       // open the menu when the keyboard shortcut is pressed
       if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        (0, _commands.toggleActiveTableMenu)({
-          type: 'cell',
-          openedBy: 'keyboard'
-        })(state, dispatch);
+        if (!api) {
+          return;
+        }
+        var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+          currentActiveTableMenu = _getPluginState2.activeTableMenu;
+        api.core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          (0, _commands.toggleActiveTableMenu)({
+            type: 'cell',
+            openedBy: 'keyboard'
+          }, currentActiveTableMenu)({
+            tr: tr
+          });
+          return tr;
+        });
         return;
       }
       (0, _commands.toggleContextualMenu)()(state, dispatch);
     }
-  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView]);
+  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView, api]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }

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

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

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

@@ -6,9 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCellMenuComponents = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _alignPositionBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-bottom"));
+var _alignPositionCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-center-vertical"));
+var _alignPositionTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-top"));
 var _MergeCellsItem = require("./items/MergeCellsItem");
 var _SplitCellItem = require("./items/SplitCellItem");
+var _VerticalAlignDropdownItem = require("./items/VerticalAlignDropdownItem");
+var _VerticalAlignNestedMenu = require("./items/VerticalAlignNestedMenu");
 var _keys = require("./keys");
 var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenuComponents(_ref) {
   var api = _ref.api;
@@ -30,6 +36,76 @@ var getCellMenuComponents = exports.getCellMenuComponents = function getCellMenu
     component: function component(props) {
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
     }
+  }, {
+    type: _keys.VERTICAL_ALIGN_MENU.type,
+    key: _keys.VERTICAL_ALIGN_MENU.key,
+    parents: [{
+      type: _keys.CELL_ACTION_SECTION.type,
+      key: _keys.CELL_ACTION_SECTION.key,
+      rank: _keys.CELL_ACTION_SECTION_RANK[_keys.VERTICAL_ALIGN_MENU.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignNestedMenu.VerticalAlignNestedMenu, null, props.children);
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+    key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU.type,
+      key: _keys.VERTICAL_ALIGN_MENU.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_RANK[_keys.VERTICAL_ALIGN_MENU_SECTION.key]
+    }],
+    component: function component(props) {
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, props.children);
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_TOP_ITEM.type,
+    key: _keys.VERTICAL_ALIGN_TOP_ITEM.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+      key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_TOP_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        icon: _alignPositionTop.default,
+        label: _messages.tableMessages.cellAlignmentTop,
+        value: "top"
+      });
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_MIDDLE_ITEM.type,
+    key: _keys.VERTICAL_ALIGN_MIDDLE_ITEM.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+      key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_MIDDLE_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        icon: _alignPositionCenterVertical.default,
+        label: _messages.tableMessages.cellAlignmentMiddle,
+        value: "middle"
+      });
+    }
+  }, {
+    type: _keys.VERTICAL_ALIGN_BOTTOM_ITEM.type,
+    key: _keys.VERTICAL_ALIGN_BOTTOM_ITEM.key,
+    parents: [{
+      type: _keys.VERTICAL_ALIGN_MENU_SECTION.type,
+      key: _keys.VERTICAL_ALIGN_MENU_SECTION.key,
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_BOTTOM_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        icon: _alignPositionBottom.default,
+        label: _messages.tableMessages.cellAlignmentBottom,
+        value: "bottom"
+      });
+    }
   }, {
     type: _keys.MERGE_CELLS_ITEM.type,
     key: _keys.MERGE_CELLS_ITEM.key,

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

@@ -33,7 +33,8 @@ var MergeCellsItem = exports.MergeCellsItem = function MergeCellsItem(_ref) {
       return;
     }
     (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
-    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowMergeCells(tableMenuContext)) {
     return null;

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

@@ -33,7 +33,8 @@ var SplitCellItem = exports.SplitCellItem = function SplitCellItem(_ref) {
       return;
     }
     (0, _commandsWithAnalytics.splitCellWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
-    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
+    api === null || api === void 0 || api.core.actions.focus();
   };
   if (!shouldShowSplitCell(tableMenuContext)) {
     return null;

package/dist/cjs/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalAlignDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var _verticalAlignUtils = require("./verticalAlignUtils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
+  var _useTableMenuContext;
+  var api = _ref.api,
+    Icon = _ref.icon,
+    label = _ref.label,
+    value = _ref.value;
+  var _ref2 = (_useTableMenuContext = (0, _TableMenuContext.useTableMenuContext)()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var selectedValign = (0, _react.useMemo)(function () {
+    return (0, _verticalAlignUtils.getSelectedCellValign)(editorView);
+  }, [editorView]);
+  var handleClick = (0, _react.useCallback)(function () {
+    if (!editorView || !api) {
+      return;
+    }
+    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      (0, _commands.setMultipleCellAttrsEditorCommand)({
+        valign: value
+      }, targetCellPosition)({
+        tr: tr
+      });
+      (0, _commands.closeActiveTableMenu)()({
+        tr: tr
+      });
+      return tr;
+    });
+    api.core.actions.focus();
+  }, [api, editorView, value]);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    isSelected: selectedValign === value,
+    onClick: handleClick
+  }, formatMessage(label));
+};