@atlaskit/editor-plugin-layout 10.4.0 → 10.6.0

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

@@ -2,14 +2,14 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 const DeleteColumnDropdownItem = ({
   api
 }) => {
   const {
     formatMessage
   } = useIntl();
-  const currentColumn = useCurrentLayoutColumn(api);
+  const selectedLayoutColumns = useSelectedLayoutColumns(api);
   const onClick = useCallback(() => {
     var _api$layout, _api$core;
     const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
@@ -27,11 +27,14 @@ const DeleteColumnDropdownItem = ({
       return tr;
     });
   }, [api]);
-  if (currentColumn === undefined) {
+  if (selectedLayoutColumns === undefined) {
     return null;
   }
+  const selectedColumnCount = selectedLayoutColumns.selectedColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: onClick
-  }, formatMessage(layoutMessages.deleteColumn));
+  }, formatMessage(layoutMessages.deleteColumn, {
+    count: selectedColumnCount
+  }));
 };
 export { DeleteColumnDropdownItem };

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

@@ -3,8 +3,8 @@ import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { getEffectiveMaxLayoutColumns } from '../../pm-plugins/actions';
-import { getLayoutSectionColumnCount } from './layoutColumnSelection';
-import { useCurrentLayoutColumn, useCurrentLayoutSection } from './useCurrentLayoutColumn';
+import { getLayoutSectionColumnCount } from '../../pm-plugins/utils/layout-column-selection';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 const INSERT_COLUMN_OPTIONS = {
   left: {
     Icon: TableColumnAddLeftIcon,
@@ -28,11 +28,10 @@ export const InsertColumnDropdownItem = ({
     Icon,
     label
   } = INSERT_COLUMN_OPTIONS[side];
-  const currentColumn = useCurrentLayoutColumn(api);
-  const currentLayoutSection = useCurrentLayoutSection(api);
-  const columnCount = getLayoutSectionColumnCount(currentLayoutSection);
+  const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  const columnCount = getLayoutSectionColumnCount(selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.layoutSectionNode);
   const maxColumnCount = getEffectiveMaxLayoutColumns();
-  const canInsertColumn = currentColumn !== undefined && columnCount < maxColumnCount;
+  const canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   const onClick = useCallback(() => {
     var _api$layout, _api$core;
     const insertCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);

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

@@ -1,19 +1,22 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-import { getLayoutColumnValign } from './layoutColumnSelection';
-import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
 export const VerticalAlignDropdownItem = ({
   api,
   label,
   value
 }) => {
+  var _selectedLayoutColumn;
   const {
     formatMessage
   } = useIntl();
-  const currentColumn = useCurrentLayoutColumn(api);
-  const currentValign = useMemo(() => getLayoutColumnValign(currentColumn), [currentColumn]);
+  const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  const isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns.every(({
+    node
+  }) => getLayoutColumnValign(node) === value)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
   const Icon = VERTICAL_ALIGN_ICONS[value];
   const onClick = useCallback(() => {
     var _api$core, _api$layout;
@@ -24,7 +27,7 @@ export const VerticalAlignDropdownItem = ({
       label: "",
       size: "small"
     }),
-    isSelected: currentValign === value,
+    isSelected: isSelected,
     onClick: onClick
   }, formatMessage(label));
 };

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

@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { LayoutIcon, NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import { getLayoutColumnValign } from './layoutColumnSelection';
-import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+import { getLayoutColumnValign } from '../../pm-plugins/utils/layout-column-selection';
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
 export const VerticalAlignNestedMenu = ({
   api,
@@ -12,10 +12,20 @@ export const VerticalAlignNestedMenu = ({
   const {
     formatMessage
   } = useIntl();
-  const currentColumn = useCurrentLayoutColumn(api);
-  const currentValign = useMemo(() => getLayoutColumnValign(currentColumn), [currentColumn]);
+  const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  const currentValign = useMemo(() => {
+    const selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns;
+    const firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
+    const firstValign = getLayoutColumnValign(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
+    if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(({
+      node
+    }) => getLayoutColumnValign(node) === firstValign))) {
+      return undefined;
+    }
+    return firstValign;
+  }, [selectedLayoutColumns]);
   const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
-  if (!currentColumn) {
+  if (!selectedLayoutColumns) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {

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

@@ -7,9 +7,9 @@ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
-import { getLayoutColumnAtSelection } from './layoutColumnSelection';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const FALLBACK_MENU_HEIGHT = 300;
 const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
@@ -17,12 +17,13 @@ const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 /**
  * Returns the drag handle button for the selected layout column.
  */
-const getLayoutColumnMenuTarget = (editorView, selection) => {
+const getLayoutColumnMenuTarget = (editorView, selection, anchorPosFromHandle) => {
   var _columnDomRef$parentE;
-  if (!getLayoutColumnAtSelection(selection) || (selection === null || selection === void 0 ? void 0 : selection.from) === undefined) {
+  const anchorPos = getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
+  if (anchorPos === undefined) {
     return null;
   }
-  const columnDomRef = editorView.nodeDOM(selection.from);
+  const columnDomRef = editorView.nodeDOM(anchorPos);
   if (!(columnDomRef instanceof HTMLElement)) {
     return null;
   }
@@ -39,11 +40,13 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
     isLayoutColumnMenuOpen,
+    layoutColumnMenuAnchorPos,
     selection
   } = useSharedPluginStateWithSelector(api, ['layout', 'selection'], 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
     };
   });
@@ -72,6 +75,13 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     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(DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
     closeLayoutColumnMenu();
   }, [closeLayoutColumnMenu]);
   const handleSetIsOpen = useCallback(isOpen => {
@@ -87,7 +97,7 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     }
   }, [setOutsideClickTargetRef]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection) : null, [editorView, isLayoutColumnMenuOpen, selection]);
+  const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   const hasValidTarget = target instanceof HTMLElement;
   useEffect(() => {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {

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

@@ -0,0 +1,6 @@
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getSelectedLayoutColumns } from '../../pm-plugins/utils/layout-column-selection';
+export const useSelectedLayoutColumns = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
+  var _states$selectionStat;
+  return getSelectedLayoutColumns((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+});

package/dist/esm/layoutPlugin.js

@@ -8,9 +8,10 @@ import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLa
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 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, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _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';
@@ -148,27 +149,94 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           })(tr);
           return tr;
         };
-        var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
-          id: 'onecolumnlayout',
-          title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
-          description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
-          keywords: ['layout', 'column', 'section', 'single column'],
-          priority: 1100,
-          icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconOneColumnLayout, null);
-          },
-          action: function action(insert, state) {
-            var tr = insert(createMultiColumnLayoutSection(state, 1));
-            if (fg('platform_editor_column_count_analytics')) {
-              withInsertLayoutAnalytics(tr, 1);
-            } else {
-              withInsertLayoutAnalytics(tr);
+        if (editorExperiment('advanced_layouts', true)) {
+          var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
+            id: 'onecolumnlayout',
+            title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
+            description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
+            keywords: ['layout', 'column', 'section', 'single column'],
+            priority: 1100,
+            icon: function icon() {
+              return /*#__PURE__*/React.createElement(IconOneColumnLayout, null);
+            },
+            action: function action(insert, state) {
+              var tr = insert(createMultiColumnLayoutSection(state, 1));
+              if (fg('platform_editor_column_count_analytics')) {
+                withInsertLayoutAnalytics(tr, 1);
+              } else {
+                withInsertLayoutAnalytics(tr);
+              }
+              selectIntoLayoutSection(tr);
+              return tr;
             }
-            selectIntoLayoutSection(tr);
-            return tr;
+          }] : [];
+          if (expValEquals('platform_editor_layout_typeahead_reorder', 'isEnabled', true)) {
+            var createAdvancedColumnLayoutOption = function createAdvancedColumnLayoutOption(_ref4) {
+              var columnCount = _ref4.columnCount,
+                descriptionColumnCount = _ref4.descriptionColumnCount,
+                Icon = _ref4.icon,
+                id = _ref4.id,
+                keyword = _ref4.keyword,
+                title = _ref4.title;
+              return {
+                id: id,
+                title: title,
+                description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
+                  numberOfColumns: descriptionColumnCount
+                }),
+                keywords: ['layout', 'column', 'section', keyword],
+                priority: 1100,
+                icon: Icon,
+                action: function action(insert, state) {
+                  var tr = insert(createMultiColumnLayoutSection(state, columnCount));
+                  if (fg('platform_editor_column_count_analytics')) {
+                    withInsertLayoutAnalytics(tr, columnCount);
+                  } else {
+                    withInsertLayoutAnalytics(tr);
+                  }
+                  selectIntoLayoutSection(tr);
+                  return tr;
+                }
+              };
+            };
+            return [createAdvancedColumnLayoutOption({
+              columnCount: 2,
+              descriptionColumnCount: 'two',
+              icon: function icon() {
+                return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
+              },
+              id: 'twocolumnslayout',
+              keyword: 'two column',
+              title: formatMessage(layoutMessages.twoColumnsAdvancedLayout)
+            })].concat(advancedSingleColumnOption, [createAdvancedColumnLayoutOption({
+              columnCount: 3,
+              descriptionColumnCount: 'three',
+              icon: function icon() {
+                return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
+              },
+              id: 'threecolumnslayout',
+              keyword: 'three column',
+              title: formatMessage(layoutMessages.threeColumnsAdvancedLayout)
+            }), createAdvancedColumnLayoutOption({
+              columnCount: 4,
+              descriptionColumnCount: 'four',
+              icon: function icon() {
+                return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
+              },
+              id: 'fourcolumnslayout',
+              keyword: 'four column',
+              title: formatMessage(layoutMessages.fourColumns)
+            }), createAdvancedColumnLayoutOption({
+              columnCount: 5,
+              descriptionColumnCount: 'five',
+              icon: function icon() {
+                return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
+              },
+              id: 'fivecolumnslayout',
+              keyword: 'five column',
+              title: formatMessage(layoutMessages.fiveColumns)
+            })]);
           }
-        }] : [];
-        if (editorExperiment('advanced_layouts', true)) {
           return [].concat(advancedSingleColumnOption, [{
             id: 'twocolumnslayout',
             title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
@@ -282,11 +350,11 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         }
       }
     },
-    contentComponent: function contentComponent(_ref4) {
-      var editorView = _ref4.editorView,
-        popupsMountPoint = _ref4.popupsMountPoint,
-        popupsBoundariesElement = _ref4.popupsBoundariesElement,
-        popupsScrollableElement = _ref4.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        popupsBoundariesElement = _ref5.popupsBoundariesElement,
+        popupsScrollableElement = _ref5.popupsScrollableElement;
       return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
         api: api,
         editorView: editorView,
@@ -310,7 +378,10 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         var _api$analytics5;
         return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
       },
-      setLayoutColumnValign: setLayoutColumnValign,
+      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+        var _api$analytics6;
+        return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+      },
       toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }
   };

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

