@atlaskit/editor-plugin-layout 10.3.1 → 10.3.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.3.3
+
+### Patch Changes
+
+- [`0197bccd3d244`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0197bccd3d244) -
+  Add vertical alignment options to layout column menus and rendering.
+- Updated dependencies
+
+## 10.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.3.1
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -94,7 +94,10 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _schema.layoutSectionWithSingleColumnLocalId : _schema.layoutSectionWithSingleColumn : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutSectionWithLocalId : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
-        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
+        node: (0, _expValEqualsNoExposure.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.
+        _adfSchema.layoutColumnStage0 : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -306,6 +309,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       return _pluginKey.pluginKey.getState(editorState);
     },
     commands: {
+      setLayoutColumnValign: _actions.setLayoutColumnValign,
       toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }
   };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
-exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
+exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -15,6 +15,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
@@ -548,10 +549,34 @@ var formatLayoutName = function formatLayoutName(layout) {
       return _analytics.LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
 };
-var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref4) {
-  var isOpen = _ref4.isOpen;
-  return function (_ref5) {
-    var tr = _ref5.tr;
+var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign) {
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return null;
+    }
+    var layoutColumn = tr.doc.type.schema.nodes.layoutColumn;
+    var selectedColumn = tr.selection instanceof _state.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;
+  };
+};
+var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref5) {
+  var isOpen = _ref5.isOpen;
+  return function (_ref6) {
+    var tr = _ref6.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       isOpen: isOpen
     });

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

@@ -0,0 +1,40 @@
+"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 _useCurrentLayoutColumnValign = require("./useCurrentLayoutColumnValign");
+var _verticalAlignIcons = require("./verticalAlignIcons");
+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 api = _ref.api,
+    label = _ref.label,
+    value = _ref.value;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useCurrentLayoutColu = (0, _useCurrentLayoutColumnValign.useCurrentLayoutColumnValign)(api),
+    currentValign = _useCurrentLayoutColu.currentValign,
+    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var Icon = _verticalAlignIcons.VERTICAL_ALIGN_ICONS[value];
+  var onClick = (0, _react.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: "",
+      size: "small"
+    }),
+    isSelected: currentValign === value,
+    onClick: onClick,
+    testId: "layout-column-align-".concat(value)
+  }, formatMessage(label));
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalAlignNestedMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _useCurrentLayoutColumnValign = require("./useCurrentLayoutColumnValign");
+var _verticalAlignIcons = require("./verticalAlignIcons");
+var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useCurrentLayoutColu = (0, _useCurrentLayoutColumnValign.useCurrentLayoutColumnValign)(api),
+    currentValign = _useCurrentLayoutColu.currentValign,
+    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _editorToolbar.LayoutIcon;
+  if (!selectedColumn) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(TriggerIcon, {
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.NestedDropdownRightIcon, {
+      label: "",
+      size: "small"
+    }),
+    text: formatMessage(_messages.layoutMessages.alignColumn),
+    testId: "layout-column-align-menu",
+    dropdownTestId: "layout-column-align-dropdown"
+  }, children);
+};

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

@@ -4,28 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLayoutColumnMenuComponents = exports.LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU = void 0;
+exports.getLayoutColumnMenuComponents = exports.LAYOUT_COLUMN_MENU_FALLBACKS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
 var _DistributeColumnsDropdownItem = require("./DistributeColumnsDropdownItem");
+var _keys = require("./keys");
+var _VerticalAlignDropdownItem = require("./VerticalAlignDropdownItem");
+var _VerticalAlignNestedMenu = require("./VerticalAlignNestedMenu");
 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) { (0, _defineProperty2.default)(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; }
-var LAYOUT_COLUMN_MENU = exports.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 = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_MENU_SECTION.key, 0);
-var LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 0);
 var LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU_FALLBACKS = {
   'menu-section': function menuSection(_ref) {
     var children = _ref.children;
@@ -34,16 +24,63 @@ var LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU_FALLBACKS = {
 };
 var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
   var api = _ref2.api;
-  return [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
+  return [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
     component: _toolbarMenuContainer.ToolbarMenuContainer
-  }), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
-    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
-      rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
+  }), _objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_RANK[_keys.LAYOUT_COLUMN_MENU_SECTION.key]
     })]
-  }), _objectSpread(_objectSpread({}, DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
+  }), _objectSpread(_objectSpread({}, _keys.DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
     component: (0, _DistributeColumnsDropdownItem.createDistributeColumnsDropdownItem)(api),
-    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
-      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignNestedMenu.VerticalAlignNestedMenu, {
+        api: api
+      }, children);
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_MENU.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+    parents: [_objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
+      rank: _keys.VERTICAL_ALIGN_MENU_RANK[_keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_TOP_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        label: _messages.layoutMessages.alignColumnTop,
+        value: "top"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_TOP_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MIDDLE_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        label: _messages.layoutMessages.alignColumnMiddle,
+        value: "middle"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_BOTTOM_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
+        api: api,
+        label: _messages.layoutMessages.alignColumnBottom,
+        value: "bottom"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
+      rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
     })]
   })];
 };

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

