@atlaskit/editor-plugin-layout 10.9.0 → 10.9.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.9.1
+
+### Patch Changes
+
+- [`3b52ed6492f99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b52ed6492f99) -
+  Fix layout column blank-space focus for vertical alignment
+- [`523f77de83059`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/523f77de83059) -
+  Suppress drag handle tooltip while layout column menu is open. Adds layoutColumnMenuPopupOpen user
+  intent and wraps LayoutColumnMenu with UserIntentPopupWrapper.
+- Updated dependencies
+
 ## 10.9.0
 
 ### Minor Changes

package/dist/cjs/layoutPlugin.js

@@ -381,7 +381,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         var _api$analytics4;
         return (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
       },
-      distributeLayoutColumns: (0, _actions.createDistributeLayoutColumnsCommand)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
+      distributeLayoutColumns: (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
       insertLayoutColumn: function insertLayoutColumn(side) {
         var _api$analytics6;
         return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDistributeLayoutColumnsCommand = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
+exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
 exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
@@ -672,93 +672,86 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
     return tr;
   };
 };
-var distributeLayoutColumns = exports.distributeLayoutColumns = function distributeLayoutColumns() {
-  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    editorAnalyticsAPI = _ref8.editorAnalyticsAPI,
-    _ref8$inputMethod = _ref8.inputMethod,
-    inputMethod = _ref8$inputMethod === void 0 ? _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod,
-    _ref8$target = _ref8.target,
-    target = _ref8$target === void 0 ? 'selectedColumns' : _ref8$target;
-  return function (_ref9) {
-    var tr = _ref9.tr;
-    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
-      return null;
-    }
-    var selectedLayoutColumnsResult = target === 'allColumns' ? (0, _layoutColumnSelection.getAllLayoutColumnsFromSelection)(tr.selection) : (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
-    if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length < 2) {
-      return null;
-    }
-    var layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
-      startIndex = selectedLayoutColumnsResult.startIndex,
-      endIndex = selectedLayoutColumnsResult.endIndex,
-      selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
-    var existingWidths = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
-      return column.attrs.width;
-    });
-    var selectedWidths = selectedLayoutColumns.map(function (_ref0) {
-      var node = _ref0.node;
-      return node.attrs.width;
-    });
-    var distribution = (0, _layoutColumnDistribution.calculateDistribution)(selectedWidths);
-    if (!distribution) {
-      return null;
-    }
-    var selectedTotal = distribution.selectedTotal,
-      equalWidth = distribution.equalWidth;
-    if ((0, _layoutColumnDistribution.isDistributedUniformly)(selectedWidths, distribution)) {
-      return null;
-    }
-
-    // Build new widths array: selected columns get equal share, unselected unchanged.
-    // Assign rounded (2dp) equal widths to all selected cols except the last, which absorbs
-    // the rounding remainder so the sum of selected widths equals selectedTotal exactly.
-    var assignedToSelected = 0;
-    var selectedAssignedCount = 0;
-    var newWidths = existingWidths.map(function (w, idx) {
-      if (idx < startIndex || idx > endIndex) {
-        return w;
+var distributeLayoutColumns = exports.distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI) {
+  return function () {
+    var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref8$inputMethod = _ref8.inputMethod,
+      inputMethod = _ref8$inputMethod === void 0 ? _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod,
+      _ref8$target = _ref8.target,
+      target = _ref8$target === void 0 ? 'selectedColumns' : _ref8$target;
+    return function (_ref9) {
+      var tr = _ref9.tr;
+      if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        return null;
       }
-      selectedAssignedCount += 1;
-      if (selectedAssignedCount < selectedLayoutColumns.length) {
-        assignedToSelected += equalWidth;
-        return equalWidth;
+      var selectedLayoutColumnsResult = target === 'allColumns' ? (0, _layoutColumnSelection.getAllLayoutColumnsFromSelection)(tr.selection) : (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
+      if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length < 2) {
+        return null;
+      }
+      var layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
+        startIndex = selectedLayoutColumnsResult.startIndex,
+        endIndex = selectedLayoutColumnsResult.endIndex,
+        selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
+      var existingWidths = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
+        return column.attrs.width;
+      });
+      var selectedWidths = selectedLayoutColumns.map(function (_ref0) {
+        var node = _ref0.node;
+        return node.attrs.width;
+      });
+      var distribution = (0, _layoutColumnDistribution.calculateDistribution)(selectedWidths);
+      if (!distribution) {
+        return null;
+      }
+      var selectedTotal = distribution.selectedTotal,
+        equalWidth = distribution.equalWidth;
+      if ((0, _layoutColumnDistribution.isDistributedUniformly)(selectedWidths, distribution)) {
+        return null;
       }
-      // Last selected column: absorb the remainder to avoid drift
-      return Number((selectedTotal - assignedToSelected).toFixed(2));
-    });
 
-    // Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
-    selectedLayoutColumns.forEach(function (_ref1, i) {
-      var node = _ref1.node,
-        pos = _ref1.pos;
-      var colIdx = startIndex + i;
-      tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        width: newWidths[colIdx]
-      }));
-    });
-    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
-      action: _analytics.ACTION.UPDATED,
-      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
-      attributes: {
-        columnCount: layoutSectionNode.childCount,
-        endIndex: endIndex,
-        inputMethod: inputMethod,
-        selectedCount: selectedLayoutColumns.length,
-        startIndex: startIndex
-      },
-      eventType: _analytics.EVENT_TYPE.TRACK
-    })(tr);
-    tr.setMeta('scrollIntoView', false);
-    return tr;
-  };
-};
-var createDistributeLayoutColumnsCommand = exports.createDistributeLayoutColumnsCommand = function createDistributeLayoutColumnsCommand(editorAnalyticsAPI) {
-  return function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return distributeLayoutColumns(_objectSpread(_objectSpread({}, options), {}, {
-      editorAnalyticsAPI: editorAnalyticsAPI
-    }));
+      // Build new widths array: selected columns get equal share, unselected unchanged.
+      // Assign rounded (2dp) equal widths to all selected cols except the last, which absorbs
+      // the rounding remainder so the sum of selected widths equals selectedTotal exactly.
+      var assignedToSelected = 0;
+      var selectedAssignedCount = 0;
+      var newWidths = existingWidths.map(function (w, idx) {
+        if (idx < startIndex || idx > endIndex) {
+          return w;
+        }
+        selectedAssignedCount += 1;
+        if (selectedAssignedCount < selectedLayoutColumns.length) {
+          assignedToSelected += equalWidth;
+          return equalWidth;
+        }
+        // Last selected column: absorb the remainder to avoid drift
+        return Number((selectedTotal - assignedToSelected).toFixed(2));
+      });
+
+      // Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
+      selectedLayoutColumns.forEach(function (_ref1, i) {
+        var node = _ref1.node,
+          pos = _ref1.pos;
+        var colIdx = startIndex + i;
+        tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidths[colIdx]
+        }));
+      });
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+        action: _analytics.ACTION.UPDATED,
+        actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+        attributes: {
+          columnCount: layoutSectionNode.childCount,
+          endIndex: endIndex,
+          inputMethod: inputMethod,
+          selectedCount: selectedLayoutColumns.length,
+          startIndex: startIndex
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      })(tr);
+      tr.setMeta('scrollIntoView', false);
+      return tr;
+    };
   };
 };
 var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref10) {

package/dist/cjs/pm-plugins/utils/layout-column-selection.js

@@ -4,9 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSelectedLayoutColumnsFromSelection = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = exports.getAllLayoutColumnsFromSelection = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var findLayoutSectionFromSelection = function findLayoutSectionFromSelection(selection) {
-  return (0, _utils.findParentNodeOfType)(selection.$from.doc.type.schema.nodes.layoutSection)(selection);
+  var layoutSection = selection.$from.doc.type.schema.nodes.layoutSection;
+  // NodeSelection on the layoutSection node itself
+  if (selection instanceof _state.NodeSelection && selection.node.type === layoutSection) {
+    return {
+      node: selection.node,
+      pos: selection.from
+    };
+  }
+  return (0, _utils.findParentNodeOfType)(layoutSection)(selection);
 };
 var findLayoutColumnsFromLayoutSection = function findLayoutColumnsFromLayoutSection(layoutSectionNode) {
   var layoutSectionPos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

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

@@ -38,7 +38,12 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
   }
   var selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    onClick: onClick
+    onClick: onClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
   }, formatMessage(_messages.layoutMessages.deleteColumn, {
     count: selectedColumnCount
   }));

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

@@ -52,6 +52,11 @@ var DistributeColumnsDropdownItem = exports.DistributeColumnsDropdownItem = func
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,
-    isDisabled: isAlreadyUniform
+    isDisabled: isAlreadyUniform,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnsDistributeIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
   }, formatMessage(_messages.layoutMessages.distributeColumns));
 };

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

@@ -15,12 +15,12 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var INSERT_COLUMN_OPTIONS = {
   left: {
     Icon: _editorToolbar.TableColumnAddLeftIcon,
-    label: _messages.layoutMessages.insertColumnLeft,
+    label: _messages.layoutMessages.addColumnLeft,
     side: 'left'
   },
   right: {
     Icon: _editorToolbar.TableColumnAddRightIcon,
-    label: _messages.layoutMessages.insertColumnRight,
+    label: _messages.layoutMessages.addColumnRight,
     side: 'right'
   }
 };

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

@@ -31,7 +31,7 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _verticalAlignIcons.VERTICAL_ALIGN_ICONS.top;
+  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _verticalAlignIcons.VERTICAL_ALIGN_ICONS.middle;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/_react.default.createElement(TriggerIcon, {
       label: "",

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

@@ -71,15 +71,6 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]
-  }), _objectSpread(_objectSpread({}, _keys.DELETE_COLUMN_MENU_ITEM), {}, {
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_DeleteColumnDropdownItem.DeleteColumnDropdownItem, {
-        api: api
-      });
-    },
-    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
-      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
-    })]
   }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
     component: function component(_ref4) {
       var children = _ref4.children;
@@ -127,5 +118,25 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
       rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
     })]
+  }), // --- Danger section (Delete column) ---
+  _objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_DANGER_SECTION), {}, {
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_RANK[_keys.LAYOUT_COLUMN_DANGER_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.DELETE_COLUMN_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DeleteColumnDropdownItem.DeleteColumnDropdownItem, {
+        api: api
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_DANGER_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_DANGER_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
+    })]
   })];
 };

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

@@ -10,6 +10,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
@@ -104,6 +105,9 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -111,5 +115,5 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: _keys.LAYOUT_COLUMN_MENU
-  })));
+  }))));
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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.INSERT_COLUMN_RIGHT_MENU_ITEM = exports.INSERT_COLUMN_LEFT_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = void 0;
+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.LAYOUT_COLUMN_DANGER_SECTION_RANK = exports.LAYOUT_COLUMN_DANGER_SECTION = exports.INSERT_COLUMN_RIGHT_MENU_ITEM = exports.INSERT_COLUMN_LEFT_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 // --- Menu surface ---
 
@@ -23,7 +23,11 @@ var LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_VERTICAL_A
   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);
+var LAYOUT_COLUMN_DANGER_SECTION = exports.LAYOUT_COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-danger-section'
+};
+var LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, LAYOUT_COLUMN_MENU_SECTION.key, 100), LAYOUT_COLUMN_DANGER_SECTION.key, 200);
 
 // --- Menus ---
 
@@ -65,6 +69,7 @@ var DELETE_COLUMN_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = {
 
 // --- Item ranks within sections ---
 
-var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_MENU.key, 100), INSERT_COLUMN_LEFT_MENU_ITEM.key, 200), INSERT_COLUMN_RIGHT_MENU_ITEM.key, 300), DISTRIBUTE_COLUMNS_MENU_ITEM.key, 400), DELETE_COLUMN_MENU_ITEM.key, 500);
+var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_MENU.key, 100), INSERT_COLUMN_LEFT_MENU_ITEM.key, 200), INSERT_COLUMN_RIGHT_MENU_ITEM.key, 300), DISTRIBUTE_COLUMNS_MENU_ITEM.key, 400);
+var LAYOUT_COLUMN_DANGER_SECTION_RANK = exports.LAYOUT_COLUMN_DANGER_SECTION_RANK = (0, _defineProperty2.default)({}, DELETE_COLUMN_MENU_ITEM.key, 100);
 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/verticalAlignIcons.js

@@ -5,14 +5,14 @@ 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"));
+var _alignPositionBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-bottom"));
+var _alignPositionCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-center-vertical"));
+var _alignPositionTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-top"));
 // 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
+  top: _alignPositionTop.default,
+  middle: _alignPositionCenterVertical.default,
+  bottom: _alignPositionBottom.default
 };

package/dist/cjs/ui/toolbar.js

@@ -243,8 +243,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     disabled: (0, _layoutColumnDistribution.isDistributedUniformly)(getLayoutColumnWidths(node)),
     icon: _tableColumnsDistribute.default,
     onClick: function onClick(editorState, dispatch) {
-      var tr = (0, _actions.distributeLayoutColumns)({
-        editorAnalyticsAPI: editorAnalyticsAPI,
+      var tr = (0, _actions.distributeLayoutColumns)(editorAnalyticsAPI)({
         inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
         target: 'allColumns'
       })({

package/dist/es2019/layoutPlugin.js

@@ -11,7 +11,7 @@ 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 { createDefaultLayoutSection, createDistributeLayoutColumnsCommand, createMultiColumnLayoutSection, deleteLayoutColumn, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, 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';
@@ -353,7 +353,7 @@ export const layoutPlugin = ({
         var _api$analytics4;
         return deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
       },
-      distributeLayoutColumns: createDistributeLayoutColumnsCommand(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
+      distributeLayoutColumns: distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
       insertLayoutColumn: side => {
         var _api$analytics6;
         return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);

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

@@ -649,8 +649,7 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI) => ({
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const distributeLayoutColumns = ({
-  editorAnalyticsAPI,
+export const distributeLayoutColumns = editorAnalyticsAPI => ({
   inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU,
   target = 'selectedColumns'
 } = {}) => ({
@@ -730,10 +729,6 @@ export const distributeLayoutColumns = ({
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const createDistributeLayoutColumnsCommand = editorAnalyticsAPI => (options = {}) => distributeLayoutColumns({
-  ...options,
-  editorAnalyticsAPI
-});
 export const toggleLayoutColumnMenu = ({
   anchorPos,
   isOpen

package/dist/es2019/pm-plugins/utils/layout-column-selection.js

@@ -1,6 +1,17 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildrenByType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 const findLayoutSectionFromSelection = selection => {
-  return findParentNodeOfType(selection.$from.doc.type.schema.nodes.layoutSection)(selection);
+  const {
+    layoutSection
+  } = selection.$from.doc.type.schema.nodes;
+  // NodeSelection on the layoutSection node itself
+  if (selection instanceof NodeSelection && selection.node.type === layoutSection) {
+    return {
+      node: selection.node,
+      pos: selection.from
+    };
+  }
+  return findParentNodeOfType(layoutSection)(selection);
 };
 const findLayoutColumnsFromLayoutSection = (layoutSectionNode, layoutSectionPos = 0) => {
   return findChildrenByType(layoutSectionNode, layoutSectionNode.type.schema.nodes.layoutColumn).map(({

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { DeleteIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 const DeleteColumnDropdownItem = ({
   api
@@ -32,7 +32,12 @@ const DeleteColumnDropdownItem = ({
   }
   const selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    onClick: onClick
+    onClick: onClick,
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
   }, formatMessage(layoutMessages.deleteColumn, {
     count: selectedColumnCount
   }));

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

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { isDistributedUniformly } from '../../pm-plugins/utils/layout-column-distribution';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 export const DistributeColumnsDropdownItem = ({
@@ -45,6 +45,11 @@ export const DistributeColumnsDropdownItem = ({
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,
-    isDisabled: isAlreadyUniform
+    isDisabled: isAlreadyUniform,
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
   }, formatMessage(layoutMessages.distributeColumns));
 };

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

@@ -7,12 +7,12 @@ import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 const INSERT_COLUMN_OPTIONS = {
   left: {
     Icon: TableColumnAddLeftIcon,
-    label: layoutMessages.insertColumnLeft,
+    label: layoutMessages.addColumnLeft,
     side: 'left'
   },
   right: {
     Icon: TableColumnAddRightIcon,
-    label: layoutMessages.insertColumnRight,
+    label: layoutMessages.addColumnRight,
     side: 'right'
   }
 };

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

@@ -24,7 +24,7 @@ export const VerticalAlignNestedMenu = ({
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.top;
+  const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.middle;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
       label: "",

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

@@ -6,7 +6,7 @@ import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-cont
 import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
 import { DistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
 import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
-import { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_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 { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_DANGER_SECTION, LAYOUT_COLUMN_DANGER_SECTION_RANK, 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';
 const LayoutColumnMenuContainer = ({
@@ -63,15 +63,6 @@ export const getLayoutColumnMenuComponents = ({
       ...LAYOUT_COLUMN_MENU_SECTION,
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     }]
-  }, {
-    ...DELETE_COLUMN_MENU_ITEM,
-    component: () => /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
-      api: api
-    }),
-    parents: [{
-      ...LAYOUT_COLUMN_MENU_SECTION,
-      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
-    }]
   }, {
     ...VERTICAL_ALIGN_MENU,
     component: ({
@@ -122,5 +113,27 @@ export const getLayoutColumnMenuComponents = ({
       ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
       rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
     }]
+  },
+  // --- Danger section (Delete column) ---
+  {
+    ...LAYOUT_COLUMN_DANGER_SECTION,
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+      hasSeparator: true
+    }, children),
+    parents: [{
+      ...LAYOUT_COLUMN_MENU,
+      rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_DANGER_SECTION.key]
+    }]
+  }, {
+    ...DELETE_COLUMN_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
+      api: api
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_DANGER_SECTION,
+      rank: LAYOUT_COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
+    }]
   }];
 };

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

@@ -3,6 +3,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -96,6 +97,9 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -103,5 +107,5 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  })));
+  }))));
 });