@@ -12,6 +12,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 import { pluginKey } from './plugin-key';
+import { getSelectedLayoutColumns } from './utils/layout-column-selection';
 import { redistributeAfterDeletion, redistributeProportionally } from './utils/redistribute-proportionally';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
@@ -547,44 +548,24 @@ var formatLayoutName = function formatLayoutName(layout) {
 export function getEffectiveMaxLayoutColumns() {
   return editorExperiment('advanced_layouts', true) ? MAX_LAYOUT_COLUMNS : 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 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 (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedColumn = getSelectedLayoutColumnInSection(tr);
-    if (!selectedColumn) {
+    var selectedLayoutColumns = 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;
     }
@@ -621,9 +602,11 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
       actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
         columnCount: redistributedWidths.length,
+        endIndex: endIndex,
         inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
-        selectedIndex: selectedColumnIndex,
-        side: side
+        selectedCount: selectedColumnCount,
+        side: side,
+        startIndex: startIndex
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);
@@ -634,35 +617,61 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
 export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI) {
   return insertLayoutColumnAt(side, editorAnalyticsAPI);
 };
-export var setLayoutColumnValign = function setLayoutColumnValign(valign) {
-  return function (_ref6) {
-    var tr = _ref6.tr;
+export var setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI) {
+  return function (_ref5) {
+    var tr = _ref5.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var layoutColumn = tr.doc.type.schema.nodes.layoutColumn;
-    var selectedColumn = tr.selection instanceof NodeSelection && tr.selection.node.type === layoutColumn ? {
-      node: tr.selection.node,
-      pos: tr.selection.from
-    } : undefined;
-    if (!selectedColumn) {
+    var selectedLayoutColumns = 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: ACTION.UPDATED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        endIndex: endIndex,
+        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        selectedCount: selectedColumnCount,
+        startIndex: startIndex,
+        updatedCount: updatedColumnCount,
+        valign: valign
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
     tr.setMeta('scrollIntoView', false);
     return tr;
   };
 };
-export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref7) {
-  var isOpen = _ref7.isOpen;
-  return function (_ref8) {
-    var tr = _ref8.tr;
+export var 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);
@@ -670,18 +679,23 @@ export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref7) {
   };
 };
 export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
-  return function (_ref9) {
-    var tr = _ref9.tr;
+  return function (_ref0) {
+    var tr = _ref0.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedColumn = getSelectedLayoutColumnInSection(tr);
-    if (!selectedColumn) {
+    var selectedLayoutColumns = 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: ACTION.DELETED,
@@ -689,25 +703,27 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
         actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
         attributes: {
           columnCount: columnCount,
+          endIndex: endIndex,
           inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
-          selectedIndex: selectedColumnIndex
+          selectedCount: selectedColumnCount,
+          startIndex: startIndex
         },
         eventType: 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);
       }
     });
@@ -716,7 +732,14 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
     var existingWidths = mapChildren(layoutSectionNode, function (column) {
       return column.attrs.width;
     });
-    var redistributed = redistributeAfterDeletion(existingWidths, selectedColumnIndex, 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 redistributeAfterDeletion(widths, selectedIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+    }, existingWidths);
     var updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(remainingColumns));
     tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
     emitDeleteColumnAnalytics(redistributed.length);

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

@@ -66,7 +66,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     selectedLayout: selectedLayout,
     allowSingleColumnLayout: allowSingleColumnLayout,
     isResizing: false,
-    isLayoutColumnMenuOpen: false
+    isLayoutColumnMenuOpen: false,
+    layoutColumnMenuAnchorPos: undefined
   };
 };
 
@@ -118,7 +119,8 @@ export default (function (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 = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
         if (tr.docChanged || tr.selectionSet) {