@atlaskit/editor-plugin-layout 10.3.1 → 10.3.3

package/dist/es2019/ui/LayoutColumnMenu/components.js

@@ -1,25 +1,11 @@
 import React from 'react';
+import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
-export const LAYOUT_COLUMN_MENU = {
-  key: 'layout-column-menu',
-  type: 'menu'
-};
-const LAYOUT_COLUMN_MENU_SECTION = {
-  key: 'layout-column-menu-section',
-  type: 'menu-section'
-};
-const DISTRIBUTE_COLUMNS_MENU_ITEM = {
-  key: 'layout-column-menu-distribute-columns-item',
-  type: 'menu-item'
-};
-const LAYOUT_COLUMN_MENU_RANK = {
-  [LAYOUT_COLUMN_MENU_SECTION.key]: 0
-};
-const LAYOUT_COLUMN_MENU_SECTION_RANK = {
-  [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 0
-};
+import { DISTRIBUTE_COLUMNS_MENU_ITEM, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
+import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
+import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
 export const LAYOUT_COLUMN_MENU_FALLBACKS = {
   'menu-section': ({
     children
@@ -44,5 +30,55 @@ export const getLayoutColumnMenuComponents = ({
       ...LAYOUT_COLUMN_MENU_SECTION,
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     }]
+  }, {
+    ...VERTICAL_ALIGN_MENU,
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, {
+      api: api
+    }, children),
+    parents: [{
+      ...LAYOUT_COLUMN_MENU_SECTION,
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[VERTICAL_ALIGN_MENU.key]
+    }]
+  }, {
+    ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
+    parents: [{
+      ...VERTICAL_ALIGN_MENU,
+      rank: VERTICAL_ALIGN_MENU_RANK[LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]
+    }]
+  }, {
+    ...VERTICAL_ALIGN_TOP_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+      api: api,
+      label: layoutMessages.alignColumnTop,
+      value: "top"
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_TOP_MENU_ITEM.key]
+    }]
+  }, {
+    ...VERTICAL_ALIGN_MIDDLE_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+      api: api,
+      label: layoutMessages.alignColumnMiddle,
+      value: "middle"
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key]
+    }]
+  }, {
+    ...VERTICAL_ALIGN_BOTTOM_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+      api: api,
+      label: layoutMessages.alignColumnBottom,
+      value: "bottom"
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
+    }]
   }];
 };

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

@@ -1,13 +1,14 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
-import { LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
+import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
+import { LAYOUT_COLUMN_MENU } from './keys';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
 const getLayoutColumnMenuTarget = (editorView, selectionAnchorPos) => {
@@ -38,17 +39,33 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
       selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
     };
   });
+  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  const menuRef = useRef(null);
   const closeLayoutColumnMenu = useCallback(() => {
     var _api$core, _api$layout;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
       isOpen: false
     }));
   }, [api]);
+  const handleClickOutside = useCallback(event => {
+    var _menuRef$current;
+    if (event.target instanceof Node && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(event.target)) {
+      return;
+    }
+    if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
+      return;
+    }
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
   const handleSetIsOpen = useCallback(isOpen => {
     if (!isOpen) {
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  const handleMenuRef = useCallback(el => {
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
+    menuRef.current = el;
+  }, [setOutsideClickTargetRef]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   const target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
   const hasValidTarget = target instanceof HTMLElement;
@@ -70,8 +87,10 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     alignY: "top",
     forcePlacement: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
-    handleClickOutside: closeLayoutColumnMenu,
+    handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handleMenuRef
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
@@ -81,5 +100,5 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  }))));
+  })))));
 });

package/dist/es2019/ui/LayoutColumnMenu/keys.js

