@atlaskit/editor-plugin-layout 10.8.1 → 10.9.1

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

@@ -3,21 +3,21 @@ import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { getEffectiveMaxLayoutColumns } from '../../pm-plugins/actions';
-import { getLayoutSectionColumnCount } from '../../pm-plugins/utils/layout-column-selection';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 var INSERT_COLUMN_OPTIONS = {
   left: {
     Icon: TableColumnAddLeftIcon,
-    label: layoutMessages.insertColumnLeft,
+    label: layoutMessages.addColumnLeft,
     side: 'left'
   },
   right: {
     Icon: TableColumnAddRightIcon,
-    label: layoutMessages.insertColumnRight,
+    label: layoutMessages.addColumnRight,
     side: 'right'
   }
 };
 export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
+  var _selectedLayoutColumn, _selectedLayoutColumn2;
   var api = _ref.api,
     side = _ref.side;
   var _useIntl = useIntl(),
@@ -26,7 +26,7 @@ export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
     Icon = _INSERT_COLUMN_OPTION.Icon,
     label = _INSERT_COLUMN_OPTION.label;
   var selectedLayoutColumns = useSelectedLayoutColumns(api);
-  var columnCount = 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 = getEffectiveMaxLayoutColumns();
   var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   var onClick = useCallback(function () {

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

@@ -12,7 +12,7 @@ export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref)
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = 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 getLayoutColumnValign(node) === value;
   })) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;

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

@@ -12,7 +12,7 @@ export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
     formatMessage = _useIntl.formatMessage;
   var selectedLayoutColumns = useSelectedLayoutColumns(api);
   var currentValign = 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 = getLayoutColumnValign(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
     if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(function (_ref2) {
@@ -23,7 +23,7 @@ export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.top;
+  var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.middle;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
       label: "",

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

@@ -9,7 +9,7 @@ import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-cont
 import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
 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 { DELETE_COLUMN_MENU_ITEM, DISTRIBUTE_COLUMNS_MENU_ITEM, INSERT_COLUMN_LEFT_MENU_ITEM, INSERT_COLUMN_RIGHT_MENU_ITEM, LAYOUT_COLUMN_DANGER_SECTION, LAYOUT_COLUMN_DANGER_SECTION_RANK, 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';
 import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
 var LayoutColumnMenuContainer = function LayoutColumnMenuContainer(_ref) {
@@ -62,15 +62,6 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]
-  }), _objectSpread(_objectSpread({}, DELETE_COLUMN_MENU_ITEM), {}, {
-    component: function component() {
-      return /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
-        api: api
-      });
-    },
-    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
-      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
-    })]
   }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_MENU), {}, {
     component: function component(_ref4) {
       var children = _ref4.children;
@@ -118,5 +109,25 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION), {}, {
       rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
     })]
+  }), // --- Danger section (Delete column) ---
+  _objectSpread(_objectSpread({}, LAYOUT_COLUMN_DANGER_SECTION), {}, {
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
+      rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_DANGER_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, DELETE_COLUMN_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
+        api: api
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_DANGER_SECTION), {}, {
+      rank: LAYOUT_COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
+    })]
   })];
 };

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

@@ -3,6 +3,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -18,7 +19,7 @@ var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
  */
 var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection, anchorPosFromHandle) {
   var _columnDomRef$parentE;
-  var anchorPos = getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
+  var anchorPos = selection && getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
   if (anchorPos === undefined) {
     return null;
   }
@@ -96,6 +97,9 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu
+  }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
+    api: api,
+    userIntent: "layoutColumnMenuPopupOpen"
   }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isLayoutColumnMenuOpen,
     setIsOpen: handleSetIsOpen
@@ -103,5 +107,5 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  })));
+  }))));
 });

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

@@ -16,7 +16,11 @@ export var LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = {
   type: 'menu-section',
   key: 'layout-column-vertical-align-menu-section'
 };
-export var LAYOUT_COLUMN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_MENU_SECTION.key, 100);
+export var LAYOUT_COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-danger-section'
+};
+export var LAYOUT_COLUMN_MENU_RANK = _defineProperty(_defineProperty({}, LAYOUT_COLUMN_MENU_SECTION.key, 100), LAYOUT_COLUMN_DANGER_SECTION.key, 200);
 
 // --- Menus ---
 
@@ -58,6 +62,7 @@ export var DELETE_COLUMN_MENU_ITEM = {
 
 // --- Item ranks within sections ---
 
-export var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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);
+export var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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);
+export var LAYOUT_COLUMN_DANGER_SECTION_RANK = _defineProperty({}, DELETE_COLUMN_MENU_ITEM.key, 100);
 export var VERTICAL_ALIGN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
 export var VERTICAL_ALIGN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty({}, VERTICAL_ALIGN_TOP_MENU_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key, 300);

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

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

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

@@ -1,11 +1,11 @@
 // 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 */
 
-import AlignContentBottomIcon from '@atlaskit/icon-lab/core/align-content-bottom';
-import AlignContentCenterVerticalIcon from '@atlaskit/icon-lab/core/align-content-center-vertical';
-import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
+import AlignPositionBottomIcon from '@atlaskit/icon-lab/core/align-position-bottom';
+import AlignPositionCenterVerticalIcon from '@atlaskit/icon-lab/core/align-position-center-vertical';
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
 export var VERTICAL_ALIGN_ICONS = {
-  top: AlignContentTopIcon,
-  middle: AlignContentCenterVerticalIcon,
-  bottom: AlignContentBottomIcon
+  top: AlignPositionTopIcon,
+  middle: AlignPositionCenterVerticalIcon,
+  bottom: AlignPositionBottomIcon
 };

package/dist/esm/ui/toolbar.js

@@ -16,8 +16,11 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/layout-three-col
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-left';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-right';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { deleteActiveLayoutNode, distributeLayoutColumns, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { isDistributedUniformly } from '../pm-plugins/utils/layout-column-distribution';
 import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
 import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
@@ -56,7 +59,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: toolbarMessages.twoColumns,
@@ -72,7 +75,7 @@ var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
   title: toolbarMessages.leftSidebar,
   icon: LayoutTwoColumnsSidebarLeftIcon
 }];
-var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+var LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: toolbarMessages.threeColumns,
@@ -95,6 +98,35 @@ var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   icon: LayoutThreeWithLeftSidebarsIcon,
   iconFallback: LayoutThreeWithLeftSidebarsIcon
 }];
+var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
+  id: 'editor.layout.twoRightSidebar',
+  type: 'two_right_sidebar',
+  title: toolbarMessages.rightSidebar,
+  icon: LayoutTwoColumnsSidebarRightIcon
+}, {
+  id: 'editor.layout.twoLeftSidebar',
+  type: 'two_left_sidebar',
+  title: toolbarMessages.leftSidebar,
+  icon: LayoutTwoColumnsSidebarLeftIcon
+}];
+var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+  id: 'editor.layout.threeWithSidebars',
+  type: 'three_with_sidebars',
+  title: toolbarMessages.threeColumnsWithSidebars,
+  icon: LayoutThreeColumnsSidebarsIcon
+}, {
+  id: 'editor.layout.threeRightSidebars',
+  type: 'three_right_sidebars',
+  title: toolbarMessages.threeColumnsWithRightSidebars,
+  icon: LayoutThreeWithRightSidebarsIcon,
+  iconFallback: LayoutThreeWithRightSidebarsIcon
+}, {
+  id: 'editor.layout.threeLeftSidebars',
+  type: 'three_left_sidebars',
+  title: toolbarMessages.threeColumnsWithLeftSidebars,
+  icon: LayoutThreeWithLeftSidebarsIcon,
+  iconFallback: LayoutThreeWithLeftSidebarsIcon
+}];
 var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
   return {
     id: item.id,
@@ -109,7 +141,9 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
   };
 };
 export var layoutToolbarTitle = 'Layout floating controls';
-var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
+var iconPlaceholder = /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+  label: ""
+}); // TODO: ED-25466 - Replace with proper icon
 
 var getLayoutColumnsIcons = function getLayoutColumnsIcons(colCount) {
   if (!editorExperiment('single_column_layouts', true) && !editorExperiment('platform_editor_controls', 'variant1')) {
@@ -136,11 +170,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,
@@ -148,7 +186,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 = 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(layoutMessages.columnOption, {
       count: 2
@@ -182,7 +221,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
-  var singleColumnOption = allowAdvancedSingleColumnLayout ? {
+  var dropdownOptions = [].concat(_toConsumableArray(allowAdvancedSingleColumnLayout ? [{
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: 1
     }),
@@ -190,19 +229,39 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
     icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
-  } : [];
+  }] : []), columnOptions);
+  var distributeColumnsButton = isLayoutColumnMenuEnabled && numberOfColumns > 1 ? {
+    disabled: isDistributedUniformly(getLayoutColumnWidths(node)),
+    icon: TableColumnsDistributeIcon,
+    onClick: function onClick(editorState, dispatch) {
+      var tr = distributeLayoutColumns(editorAnalyticsAPI)({
+        inputMethod: 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(layoutMessages.distributeColumns),
+    type: 'button'
+  } : undefined;
   return [{
     type: 'dropdown',
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: numberOfColumns
     }),
     //`${numberOfColumns}-columns`,
-    options: [singleColumnOption, columnOptions].flat(),
+    options: dropdownOptions,
     showSelected: true,
     testId: 'column-options-button'
-  }].concat(_toConsumableArray(distributionOptions.length > 0 ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
+  }].concat(_toConsumableArray(distributionOptions.length > 0 || distributeColumnsButton ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
     return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
-  }) : []));
+  }) : []), _toConsumableArray(distributeColumnsButton ? [distributeColumnsButton] : []));
 };
 var fullHeightSeparator = {
   type: 'separator',
@@ -291,7 +350,6 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
         addSidebarLayouts: addSidebarLayouts,
         intl: intl,
         editorAnalyticsAPI: editorAnalyticsAPI,
-        state: state,
         nodeType: nodeType,
         node: node,
         separator: separator,

package/dist/types/layoutPluginType.d.ts

@@ -8,6 +8,7 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 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 { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { deleteLayoutColumn, distributeLayoutColumns, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
@@ -22,7 +23,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<BlockMenuPlugin>,
     OptionalPlugin<ToolbarPlugin>,
-    OptionalPlugin<UiControlRegistryPlugin>
+    OptionalPlugin<UiControlRegistryPlugin>,
+    OptionalPlugin<UserIntentPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {

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

@@ -35,7 +35,11 @@ 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;
+type DistributeLayoutColumnsOptions = {
+    inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
+    target?: 'selectedColumns' | 'allColumns';
+};
+export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
 export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
     anchorPos?: number;
     isOpen?: boolean;

package/dist/types/pm-plugins/utils/layout-column-selection.d.ts

@@ -1,18 +1,19 @@
 import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-export type SelectedLayoutColumn = {
-    index: number;
+import { type Selection } from '@atlaskit/editor-prosemirror/state';
+type FoundNode = {
     node: PMNode;
     pos: number;
 };
 export type SelectedLayoutColumns = {
+    endIndex: number;
     layoutSectionNode: PMNode;
     layoutSectionPos: number;
-    selectedColumnIndices: number[];
-    selectedColumns: SelectedLayoutColumn[];
+    selectedLayoutColumns: FoundNode[];
+    startIndex: number;
 };
-export declare const getSelectedLayoutColumns: (selection: Selection | undefined) => SelectedLayoutColumns | undefined;
-export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
+export declare const getSelectedLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
+export declare const getAllLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
 export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;
-export declare const getLayoutColumnMenuAnchorPos: (selection: Selection | undefined, anchorPosFromHandle?: number) => number | undefined;
+export declare const getLayoutColumnMenuAnchorPos: (selection: Selection, anchorPosFromHandle?: number) => number | undefined;
+export {};

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

@@ -2,6 +2,7 @@ import type { MenuItemType, MenuSectionType, MenuType, NestedMenuType } from '@a
 export declare const LAYOUT_COLUMN_MENU: MenuType;
 export declare const LAYOUT_COLUMN_MENU_SECTION: MenuSectionType;
 export declare const LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION: MenuSectionType;
+export declare const LAYOUT_COLUMN_DANGER_SECTION: MenuSectionType;
 export declare const LAYOUT_COLUMN_MENU_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU: NestedMenuType;
 export declare const INSERT_COLUMN_LEFT_MENU_ITEM: MenuItemType;
@@ -12,5 +13,6 @@ export declare const VERTICAL_ALIGN_MIDDLE_MENU_ITEM: MenuItemType;
 export declare const VERTICAL_ALIGN_BOTTOM_MENU_ITEM: MenuItemType;
 export declare const DELETE_COLUMN_MENU_ITEM: MenuItemType;
 export declare const LAYOUT_COLUMN_MENU_SECTION_RANK: Record<string, number>;
+export declare const LAYOUT_COLUMN_DANGER_SECTION_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU_SECTION_RANK: Record<string, number>;

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

@@ -1,5 +1,5 @@
 import type { Valign } from '@atlaskit/adf-schema/layout-column';
-import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
-type VerticalAlignIcon = typeof AlignContentTopIcon;
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
+type VerticalAlignIcon = typeof AlignPositionTopIcon;
 export declare const VERTICAL_ALIGN_ICONS: Record<Valign, VerticalAlignIcon>;
 export {};

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

@@ -8,6 +8,7 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 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 { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { deleteLayoutColumn, distributeLayoutColumns, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
@@ -22,7 +23,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<BlockMenuPlugin>,
     OptionalPlugin<ToolbarPlugin>,
-    OptionalPlugin<UiControlRegistryPlugin>
+    OptionalPlugin<UiControlRegistryPlugin>,
+    OptionalPlugin<UserIntentPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     actions: {

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

@@ -35,7 +35,11 @@ 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;
+type DistributeLayoutColumnsOptions = {
+    inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
+    target?: 'selectedColumns' | 'allColumns';
+};
+export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
 export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
     anchorPos?: number;
     isOpen?: boolean;

package/dist/types-ts4.5/pm-plugins/utils/layout-column-selection.d.ts

@@ -1,18 +1,19 @@
 import type { Valign } from '@atlaskit/adf-schema/layout-column';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-export type SelectedLayoutColumn = {
-    index: number;
+import { type Selection } from '@atlaskit/editor-prosemirror/state';
+type FoundNode = {
     node: PMNode;
     pos: number;
 };
 export type SelectedLayoutColumns = {
+    endIndex: number;
     layoutSectionNode: PMNode;
     layoutSectionPos: number;
-    selectedColumnIndices: number[];
-    selectedColumns: SelectedLayoutColumn[];
+    selectedLayoutColumns: FoundNode[];
+    startIndex: number;
 };
-export declare const getSelectedLayoutColumns: (selection: Selection | undefined) => SelectedLayoutColumns | undefined;
-export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
+export declare const getSelectedLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
+export declare const getAllLayoutColumnsFromSelection: (selection: Selection) => SelectedLayoutColumns | undefined;
 export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;
-export declare const getLayoutColumnMenuAnchorPos: (selection: Selection | undefined, anchorPosFromHandle?: number) => number | undefined;
+export declare const getLayoutColumnMenuAnchorPos: (selection: Selection, anchorPosFromHandle?: number) => number | undefined;
+export {};

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

@@ -2,6 +2,7 @@ import type { MenuItemType, MenuSectionType, MenuType, NestedMenuType } from '@a
 export declare const LAYOUT_COLUMN_MENU: MenuType;
 export declare const LAYOUT_COLUMN_MENU_SECTION: MenuSectionType;
 export declare const LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION: MenuSectionType;
+export declare const LAYOUT_COLUMN_DANGER_SECTION: MenuSectionType;
 export declare const LAYOUT_COLUMN_MENU_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU: NestedMenuType;
 export declare const INSERT_COLUMN_LEFT_MENU_ITEM: MenuItemType;
@@ -12,5 +13,6 @@ export declare const VERTICAL_ALIGN_MIDDLE_MENU_ITEM: MenuItemType;
 export declare const VERTICAL_ALIGN_BOTTOM_MENU_ITEM: MenuItemType;
 export declare const DELETE_COLUMN_MENU_ITEM: MenuItemType;
 export declare const LAYOUT_COLUMN_MENU_SECTION_RANK: Record<string, number>;
+export declare const LAYOUT_COLUMN_DANGER_SECTION_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU_SECTION_RANK: Record<string, number>;

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

@@ -1,5 +1,5 @@
 import type { Valign } from '@atlaskit/adf-schema/layout-column';
-import AlignContentTopIcon from '@atlaskit/icon-lab/core/align-content-top';
-type VerticalAlignIcon = typeof AlignContentTopIcon;
+import AlignPositionTopIcon from '@atlaskit/icon-lab/core/align-position-top';
+type VerticalAlignIcon = typeof AlignPositionTopIcon;
 export declare const VERTICAL_ALIGN_ICONS: Record<Valign, VerticalAlignIcon>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.8.1",
+	"version": "10.9.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,10 +40,11 @@
 		"@atlaskit/editor-plugin-selection": "^10.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^4.1.0",
+		"@atlaskit/editor-plugin-user-intent": "^8.2.0",
 		"@atlaskit/editor-plugin-width": "^11.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
-		"@atlaskit/editor-toolbar": "^1.8.0",
+		"@atlaskit/editor-toolbar": "^1.9.0",
 		"@atlaskit/editor-ui-control-model": "^1.2.0",
 		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/icon-lab": "^6.12.0",
@@ -55,7 +56,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.50.0",
+		"@atlaskit/editor-common": "^114.54.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},