@atlaskit/editor-plugin-layout 10.8.0 → 10.9.0

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

@@ -7,20 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.DistributeColumnsDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _layoutColumnDistribution = require("../../pm-plugins/utils/layout-column-distribution");
 var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var DistributeColumnsDropdownItem = exports.DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  var selectedLayoutColumnsResult = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  var _ref2 = selectedLayoutColumnsResult !== null && selectedLayoutColumnsResult !== void 0 ? selectedLayoutColumnsResult : {},
+    selectedLayoutColumns = _ref2.selectedLayoutColumns;
   var handleClick = (0, _react.useCallback)(function () {
     var _api$core;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
       var _api$layout, _api$layout2;
-      var tr = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns(props);
+      var tr = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns({
+        inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU
+      })(props);
       if (!tr) {
         return null;
       }
@@ -32,31 +38,20 @@ var DistributeColumnsDropdownItem = exports.DistributeColumnsDropdownItem = func
       return closedTr !== null && closedTr !== void 0 ? closedTr : tr;
     });
   }, [api]);
-
-  // Hide when selected columns are already evenly distributed — no-op action.
-  // Must be before any early return to satisfy rules-of-hooks.
   var isAlreadyUniform = (0, _react.useMemo)(function () {
-    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+    if (!selectedLayoutColumns || selectedLayoutColumns.length < 2) {
       return false;
     }
-    var selectedWidths = selectedLayoutColumns.selectedColumns.map(function (col) {
+    var selectedWidths = selectedLayoutColumns.map(function (col) {
       return col.node.attrs.width;
     });
-    var selectedTotal = selectedWidths.reduce(function (sum, w) {
-      return sum + w;
-    }, 0);
-    var equalWidth = Number((selectedTotal / selectedWidths.length).toFixed(2));
-    return selectedWidths.every(function (w) {
-      return w === equalWidth;
-    });
+    return (0, _layoutColumnDistribution.isDistributedUniformly)(selectedWidths);
   }, [selectedLayoutColumns]);
-  if (selectedLayoutColumns === undefined || selectedLayoutColumns.selectedColumns.length < 2) {
-    return null;
-  }
-  if (isAlreadyUniform) {
+  if (selectedLayoutColumns === undefined || selectedLayoutColumns.length < 2) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    onClick: handleClick
+    onClick: handleClick,
+    isDisabled: isAlreadyUniform
   }, formatMessage(_messages.layoutMessages.distributeColumns));
 };

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

@@ -10,7 +10,6 @@ var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _actions = require("../../pm-plugins/actions");
-var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
 var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var INSERT_COLUMN_OPTIONS = {
@@ -26,6 +25,7 @@ var INSERT_COLUMN_OPTIONS = {
   }
 };
 var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
+  var _selectedLayoutColumn, _selectedLayoutColumn2;
   var api = _ref.api,
     side = _ref.side;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -34,7 +34,7 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
