@atlaskit/editor-plugin-layout 10.8.1 → 10.9.1

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

@@ -1,121 +1,92 @@
 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;
-};
-const getLayoutSectionDepth = selection => {
+import { findChildrenByType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+const findLayoutSectionFromSelection = 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;
-};
-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);
+    layoutSection
+  } = selection.$from.doc.type.schema.nodes;
+  // NodeSelection on the layoutSection node itself
+  if (selection instanceof NodeSelection && selection.node.type === layoutSection) {
     return {
-      layoutSectionNode,
-      layoutSectionPos: $from.before($from.depth),
-      selectedColumnIndices: [selectedColumnIndex],
-      selectedColumns: [{
-        index: selectedColumnIndex,
-        node: selection.node,
-        pos: selection.from
-      }]
+      node: selection.node,
+      pos: selection.from
     };
   }
-  if (selection.empty) {
-    return undefined;
-  }
-  if (!editorExperiment('platform_editor_block_menu', true)) {
+  return findParentNodeOfType(layoutSection)(selection);
+};
+const findLayoutColumnsFromLayoutSection = (layoutSectionNode, layoutSectionPos = 0) => {
+  return findChildrenByType(layoutSectionNode, layoutSectionNode.type.schema.nodes.layoutColumn).map(({
+    node,
+    pos
+  }) => ({
+    node,
+    pos: pos + layoutSectionPos + 1
+  }));
+};
+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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
-import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { DeleteIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 const DeleteColumnDropdownItem = ({
   api
@@ -30,9 +30,14 @@ const DeleteColumnDropdownItem = ({
   if (selectedLayoutColumns === undefined) {
     return null;
   }
-  const selectedColumnCount = selectedLayoutColumns.selectedColumns.length;
+  const selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    onClick: onClick
+    onClick: onClick,
+    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
   }, formatMessage(layoutMessages.deleteColumn, {
     count: selectedColumnCount
   }));

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

@@ -1,7 +1,8 @@
 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 { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { isDistributedUniformly } from '../../pm-plugins/utils/layout-column-distribution';
 import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
 export const DistributeColumnsDropdownItem = ({
@@ -10,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;
       }
@@ -28,17 +34,22 @@ export const DistributeColumnsDropdownItem = ({
     });
   }, [api]);
   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 selectedWidths = selectedLayoutColumns.map(col => 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, {
     onClick: handleClick,
-    isDisabled: isAlreadyUniform
+    isDisabled: isAlreadyUniform,
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    })
   }, formatMessage(layoutMessages.distributeColumns));
 };

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

@@ -3,17 +3,16 @@ 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: {
     Icon: TableColumnAddLeftIcon,
-    label: layoutMessages.insertColumnLeft,
+    label: layoutMessages.addColumnLeft,
     side: 'left'
   },
   right: {
     Icon: TableColumnAddRightIcon,
-    label: layoutMessages.insertColumnRight,
+    label: layoutMessages.addColumnRight,
     side: 'right'
   }
 };
@@ -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(({
@@ -24,7 +24,7 @@ export const VerticalAlignNestedMenu = ({
     }
     return firstValign;
   }, [selectedLayoutColumns]);
-  const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.top;
+  const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : VERTICAL_ALIGN_ICONS.middle;
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(TriggerIcon, {
       label: "",

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

@@ -6,7 +6,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';
 const LayoutColumnMenuContainer = ({
@@ -63,15 +63,6 @@ export const getLayoutColumnMenuComponents = ({
       ...LAYOUT_COLUMN_MENU_SECTION,
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     }]
-  }, {
-    ...DELETE_COLUMN_MENU_ITEM,
-    component: () => /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
-      api: api
-    }),
-    parents: [{
-      ...LAYOUT_COLUMN_MENU_SECTION,
-      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
-    }]
   }, {
     ...VERTICAL_ALIGN_MENU,
     component: ({
@@ -122,5 +113,27 @@ export const getLayoutColumnMenuComponents = ({
       ...LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION,
       rank: VERTICAL_ALIGN_MENU_SECTION_RANK[VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key]
     }]
+  },
+  // --- Danger section (Delete column) ---
+  {
+    ...LAYOUT_COLUMN_DANGER_SECTION,
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+      hasSeparator: true
+    }, children),
+    parents: [{
+      ...LAYOUT_COLUMN_MENU,
+      rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_DANGER_SECTION.key]
+    }]
+  }, {
+    ...DELETE_COLUMN_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
+      api: api
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_DANGER_SECTION,
+      rank: LAYOUT_COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
+    }]
   }];
 };

package/dist/es2019/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 @@ 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;
   }
@@ -96,6 +97,9 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     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 const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     components: components,
     fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
     surface: LAYOUT_COLUMN_MENU
-  })));
+  }))));
 });

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

@@ -15,8 +15,13 @@ export const LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = {
   type: 'menu-section',
   key: 'layout-column-vertical-align-menu-section'
 };
+export const LAYOUT_COLUMN_DANGER_SECTION = {
+  type: 'menu-section',
+  key: 'layout-column-danger-section'
+};
 export const LAYOUT_COLUMN_MENU_RANK = {
-  [LAYOUT_COLUMN_MENU_SECTION.key]: 100
+  [LAYOUT_COLUMN_MENU_SECTION.key]: 100,
+  [LAYOUT_COLUMN_DANGER_SECTION.key]: 200
 };
 
 // --- Menus ---
@@ -63,8 +68,10 @@ export const LAYOUT_COLUMN_MENU_SECTION_RANK = {
   [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
+  [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 400
+};
+export const LAYOUT_COLUMN_DANGER_SECTION_RANK = {
+  [DELETE_COLUMN_MENU_ITEM.key]: 100
 };
 export const VERTICAL_ALIGN_MENU_RANK = {
   [LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]: 100

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/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 const VERTICAL_ALIGN_ICONS = {
-  top: AlignContentTopIcon,
-  middle: AlignContentCenterVerticalIcon,
-  bottom: AlignContentBottomIcon
+  top: AlignPositionTopIcon,
+  middle: AlignPositionCenterVerticalIcon,
+  bottom: AlignPositionBottomIcon
 };

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,37 @@ 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 +340,6 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
         addSidebarLayouts,
         intl,
         editorAnalyticsAPI,
-        state,
         nodeType,
         node,
         separator,