@atlaskit/editor-plugin-table 22.4.18 → 22.4.20

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

@@ -375,6 +375,37 @@ export const setMultipleCellAttrs = (attrs, editorView) => (state, dispatch) =>
   }
   return false;
 };
+
+/**
+ * EditorCommand variant of `setMultipleCellAttrs`.
+ */
+export const setMultipleCellAttrsEditorCommand = (attrs, targetCellPosition) => ({
+  tr
+}) => {
+  let cursorPos;
+  if (isSelectionType(tr.selection, 'cell')) {
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const selection = tr.selection;
+    selection.forEachCell((_cell, pos) => {
+      const $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
+    const cell = findCellClosestToPos(tr.doc.resolve(targetCellPosition + 1));
+    setCellAttrs(cell, attrs)(tr);
+    cursorPos = cell.pos;
+  }
+  if (tr.docChanged && cursorPos !== undefined) {
+    return tr;
+  }
+  return null;
+};
 export const selectColumn = (column, expand, triggeredByKeyboard = false) => createCommand(state => {
   const cells = getCellsInColumn(column)(state.tr.selection);
   if (!cells || !cells.length || typeof cells[0].pos !== 'number') {

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

@@ -89,19 +89,31 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
       return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
     },
     onDragStart: () => {
-      var _api$userIntent;
       if (expValEquals('cc_editor_interactivity_monitoring', 'isEnabled', true)) {
         var _insm$session3;
         (_insm$session3 = insm.session) === null || _insm$session3 === void 0 ? 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 ? void 0 : api.core.actions.execute(({
+          tr
+        }) => {
+          var _api$userIntent;
+          closeActiveTableMenu()({
+            tr
+          });
+          api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging')({
+            tr
+          });
+          return tr;
+        });
+      } else {
+        var _api$userIntent2;
+        toggleDragMenu(false)(editorView.state, editorView.dispatch);
+        api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('dragging'));
       }
-      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag(event) {
-      var _api$userIntent2;
+      var _api$userIntent3;
       const 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) {
@@ -118,10 +130,10 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
       const dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
       const hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
       setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
-      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('dragging'));
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 ? void 0 : _api$userIntent3.commands.setCurrentUserIntent('dragging'));
     },
     onDrop(event) {
-      var _cell$row, _cell$col, _api$userIntent3, _api$userIntent3$shar;
+      var _cell$row, _cell$col, _api$userIntent4, _api$userIntent4$shar;
       const data = getDraggableDataFromEvent(event);
 
       // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
@@ -145,9 +157,9 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
         }
       };
       tr.setMeta(tablePluginKey, action);
-      if ((api === null || api === void 0 ? void 0 : (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 ? void 0 : (_api$userIntent3$shar = _api$userIntent3.sharedState.currentState()) === null || _api$userIntent3$shar === void 0 ? void 0 : _api$userIntent3$shar.currentUserIntent) === 'dragging') {
-        var _api$userIntent4;
-        api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.commands.setCurrentUserIntent('default'));
+      if ((api === null || api === void 0 ? void 0 : (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : (_api$userIntent4$shar = _api$userIntent4.sharedState.currentState()) === null || _api$userIntent4$shar === void 0 ? void 0 : _api$userIntent4$shar.currentUserIntent) === 'dragging') {
+        var _api$userIntent5;
+        api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? 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) {

package/dist/es2019/tablePlugin.js

@@ -1,5 +1,5 @@
 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';
@@ -13,6 +13,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';
@@ -245,13 +246,13 @@ const tablePlugin = ({
         })
       }, {
         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({
@@ -266,13 +267,13 @@ const tablePlugin = ({
         })
       }, {
         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() {

package/dist/es2019/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';
 
@@ -63,10 +64,23 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       dispatch
     } = editorView;
     if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      toggleActiveTableMenu({
-        type: 'cell',
-        openedBy: 'mouse'
-      })(state, dispatch);
+      if (!api) {
+        return;
+      }
+      const {
+        activeTableMenu: currentActiveTableMenu
+      } = getPluginState(state);
+      api.core.actions.execute(({
+        tr
+      }) => {
+        toggleActiveTableMenu({
+          type: 'cell',
+          openedBy: 'mouse'
+        }, currentActiveTableMenu)({
+          tr
+        });
+        return tr;
+      });
       return;
     }
 
@@ -89,15 +103,28 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       } = editorView;
       // 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;
+        }
+        const {
+          activeTableMenu: currentActiveTableMenu
+        } = getPluginState(state);
+        api.core.actions.execute(({
+          tr
+        }) => {
+          toggleActiveTableMenu({
+            type: 'cell',
+            openedBy: 'keyboard'
+          }, currentActiveTableMenu)({
+            tr
+          });
+          return tr;
+        });
         return;
       }
       toggleContextualMenu()(state, dispatch);
     }
-  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView]);
+  }, [isCellMenuOpenByKeyboard, isCellMenuOpen, editorView, api]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }

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