@@ -0,0 +1,61 @@
+// --- Menu surface ---
+
+export const LAYOUT_COLUMN_MENU = {
+  type: 'menu',
+  key: 'layout-column-menu'
+};
+
+// --- Sections ---
+
+export const LAYOUT_COLUMN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-menu-section'
+};
+export const LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-vertical-align-menu-section'
+};
+export const LAYOUT_COLUMN_MENU_RANK = {
+  [LAYOUT_COLUMN_MENU_SECTION.key]: 100
+};
+
+// --- Menus ---
+
+export const VERTICAL_ALIGN_MENU = {
+  type: 'nested-menu',
+  key: 'layout-column-menu-vertical-align-menu'
+};
+
+// --- Items ---
+
+export const DISTRIBUTE_COLUMNS_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-distribute-columns-item'
+};
+export const VERTICAL_ALIGN_TOP_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-top-item'
+};
+export const VERTICAL_ALIGN_MIDDLE_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-middle-item'
+};
+export const VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-bottom-item'
+};
+
+// --- Item ranks within sections ---
+
+export const LAYOUT_COLUMN_MENU_SECTION_RANK = {
+  [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 100,
+  [VERTICAL_ALIGN_MENU.key]: 200
+};
+export const VERTICAL_ALIGN_MENU_RANK = {
+  [LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]: 100
+};
+export const VERTICAL_ALIGN_MENU_SECTION_RANK = {
+  [VERTICAL_ALIGN_TOP_MENU_ITEM.key]: 100,
+  [VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key]: 200,
+  [VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]: 300
+};

package/dist/es2019/ui/LayoutColumnMenu/useCurrentLayoutColumnValign.js

@@ -0,0 +1,14 @@
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const getCurrentLayoutColumnValign = selection => {
+  const selectedColumn = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
+  const currentValign = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.attrs.valign;
+  return {
+    currentValign,
+    selectedColumn
+  };
+};
+export const useCurrentLayoutColumnValign = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
+  var _states$selectionStat;
+  return getCurrentLayoutColumnValign((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+});

package/dist/es2019/ui/LayoutColumnMenu/verticalAlignIcons.js

@@ -0,0 +1,11 @@
+// Disable no-re-export here, this is a useful mapping file for icon lookup used in multiple places
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+import AlignContentBottomIcon from '@atlaskit/icon-lab/core/align-content-bottom';
+import AlignContentCenterVerticalIcon from '@atlaskit/icon-lab/core/align-content-center-vertical';
+import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
+export const VERTICAL_ALIGN_ICONS = {
+  top: AlignContentTopIcon,
+  middle: AlignContentCenterVerticalIcon,
+  bottom: AlignContentBottomIcon
+};

package/dist/esm/layoutPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { layoutColumn, layoutColumnWithLocalId, layoutSection, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
+import { layoutColumn, layoutColumnStage0, layoutColumnWithLocalId, layoutSection, layoutSectionWithLocalId } from '@atlaskit/adf-schema';
 import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
@@ -10,7 +10,7 @@ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
@@ -87,7 +87,10 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         node: editorExperiment('advanced_layouts', true) ? fg('platform_editor_adf_with_localid') ? layoutSectionWithSingleColumnLocalId : layoutSectionWithSingleColumn : fg('platform_editor_adf_with_localid') ? layoutSectionWithLocalId : layoutSection
       }, {
         name: 'layoutColumn',
-        node: fg('platform_editor_adf_with_localid') ? layoutColumnWithLocalId : layoutColumn
+        node: expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) ?
+        // `layoutColumnStage0` includes both `valign` and `localId` attrs, so it remains
+        // compatible with `platform_editor_adf_with_localid` when both flags are enabled.
+        layoutColumnStage0 : fg('platform_editor_adf_with_localid') ? layoutColumnWithLocalId : layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -299,6 +302,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       return pluginKey.getState(editorState);
     },
     commands: {
+      setLayoutColumnValign: setLayoutColumnValign,
       toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }
   };

package/dist/esm/pm-plugins/actions.js

@@ -8,6 +8,7 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
@@ -539,10 +540,34 @@ var formatLayoutName = function formatLayoutName(layout) {
       return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
 };