@@ -15,6 +15,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
 var _components = require("./components");
+var _keys = require("./keys");
 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 PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
 var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
@@ -44,18 +45,34 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     }),
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
     selection = _useSharedPluginState.selection;
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  var menuRef = (0, _react.useRef)(null);
   var closeLayoutColumnMenu = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (isOpen) {
     if (!isOpen) {
       closeLayoutColumnMenu();
     }
   }, [closeLayoutColumnMenu]);
-  var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_components.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var handleMenuRef = (0, _react.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(_keys.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;
   (0, _react.useEffect)(function () {
@@ -76,8 +93,10 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     alignY: "top",
     forcePlacement: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
-    handleClickOutside: closeLayoutColumnMenu,
+    handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: handleMenuRef
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
@@ -86,6 +105,6 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
   }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
-    surface: _components.LAYOUT_COLUMN_MENU
-  }))));
+    surface: _keys.LAYOUT_COLUMN_MENU
+  })))));
 });

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VERTICAL_ALIGN_TOP_MENU_ITEM = exports.VERTICAL_ALIGN_MIDDLE_MENU_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+// --- Menu surface ---
+
+var LAYOUT_COLUMN_MENU = exports.LAYOUT_COLUMN_MENU = {
+  type: 'menu',
+  key: 'layout-column-menu'
+};
+
+// --- Sections ---
+
+var LAYOUT_COLUMN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-menu-section'
+};
+var LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-vertical-align-menu-section'
+};
+var LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_MENU_SECTION.key, 100);
+
+// --- Menus ---
+
+var VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_MENU = {
+  type: 'nested-menu',
+  key: 'layout-column-menu-vertical-align-menu'
+};
+
+// --- Items ---
+
+var DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-distribute-columns-item'
+};
+var VERTICAL_ALIGN_TOP_MENU_ITEM = exports.VERTICAL_ALIGN_TOP_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-top-item'
+};
+var VERTICAL_ALIGN_MIDDLE_MENU_ITEM = exports.VERTICAL_ALIGN_MIDDLE_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-middle-item'
+};
+var VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-vertical-align-bottom-item'
+};
+
+// --- Item ranks within sections ---
+
+var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200);
+var VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
+var VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_TOP_MENU_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key, 300);

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentLayoutColumnValign = exports.getCurrentLayoutColumnValign = void 0;
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var getCurrentLayoutColumnValign = exports.getCurrentLayoutColumnValign = function getCurrentLayoutColumnValign(selection) {
+  var selectedColumn = selection instanceof _state.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
+  };
+};
+var useCurrentLayoutColumnValign = exports.useCurrentLayoutColumnValign = function useCurrentLayoutColumnValign(api) {
+  return (0, _hooks.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/cjs/ui/LayoutColumnMenu/verticalAlignIcons.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VERTICAL_ALIGN_ICONS = void 0;
+var _alignContentBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-content-bottom"));
+var _alignContentCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-content-center-vertical"));
+var _alignContentTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-content-top"));
+// 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 */
+
+var VERTICAL_ALIGN_ICONS = exports.VERTICAL_ALIGN_ICONS = {
+  top: _alignContentTop.default,
+  middle: _alignContentCenterVertical.default,
+  bottom: _alignContentBottom.default
+};

package/dist/es2019/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';
@@ -86,7 +86,10 @@ export const layoutPlugin = ({
         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() {
@@ -287,6 +290,7 @@ export const layoutPlugin = ({
       return pluginKey.getState(editorState);
     },
     commands: {
+      setLayoutColumnValign,
       toggleLayoutColumnMenu
     }
   };

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

@@ -5,6 +5,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';
@@ -525,6 +526,32 @@ const formatLayoutName = layout => {
       return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
 };
+export const setLayoutColumnValign = valign => ({
+  tr
+}) => {
+  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    return null;
+  }
+  const {
+    layoutColumn
+  } = tr.doc.type.schema.nodes;
+  const 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, {
+    ...selectedColumn.node.attrs,
+    valign
+  });
+  tr.setMeta('scrollIntoView', false);
+  return tr;
+};
 export const toggleLayoutColumnMenu = ({
   isOpen
 }) => ({

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

@@ -0,0 +1,35 @@
+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 const VerticalAlignDropdownItem = ({
+  api,
+  label,
+  value
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    currentValign,
+    selectedColumn
+  } = useCurrentLayoutColumnValign(api);
+  const Icon = VERTICAL_ALIGN_ICONS[value];
+  const onClick = 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.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-${value}`
+  }, formatMessage(label));
+};

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

@@ -0,0 +1,35 @@
+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 const VerticalAlignNestedMenu = ({
+  api,
+  children
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    currentValign,
+    selectedColumn
+  } = useCurrentLayoutColumnValign(api);
+  const 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);
+};