-  var columnCount = (0, _layoutColumnSelection.getLayoutSectionColumnCount)(selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.layoutSectionNode);
+  var columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 || (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   var maxColumnCount = (0, _actions.getEffectiveMaxLayoutColumns)();
   var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   var onClick = (0, _react.useCallback)(function () {

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

@@ -20,7 +20,7 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
-  var isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns.every(function (_ref2) {
+  var isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns.every(function (_ref2) {
     var node = _ref2.node;
     return (0, _layoutColumnSelection.getLayoutColumnValign)(node) === value;
   })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;

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

@@ -20,7 +20,7 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
   var currentValign = (0, _react.useMemo)(function () {
-    var selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns;
+    var selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns;
     var firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
     var firstValign = (0, _layoutColumnSelection.getLayoutColumnValign)(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
     if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(function (_ref2) {

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

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

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

@@ -7,8 +7,9 @@ exports.useSelectedLayoutColumns = void 0;
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
 var useSelectedLayoutColumns = exports.useSelectedLayoutColumns = function useSelectedLayoutColumns(api) {
-  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
-    var _states$selectionStat;
-    return (0, _layoutColumnSelection.getSelectedLayoutColumns)((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (_ref) {
+    var selectionState = _ref.selectionState;
+    var selectedLayoutColumns = (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) && (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(selectionState.selection);
+    return selectedLayoutColumns !== null && selectedLayoutColumns !== void 0 && selectedLayoutColumns.selectedLayoutColumns.length ? selectedLayoutColumns : undefined;
   });
 };

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

@@ -9,8 +9,8 @@ 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';
+import { calculateDistribution, isDistributedUniformly, redistributeAfterDeletion, redistributeProportionally } from './utils/layout-column-distribution';
+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,74 +649,91 @@ 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,
-    layoutSectionPos,
-    selectedColumnIndices,
-    selectedColumns
-  } = selectedLayoutColumns;
-  const endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
-  const selectedColumnCount = selectedColumns.length;
-  const totalColumnCount = layoutSectionNode.childCount;
-
-  // Compute equal width for selected columns
+    startIndex,
+    endIndex,
+    selectedLayoutColumns
+  } = selectedLayoutColumnsResult;
   const existingWidths = mapChildren(layoutSectionNode, column => column.attrs.width);
-  const selectedTotal = selectedColumnIndices.reduce((sum, idx) => sum + existingWidths[idx], 0);
-  const equalWidth = selectedTotal / selectedColumnCount;
-
-  // Early return if selected columns are already uniformly distributed — avoids spurious undo entry.
-  if (selectedColumnIndices.every(idx => existingWidths[idx] === Number(equalWidth.toFixed(2)))) {
+  const selectedWidths = selectedLayoutColumns.map(({
+    node
+  }) => node.attrs.width);
+  const distribution = calculateDistribution(selectedWidths);
+  if (!distribution) {
+    return null;
+  }
+  const {
+    selectedTotal,
+    equalWidth
+  } = distribution;
+  if (isDistributedUniformly(selectedWidths, distribution)) {
     return null;
   }
 
   // Build new widths array: selected columns get equal share, unselected unchanged.
-  // Assign truncated (2dp) equal widths to all selected cols except the last, which absorbs
+  // 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) {
-      const truncated = Number(equalWidth.toFixed(2));
-      assignedToSelected += truncated;
-      return truncated;
+    if (selectedAssignedCount < selectedLayoutColumns.length) {
+      assignedToSelected += equalWidth;
+      return equalWidth;
     }
     // Last selected column: absorb the remainder to avoid drift
     return Number((selectedTotal - assignedToSelected).toFixed(2));
   });
 
-  // Apply widths via replaceWith (mirroring forceColumnWidths approach)
-  tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(layoutSectionNode, tr.doc.type.schema, newWidths));
+  // Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
+  selectedLayoutColumns.forEach(({
+    node,
+    pos
+  }, i) => {
+    const colIdx = startIndex + i;
+    tr.setNodeMarkup(pos, node.type, {
+      ...node.attrs,
+      width: newWidths[colIdx]
+    });
+  });
   editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
     action: ACTION.UPDATED,
     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
@@ -739,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,
@@ -762,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
@@ -770,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);
@@ -780,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/{redistribute-proportionally.js → layout-column-distribution.js}

@@ -1,6 +1,5 @@
 const roundLayoutColumnWidth = width => Number(width.toFixed(2));
 const sumWidths = widths => widths.reduce((sum, width) => sum + width, 0);
-const isValidWidth = width => Number.isFinite(width) && width > 0;
 const normaliseWidthsTotal = (widths, totalWidth, minWidth) => {
   const roundedWidths = widths.map(roundLayoutColumnWidth);
   const remainder = roundLayoutColumnWidth(totalWidth - sumWidths(roundedWidths));
@@ -19,6 +18,7 @@ const normaliseWidthsTotal = (widths, totalWidth, minWidth) => {
   }
   return roundedWidths.map((width, index) => index === adjustmentIndex ? adjustedWidth : width);
 };
+const isValidWidth = width => Number.isFinite(width) && width > 0;
 const redistributeWithMinimumWidth = ({
   minWidth,
   totalWidth,
@@ -61,6 +61,39 @@ const redistributeWithMinimumWidth = ({
   });
   return widths;
 };
+
+/**
+ * Returns true when the given selected columns already reflect the distribution that
+ * `distributeLayoutColumns` would produce — i.e. the first N-1 cols each hold
+ * `equalWidth` (rounded to 2 dp) and the last col absorbs the rounding remainder.
+ *
+ * This mirrors the action's "last col absorbs remainder" logic so that the UI can
+ * disable the option when it would be a no-op, avoiding spurious undo entries.
+ */
+
+export const calculateDistribution = selectedWidths => {
+  const count = selectedWidths.length;
+  if (count < 2) {
+    return undefined;
+  }
+  const selectedTotal = sumWidths(selectedWidths);
+  const equalWidth = roundLayoutColumnWidth(selectedTotal / count);
+  return {
+    selectedTotal,
+    equalWidth
+  };
+};
+export function isDistributedUniformly(selectedWidths, distribution = calculateDistribution(selectedWidths)) {
+  if (!distribution || selectedWidths.length < 2) {
+    return false;
+  }
+  const {
+    selectedTotal,
+    equalWidth
+  } = distribution;
+  const lastColWidth = roundLayoutColumnWidth(selectedTotal - equalWidth * (selectedWidths.length - 1));
+  return selectedWidths.slice(0, -1).every(width => width === equalWidth) && selectedWidths[selectedWidths.length - 1] === lastColWidth;
+}
 export const redistributeAfterDeletion = (currentWidths, removeIndex, minWidth) => {
   if (currentWidths.length === 0 || removeIndex < 0 || removeIndex >= currentWidths.length || !isValidWidth(minWidth)) {
     return currentWidths;