-export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref4) {
-  var isOpen = _ref4.isOpen;
-  return function (_ref5) {
-    var tr = _ref5.tr;
+export var setLayoutColumnValign = function setLayoutColumnValign(valign) {
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return null;
+    }
+    var layoutColumn = tr.doc.type.schema.nodes.layoutColumn;
+    var selectedColumn = tr.selection instanceof NodeSelection && tr.selection.node.type === layoutColumn ? {
+      node: tr.selection.node,
+      pos: tr.selection.from
+    } : undefined;
+    if (!selectedColumn) {
+      return null;
+    }
+    if (selectedColumn.node.attrs.valign === valign) {
+      return null;
+    }
+    tr.setNodeMarkup(selectedColumn.pos, selectedColumn.node.type, _objectSpread(_objectSpread({}, selectedColumn.node.attrs), {}, {
+      valign: valign
+    }));
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref5) {
+  var isOpen = _ref5.isOpen;
+  return function (_ref6) {
+    var tr = _ref6.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       isOpen: isOpen
     });

package/dist/esm/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useCurrentLayoutColumnValign } from './useCurrentLayoutColumnValign';
+import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
+export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
+  var api = _ref.api,
+    label = _ref.label,
+    value = _ref.value;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useCurrentLayoutColu = useCurrentLayoutColumnValign(api),
+    currentValign = _useCurrentLayoutColu.currentValign,
+    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var Icon = VERTICAL_ALIGN_ICONS[value];
+  var onClick = useCallback(function () {
+    var _api$core, _api$layout;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.setLayoutColumnValign(value));
+  }, [api, value]);
+  if (!selectedColumn) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: "",
+      size: "small"
+    }),
+    isSelected: currentValign === value,
+    onClick: onClick,
+    testId: "layout-column-align-".concat(value)
+  }, formatMessage(label));
+};

package/dist/esm/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { layoutMessages } from '@atlaskit/editor-common/messages';
+import { LayoutIcon, NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { useCurrentLayoutColumnValign } from './useCurrentLayoutColumnValign';
+import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
+export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useCurrentLayoutColu = useCurrentLayoutColumnValign(api),
+    currentValign = _useCurrentLayoutColu.currentValign,
+    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
+  if (!selectedColumn) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    }),
+    text: formatMessage(layoutMessages.alignColumn),
+    testId: "layout-column-align-menu",
+    dropdownTestId: "layout-column-align-dropdown"
+  }, children);
+};

package/dist/esm/ui/LayoutColumnMenu/components.js

@@ -2,23 +2,13 @@ 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 from 'react';
+import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
-export var LAYOUT_COLUMN_MENU = {
-  key: 'layout-column-menu',
-  type: 'menu'
-};
-var LAYOUT_COLUMN_MENU_SECTION = {
-  key: 'layout-column-menu-section',
-  type: 'menu-section'
-};
-var DISTRIBUTE_COLUMNS_MENU_ITEM = {
-  key: 'layout-column-menu-distribute-columns-item',
-  type: 'menu-item'
-};
-var LAYOUT_COLUMN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_MENU_SECTION.key, 0);
-var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 0);
+import { DISTRIBUTE_COLUMNS_MENU_ITEM, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
+import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
+import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
 export var LAYOUT_COLUMN_MENU_FALLBACKS = {
   'menu-section': function menuSection(_ref) {
     var children = _ref.children;
@@ -38,5 +28,52 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]
+  }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_MENU), {}, {
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/React.createElement(VerticalAlignNestedMenu, {
+        api: api
+      }, children);
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[VERTICAL_ALIGN_MENU.key]
+    })]
+  }), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+    parents: [_objectSpread(_objectSpread({}, VERTICAL_ALIGN_MENU), {}, {
+      rank: VERTICAL_ALIGN_MENU_RANK[LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_TOP_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+        api: api,
+        label: layoutMessages.alignColumnTop,
+        value: "top"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_TOP_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_MIDDLE_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+        api: api,
+        label: layoutMessages.alignColumnMiddle,
+        value: "middle"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_BOTTOM_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(VerticalAlignDropdownItem, {
+        api: api,
+        label: layoutMessages.alignColumnBottom,
+        value: "bottom"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+      rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
+    })]
   })];
 };

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

