@atlaskit/editor-plugin-layout 10.8.1 → 10.9.0

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

@@ -3,7 +3,6 @@ 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 '../../pm-plugins/utils/layout-column-selection';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 const INSERT_COLUMN_OPTIONS = {
   left: {
@@ -21,6 +20,7 @@ export const InsertColumnDropdownItem = ({
   api,
   side
 }) => {
+  var _selectedLayoutColumn, _selectedLayoutColumn2;
   const {
     formatMessage
   } = useIntl();
@@ -29,7 +29,7 @@ export const InsertColumnDropdownItem = ({
     label
   } = INSERT_COLUMN_OPTIONS[side];
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
-  const columnCount = getLayoutSectionColumnCount(selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.layoutSectionNode);
+  const columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   const maxColumnCount = getEffectiveMaxLayoutColumns();
   const canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   const onClick = useCallback(() => {

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

@@ -14,7 +14,7 @@ export const VerticalAlignDropdownItem = ({
     formatMessage
   } = useIntl();
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
-  const isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns.every(({
+  const isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns.every(({
     node
   }) => getLayoutColumnValign(node) === value)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
   const Icon = VERTICAL_ALIGN_ICONS[value];

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

@@ -14,7 +14,7 @@ export const VerticalAlignNestedMenu = ({
   } = useIntl();
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
   const currentValign = useMemo(() => {
-    const selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns;
+    const selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns;
     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(({

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

@@ -18,7 +18,7 @@ const TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
  */
 const getLayoutColumnMenuTarget = (editorView, selection, anchorPosFromHandle) => {
   var _columnDomRef$parentE;
-  const anchorPos = getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
+  const anchorPos = selection && getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
   if (anchorPos === undefined) {
     return null;
   }

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

@@ -1,6 +1,8 @@
 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);
+import { getSelectedLayoutColumnsFromSelection } from '../../pm-plugins/utils/layout-column-selection';
+export const useSelectedLayoutColumns = api => useSharedPluginStateWithSelector(api, ['selection'], ({
+  selectionState
+}) => {
+  const selectedLayoutColumns = (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) && getSelectedLayoutColumnsFromSelection(selectionState.selection);
+  return selectedLayoutColumns !== null && selectedLayoutColumns !== void 0 && selectedLayoutColumns.selectedLayoutColumns.length ? selectedLayoutColumns : undefined;
 });

package/dist/es2019/ui/toolbar.js

@@ -12,8 +12,11 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/layout-three-col
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-left';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-right';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { deleteActiveLayoutNode, distributeLayoutColumns, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { isDistributedUniformly } from '../pm-plugins/utils/layout-column-distribution';
 import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
 import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
@@ -52,7 +55,7 @@ const SIDEBAR_LAYOUT_TYPES = [{
 }];
 
 // These are used for advanced layout options
-const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
+const LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
   title: toolbarMessages.twoColumns,
@@ -68,7 +71,7 @@ const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
   title: toolbarMessages.leftSidebar,
   icon: LayoutTwoColumnsSidebarLeftIcon
 }];
-const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+const LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: toolbarMessages.threeColumns,
@@ -91,6 +94,35 @@ const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   icon: LayoutThreeWithLeftSidebarsIcon,
   iconFallback: LayoutThreeWithLeftSidebarsIcon
 }];
+const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
+  id: 'editor.layout.twoRightSidebar',
+  type: 'two_right_sidebar',
+  title: toolbarMessages.rightSidebar,
+  icon: LayoutTwoColumnsSidebarRightIcon
+}, {
+  id: 'editor.layout.twoLeftSidebar',
+  type: 'two_left_sidebar',
+  title: toolbarMessages.leftSidebar,
+  icon: LayoutTwoColumnsSidebarLeftIcon
+}];
+const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+  id: 'editor.layout.threeWithSidebars',
+  type: 'three_with_sidebars',
+  title: toolbarMessages.threeColumnsWithSidebars,
+  icon: LayoutThreeColumnsSidebarsIcon
+}, {
+  id: 'editor.layout.threeRightSidebars',
+  type: 'three_right_sidebars',
+  title: toolbarMessages.threeColumnsWithRightSidebars,
+  icon: LayoutThreeWithRightSidebarsIcon,
+  iconFallback: LayoutThreeWithRightSidebarsIcon
+}, {
+  id: 'editor.layout.threeLeftSidebars',
+  type: 'three_left_sidebars',
+  title: toolbarMessages.threeColumnsWithLeftSidebars,
+  icon: LayoutThreeWithLeftSidebarsIcon,
+  iconFallback: LayoutThreeWithLeftSidebarsIcon
+}];
 const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   id: item.id,
   type: 'button',
@@ -103,7 +135,9 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   tabIndex: null
 });
 export const layoutToolbarTitle = 'Layout floating controls';
-const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
+const iconPlaceholder = /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+  label: ""
+}); // TODO: ED-25466 - Replace with proper icon
 
 const getLayoutColumnsIcons = colCount => {
   if (!editorExperiment('single_column_layouts', true) && !editorExperiment('platform_editor_controls', 'variant1')) {
@@ -130,11 +164,13 @@ const getLayoutColumnsIcons = colCount => {
       return undefined;
   }
 };
+const getLayoutColumnWidths = node => {
+  return node.children.map(child => child.attrs.width);
+};
 const getAdvancedLayoutItems = ({
   addSidebarLayouts,
   intl,
   editorAnalyticsAPI,
-  state,
   node,
   nodeType,
   separator,
@@ -143,7 +179,8 @@ const getAdvancedLayoutItems = ({
   allowAdvancedSingleColumnLayout
 }) => {
   const numberOfColumns = node.content.childCount || 2;
-  const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
+  const isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
+  const distributionOptions = isLayoutColumnMenuEnabled ? numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [] : numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD : [];
   const columnOptions = [{
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: 2
@@ -177,7 +214,7 @@ const getAdvancedLayoutItems = ({
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
-  const singleColumnOption = allowAdvancedSingleColumnLayout ? {
+  const dropdownOptions = [...(allowAdvancedSingleColumnLayout ? [{
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: 1
     }),
@@ -185,17 +222,38 @@ const getAdvancedLayoutItems = ({
     icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
-  } : [];
+  }] : []), ...columnOptions];
+  const distributeColumnsButton = isLayoutColumnMenuEnabled && numberOfColumns > 1 ? {
+    disabled: isDistributedUniformly(getLayoutColumnWidths(node)),
+    icon: TableColumnsDistributeIcon,
+    onClick: (editorState, dispatch) => {
+      const tr = distributeLayoutColumns({
+        editorAnalyticsAPI,
+        inputMethod: INPUT_METHOD.FLOATING_TB,
+        target: 'allColumns'
+      })({
+        tr: editorState.tr
+      });
+      if (!tr) {
+        return false;
+      }
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr);
+      return true;
+    },
+    testId: 'layout-distribute-columns',
+    title: intl.formatMessage(layoutMessages.distributeColumns),
+    type: 'button'
+  } : undefined;
   return [{
     type: 'dropdown',
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: numberOfColumns
     }),
     //`${numberOfColumns}-columns`,
-    options: [singleColumnOption, columnOptions].flat(),
+    options: dropdownOptions,
     showSelected: true,
     testId: 'column-options-button'
-  }, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])];
+  }, ...(distributionOptions.length > 0 || distributeColumnsButton ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), ...(distributeColumnsButton ? [distributeColumnsButton] : [])];
 };
 const fullHeightSeparator = {
   type: 'separator',
@@ -283,7 +341,6 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
         addSidebarLayouts,
         intl,
         editorAnalyticsAPI,
-        state,
         nodeType,
         node,
         separator,

package/dist/esm/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, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createDistributeLayoutColumnsCommand, 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';
@@ -50,7 +50,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
   return tr;
 };
 export var layoutPlugin = function layoutPlugin(_ref) {
-  var _api$analytics;
+  var _api$analytics, _api$analytics5;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -374,10 +374,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         var _api$analytics4;
         return _deleteLayoutColumn(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
       },
-      distributeLayoutColumns: function distributeLayoutColumns(props) {
-        var _api$analytics5;
-        return _distributeLayoutColumns(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(props);
-      },
+      distributeLayoutColumns: createDistributeLayoutColumnsCommand(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 _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);

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

@@ -13,7 +13,7 @@ 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 { calculateDistribution, isDistributedUniformly, redistributeAfterDeletion, redistributeProportionally } from './utils/layout-column-distribution';
-import { getSelectedLayoutColumns } from './utils/layout-column-selection';
+import { getAllLayoutColumnsFromSelection, getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -554,18 +554,17 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-    if (!selectedLayoutColumns) {
+    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
-    var layoutSectionNode = selectedLayoutColumns.layoutSectionNode,
-      layoutSectionPos = selectedLayoutColumns.layoutSectionPos,
-      selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
-      selectedColumns = selectedLayoutColumns.selectedColumns;
-    var startIndex = selectedColumnIndices[0];
-    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    var layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
+      layoutSectionPos = selectedLayoutColumnsResult.layoutSectionPos,
+      startIndex = selectedLayoutColumnsResult.startIndex,
+      endIndex = selectedLayoutColumnsResult.endIndex,
+      selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
     var selectedColumnIndex = side === 'left' ? startIndex : endIndex;
-    var selectedColumnCount = selectedColumns.length;
+    var selectedColumnCount = selectedLayoutColumns.length;
     if (layoutSectionNode.childCount >= getEffectiveMaxLayoutColumns()) {
       return null;
     }
@@ -623,22 +622,20 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-    if (!selectedLayoutColumns) {
+    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    if (!selectedLayoutColumnsResult) {
       return null;
     }
-    var selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
-      selectedColumns = selectedLayoutColumns.selectedColumns;
-    var columnsToUpdate = selectedColumns.filter(function (_ref6) {
+    var startIndex = selectedLayoutColumnsResult.startIndex,
+      endIndex = selectedLayoutColumnsResult.endIndex,
+      selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
+    var columnsToUpdate = selectedLayoutColumns.filter(function (_ref6) {
       var node = _ref6.node;
       return node.attrs.valign !== valign;
     });
     if (columnsToUpdate.length === 0) {
       return null;
     }
-    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,
@@ -654,7 +651,7 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
       attributes: {
         endIndex: endIndex,
         inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
-        selectedCount: selectedColumnCount,
+        selectedCount: selectedLayoutColumns.length,
         startIndex: startIndex,
         updatedCount: updatedColumnCount,
         valign: valign
@@ -665,28 +662,31 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
     return tr;
   };
 };
-export var distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI) {
-  var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
-  return function (_ref8) {
-    var tr = _ref8.tr;
+export var 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 ? 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 (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+    var selectedLayoutColumnsResult = target === 'allColumns' ? getAllLayoutColumnsFromSelection(tr.selection) : getSelectedLayoutColumnsFromSelection(tr.selection);
+    if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length < 2) {
       return null;
     }
-    var layoutSectionNode = selectedLayoutColumns.layoutSectionNode,
-      selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
-      selectedColumns = selectedLayoutColumns.selectedColumns;
-    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
-    var selectedColumnCount = selectedColumns.length;
-    var totalColumnCount = layoutSectionNode.childCount;
+    var layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
+      startIndex = selectedLayoutColumnsResult.startIndex,
+      endIndex = selectedLayoutColumnsResult.endIndex,
+      selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
     var existingWidths = mapChildren(layoutSectionNode, function (column) {
       return column.attrs.width;
     });
-    var selectedWidths = selectedColumns.map(function (_ref9) {
-      var node = _ref9.node;
+    var selectedWidths = selectedLayoutColumns.map(function (_ref0) {
+      var node = _ref0.node;
       return node.attrs.width;
     });
     var distribution = calculateDistribution(selectedWidths);
@@ -702,15 +702,14 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
     // 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 selectedIndexSet = new Set(selectedColumnIndices);
     var assignedToSelected = 0;
     var selectedAssignedCount = 0;
     var newWidths = existingWidths.map(function (w, idx) {
-      if (!selectedIndexSet.has(idx)) {
+      if (idx < startIndex || idx > endIndex) {
         return w;
       }
       selectedAssignedCount += 1;
-      if (selectedAssignedCount < selectedColumnCount) {
+      if (selectedAssignedCount < selectedLayoutColumns.length) {
         assignedToSelected += equalWidth;
         return equalWidth;
       }
@@ -719,10 +718,10 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
     });
 
     // Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
-    selectedColumns.forEach(function (_ref0, i) {
-      var node = _ref0.node,
-        pos = _ref0.pos;
-      var colIdx = selectedColumnIndices[i];
+    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]
       }));
@@ -732,11 +731,11 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
       attributes: {
-        columnCount: totalColumnCount,
+        columnCount: layoutSectionNode.childCount,
         endIndex: endIndex,
         inputMethod: inputMethod,
-        selectedCount: selectedColumnCount,
-        startIndex: selectedColumnIndices[0]
+        selectedCount: selectedLayoutColumns.length,
+        startIndex: startIndex
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);
@@ -744,11 +743,19 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
     return tr;
   };
 };
-export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref1) {
-  var anchorPos = _ref1.anchorPos,
-    isOpen = _ref1.isOpen;
-  return function (_ref10) {
-    var tr = _ref10.tr;
+export var createDistributeLayoutColumnsCommand = function createDistributeLayoutColumnsCommand(editorAnalyticsAPI) {
+  return function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return distributeLayoutColumns(_objectSpread(_objectSpread({}, options), {}, {
+      editorAnalyticsAPI: editorAnalyticsAPI
+    }));
+  };
+};
+export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref10) {
+  var anchorPos = _ref10.anchorPos,
+    isOpen = _ref10.isOpen;
+  return function (_ref11) {
+    var tr = _ref11.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       anchorPos: anchorPos,
       isOpen: isOpen
@@ -758,23 +765,20 @@ export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref1) {
   };
 };
 export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
-  return function (_ref11) {
-    var tr = _ref11.tr;
+  return function (_ref12) {
+    var tr = _ref12.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
-    var selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-    if (!selectedLayoutColumns) {
+    var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+    if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
       return null;
     }
-    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 layoutSectionNode = selectedLayoutColumnsResult.layoutSectionNode,
+      layoutSectionPos = selectedLayoutColumnsResult.layoutSectionPos,
+      selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns,
+      startIndex = selectedLayoutColumnsResult.startIndex,
+      endIndex = selectedLayoutColumnsResult.endIndex;
     var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(columnCount) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: ACTION.DELETED,
@@ -784,7 +788,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
           columnCount: columnCount,
           endIndex: endIndex,
           inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
-          selectedCount: selectedColumnCount,
+          selectedCount: selectedLayoutColumns.length,
           startIndex: startIndex
         },
         eventType: EVENT_TYPE.TRACK
@@ -792,7 +796,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
     };
 
     // If all columns are selected, remove the entire layoutSection
-    if (selectedColumnCount === layoutSectionNode.childCount) {
+    if (selectedLayoutColumns.length === layoutSectionNode.childCount) {
       tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
       emitDeleteColumnAnalytics(0);
       tr.setMeta('scrollIntoView', false);
@@ -802,7 +806,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
     // Build new column list without the selected columns
     var remainingColumns = [];
     layoutSectionNode.forEach(function (column, _offset, index) {
-      if (!selectedColumnIndexSet.has(index)) {
+      if (index < startIndex || index > endIndex) {
         remainingColumns.push(column);
       }
     });
@@ -811,12 +815,12 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
     var existingWidths = mapChildren(layoutSectionNode, function (column) {
       return column.attrs.width;
     });
-    var redistributed = selectedColumnIndices.slice()
+    var redistributed = selectedLayoutColumns.map(function (_, i) {
+      return startIndex + i;
+    })
     // 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) {
+    .reverse().reduce(function (widths, selectedIndex) {
       return redistributeAfterDeletion(widths, selectedIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
     }, existingWidths);
     var updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(remainingColumns));