@atlaskit/editor-plugin-layout 10.8.1 → 10.9.0

package/dist/cjs/ui/toolbar.js

@@ -22,8 +22,11 @@ var _layoutThreeColumnsSidebars = _interopRequireDefault(require("@atlaskit/icon
 var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
 var _layoutTwoColumnsSidebarLeft = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns-sidebar-left"));
 var _layoutTwoColumnsSidebarRight = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns-sidebar-right"));
+var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
+var _layoutColumnDistribution = require("../pm-plugins/utils/layout-column-distribution");
 var _LayoutColumnsIcon = require("./icons/LayoutColumnsIcon");
 var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
 var _LayoutThreeWithRightSidebars = require("./icons/LayoutThreeWithRightSidebars");
@@ -65,7 +68,7 @@ var SIDEBAR_LAYOUT_TYPES = [{
 }];
 
 // These are used for advanced layout options
-var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
+var LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
   title: _messages.layoutMessages.twoColumns,
@@ -81,7 +84,7 @@ var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
   title: _messages.layoutMessages.leftSidebar,
   icon: _layoutTwoColumnsSidebarLeft.default
 }];
-var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+var LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: _messages.layoutMessages.threeColumns,
@@ -104,6 +107,35 @@ var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   icon: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon,
   iconFallback: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon
 }];
+var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
+  id: 'editor.layout.twoRightSidebar',
+  type: 'two_right_sidebar',
+  title: _messages.layoutMessages.rightSidebar,
+  icon: _layoutTwoColumnsSidebarRight.default
+}, {
+  id: 'editor.layout.twoLeftSidebar',
+  type: 'two_left_sidebar',
+  title: _messages.layoutMessages.leftSidebar,
+  icon: _layoutTwoColumnsSidebarLeft.default
+}];
+var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+  id: 'editor.layout.threeWithSidebars',
+  type: 'three_with_sidebars',
+  title: _messages.layoutMessages.threeColumnsWithSidebars,
+  icon: _layoutThreeColumnsSidebars.default
+}, {
+  id: 'editor.layout.threeRightSidebars',
+  type: 'three_right_sidebars',
+  title: _messages.layoutMessages.threeColumnsWithRightSidebars,
+  icon: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon,
+  iconFallback: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon
+}, {
+  id: 'editor.layout.threeLeftSidebars',
+  type: 'three_left_sidebars',
+  title: _messages.layoutMessages.threeColumnsWithLeftSidebars,
+  icon: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon,
+  iconFallback: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon
+}];
 var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
   return {
     id: item.id,
@@ -118,7 +150,9 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
   };
 };
 var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
-var iconPlaceholder = _layoutTwoColumns.default; // TODO: ED-25466 - Replace with proper icon
+var iconPlaceholder = /*#__PURE__*/_react.default.createElement(_layoutTwoColumns.default, {
+  label: ""
+}); // TODO: ED-25466 - Replace with proper icon
 
 var getLayoutColumnsIcons = function getLayoutColumnsIcons(colCount) {
   if (!(0, _experiments.editorExperiment)('single_column_layouts', true) && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -145,11 +179,15 @@ var getLayoutColumnsIcons = function getLayoutColumnsIcons(colCount) {
       return undefined;
   }
 };
+var getLayoutColumnWidths = function getLayoutColumnWidths(node) {
+  return node.children.map(function (child) {
+    return child.attrs.width;
+  });
+};
 var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
   var addSidebarLayouts = _ref.addSidebarLayouts,
     intl = _ref.intl,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    state = _ref.state,
     node = _ref.node,
     nodeType = _ref.nodeType,
     separator = _ref.separator,
@@ -157,7 +195,8 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     currentLayout = _ref.currentLayout,
     allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
   var numberOfColumns = node.content.childCount || 2;
-  var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
+  var isLayoutColumnMenuEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true);
+  var 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 : [];
   var columnOptions = [{
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
       count: 2
@@ -191,7 +230,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
-  var singleColumnOption = allowAdvancedSingleColumnLayout ? {
+  var dropdownOptions = [].concat((0, _toConsumableArray2.default)(allowAdvancedSingleColumnLayout ? [{
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
       count: 1
     }),
@@ -199,19 +238,40 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
-  } : [];
+  }] : []), columnOptions);
+  var distributeColumnsButton = isLayoutColumnMenuEnabled && numberOfColumns > 1 ? {
+    disabled: (0, _layoutColumnDistribution.isDistributedUniformly)(getLayoutColumnWidths(node)),
+    icon: _tableColumnsDistribute.default,
+    onClick: function onClick(editorState, dispatch) {
+      var tr = (0, _actions.distributeLayoutColumns)({
+        editorAnalyticsAPI: editorAnalyticsAPI,
+        inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
+        target: 'allColumns'
+      })({
+        tr: editorState.tr
+      });
+      if (!tr) {
+        return false;
+      }
+      dispatch === null || dispatch === void 0 || dispatch(tr);
+      return true;
+    },
+    testId: 'layout-distribute-columns',
+    title: intl.formatMessage(_messages.layoutMessages.distributeColumns),
+    type: 'button'
+  } : undefined;
   return [{
     type: 'dropdown',
     title: intl.formatMessage(_messages.layoutMessages.columnOption, {
       count: numberOfColumns
     }),
     //`${numberOfColumns}-columns`,
-    options: [singleColumnOption, columnOptions].flat(),
+    options: dropdownOptions,
     showSelected: true,
     testId: 'column-options-button'
-  }].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
+  }].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 || distributeColumnsButton ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
     return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-  }) : []));
