@atlaskit/editor-plugin-layout 10.8.1 → 10.9.1

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

@@ -10,22 +10,22 @@ 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 = {
   left: {
     Icon: _editorToolbar.TableColumnAddLeftIcon,
-    label: _messages.layoutMessages.insertColumnLeft,
+    label: _messages.layoutMessages.addColumnLeft,
     side: 'left'
   },
   right: {
     Icon: _editorToolbar.TableColumnAddRightIcon,
-    label: _messages.layoutMessages.insertColumnRight,
+    label: _messages.layoutMessages.addColumnRight,
     side: 'right'
   }
 };
 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) {
@@ -31,7 +31,7 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _verticalAlignIcons.VERTICAL_ALIGN_ICONS.top;
+  var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _verticalAlignIcons.VERTICAL_ALIGN_ICONS.middle;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/_react.default.createElement(TriggerIcon, {
       label: "",

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

@@ -71,15 +71,6 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]
-  }), _objectSpread(_objectSpread({}, _keys.DELETE_COLUMN_MENU_ITEM), {}, {
-    component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_DeleteColumnDropdownItem.DeleteColumnDropdownItem, {
-        api: api
-      });
-    },
-    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
-      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
-    })]
   }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
     component: function component(_ref4) {
       var children = _ref4.children;
@@ -127,5 +118,25 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
       rank: _keys.VERTICAL_ALIGN_MENU_SECTION_RANK[_keys.VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
     })]
+  }), // --- Danger section (Delete column) ---
+  _objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_DANGER_SECTION), {}, {
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_RANK[_keys.LAYOUT_COLUMN_DANGER_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.DELETE_COLUMN_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DeleteColumnDropdownItem.DeleteColumnDropdownItem, {
+        api: api
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_DANGER_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_DANGER_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
+    })]
   })];
 };

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

@@ -10,6 +10,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
@@ -26,7 +27,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;
   }
@@ -104,6 +105,9 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -111,5 +115,5 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     components: components,
     fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: _keys.LAYOUT_COLUMN_MENU
-  })));
+  }))));
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_ALIGN_TOP_MENU_ITEM = exports.VERTICAL_ALIGN_MIDDLE_MENU_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU = exports.INSERT_COLUMN_RIGHT_MENU_ITEM = exports.INSERT_COLUMN_LEFT_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = void 0;
+exports.VERTICAL_ALIGN_TOP_MENU_ITEM = exports.VERTICAL_ALIGN_MIDDLE_MENU_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU = exports.LAYOUT_COLUMN_DANGER_SECTION_RANK = exports.LAYOUT_COLUMN_DANGER_SECTION = exports.INSERT_COLUMN_RIGHT_MENU_ITEM = exports.INSERT_COLUMN_LEFT_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 // --- Menu surface ---
 
@@ -23,7 +23,11 @@ var LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_VERTICAL_A
   type: 'menu-section',
   key: 'layout-column-vertical-align-menu-section'
 };
-var LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_MENU_SECTION.key, 100);
+var LAYOUT_COLUMN_DANGER_SECTION = exports.LAYOUT_COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-danger-section'
+};
+var LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, LAYOUT_COLUMN_MENU_SECTION.key, 100), LAYOUT_COLUMN_DANGER_SECTION.key, 200);
 
 // --- Menus ---
 
@@ -65,6 +69,7 @@ var DELETE_COLUMN_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = {
 
 // --- Item ranks within sections ---
 
-var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_MENU.key, 100), INSERT_COLUMN_LEFT_MENU_ITEM.key, 200), INSERT_COLUMN_RIGHT_MENU_ITEM.key, 300), DISTRIBUTE_COLUMNS_MENU_ITEM.key, 400), DELETE_COLUMN_MENU_ITEM.key, 500);
+var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_MENU.key, 100), INSERT_COLUMN_LEFT_MENU_ITEM.key, 200), INSERT_COLUMN_RIGHT_MENU_ITEM.key, 300), DISTRIBUTE_COLUMNS_MENU_ITEM.key, 400);
+var LAYOUT_COLUMN_DANGER_SECTION_RANK = exports.LAYOUT_COLUMN_DANGER_SECTION_RANK = (0, _defineProperty2.default)({}, DELETE_COLUMN_MENU_ITEM.key, 100);
 var VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
 var VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_TOP_MENU_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key, 300);

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/LayoutColumnMenu/verticalAlignIcons.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VERTICAL_ALIGN_ICONS = void 0;
-var _alignContentBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-content-bottom"));
-var _alignContentCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-content-center-vertical"));
-var _alignContentTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-content-top"));
+var _alignPositionBottom = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-bottom"));
+var _alignPositionCenterVertical = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-center-vertical"));
+var _alignPositionTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/align-position-top"));
 // Disable no-re-export here, this is a useful mapping file for icon lookup used in multiple places
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 var VERTICAL_ALIGN_ICONS = exports.VERTICAL_ALIGN_ICONS = {
-  top: _alignContentTop.default,
-  middle: _alignContentCenterVertical.default,
-  bottom: _alignContentBottom.default
+  top: _alignPositionTop.default,
+  middle: _alignPositionCenterVertical.default,
+  bottom: _alignPositionBottom.default
 };

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,39 @@ 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)({
+        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 +359,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

@@ -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: distributeLayoutColumns(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,27 @@ 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 +687,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 +703,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,11 +718,11 @@ 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);
@@ -751,20 +748,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 +768,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 +776,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 +786,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);