@@ -31,11 +31,11 @@ export const CellMenuPopup = ({
     const {
       isCellMenuOpenByKeyboard
     } = getPluginState(editorView.state);
-    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+    api === null || api === void 0 ? 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]);
   const isEventInsideCellMenu = useCallback(event => {
     var _popupContentRef$curr;
     const target = event.target;

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

@@ -1,8 +1,14 @@
 import React from 'react';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
+import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
 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';
+import { VerticalAlignDropdownItem } from './items/VerticalAlignDropdownItem';
+import { VerticalAlignNestedMenu } from './items/VerticalAlignNestedMenu';
+import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK, VERTICAL_ALIGN_BOTTOM_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_ITEM, VERTICAL_ALIGN_TOP_ITEM } from './keys';
 export const getCellMenuComponents = ({
   api
 }) => [
@@ -21,6 +27,66 @@ export const getCellMenuComponents = ({
     rank: CELL_MENU_RANK[CELL_ACTION_SECTION.key]
   }],
   component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: VERTICAL_ALIGN_MENU.type,
+  key: VERTICAL_ALIGN_MENU.key,
+  parents: [{
+    type: CELL_ACTION_SECTION.type,
+    key: CELL_ACTION_SECTION.key,
+    rank: CELL_ACTION_SECTION_RANK[VERTICAL_ALIGN_MENU.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, null, props.children)
+}, {
+  type: VERTICAL_ALIGN_MENU_SECTION.type,
+  key: VERTICAL_ALIGN_MENU_SECTION.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU.type,
+    key: VERTICAL_ALIGN_MENU.key,
+    rank: VERTICAL_ALIGN_MENU_RANK[VERTICAL_ALIGN_MENU_SECTION.key]
+  }],
+  component: props => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, props.children)
+}, {
+  type: VERTICAL_ALIGN_TOP_ITEM.type,
+  key: VERTICAL_ALIGN_TOP_ITEM.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_TOP_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+    api: api,
+    icon: AlignPositionTopIcon,
+    label: messages.cellAlignmentTop,
+    value: "top"
+  })
+}, {
+  type: VERTICAL_ALIGN_MIDDLE_ITEM.type,
+  key: VERTICAL_ALIGN_MIDDLE_ITEM.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_MIDDLE_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+    api: api,
+    icon: AlignPositionCenterVerticalIcon,
+    label: messages.cellAlignmentMiddle,
+    value: "middle"
+  })
+}, {
+  type: VERTICAL_ALIGN_BOTTOM_ITEM.type,
+  key: VERTICAL_ALIGN_BOTTOM_ITEM.key,
+  parents: [{
+    type: VERTICAL_ALIGN_MENU_SECTION.type,
+    key: VERTICAL_ALIGN_MENU_SECTION.key,
+    rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+    api: api,
+    icon: AlignPositionBottomIcon,
+    label: messages.cellAlignmentBottom,
+    value: "bottom"
+  })
 }, {
   type: MERGE_CELLS_ITEM.type,
   key: MERGE_CELLS_ITEM.key,

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

@@ -27,7 +27,8 @@ export const MergeCellsItem = ({
       return;
     }
     mergeCellsWithAnalytics(api === null || api === void 0 ? 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);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!shouldShowMergeCells(tableMenuContext)) {
     return null;

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

@@ -27,7 +27,8 @@ export const SplitCellItem = ({
       return;
     }
     splitCellWithAnalytics(api === null || api === void 0 ? 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);
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
   if (!shouldShowSplitCell(tableMenuContext)) {
     return null;

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

@@ -0,0 +1,57 @@
+import React, { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu, setMultipleCellAttrsEditorCommand } from '../../../../pm-plugins/commands';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { getSelectedCellValign } from './verticalAlignUtils';
+export const VerticalAlignDropdownItem = ({
+  api,
+  icon: Icon,
+  label,
+  value
+}) => {
+  var _useTableMenuContext;
+  const {
+    editorView
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
+  const {
+    formatMessage
+  } = useIntl();
+  const selectedValign = useMemo(() => getSelectedCellValign(editorView), [editorView]);
+  const handleClick = useCallback(() => {
+    if (!editorView || !api) {
+      return;
+    }
+    const {
+      targetCellPosition
+    } = getPluginState(editorView.state);
+    api.core.actions.execute(({
+      tr
+    }) => {
+      setMultipleCellAttrsEditorCommand({
+        valign: value
+      }, targetCellPosition)({
+        tr
+      });
+      closeActiveTableMenu()({
+        tr
+      });
+      return tr;
+    });
+    api.core.actions.focus();
+  }, [api, editorView, value]);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    isSelected: selectedValign === value,
+    onClick: handleClick,
+    role: "menuitemradio"
+  }, formatMessage(label));
+};

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

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
+import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+import { getSelectedCellValign } from './verticalAlignUtils';
+const getTriggerIcon = valign => {
+  switch (valign) {
+    case 'middle':
+      return AlignPositionCenterVerticalIcon;
+    case 'bottom':
+      return AlignPositionBottomIcon;
+    case 'top':
+    default:
+      return AlignPositionTopIcon;
+  }
+};
+export const VerticalAlignNestedMenu = ({
+  children
+}) => {
+  var _useTableMenuContext;
+  const {
+    editorView
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
+  const {
+    formatMessage
+  } = useIntl();
+  const selectedValign = useMemo(() => getSelectedCellValign(editorView), [editorView]);
+  const TriggerIcon = getTriggerIcon(selectedValign);
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    }),
+    text: formatMessage(messages.cellAlignment)
+  }, children);
+};

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

