@atlaskit/editor-plugin-layout 10.6.1 → 10.7.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.7.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.7.0
+
+### Minor Changes
+
+- [`6767563047c0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6767563047c0e) -
+  Add distributeLayoutColumns command that equalises widths of selected layout columns; wire into
+  drag-handle column menu and floating toolbar
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.6.1
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -381,13 +381,17 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         var _api$analytics4;
         return (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
       },
-      insertLayoutColumn: function insertLayoutColumn(side) {
+      distributeLayoutColumns: function distributeLayoutColumns(props) {
         var _api$analytics5;
-        return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+        return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(props);
       },
-      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+      insertLayoutColumn: function insertLayoutColumn(side) {
         var _api$analytics6;
-        return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+        return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+      },
+      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+        var _api$analytics7;
+        return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions);
       },
       toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
+exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
 exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
@@ -675,11 +675,85 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
     return tr;
   };
 };
-var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref8) {
-  var anchorPos = _ref8.anchorPos,
-    isOpen = _ref8.isOpen;
-  return function (_ref9) {
-    var tr = _ref9.tr;
+var distributeLayoutColumns = exports.distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI) {
+  var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
+  return function (_ref8) {
+    var tr = _ref8.tr;
+    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return null;
+    }
+    var selectedLayoutColumns = (0, _layoutColumnSelection.getSelectedLayoutColumns)(tr.selection);
+    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+      return null;
+    }
+    var layoutSectionNode = selectedLayoutColumns.layoutSectionNode,
+      layoutSectionPos = selectedLayoutColumns.layoutSectionPos,
+      selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
+      selectedColumns = selectedLayoutColumns.selectedColumns;
+    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    var selectedColumnCount = selectedColumns.length;
+    var totalColumnCount = layoutSectionNode.childCount;
+
+    // Compute equal width for selected columns
+    var existingWidths = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
+      return column.attrs.width;
+    });
+    var selectedTotal = selectedColumnIndices.reduce(function (sum, idx) {
+      return sum + existingWidths[idx];
+    }, 0);
+    var equalWidth = selectedTotal / selectedColumnCount;
+
+    // Early return if selected columns are already uniformly distributed — avoids spurious undo entry.
+    if (selectedColumnIndices.every(function (idx) {
+      return existingWidths[idx] === Number(equalWidth.toFixed(2));
+    })) {
+      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
+    // 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)) {
+        return w;
+      }
+      selectedAssignedCount += 1;
+      if (selectedAssignedCount < selectedColumnCount) {
+        var truncated = Number(equalWidth.toFixed(2));
+        assignedToSelected += truncated;
+        return truncated;
+      }
+      // 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));
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: _analytics.ACTION.UPDATED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: totalColumnCount,
+        endIndex: endIndex,
+        inputMethod: inputMethod,
+        selectedCount: selectedColumnCount,
+        startIndex: selectedColumnIndices[0]
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref9) {
+  var anchorPos = _ref9.anchorPos,
+    isOpen = _ref9.isOpen;
+  return function (_ref0) {
+    var tr = _ref0.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       anchorPos: anchorPos,
       isOpen: isOpen
@@ -689,8 +763,8 @@ var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLay
   };
 };
 var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
-  return function (_ref0) {
-    var tr = _ref0.tr;
+  return function (_ref1) {
+    var tr = _ref1.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }

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

@@ -1,32 +1,62 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createDistributeColumnsDropdownItem = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.DistributeColumnsDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
+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 handleClick = function handleClick() {
-    var _api$core, _api$layout;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
-      isOpen: false
-    }));
-  };
+  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.useSelectedLayoutColumns)(api);
+  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);
+      if (!tr) {
+        return null;
+      }
+      var closedTr = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
+        isOpen: false
+      })({
+        tr: tr
+      });
+      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) {
+      return false;
+    }
+    var selectedWidths = selectedLayoutColumns.selectedColumns.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;
+    });
+  }, [selectedLayoutColumns]);
+  if (selectedLayoutColumns === undefined || selectedLayoutColumns.selectedColumns.length < 2) {
+    return null;
+  }
+  if (isAlreadyUniform) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick
   }, formatMessage(_messages.layoutMessages.distributeColumns));
-};
-var createDistributeColumnsDropdownItem = exports.createDistributeColumnsDropdownItem = function createDistributeColumnsDropdownItem(api) {
-  return function () {
-    return /*#__PURE__*/_react.default.createElement(DistributeColumnsDropdownItem, {
-      api: api
-    });
-  };
 };

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

@@ -53,7 +53,11 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
       rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.INSERT_COLUMN_RIGHT_MENU_ITEM.key]
     })]
   }), _objectSpread(_objectSpread({}, _keys.DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
-    component: (0, _DistributeColumnsDropdownItem.createDistributeColumnsDropdownItem)(api),
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DistributeColumnsDropdownItem.DistributeColumnsDropdownItem, {
+        api: api
+      });
+    },
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]

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, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, 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';
@@ -353,13 +353,17 @@ 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);
       },
-      insertLayoutColumn: side => {
+      distributeLayoutColumns: props => {
         var _api$analytics5;
-        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+        return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(props);
       },
-      setLayoutColumnValign: valign => {
+      insertLayoutColumn: side => {
         var _api$analytics6;
-        return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+      },
+      setLayoutColumnValign: valign => {
+        var _api$analytics7;
+        return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions);
       },
       toggleLayoutColumnMenu
     }

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

@@ -652,6 +652,74 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI) => ({
   tr.setMeta('scrollIntoView', false);
   return tr;
 };
+export const distributeLayoutColumns = (editorAnalyticsAPI, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
+  tr
+}) => {
+  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    return null;
+  }
+  const selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
+  if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.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
+  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)))) {
+    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
+  // 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)) {
+      return w;
+    }
+    selectedAssignedCount += 1;
+    if (selectedAssignedCount < selectedColumnCount) {
+      const truncated = Number(equalWidth.toFixed(2));
+      assignedToSelected += truncated;
+      return truncated;
+    }
+    // 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));
+  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,
+      endIndex,
+      inputMethod,
+      selectedCount: selectedColumnCount,
+      startIndex: selectedColumnIndices[0]
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+  tr.setMeta('scrollIntoView', false);
+  return tr;
+};
 export const toggleLayoutColumnMenu = ({
   anchorPos,
   isOpen

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

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-const DistributeColumnsDropdownItem = ({
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
+export const DistributeColumnsDropdownItem = ({
   api
 }) => {
   const {
     formatMessage
   } = useIntl();
-  const handleClick = () => {
-    var _api$core, _api$layout;
-    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
-      isOpen: false
-    }));
-  };
+  const selectedLayoutColumns = useSelectedLayoutColumns(api);
+  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);
+      if (!tr) {
+        return null;
+      }
+      const closedTr = api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
+        isOpen: false
+      })({
+        tr
+      });
+      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.
+  const isAlreadyUniform = useMemo(() => {
+    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+      return false;
+    }
+    const selectedWidths = selectedLayoutColumns.selectedColumns.map(col => col.node.attrs.width);
+    const selectedTotal = selectedWidths.reduce((sum, w) => sum + w, 0);
+    const equalWidth = Number((selectedTotal / selectedWidths.length).toFixed(2));
+    return selectedWidths.every(w => w === equalWidth);
+  }, [selectedLayoutColumns]);
+  if (selectedLayoutColumns === undefined || selectedLayoutColumns.selectedColumns.length < 2) {
+    return null;
+  }
+  if (isAlreadyUniform) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick
   }, formatMessage(layoutMessages.distributeColumns));
-};
-export const createDistributeColumnsDropdownItem = api => {
-  return () => /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
-    api: api
-  });
 };

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

@@ -3,7 +3,7 @@ import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
-import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
+import { DistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
 import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
 import { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
 import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
@@ -47,7 +47,9 @@ export const getLayoutColumnMenuComponents = ({
     }]
   }, {
     ...DISTRIBUTE_COLUMNS_MENU_ITEM,
-    component: createDistributeColumnsDropdownItem(api),
+    component: () => /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
+      api: api
+    }),
     parents: [{
       ...LAYOUT_COLUMN_MENU_SECTION,
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]

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, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, 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';
@@ -374,13 +374,17 @@ 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);
       },
-      insertLayoutColumn: function insertLayoutColumn(side) {
+      distributeLayoutColumns: function distributeLayoutColumns(props) {
         var _api$analytics5;
-        return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+        return _distributeLayoutColumns(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(props);
       },
-      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+      insertLayoutColumn: function insertLayoutColumn(side) {
         var _api$analytics6;
-        return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+        return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
+      },
+      setLayoutColumnValign: function setLayoutColumnValign(valign) {
+        var _api$analytics7;
+        return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions);
       },
       toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }

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

@@ -665,11 +665,85 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
     return tr;
   };
 };
-export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref8) {
-  var anchorPos = _ref8.anchorPos,
-    isOpen = _ref8.isOpen;
-  return function (_ref9) {
-    var tr = _ref9.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;
+    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return null;
+    }
+    var selectedLayoutColumns = getSelectedLayoutColumns(tr.selection);
+    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+      return null;
+    }
+    var layoutSectionNode = selectedLayoutColumns.layoutSectionNode,
+      layoutSectionPos = selectedLayoutColumns.layoutSectionPos,
+      selectedColumnIndices = selectedLayoutColumns.selectedColumnIndices,
+      selectedColumns = selectedLayoutColumns.selectedColumns;
+    var endIndex = selectedColumnIndices[selectedColumnIndices.length - 1];
+    var selectedColumnCount = selectedColumns.length;
+    var totalColumnCount = layoutSectionNode.childCount;
+
+    // Compute equal width for selected columns
+    var existingWidths = mapChildren(layoutSectionNode, function (column) {
+      return column.attrs.width;
+    });
+    var selectedTotal = selectedColumnIndices.reduce(function (sum, idx) {
+      return sum + existingWidths[idx];
+    }, 0);
+    var equalWidth = selectedTotal / selectedColumnCount;
+
+    // Early return if selected columns are already uniformly distributed — avoids spurious undo entry.
+    if (selectedColumnIndices.every(function (idx) {
+      return existingWidths[idx] === Number(equalWidth.toFixed(2));
+    })) {
+      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
+    // 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)) {
+        return w;
+      }
+      selectedAssignedCount += 1;
+      if (selectedAssignedCount < selectedColumnCount) {
+        var truncated = Number(equalWidth.toFixed(2));
+        assignedToSelected += truncated;
+        return truncated;
+      }
+      // 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));
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.UPDATED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: totalColumnCount,
+        endIndex: endIndex,
+        inputMethod: inputMethod,
+        selectedCount: selectedColumnCount,
+        startIndex: selectedColumnIndices[0]
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref9) {
+  var anchorPos = _ref9.anchorPos,
+    isOpen = _ref9.isOpen;
+  return function (_ref0) {
+    var tr = _ref0.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       anchorPos: anchorPos,
       isOpen: isOpen
@@ -679,8 +753,8 @@ export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref8) {
   };
 };
 export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
-  return function (_ref0) {
-    var tr = _ref0.tr;
+  return function (_ref1) {
+    var tr = _ref1.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }

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

@@ -1,25 +1,54 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-var DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
+import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
+export var DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var handleClick = function handleClick() {
-    var _api$core, _api$layout;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
-      isOpen: false
-    }));
-  };
+  var selectedLayoutColumns = useSelectedLayoutColumns(api);
+  var handleClick = 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);
+      if (!tr) {
+        return null;
+      }
+      var closedTr = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
+        isOpen: false
+      })({
+        tr: tr
+      });
+      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 = useMemo(function () {
+    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+      return false;
+    }
+    var selectedWidths = selectedLayoutColumns.selectedColumns.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;
+    });
+  }, [selectedLayoutColumns]);
+  if (selectedLayoutColumns === undefined || selectedLayoutColumns.selectedColumns.length < 2) {
+    return null;
+  }
+  if (isAlreadyUniform) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick
   }, formatMessage(layoutMessages.distributeColumns));
-};
-export var createDistributeColumnsDropdownItem = function createDistributeColumnsDropdownItem(api) {
-  return function () {
-    return /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
-      api: api
-    });
-  };
 };

package/dist/esm/ui/LayoutColumnMenu/components.js

@@ -6,7 +6,7 @@ import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
 import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
-import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
+import { DistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
 import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
 import { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_RANK, LAYOUT_COLUMN_MENU_SECTION, LAYOUT_COLUMN_MENU_SECTION_RANK, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION, VERTICAL_ALIGN_BOTTOM_MENU_ITEM, VERTICAL_ALIGN_MENU, VERTICAL_ALIGN_MENU_RANK, VERTICAL_ALIGN_MENU_SECTION_RANK, VERTICAL_ALIGN_MIDDLE_MENU_ITEM, VERTICAL_ALIGN_TOP_MENU_ITEM } from './keys';
 import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
@@ -46,7 +46,11 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_RIGHT_MENU_ITEM.key]
     })]
   }), _objectSpread(_objectSpread({}, DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
-    component: createDistributeColumnsDropdownItem(api),
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
+        api: api
+      });
+    },
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]

package/dist/types/layoutPluginType.d.ts

@@ -9,7 +9,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { deleteLayoutColumn, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import type { deleteLayoutColumn, distributeLayoutColumns, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
@@ -30,6 +30,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     };
     commands: {
         deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
+        distributeLayoutColumns: ReturnType<typeof distributeLayoutColumns>;
         insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
         setLayoutColumnValign: (valign: Parameters<typeof setLayoutColumnValign>[0]) => EditorCommand;
         toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;

package/dist/types/pm-plugins/actions.d.ts

@@ -34,6 +34,7 @@ export type InsertLayoutColumnSide = 'left' | 'right';
 export declare function getEffectiveMaxLayoutColumns(): number;
 export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
+export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB) => EditorCommand;
 export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
     anchorPos?: number;
     isOpen?: boolean;

package/dist/types/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { LayoutPlugin } from '../../layoutPluginType';
-export declare const createDistributeColumnsDropdownItem: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => () => React.JSX.Element;
+type DistributeColumnsDropdownItemProps = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+};
+export declare const DistributeColumnsDropdownItem: ({ api, }: DistributeColumnsDropdownItemProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/layoutPluginType.d.ts

@@ -9,7 +9,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { deleteLayoutColumn, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import type { deleteLayoutColumn, distributeLayoutColumns, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
@@ -30,6 +30,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
     };
     commands: {
         deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
+        distributeLayoutColumns: ReturnType<typeof distributeLayoutColumns>;
         insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
         setLayoutColumnValign: (valign: Parameters<typeof setLayoutColumnValign>[0]) => EditorCommand;
         toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -34,6 +34,7 @@ export type InsertLayoutColumnSide = 'left' | 'right';
 export declare function getEffectiveMaxLayoutColumns(): number;
 export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
+export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB) => EditorCommand;
 export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
     anchorPos?: number;
     isOpen?: boolean;

package/dist/types-ts4.5/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { LayoutPlugin } from '../../layoutPluginType';
-export declare const createDistributeColumnsDropdownItem: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => () => React.JSX.Element;
+type DistributeColumnsDropdownItemProps = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+};
+export declare const DistributeColumnsDropdownItem: ({ api, }: DistributeColumnsDropdownItemProps) => React.JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.6.1",
+	"version": "10.7.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,17 +45,17 @@
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-toolbar": "^1.7.0",
 		"@atlaskit/editor-ui-control-model": "^1.2.0",
-		"@atlaskit/icon": "^35.1.0",
-		"@atlaskit/icon-lab": "^6.10.0",
+		"@atlaskit/icon": "^35.3.0",
+		"@atlaskit/icon-lab": "^6.12.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^83.0.0",
+		"@atlaskit/tmp-editor-statsig": "^84.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.46.0",
+		"@atlaskit/editor-common": "^114.47.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},