@atlaskit/editor-plugin-layout 10.8.1 → 10.9.0

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

@@ -1,123 +1,81 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-var isLayoutColumn = function isLayoutColumn(node) {
-  return (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn';
+import { findChildrenByType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+var findLayoutSectionFromSelection = function findLayoutSectionFromSelection(selection) {
+  return findParentNodeOfType(selection.$from.doc.type.schema.nodes.layoutSection)(selection);
 };
-var isLayoutSection = function isLayoutSection(node) {
-  return (node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection';
-};
-var getLayoutColumnIndexAtPos = function getLayoutColumnIndexAtPos($pos) {
-  for (var depth = $pos.depth; depth > 0; depth--) {
-    if (isLayoutColumn($pos.node(depth)) && isLayoutSection($pos.node(depth - 1))) {
-      return $pos.index(depth - 1);
-    }
-  }
-  return undefined;
-};
-var getLayoutSectionDepth = function getLayoutSectionDepth(selection) {
-  var $from = selection.$from,
-    $to = selection.$to;
-  var sharedDepth = $from.sharedDepth($to.pos);
-  for (var depth = sharedDepth; depth > 0; depth--) {
-    if (isLayoutSection($from.node(depth))) {
-      return depth;
-    }
-  }
-  return undefined;
-};
-export var getSelectedLayoutColumns = function getSelectedLayoutColumns(selection) {
-  if (!selection) {
-    return undefined;
-  }
-  if (selection instanceof NodeSelection && isLayoutColumn(selection.node)) {
-    var _$from = selection.$from;
-    var _layoutSectionNode = _$from.parent;
-    if (!isLayoutSection(_layoutSectionNode)) {
-      return undefined;
-    }
-    var selectedColumnIndex = _$from.index(_$from.depth);
+var findLayoutColumnsFromLayoutSection = function findLayoutColumnsFromLayoutSection(layoutSectionNode) {
+  var layoutSectionPos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return findChildrenByType(layoutSectionNode, layoutSectionNode.type.schema.nodes.layoutColumn).map(function (_ref) {
+    var node = _ref.node,
+      pos = _ref.pos;
     return {
-      layoutSectionNode: _layoutSectionNode,
-      layoutSectionPos: _$from.before(_$from.depth),
-      selectedColumnIndices: [selectedColumnIndex],
-      selectedColumns: [{
-        index: selectedColumnIndex,
-        node: selection.node,
-        pos: selection.from
-      }]
+      node: node,
+      pos: pos + layoutSectionPos + 1
     };
-  }
-  if (selection.empty) {
-    return undefined;
-  }
-  if (!editorExperiment('platform_editor_block_menu', true)) {
+  });
+};
+export var getSelectedLayoutColumnsFromSelection = function getSelectedLayoutColumnsFromSelection(selection) {
+  var layoutSection = findLayoutSectionFromSelection(selection);
+  if (!layoutSection) {
     return undefined;
   }
-  var layoutSectionDepth = getLayoutSectionDepth(selection);
-  if (layoutSectionDepth === undefined) {
+  var layoutSectionNode = layoutSection.node,
+    layoutSectionPos = layoutSection.pos;
+  var allLayoutColumns = findLayoutColumnsFromLayoutSection(layoutSectionNode, layoutSectionPos);
+  if (!allLayoutColumns.length) {
     return undefined;
   }
-  var $from = selection.$from,
-    $to = selection.$to;
-  var layoutSectionNode = $from.node(layoutSectionDepth);
-  var layoutSectionPos = $from.before(layoutSectionDepth);
-  var selectedColumns = [];
-  var invalidSelection = false;
-  layoutSectionNode.forEach(function (column, offset, index) {
-    var columnStart = layoutSectionPos + 1 + offset;
-    var columnEnd = columnStart + column.nodeSize;
-    var intersectsColumn = selection.from < columnEnd && selection.to > columnStart;
-    if (!intersectsColumn) {
-      return;
+  var startIndex = -1;
+  var endIndex = -1;
+  var selectedLayoutColumns = allLayoutColumns.filter(function (_ref2, index) {
+    var node = _ref2.node,
+      pos = _ref2.pos;
+    var isSelected = selection.from <= pos && selection.to >= pos + node.nodeSize;
+    if (isSelected) {
+      if (startIndex === -1) {
+        startIndex = index;
+      }
+      endIndex = index;
     }
-    if (!isLayoutColumn(column)) {
-      invalidSelection = true;
-      return;
-    }
-    selectedColumns.push({
-      index: 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: layoutSectionNode,
+    layoutSectionPos: layoutSectionPos,
+    selectedLayoutColumns: selectedLayoutColumns,
+    startIndex: startIndex,
+    endIndex: endIndex
+  };
+};
+export var getAllLayoutColumnsFromSelection = function getAllLayoutColumnsFromSelection(selection) {
+  var layoutSection = findLayoutSectionFromSelection(selection);
+  if (!layoutSection) {
     return undefined;
   }
-  var firstColumn = selectedColumns[0];
-  var lastColumn = selectedColumns[selectedColumns.length - 1];
-  var startColumnIndex = getLayoutColumnIndexAtPos($from);
-  var endColumnIndex = getLayoutColumnIndexAtPos($to);
-  if (startColumnIndex !== undefined && startColumnIndex !== firstColumn.index || endColumnIndex !== undefined && endColumnIndex !== lastColumn.index) {
+  var layoutColumns = findLayoutColumnsFromLayoutSection(layoutSection.node, layoutSection.pos);
+  if (!(layoutColumns !== null && layoutColumns !== void 0 && layoutColumns.length)) {
     return undefined;
   }
   return {
-    layoutSectionNode: layoutSectionNode,
-    layoutSectionPos: layoutSectionPos,
-    selectedColumnIndices: selectedColumns.map(function (_ref) {
-      var index = _ref.index;
-      return index;
-    }),
-    selectedColumns: selectedColumns
+    layoutSectionNode: layoutSection.node,
+    layoutSectionPos: layoutSection.pos,
+    selectedLayoutColumns: layoutColumns,
+    startIndex: 0,
+    endIndex: layoutColumns.length - 1
   };
 };
-export var getLayoutSectionColumnCount = function getLayoutSectionColumnCount(layoutSection) {
-  return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
-};
 export var getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
-  var _ref2;
-  return layoutColumn ? (_ref2 = layoutColumn.attrs.valign) !== null && _ref2 !== void 0 ? _ref2 : 'top' : undefined;
+  var _ref3;
+  return layoutColumn ? (_ref3 = layoutColumn.attrs.valign) !== null && _ref3 !== void 0 ? _ref3 : 'top' : undefined;
 };
 export var getLayoutColumnMenuAnchorPos = function getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle) {
   var _clickedSelectedColum, _selectedLayoutColumn;
-  var selectedLayoutColumns = getSelectedLayoutColumns(selection);
+  var selectedLayoutColumns = getSelectedLayoutColumnsFromSelection(selection);
   if (!selectedLayoutColumns) {
     return undefined;
   }
-  var clickedSelectedColumn = selectedLayoutColumns.selectedColumns.find(function (_ref3) {
-    var pos = _ref3.pos;
+  var clickedSelectedColumn = selectedLayoutColumns.selectedLayoutColumns.find(function (_ref4) {
+    var pos = _ref4.pos;
     return 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/esm/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js

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

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

@@ -1,5 +1,6 @@
 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';
@@ -8,12 +9,16 @@ export var DistributeColumnsDropdownItem = function DistributeColumnsDropdownIte
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var selectedLayoutColumns = useSelectedLayoutColumns(api);
+  var selectedLayoutColumnsResult = useSelectedLayoutColumns(api);
+  var _ref2 = selectedLayoutColumnsResult !== null && selectedLayoutColumnsResult !== void 0 ? selectedLayoutColumnsResult : {},
+    selectedLayoutColumns = _ref2.selectedLayoutColumns;
   var handleClick = useCallback(function () {
     var _api$core;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
       var _api$layout, _api$layout2;
-      var tr = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns(props);
+      var tr = api === null || api === 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,15 +31,15 @@ export var DistributeColumnsDropdownItem = function DistributeColumnsDropdownIte
     });
   }, [api]);
   var isAlreadyUniform = useMemo(function () {
-    if (!selectedLayoutColumns || selectedLayoutColumns.selectedColumns.length < 2) {
+    if (!selectedLayoutColumns || selectedLayoutColumns.length < 2) {
       return false;
     }
-    var selectedWidths = selectedLayoutColumns.selectedColumns.map(function (col) {
+    var selectedWidths = selectedLayoutColumns.map(function (col) {
       return col.node.attrs.width;
     });
     return isDistributedUniformly(selectedWidths);
   }, [selectedLayoutColumns]);
-  if (selectedLayoutColumns === undefined || selectedLayoutColumns.selectedColumns.length < 2) {
+  if (selectedLayoutColumns === undefined || selectedLayoutColumns.length < 2) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

package/dist/esm/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';
 var INSERT_COLUMN_OPTIONS = {
   left: {
@@ -18,6 +17,7 @@ var INSERT_COLUMN_OPTIONS = {
   }
 };
 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) {

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

@@ -18,7 +18,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;
   }

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/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,40 @@ 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: 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 +351,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

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

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

@@ -5,6 +5,13 @@ import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Change, PresetLayout } from '../types';
+export type DistributeLayoutColumnsOptions = {
+    inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
+    target?: 'selectedColumns' | 'allColumns';
+};
+type DistributeLayoutColumnsActionOptions = DistributeLayoutColumnsOptions & {
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
+};
 export declare const ONE_COL_LAYOUTS: PresetLayout[];
 export declare const TWO_COL_LAYOUTS: PresetLayout[];
 export declare const THREE_COL_LAYOUTS: PresetLayout[];
@@ -35,7 +42,8 @@ export type InsertLayoutColumnSide = 'left' | 'right';
 export declare function getEffectiveMaxLayoutColumns(): number;
 export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
-export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB) => EditorCommand;
+export declare const distributeLayoutColumns: ({ editorAnalyticsAPI, inputMethod, target, }?: DistributeLayoutColumnsActionOptions) => EditorCommand;
+export declare const createDistributeLayoutColumnsCommand: (editorAnalyticsAPI?: EditorAnalyticsAPI) => (options?: 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;
+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/layoutPluginType.d.ts

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

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

@@ -5,6 +5,13 @@ import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Change, PresetLayout } from '../types';
+export type DistributeLayoutColumnsOptions = {
+    inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
+    target?: 'selectedColumns' | 'allColumns';
+};
+type DistributeLayoutColumnsActionOptions = DistributeLayoutColumnsOptions & {
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
+};
 export declare const ONE_COL_LAYOUTS: PresetLayout[];
 export declare const TWO_COL_LAYOUTS: PresetLayout[];
 export declare const THREE_COL_LAYOUTS: PresetLayout[];
@@ -35,7 +42,8 @@ export type InsertLayoutColumnSide = 'left' | 'right';
 export declare function getEffectiveMaxLayoutColumns(): number;
 export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
-export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB) => EditorCommand;
+export declare const distributeLayoutColumns: ({ editorAnalyticsAPI, inputMethod, target, }?: DistributeLayoutColumnsActionOptions) => EditorCommand;
+export declare const createDistributeLayoutColumnsCommand: (editorAnalyticsAPI?: EditorAnalyticsAPI) => (options?: 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;
+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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "10.8.1",
+	"version": "10.9.0",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,7 +43,7 @@
 		"@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 +55,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.50.0",
+		"@atlaskit/editor-common": "^114.51.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},