@@ -1,13 +1,14 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
-import { LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
+import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
+import { LAYOUT_COLUMN_MENU } from './keys';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
 var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selectionAnchorPos) {
@@ -36,17 +37,33 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     }),
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
     selection = _useSharedPluginState.selection;
+  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
+  var menuRef = useRef(null);
   var closeLayoutColumnMenu = useCallback(function () {
     var _api$core, _api$layout;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
       isOpen: false
     }));
   }, [api]);
+  var handleClickOutside = useCallback(function (event) {
+    var _menuRef$current;
+    if (event.target instanceof Node && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(event.target)) {
+      return;
+    }
+    if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
+      return;
+    }
+    closeLayoutColumnMenu();
+  }, [closeLayoutColumnMenu]);
   var handleSetIsOpen = useCallback(function (isOpen) {
     if (!isOpen) {
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
+  var handleMenuRef = useCallback(function (el) {
+    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
+    menuRef.current = el;
+  }, [setOutsideClickTargetRef]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
   var hasValidTarget = target instanceof HTMLElement;
@@ -68,8 +85,10 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     alignY: "top",
     forcePlacement: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
-    handleClickOutside: closeLayoutColumnMenu,
+    handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handleMenuRef
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
@@ -79,5 +98,5 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  }))));
+  })))));
 });

package/dist/esm/ui/LayoutColumnMenu/keys.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// --- Menu surface ---
+
+export var LAYOUT_COLUMN_MENU = {
+  type: 'menu',
+  key: 'layout-column-menu'
+};
+
+// --- Sections ---
+
+export var LAYOUT_COLUMN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-menu-section'
+};
+export var LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-vertical-align-menu-section'
+};
+export var LAYOUT_COLUMN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_MENU_SECTION.key, 100);
+
+// --- Menus ---
+
+export var VERTICAL_ALIGN_MENU = {
+  type: 'nested-menu',
+  key: 'layout-column-menu-vertical-align-menu'
+};
+
+// --- Items ---
+
+export var DISTRIBUTE_COLUMNS_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-distribute-columns-item'
+};
+export var VERTICAL_ALIGN_TOP_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-top-item'
+};
+export var VERTICAL_ALIGN_MIDDLE_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-middle-item'
+};
+export var VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-bottom-item'
+};
+
+// --- Item ranks within sections ---
+
+export var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty(_defineProperty({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200);
+export var VERTICAL_ALIGN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
+export var VERTICAL_ALIGN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty({}, VERTICAL_ALIGN_TOP_MENU_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key, 300);

package/dist/esm/ui/LayoutColumnMenu/useCurrentLayoutColumnValign.js

@@ -0,0 +1,16 @@
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export var getCurrentLayoutColumnValign = function getCurrentLayoutColumnValign(selection) {
+  var selectedColumn = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
+  var currentValign = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.attrs.valign;
+  return {
+    currentValign: currentValign,
+    selectedColumn: selectedColumn
+  };
+};
+export var useCurrentLayoutColumnValign = function useCurrentLayoutColumnValign(api) {
+  return useSharedPluginStateWithSelector(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return getCurrentLayoutColumnValign((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+  });
+};

package/dist/esm/ui/LayoutColumnMenu/verticalAlignIcons.js

@@ -0,0 +1,11 @@
+// Disable no-re-export here, this is a useful mapping file for icon lookup used in multiple places
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+import AlignContentBottomIcon from '@atlaskit/icon-lab/core/align-content-bottom';
+import AlignContentCenterVerticalIcon from '@atlaskit/icon-lab/core/align-content-center-vertical';
+import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
+export var VERTICAL_ALIGN_ICONS = {
+  top: AlignContentTopIcon,
+  middle: AlignContentCenterVerticalIcon,
+  bottom: AlignContentBottomIcon
+};

package/dist/types/layoutPluginType.d.ts

@@ -9,7 +9,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import type { insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
@@ -29,6 +29,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
         insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
     };
     commands: {
+        setLayoutColumnValign: typeof setLayoutColumnValign;
         toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
     };
     dependencies: LayoutPluginDependencies;