@@ -0,0 +1,15 @@
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+const getNormalizedValign = valign => valign !== null && valign !== void 0 ? valign : 'top';
+export const getSelectedCellValign = editorView => {
+  if (!editorView) {
+    return 'top';
+  }
+  const {
+    state
+  } = editorView;
+  const {
+    targetCellPosition
+  } = getPluginState(state);
+  const cell = typeof targetCellPosition === 'number' ? state.doc.nodeAt(targetCellPosition) : undefined;
+  return getNormalizedValign(cell === null || cell === void 0 ? void 0 : cell.attrs.valign);
+};

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

@@ -29,13 +29,42 @@ export const SPLIT_CELL_ITEM = {
   type: 'menu-item',
   key: 'split-cell'
 };
+export const VERTICAL_ALIGN_MENU = {
+  type: 'nested-menu',
+  key: 'vertical-align'
+};
+export const VERTICAL_ALIGN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'vertical-align-section'
+};
+export const VERTICAL_ALIGN_TOP_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-top'
+};
+export const VERTICAL_ALIGN_MIDDLE_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-middle'
+};
+export const VERTICAL_ALIGN_BOTTOM_ITEM = {
+  type: 'menu-item',
+  key: 'vertical-align-bottom'
+};
 
 // --- Item ranks within their sections ---
 
 export const CELL_ACTION_SECTION_RANK = {
   [BACKGROUND_COLOR_ITEM.key]: 100,
-  [MERGE_CELLS_ITEM.key]: 200,
-  [SPLIT_CELL_ITEM.key]: 300
+  [VERTICAL_ALIGN_MENU.key]: 200,
+  [MERGE_CELLS_ITEM.key]: 300,
+  [SPLIT_CELL_ITEM.key]: 400
+};
+export const VERTICAL_ALIGN_MENU_RANK = {
+  [VERTICAL_ALIGN_MENU_SECTION.key]: 100
+};
+export const VERTICAL_ALIGN_MENU_SECTION_RANK = {
+  [VERTICAL_ALIGN_TOP_ITEM.key]: 100,
+  [VERTICAL_ALIGN_MIDDLE_ITEM.key]: 200,
+  [VERTICAL_ALIGN_BOTTOM_ITEM.key]: 300
 };
 export const CELL_DANGER_SECTION_RANK = {
   [CLEAR_CELLS_ITEM.key]: 100

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

@@ -6,6 +6,7 @@ import { addColumnBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddColumnLeftItem = ({
@@ -42,6 +43,8 @@ export const AddColumnLeftItem = ({
     }
     const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+    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/column/items/AddColumnRightItem.js

@@ -6,6 +6,7 @@ import { addColumnAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const AddColumnRightItem = ({
@@ -42,6 +43,8 @@ export const AddColumnRightItem = ({
     }
     const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     insertColumnWithAnalytics(api, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+    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/column/items/DeleteColumnItem.js

@@ -6,7 +6,7 @@ import { deleteColumn, 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, hoverColumns } from '../../../../pm-plugins/commands';
+import { clearHoverSelection, closeActiveTableMenu, hoverColumns } from '../../../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
@@ -61,6 +61,8 @@ export const DeleteColumnItem = ({
     }
     const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
     deleteColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect)(editorView.state, editorView.dispatch, editorView);
+    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/column/items/DistributeColumnsItem.js

@@ -5,6 +5,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getNewResizeStateFromSelectedColumns } from '../../../../pm-plugins/table-resizing/utils/resize-state';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
@@ -47,6 +48,8 @@ export const DistributeColumnsItem = ({
       return;
     }
     distributeColumnsWidthsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(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 (!shouldShowDistributeColumns(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount)) {
     return null;

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

@@ -7,6 +7,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
+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 { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
@@ -44,6 +45,8 @@ export const MoveColumnLeftItem = 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_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.left - 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 || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {
     return null;

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

@@ -6,6 +6,7 @@ import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnMoveRightIcon, 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 { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
@@ -43,6 +44,8 @@ export const MoveColumnRightItem = 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_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.right)(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 || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {
     return null;

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

@@ -5,6 +5,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export const SortDecreasingItem = ({
@@ -28,6 +29,8 @@ export const SortDecreasingItem = ({
       return;
     }
     sortColumnWithAnalytics(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, columnIndex, SortOrder.DESC)(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,