+  }) : []), (0, _toConsumableArray2.default)(distributeColumnsButton ? [distributeColumnsButton] : []));
 };
 var fullHeightSeparator = {
   type: 'separator',
@@ -300,7 +360,6 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
         addSidebarLayouts: addSidebarLayouts,
         intl: intl,
         editorAnalyticsAPI: editorAnalyticsAPI,
-        state: state,
         nodeType: nodeType,
         node: node,
         separator: separator,

package/dist/es2019/layoutPlugin.js

@@ -11,7 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createDistributeLayoutColumnsCommand, createMultiColumnLayoutSection, deleteLayoutColumn, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
@@ -52,7 +52,7 @@ export const layoutPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$analytics;
+  var _api$analytics, _api$analytics5;
   const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
@@ -353,10 +353,7 @@ export const layoutPlugin = ({
         var _api$analytics4;
         return deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
       },
-      distributeLayoutColumns: props => {
-        var _api$analytics5;
-        return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(props);
-      },
+      distributeLayoutColumns: createDistributeLayoutColumnsCommand(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
       insertLayoutColumn: side => {
         var _api$analytics6;
         return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);

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

@@ -10,7 +10,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 const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -540,20 +540,19 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-  if (!selectedLayoutColumns) {
+  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
     return null;
   }
   const {
     layoutSectionNode,
     layoutSectionPos,
-    selectedColumnIndices,
-    selectedColumns
-  } = selectedLayoutColumns;
-  const startIndex = selectedColumnIndices[0];
-  const endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    startIndex,
+    endIndex,
+    selectedLayoutColumns
+  } = selectedLayoutColumnsResult;
   const selectedColumnIndex = side === 'left' ? startIndex : endIndex;
-  const selectedColumnCount = selectedColumns.length;
+  const selectedColumnCount = selectedLayoutColumns.length;
   if (layoutSectionNode.childCount >= getEffectiveMaxLayoutColumns()) {
     return null;
   }
@@ -608,23 +607,21 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI) => ({
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-  if (!selectedLayoutColumns) {
+  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  if (!selectedLayoutColumnsResult) {
     return null;
   }
   const {
-    selectedColumnIndices,
-    selectedColumns
-  } = selectedLayoutColumns;
-  const columnsToUpdate = selectedColumns.filter(({
+    startIndex,
+    endIndex,
+    selectedLayoutColumns
+  } = selectedLayoutColumnsResult;
+  const columnsToUpdate = selectedLayoutColumns.filter(({
     node
   }) => node.attrs.valign !== valign);
   if (columnsToUpdate.length === 0) {
     return null;
   }
-  const startIndex = selectedColumnIndices[0];
-  const endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
-  const selectedColumnCount = selectedColumns.length;
   const updatedColumnCount = columnsToUpdate.length;
   columnsToUpdate.forEach(({
     node,
@@ -642,7 +639,7 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI) => ({
     attributes: {
       endIndex,
       inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
-      selectedCount: selectedColumnCount,
+      selectedCount: selectedLayoutColumns.length,
       startIndex,
       updatedCount: updatedColumnCount,
       valign
@@ -652,26 +649,28 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI) => ({
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
-export const distributeLayoutColumns = (editorAnalyticsAPI, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
+export const distributeLayoutColumns = ({
+  editorAnalyticsAPI,
+  inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU,
+  target = 'selectedColumns'
+} = {}) => ({
   tr
 }) => {
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-  if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+  const selectedLayoutColumnsResult = target === 'allColumns' ? getAllLayoutColumnsFromSelection(tr.selection) : getSelectedLayoutColumnsFromSelection(tr.selection);
+  if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length < 2) {
     return null;
   }
   const {
     layoutSectionNode,
-    selectedColumnIndices,
-    selectedColumns
-  } = selectedLayoutColumns;
-  const endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
-  const selectedColumnCount = selectedColumns.length;
-  const totalColumnCount = layoutSectionNode.childCount;
+    startIndex,
+    endIndex,
+    selectedLayoutColumns
+  } = selectedLayoutColumnsResult;
   const existingWidths = mapChildren(layoutSectionNode, column => column.attrs.width);
-  const selectedWidths = selectedColumns.map(({
+  const selectedWidths = selectedLayoutColumns.map(({
     node
   }) => node.attrs.width);
   const distribution = calculateDistribution(selectedWidths);
@@ -689,15 +688,14 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, inputMethod = INPUT_
   // 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.
-  const selectedIndexSet = new Set(selectedColumnIndices);
   let assignedToSelected = 0;
   let selectedAssignedCount = 0;
   const newWidths = existingWidths.map((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;
     }
@@ -706,11 +704,11 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, inputMethod = INPUT_
   });
 
   // Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
-  selectedColumns.forEach(({
+  selectedLayoutColumns.forEach(({
     node,
     pos
   }, i) => {
-    const colIdx = selectedColumnIndices[i];
+    const colIdx = startIndex + i;
     tr.setNodeMarkup(pos, node.type, {
       ...node.attrs,
       width: newWidths[colIdx]
@@ -721,17 +719,21 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, inputMethod = INPUT_
     actionSubject: ACTION_SUBJECT.DOCUMENT,
     actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
     attributes: {
-      columnCount: totalColumnCount,
+      columnCount: layoutSectionNode.childCount,
       endIndex,
       inputMethod,
-      selectedCount: selectedColumnCount,
-      startIndex: selectedColumnIndices[0]
+      selectedCount: selectedLayoutColumns.length,
+      startIndex
     },
     eventType: EVENT_TYPE.TRACK
   })(tr);
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
+export const createDistributeLayoutColumnsCommand = editorAnalyticsAPI => (options = {}) => distributeLayoutColumns({
+  ...options,
+  editorAnalyticsAPI
+});
 export const toggleLayoutColumnMenu = ({
   anchorPos,
   isOpen
@@ -751,20 +753,17 @@ export const deleteLayoutColumn = editorAnalyticsAPI => ({
   if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
-  const selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
-  if (!selectedLayoutColumns) {
+  const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
+  if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
     return null;
   }
   const {
     layoutSectionNode,
     layoutSectionPos,
-    selectedColumnIndices,
-    selectedColumns
-  } = selectedLayoutColumns;
-  const startIndex = selectedColumnIndices[0];
-  const endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
-  const selectedColumnCount = selectedColumns.length;
-  const selectedColumnIndexSet = new Set(selectedColumnIndices);
+    selectedLayoutColumns,
+    startIndex,
+    endIndex
+  } = selectedLayoutColumnsResult;
   const emitDeleteColumnAnalytics = columnCount => {
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
       action: ACTION.DELETED,
@@ -774,7 +773,7 @@ export const deleteLayoutColumn = editorAnalyticsAPI => ({
         columnCount,
         endIndex,
         inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
-        selectedCount: selectedColumnCount,
+        selectedCount: selectedLayoutColumns.length,
         startIndex
       },
       eventType: EVENT_TYPE.TRACK
@@ -782,7 +781,7 @@ export const 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);
@@ -792,17 +791,17 @@ export const deleteLayoutColumn = editorAnalyticsAPI => ({
   // Build new column list without the selected columns
   const remainingColumns = [];
   layoutSectionNode.forEach((column, _offset, index) => {
-    if (!selectedColumnIndexSet.has(index)) {
+    if (index < startIndex || index > endIndex) {
       remainingColumns.push(column);
     }
   });
 
   // Redistribute widths proportionally among remaining columns using shared utility
   const existingWidths = mapChildren(layoutSectionNode, column => column.attrs.width);
-  const redistributed = selectedColumnIndices.slice()
+  const redistributed = selectedLayoutColumns.map((_, i) => 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((a, b) => b - a).reduce((widths, selectedIndex) => redistributeAfterDeletion(widths, selectedIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT), existingWidths);
+  .reverse().reduce((widths, selectedIndex) => redistributeAfterDeletion(widths, selectedIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT), existingWidths);
   const 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/es2019/pm-plugins/utils/layout-column-selection.js

@@ -1,121 +1,81 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-const isLayoutColumn = node => (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn';
-const isLayoutSection = node => (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection';
-const getLayoutColumnIndexAtPos = $pos => {
-  for (let depth = $pos.depth; depth > 0; depth--) {
-    if (isLayoutColumn($pos.node(depth)) && isLayoutSection($pos.node(depth - 1))) {
-      return $pos.index(depth - 1);
-    }
-  }
-  return undefined;
+import { findChildrenByType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+const findLayoutSectionFromSelection = selection => {
+  return findParentNodeOfType(selection.$from.doc.type.schema.nodes.layoutSection)(selection);
 };
-const getLayoutSectionDepth = selection => {
-  const {
-    $from,
-    $to
-  } = selection;
-  const sharedDepth = $from.sharedDepth($to.pos);
-  for (let depth = sharedDepth; depth > 0; depth--) {
-    if (isLayoutSection($from.node(depth))) {
-      return depth;
-    }
-  }
-  return undefined;
+const findLayoutColumnsFromLayoutSection = (layoutSectionNode, layoutSectionPos = 0) => {
+  return findChildrenByType(layoutSectionNode, layoutSectionNode.type.schema.nodes.layoutColumn).map(({
+    node,
+    pos
+  }) => ({
+    node,
+    pos: pos + layoutSectionPos + 1
+  }));
 };
-export const getSelectedLayoutColumns = selection => {
-  if (!selection) {
-    return undefined;
-  }
-  if (selection instanceof NodeSelection && isLayoutColumn(selection.node)) {
-    const {
-      $from
-    } = selection;
-    const layoutSectionNode = $from.parent;
-    if (!isLayoutSection(layoutSectionNode)) {
-      return undefined;
-    }
-    const selectedColumnIndex = $from.index($from.depth);
-    return {
-      layoutSectionNode,
-      layoutSectionPos: $from.before($from.depth),
-      selectedColumnIndices: [selectedColumnIndex],
-      selectedColumns: [{
-        index: selectedColumnIndex,
-        node: selection.node,
-        pos: selection.from
-      }]
-    };
-  }
-  if (selection.empty) {
-    return undefined;
-  }
-  if (!editorExperiment('platform_editor_block_menu', true)) {
+export const getSelectedLayoutColumnsFromSelection = selection => {
+  const layoutSection = findLayoutSectionFromSelection(selection);
+  if (!layoutSection) {
     return undefined;
   }
-  const layoutSectionDepth = getLayoutSectionDepth(selection);
-  if (layoutSectionDepth === undefined) {
+  const {
+    node: layoutSectionNode,
+    pos: layoutSectionPos
+  } = layoutSection;
+  const allLayoutColumns = findLayoutColumnsFromLayoutSection(layoutSectionNode, layoutSectionPos);
+  if (!allLayoutColumns.length) {
     return undefined;
   }
-  const {
-    $from,
-    $to
-  } = selection;
-  const layoutSectionNode = $from.node(layoutSectionDepth);
-  const layoutSectionPos = $from.before(layoutSectionDepth);
-  const selectedColumns = [];
-  let invalidSelection = false;
-  layoutSectionNode.forEach((column, offset, index) => {
-    const columnStart = layoutSectionPos + 1 + offset;
-    const columnEnd = columnStart + column.nodeSize;
-    const intersectsColumn = selection.from < columnEnd && selection.to > columnStart;
-    if (!intersectsColumn) {
-      return;
-    }
-    if (!isLayoutColumn(column)) {
-      invalidSelection = true;
-      return;
+  let startIndex = -1;
+  let endIndex = -1;
+  const selectedLayoutColumns = allLayoutColumns.filter(({
+    node,
+    pos
+  }, index) => {
+    const isSelected = selection.from <= pos && selection.to >= pos + node.nodeSize;
+    if (isSelected) {
+      if (startIndex === -1) {
+        startIndex = index;
+      }
+      endIndex = index;
     }
-    selectedColumns.push({
-      index,
-      node: column,
-      pos: columnStart
-    });
+    return isSelected;
   });
-
-  // TextSelection inside a single column is normal text editing, not a selected column set.
-  if (invalidSelection || selectedColumns.length < 2) {
+  return {
+    layoutSectionNode,
+    layoutSectionPos,
+    selectedLayoutColumns,
+    startIndex,
+    endIndex
+  };
+};
+export const getAllLayoutColumnsFromSelection = selection => {
+  const layoutSection = findLayoutSectionFromSelection(selection);
+  if (!layoutSection) {
     return undefined;
   }
-  const firstColumn = selectedColumns[0];
-  const lastColumn = selectedColumns[selectedColumns.length - 1];
-  const startColumnIndex = getLayoutColumnIndexAtPos($from);
-  const endColumnIndex = getLayoutColumnIndexAtPos($to);
-  if (startColumnIndex !== undefined && startColumnIndex !== firstColumn.index || endColumnIndex !== undefined && endColumnIndex !== lastColumn.index) {
+  const layoutColumns = findLayoutColumnsFromLayoutSection(layoutSection.node, layoutSection.pos);
+  if (!(layoutColumns !== null && layoutColumns !== void 0 && layoutColumns.length)) {
     return undefined;
   }
   return {
-    layoutSectionNode,
-    layoutSectionPos,
-    selectedColumnIndices: selectedColumns.map(({
-      index
-    }) => index),
-    selectedColumns
+    layoutSectionNode: layoutSection.node,
+    layoutSectionPos: layoutSection.pos,
+    selectedLayoutColumns: layoutColumns,
+    startIndex: 0,
+    endIndex: layoutColumns.length - 1
   };
 };
-export const getLayoutSectionColumnCount = layoutSection => (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
 export const getLayoutColumnValign = layoutColumn => {
   var _ref;
   return layoutColumn ? (_ref = layoutColumn.attrs.valign) !== null && _ref !== void 0 ? _ref : 'top' : undefined;
 };
 export const getLayoutColumnMenuAnchorPos = (selection, anchorPosFromHandle) => {
   var _clickedSelectedColum, _selectedLayoutColumn;
-  const selectedLayoutColumns = getSelectedLayoutColumns(selection);
+  const selectedLayoutColumns = getSelectedLayoutColumnsFromSelection(selection);
   if (!selectedLayoutColumns) {
     return undefined;
   }
-  const clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(({
+  const clickedSelectedColumn = selectedLayoutColumns.selectedLayoutColumns.find(({
     pos
   }) => 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;
+  return (_clickedSelectedColum = clickedSelectedColumn === null || clickedSelectedColumn === void 0 ? void 0 : clickedSelectedColumn.pos) !== null && _clickedSelectedColum !== void 0 ? _clickedSelectedColum : (_selectedLayoutColumn = selectedLayoutColumns.selectedLayoutColumns[0]) === null || _selectedLayoutColumn === void 0 ? void 0 : _selectedLayoutColumn.pos;
 };

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

@@ -30,7 +30,7 @@ const DeleteColumnDropdownItem = ({
   if (selectedLayoutColumns === undefined) {
     return null;
   }
-  const selectedColumnCount = selectedLayoutColumns.selectedColumns.length;
+  const selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: onClick
   }, formatMessage(layoutMessages.deleteColumn, {

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { isDistributedUniformly } from '../../pm-plugins/utils/layout-column-distribution';
@@ -10,12 +11,17 @@ export const DistributeColumnsDropdownItem = ({
   const {
     formatMessage
   } = useIntl();
-  const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  const selectedLayoutColumnsResult = useSelectedLayoutColumns(api);
+  const {
+    selectedLayoutColumns
+  } = selectedLayoutColumnsResult !== null && selectedLayoutColumnsResult !== void 0 ? selectedLayoutColumnsResult : {};
   const handleClick = useCallback(() => {
     var _api$core;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(props => {
       var _api$layout, _api$layout2;
-      const tr = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns(props);
+      const tr = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns({
+        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU
+      })(props);
       if (!tr) {
         return null;
       }
@@ -28,13 +34,13 @@ export const DistributeColumnsDropdownItem = ({
     });
   }, [api]);
   const isAlreadyUniform = useMemo(() => {
-    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+    if (!selectedLayoutColumns || selectedLayoutColumns.length < 2) {
       return false;
     }
-    const selectedWidths = selectedLayoutColumns.selectedColumns.map(col => col.node.attrs.width);
+    const selectedWidths = selectedLayoutColumns.map(col => col.node.attrs.width);
     return isDistributedUniformly(selectedWidths);
   }, [selectedLayoutColumns]);
-  if (selectedLayoutColumns === undefined || selectedLayoutColumns.selectedColumns.length < 2) {
+  if (selectedLayoutColumns === undefined || selectedLayoutColumns.length < 2) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {