@atlaskit/editor-plugin-layout 10.8.0 → 10.9.0

package/dist/es2019/pm-plugins/utils/layout-column-selection.js

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

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

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

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

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

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

@@ -3,7 +3,6 @@ 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';
 const INSERT_COLUMN_OPTIONS = {
   left: {
@@ -21,6 +20,7 @@ export const InsertColumnDropdownItem = ({
   api,
   side
 }) => {
+  var _selectedLayoutColumn, _selectedLayoutColumn2;
   const {
     formatMessage
   } = useIntl();
@@ -29,7 +29,7 @@ export const InsertColumnDropdownItem = ({
     label
   } = INSERT_COLUMN_OPTIONS[side];
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
-  const columnCount = getLayoutSectionColumnCount(selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.layoutSectionNode);
+  const columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
   const maxColumnCount = getEffectiveMaxLayoutColumns();
   const canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
   const onClick = useCallback(() => {

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

@@ -14,7 +14,7 @@ export const VerticalAlignDropdownItem = ({
     formatMessage
   } = useIntl();
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
-  const isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns.every(({
+  const isSelected = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns.every(({
     node
   }) => getLayoutColumnValign(node) === value)) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : false;
   const Icon = VERTICAL_ALIGN_ICONS[value];

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

@@ -14,7 +14,7 @@ export const VerticalAlignNestedMenu = ({
   } = useIntl();
   const selectedLayoutColumns = useSelectedLayoutColumns(api);
   const currentValign = useMemo(() => {
-    const selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedColumns;
+    const selectedColumns = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : selectedLayoutColumns.selectedLayoutColumns;
     const firstColumn = selectedColumns === null || selectedColumns === void 0 ? void 0 : selectedColumns[0];
     const firstValign = getLayoutColumnValign(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.node);
     if (!firstValign || !(selectedColumns !== null && selectedColumns !== void 0 && selectedColumns.every(({

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

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

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

@@ -1,6 +1,8 @@
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { getSelectedLayoutColumns } from '../../pm-plugins/utils/layout-column-selection';
-export const useSelectedLayoutColumns = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
-  var _states$selectionStat;
-  return getSelectedLayoutColumns((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+import { getSelectedLayoutColumnsFromSelection } from '../../pm-plugins/utils/layout-column-selection';
+export const useSelectedLayoutColumns = api => useSharedPluginStateWithSelector(api, ['selection'], ({
+  selectionState
+}) => {
+  const 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/es2019/ui/toolbar.js

@@ -12,8 +12,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';
@@ -52,7 +55,7 @@ const SIDEBAR_LAYOUT_TYPES = [{
 }];
 
 // These are used for advanced layout options
-const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
+const LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
   title: toolbarMessages.twoColumns,
@@ -68,7 +71,7 @@ const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
   title: toolbarMessages.leftSidebar,
   icon: LayoutTwoColumnsSidebarLeftIcon
 }];
-const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
+const LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD = [{
   id: 'editor.layout.threeEquals',
   type: 'three_equal',
   title: toolbarMessages.threeColumns,
@@ -91,6 +94,35 @@ const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
   icon: LayoutThreeWithLeftSidebarsIcon,
   iconFallback: LayoutThreeWithLeftSidebarsIcon
 }];
+const 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
+}];
+const 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
+}];
 const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   id: item.id,
   type: 'button',
@@ -103,7 +135,9 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
   tabIndex: null
 });
 export const layoutToolbarTitle = 'Layout floating controls';
-const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
+const iconPlaceholder = /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+  label: ""
+}); // TODO: ED-25466 - Replace with proper icon
 
 const getLayoutColumnsIcons = colCount => {
   if (!editorExperiment('single_column_layouts', true) && !editorExperiment('platform_editor_controls', 'variant1')) {
@@ -130,11 +164,13 @@ const getLayoutColumnsIcons = colCount => {
       return undefined;
   }
 };
+const getLayoutColumnWidths = node => {
+  return node.children.map(child => child.attrs.width);
+};
 const getAdvancedLayoutItems = ({
   addSidebarLayouts,
   intl,
   editorAnalyticsAPI,
-  state,
   node,
   nodeType,
   separator,
@@ -143,7 +179,8 @@ const getAdvancedLayoutItems = ({
   allowAdvancedSingleColumnLayout
 }) => {
   const numberOfColumns = node.content.childCount || 2;
-  const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
+  const isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
+  const 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 : [];
   const columnOptions = [{
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: 2
@@ -177,7 +214,7 @@ const getAdvancedLayoutItems = ({
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
-  const singleColumnOption = allowAdvancedSingleColumnLayout ? {
+  const dropdownOptions = [...(allowAdvancedSingleColumnLayout ? [{
     title: intl.formatMessage(layoutMessages.columnOption, {
       count: 1
     }),
@@ -185,17 +222,38 @@ const getAdvancedLayoutItems = ({
     icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
-  } : [];
+  }] : []), ...columnOptions];
+  const distributeColumnsButton = isLayoutColumnMenuEnabled && numberOfColumns > 1 ? {
+    disabled: isDistributedUniformly(getLayoutColumnWidths(node)),
+    icon: TableColumnsDistributeIcon,
+    onClick: (editorState, dispatch) => {
+      const tr = distributeLayoutColumns({
+        editorAnalyticsAPI,
+        inputMethod: INPUT_METHOD.FLOATING_TB,
+        target: 'allColumns'
+      })({
+        tr: editorState.tr
+      });
+      if (!tr) {
+        return false;
+      }
+      dispatch === null || dispatch === void 0 ? 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'
-  }, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])];
+  }, ...(distributionOptions.length > 0 || distributeColumnsButton ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), ...(distributeColumnsButton ? [distributeColumnsButton] : [])];
 };
 const fullHeightSeparator = {
   type: 'separator',
@@ -283,7 +341,6 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
         addSidebarLayouts,
         intl,
         editorAnalyticsAPI,
-        state,
         nodeType,
         node,
         separator,

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, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createDistributeLayoutColumnsCommand, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, 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';
@@ -50,7 +50,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
   return tr;
 };
 export var layoutPlugin = function layoutPlugin(_ref) {
-  var _api$analytics;
+  var _api$analytics, _api$analytics5;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -374,10 +374,7 @@ 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);
       },
-      distributeLayoutColumns: function distributeLayoutColumns(props) {
-        var _api$analytics5;
-        return _distributeLayoutColumns(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(props);
-      },
+      distributeLayoutColumns: createDistributeLayoutColumnsCommand(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
       insertLayoutColumn: function insertLayoutColumn(side) {
         var _api$analytics6;
         return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);