@atlaskit/editor-plugin-layout 10.5.0 → 10.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.6.0
+
+### Minor Changes
+
+- [`71eaad00529a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71eaad00529a1) -
+  Support multi-column layout column menu selections
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.5.0
 
 ### Minor Changes

package/dist/cjs/layoutPlugin.js

@@ -385,7 +385,10 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         var _api$analytics5;
         return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
       },
-      setLayoutColumnValign: _actions.setLayoutColumnValign,
+      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+        var _api$analytics6;
+        return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+      },
       toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }
   };

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

@@ -20,6 +20,7 @@ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equa
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
+var _layoutColumnSelection = require("./utils/layout-column-selection");
 var _redistributeProportionally = require("./utils/redistribute-proportionally");
 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; }
@@ -557,44 +558,24 @@ var formatLayoutName = function formatLayoutName(layout) {
 function getEffectiveMaxLayoutColumns() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) ? _consts.MAX_LAYOUT_COLUMNS : _consts.MAX_STANDARD_LAYOUT_COLUMNS;
 }
-var getSelectedLayoutColumnInSection = function getSelectedLayoutColumnInSection(_ref4) {
-  var doc = _ref4.doc,
-    selection = _ref4.selection;
-  var _doc$type$schema$node = doc.type.schema.nodes,
-    layoutColumn = _doc$type$schema$node.layoutColumn,
-    layoutSection = _doc$type$schema$node.layoutSection;
-  if (!(selection instanceof _state.NodeSelection) || selection.node.type !== layoutColumn) {
-    return;
-  }
-  var $from = selection.$from;
-  if ($from.parent.type !== layoutSection) {
-    return;
-  }
-  var selectedColumnIndex = $from.index($from.depth);
-  var selectedColumnNode = selection.node;
-  var selectedColumnPos = selection.from;
-  var layoutSectionPos = $from.before($from.depth);
-  return {
-    layoutSectionNode: $from.parent,
-    layoutSectionPos: layoutSectionPos,
-    selectedColumnIndex: selectedColumnIndex,
-    selectedColumnNode: selectedColumnNode,
-    selectedColumnPos: selectedColumnPos
-  };
-};
 var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
-  return function (_ref5) {
-    var tr = _ref5.tr;
+  return function (_ref4) {
+    var tr = _ref4.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedColumn = getSelectedLayoutColumnInSection(tr);
-    if (!selectedColumn) {
+    var selectedLayoutColumns = (0, _layoutColumnSelection.getSelectedLayoutColumns)(tr.selection);
+    if (!selectedLayoutColumns) {
       return null;
     }
-    var layoutSectionNode = selectedColumn.layoutSectionNode,
-      layoutSectionPos = selectedColumn.layoutSectionPos,
-      selectedColumnIndex = selectedColumn.selectedColumnIndex;
+    var layoutSectionNode = selectedLayoutColumns.layoutSectionNode,
+      layoutSectionPos = selectedLayoutColumns.layoutSectionPos,
+      selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
+      selectedColumns = selectedLayoutColumns.selectedColumns;
+    var startIndex = selectedColumnIndices[0];
+    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    var selectedColumnIndex = side === 'left' ? startIndex : endIndex;
+    var selectedColumnCount = selectedColumns.length;
     if (layoutSectionNode.childCount >= getEffectiveMaxLayoutColumns()) {
       return null;
     }
@@ -631,9 +612,11 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
         columnCount: redistributedWidths.length,
+        endIndex: endIndex,
         inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
-        selectedIndex: selectedColumnIndex,
-        side: side
+        selectedCount: selectedColumnCount,
+        side: side,
+        startIndex: startIndex
       },
       eventType: _analytics.EVENT_TYPE.TRACK
     })(tr);
@@ -644,35 +627,61 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
 var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI) {
   return insertLayoutColumnAt(side, editorAnalyticsAPI);
 };
-var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign) {
-  return function (_ref6) {
-    var tr = _ref6.tr;
+var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI) {
+  return function (_ref5) {
+    var tr = _ref5.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) {
+    var selectedLayoutColumns = (0, _layoutColumnSelection.getSelectedLayoutColumns)(tr.selection);
+    if (!selectedLayoutColumns) {
       return null;
     }
-    if (selectedColumn.node.attrs.valign === valign) {
+    var selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
+      selectedColumns = selectedLayoutColumns.selectedColumns;
+    var columnsToUpdate = selectedColumns.filter(function (_ref6) {
+      var node = _ref6.node;
+      return node.attrs.valign !== valign;
+    });
+    if (columnsToUpdate.length === 0) {
       return null;
     }
-    tr.setNodeMarkup(selectedColumn.pos, selectedColumn.node.type, _objectSpread(_objectSpread({}, selectedColumn.node.attrs), {}, {
-      valign: valign
-    }));
+    var startIndex = selectedColumnIndices[0];
+    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    var selectedColumnCount = selectedColumns.length;
+    var updatedColumnCount = columnsToUpdate.length;
+    columnsToUpdate.forEach(function (_ref7) {
+      var node = _ref7.node,
+        pos = _ref7.pos;
+      tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        valign: valign
+      }));
+    });
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: _analytics.ACTION.UPDATED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        endIndex: endIndex,
+        inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        selectedCount: selectedColumnCount,
+        startIndex: startIndex,
+        updatedCount: updatedColumnCount,
+        valign: valign
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
     tr.setMeta('scrollIntoView', false);
     return tr;
   };
 };
-var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref7) {
-  var isOpen = _ref7.isOpen;
-  return function (_ref8) {
-    var tr = _ref8.tr;
+var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref8) {
+  var anchorPos = _ref8.anchorPos,
+    isOpen = _ref8.isOpen;
+  return function (_ref9) {
+    var tr = _ref9.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
+      anchorPos: anchorPos,
       isOpen: isOpen
     });
     tr.setMeta('scrollIntoView', false);
@@ -680,18 +689,23 @@ var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLay
   };
 };
 var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
-  return function (_ref9) {
-    var tr = _ref9.tr;
+  return function (_ref0) {
+    var tr = _ref0.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedColumn = getSelectedLayoutColumnInSection(tr);
-    if (!selectedColumn) {
+    var selectedLayoutColumns = (0, _layoutColumnSelection.getSelectedLayoutColumns)(tr.selection);
+    if (!selectedLayoutColumns) {
       return null;
     }
-    var layoutSectionNode = selectedColumn.layoutSectionNode,
-      layoutSectionPos = selectedColumn.layoutSectionPos,
-      selectedColumnIndex = selectedColumn.selectedColumnIndex;
+    var layoutSectionNode = selectedLayoutColumns.layoutSectionNode,
+      layoutSectionPos = selectedLayoutColumns.layoutSectionPos,
+      selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
+      selectedColumns = selectedLayoutColumns.selectedColumns;
+    var startIndex = selectedColumnIndices[0];
+    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    var selectedColumnCount = selectedColumns.length;
+    var selectedColumnIndexSet = new Set(selectedColumnIndices);
     var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(columnCount) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: _analytics.ACTION.DELETED,
@@ -699,25 +713,27 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
         actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
         attributes: {
           columnCount: columnCount,
+          endIndex: endIndex,
           inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
-          selectedIndex: selectedColumnIndex
+          selectedCount: selectedColumnCount,
+          startIndex: startIndex
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       })(tr);
     };
 
-    // If only one column remains, remove the entire layoutSection
-    if (layoutSectionNode.childCount === 1) {
+    // If all columns are selected, remove the entire layoutSection
+    if (selectedColumnCount === layoutSectionNode.childCount) {
       tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
       emitDeleteColumnAnalytics(0);
       tr.setMeta('scrollIntoView', false);
       return tr;
     }
 
-    // Build new column list without the selected column
+    // Build new column list without the selected columns
     var remainingColumns = [];
     layoutSectionNode.forEach(function (column, _offset, index) {
-      if (index !== selectedColumnIndex) {
+      if (!selectedColumnIndexSet.has(index)) {
         remainingColumns.push(column);
       }
     });
@@ -726,7 +742,14 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
     var existingWidths = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
       return column.attrs.width;
     });
-    var redistributed = (0, _redistributeProportionally.redistributeAfterDeletion)(existingWidths, selectedColumnIndex, _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+    var redistributed = selectedColumnIndices.slice()
+    // Delete highest indices first so lower original indices still point at the same columns
+    // as each redistribution step shrinks the widths array.
+    .sort(function (a, b) {
+      return b - a;
+    }).reduce(function (widths, selectedIndex) {
+      return (0, _redistributeProportionally.redistributeAfterDeletion)(widths, selectedIndex, _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+    }, existingWidths);
     var updatedLayoutSectionNode = layoutSectionNode.copy(_model.Fragment.fromArray(remainingColumns));
     tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
     emitDeleteColumnAnalytics(redistributed.length);

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

@@ -73,7 +73,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     selectedLayout: selectedLayout,
     allowSingleColumnLayout: allowSingleColumnLayout,
     isResizing: false,
-    isLayoutColumnMenuOpen: false
+    isLayoutColumnMenuOpen: false,
+    layoutColumnMenuAnchorPos: undefined
   };
 };
 
@@ -125,7 +126,8 @@ var _default = exports.default = function _default(options) {
         var _columnMenuMeta$isOpe, _tr$getMeta, _pluginKey$getState;
         var columnMenuMeta = tr.getMeta('toggleLayoutColumnMenu');
         var nextPluginState = columnMenuMeta ? _objectSpread(_objectSpread({}, pluginState), {}, {
-          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen
+          isLayoutColumnMenuOpen: (_columnMenuMeta$isOpe = columnMenuMeta.isOpen) !== null && _columnMenuMeta$isOpe !== void 0 ? _columnMenuMeta$isOpe : !pluginState.isLayoutColumnMenuOpen,
+          layoutColumnMenuAnchorPos: columnMenuMeta.isOpen === false ? undefined : columnMenuMeta.anchorPos
         }) : pluginState;
         var isResizing = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {

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

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectedLayoutColumns = exports.getLayoutSectionColumnCount = exports.getLayoutColumnValign = exports.getLayoutColumnMenuAnchorPos = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var isLayoutColumn = function isLayoutColumn(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn';
+};
+var isLayoutSection = function isLayoutSection(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection';
+};
+var getLayoutColumnIndexAtPos = function getLayoutColumnIndexAtPos($pos) {
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if (isLayoutColumn($pos.node(depth)) && isLayoutSection($pos.node(depth - 1))) {
+      return $pos.index(depth - 1);
+    }
+  }
+  return undefined;
+};
+var getLayoutSectionDepth = function getLayoutSectionDepth(selection) {
+  var $from = selection.$from,
+    $to = selection.$to;
+  var sharedDepth = $from.sharedDepth($to.pos);
+  for (var depth = sharedDepth; depth > 0; depth--) {
+    if (isLayoutSection($from.node(depth))) {
+      return depth;
+    }
+  }
+  return undefined;
+};
+var getSelectedLayoutColumns = exports.getSelectedLayoutColumns = function getSelectedLayoutColumns(selection) {
+  if (!selection) {
+    return undefined;
+  }
+  if (selection instanceof _state.NodeSelection && isLayoutColumn(selection.node)) {
+    var _$from = selection.$from;
+    var _layoutSectionNode = _$from.parent;
+    if (!isLayoutSection(_layoutSectionNode)) {
+      return undefined;
+    }
+    var selectedColumnIndex = _$from.index(_$from.depth);
+    return {
+      layoutSectionNode: _layoutSectionNode,
+      layoutSectionPos: _$from.before(_$from.depth),
+      selectedColumnIndices: [selectedColumnIndex],
+      selectedColumns: [{
+        index: selectedColumnIndex,
+        node: selection.node,
+        pos: selection.from
+      }]
+    };
+  }
+  if (selection.empty) {
+    return undefined;
+  }
+  if (!(0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
+    return undefined;
+  }
+  var layoutSectionDepth = getLayoutSectionDepth(selection);
+  if (layoutSectionDepth === undefined) {
+    return undefined;
+  }
+  var $from = selection.$from,
+    $to = selection.$to;
+  var layoutSectionNode = $from.node(layoutSectionDepth);
+  var layoutSectionPos = $from.before(layoutSectionDepth);
+  var selectedColumns = [];
+  var invalidSelection = false;
+  layoutSectionNode.forEach(function (column, offset, index) {
+    var columnStart = layoutSectionPos + 1 + offset;
+    var columnEnd = columnStart + column.nodeSize;
+    var intersectsColumn = selection.from < columnEnd && selection.to > columnStart;
+    if (!intersectsColumn) {
+      return;
+    }
+    if (!isLayoutColumn(column)) {
+      invalidSelection = true;
+      return;
+    }
+    selectedColumns.push({
+      index: index,
+      node: column,
+      pos: columnStart
+    });
+  });
+
+  // TextSelection inside a single column is normal text editing, not a selected column set.
+  if (invalidSelection || selectedColumns.length < 2) {
+    return undefined;
+  }
+  var firstColumn = selectedColumns[0];
+  var lastColumn = selectedColumns[selectedColumns.length - 1];
+  var startColumnIndex = getLayoutColumnIndexAtPos($from);
+  var endColumnIndex = getLayoutColumnIndexAtPos($to);
+  if (startColumnIndex !== undefined && startColumnIndex !== firstColumn.index || endColumnIndex !== undefined && endColumnIndex !== lastColumn.index) {
+    return undefined;
+  }
+  return {
+    layoutSectionNode: layoutSectionNode,
+    layoutSectionPos: layoutSectionPos,
+    selectedColumnIndices: selectedColumns.map(function (_ref) {
+      var index = _ref.index;
+      return index;
+    }),
+    selectedColumns: selectedColumns
+  };
+};
+var getLayoutSectionColumnCount = exports.getLayoutSectionColumnCount = function getLayoutSectionColumnCount(layoutSection) {
+  return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
+};
+var getLayoutColumnValign = exports.getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
+  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+};
+var getLayoutColumnMenuAnchorPos = exports.getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
+  var _clickedSelectedColum, _selectedLayoutColumn;
+  var selectedLayoutColumns = getSelectedLayoutColumns(selection);
+  if (!selectedLayoutColumns) {
+    return undefined;
+  }
+  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref2) {
+    var pos = _ref2.pos;
+    return pos === anchorPosFromHandle;
+  });
+  return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;
+};

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

@@ -9,13 +9,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
+var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 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 DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
+  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
   var onClick = (0, _react.useCallback)(function () {
     var _api$layout, _api$core;
     var deleteCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
@@ -33,10 +33,13 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
       return tr;
     });
   }, [api]);
-  if (currentColumn === undefined) {
+  if (selectedLayoutColumns === undefined) {
     return null;
   }
+  var selectedColumnCount = selectedLayoutColumns.selectedColumns.length;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: onClick
-  }, formatMessage(_messages.layoutMessages.deleteColumn));
+  }, formatMessage(_messages.layoutMessages.deleteColumn, {
+    count: selectedColumnCount
+  }));
 };

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

@@ -10,8 +10,8 @@ var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _actions = require("../../pm-plugins/actions");
-var _layoutColumnSelection = require("./layoutColumnSelection");
-var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
+var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
+var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 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 INSERT_COLUMN_OPTIONS = {
   left: {
@@ -33,11 +33,10 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
   var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
-  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
-  var currentLayoutSection = (0, _useCurrentLayoutColumn.useCurrentLayoutSection)(api);
-  var columnCount = (0, _layoutColumnSelection.getLayoutSectionColumnCount)(currentLayoutSection);
+  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  var columnCount = (0, _layoutColumnSelection.getLayoutSectionColumnCount)(selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.layoutSectionNode);
   var maxColumnCount = (0, _actions.getEffectiveMaxLayoutColumns)();
-  var canInsertColumn = currentColumn !== undefined && columnCount < maxColumnCount;
+  var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   var onClick = (0, _react.useCallback)(function () {
     var _api$layout, _api$core;
     var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);

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

@@ -8,20 +8,22 @@ exports.VerticalAlignDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _layoutColumnSelection = require("./layoutColumnSelection");
-var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
+var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
+var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 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 _selectedLayoutColumn;
   var api = _ref.api,
     label = _ref.label,
     value = _ref.value;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
-  var currentValign = (0, _react.useMemo)(function () {
-    return (0, _layoutColumnSelection.getLayoutColumnValign)(currentColumn);
-  }, [currentColumn]);
+  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  var isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns.every(function (_ref2) {
+    var node = _ref2.node;
+    return (0, _layoutColumnSelection.getLayoutColumnValign)(node) === value;
+  })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
   var Icon = _verticalAlignIcons.VERTICAL_ALIGN_ICONS[value];
   var onClick = (0, _react.useCallback)(function () {
     var _api$core, _api$layout;
@@ -32,7 +34,7 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
       label: "",
       size: "small"
     }),
-    isSelected: currentValign === value,
+    isSelected: isSelected,
     onClick: onClick
   }, formatMessage(label));
 };

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

@@ -9,8 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _layoutColumnSelection = require("./layoutColumnSelection");
-var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
+var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
+var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 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 VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
@@ -18,12 +18,21 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
     children = _ref.children;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
+  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
   var currentValign = (0, _react.useMemo)(function () {
-    return (0, _layoutColumnSelection.getLayoutColumnValign)(currentColumn);
-  }, [currentColumn]);
+    var selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns;
+    var firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
+    var firstValign = (0, _layoutColumnSelection.getLayoutColumnValign)(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
+    if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(function (_ref2) {
+      var node = _ref2.node;
+      return (0, _layoutColumnSelection.getLayoutColumnValign)(node) === firstValign;
+    }))) {
+      return undefined;
+    }
+    return firstValign;
+  }, [selectedLayoutColumns]);
   var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _editorToolbar.LayoutIcon;
-  if (!currentColumn) {
+  if (!selectedLayoutColumns) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {

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

@@ -16,9 +16,9 @@ var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
+var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
 var _components = require("./components");
 var _keys = require("./keys");
-var _layoutColumnSelection = require("./layoutColumnSelection");
 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 FALLBACK_MENU_HEIGHT = 300;
@@ -27,12 +27,13 @@ var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 /**
  * Returns the drag handle button for the selected layout column.
  */
-var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection) {
+var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection, anchorPosFromHandle) {
   var _columnDomRef$parentE;
-  if (!(0, _layoutColumnSelection.getLayoutColumnAtSelection)(selection) || (selection === null || selection === void 0 ? void 0 : selection.from) === undefined) {
+  var anchorPos = (0, _layoutColumnSelection.getLayoutColumnMenuAnchorPos)(selection, anchorPosFromHandle);
+  if (anchorPos === undefined) {
     return null;
   }
-  var columnDomRef = editorView.nodeDOM(selection.from);
+  var columnDomRef = editorView.nodeDOM(anchorPos);
   if (!(columnDomRef instanceof HTMLElement)) {
     return null;
   }
@@ -47,13 +48,15 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout', 'selection'], function (states) {
-      var _states$layoutState$i, _states$layoutState, _states$selectionStat;
+      var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$selectionStat;
       return {
         isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
+        layoutColumnMenuAnchorPos: (_states$layoutState2 = states.layoutState) === null || _states$layoutState2 === void 0 ? void 0 : _states$layoutState2.layoutColumnMenuAnchorPos,
         selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
       };
     }),
     isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
+    layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
     selection = _useSharedPluginState.selection;
   var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
   var menuRef = (0, _react.useRef)(null);
@@ -83,6 +86,13 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     if (event.target instanceof Element && event.target.closest('[data-toolbar-nested-dropdown-menu]')) {
       return;
     }
+
+    // Clicking a drag handle should let the drag handle's own click handler
+    // update selection/menu state. Treating it as a generic outside click
+    // races that transaction and can immediately close the layout column menu.
+    if (event.target instanceof Element && event.target.closest(_styles.DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
     closeLayoutColumnMenu();
   }, [closeLayoutColumnMenu]);
   var handleSetIsOpen = (0, _react.useCallback)(function (isOpen) {
@@ -99,8 +109,8 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
   }, [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 = (0, _react.useMemo)(function () {
-    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection) : null;
-  }, [editorView, isLayoutColumnMenuOpen, selection]);
+    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
+  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   var hasValidTarget = target instanceof HTMLElement;
   (0, _react.useEffect)(function () {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectedLayoutColumns = void 0;
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
+var useSelectedLayoutColumns = exports.useSelectedLayoutColumns = function useSelectedLayoutColumns(api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return (0, _layoutColumnSelection.getSelectedLayoutColumns)((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+  });
+};