@atlaskit/editor-plugin-layout 10.3.4 → 10.4.0

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

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+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 './layoutColumnSelection';
+import { useCurrentLayoutColumn, useCurrentLayoutSection } from './useCurrentLayoutColumn';
+const INSERT_COLUMN_OPTIONS = {
+  left: {
+    Icon: TableColumnAddLeftIcon,
+    label: layoutMessages.insertColumnLeft,
+    side: 'left'
+  },
+  right: {
+    Icon: TableColumnAddRightIcon,
+    label: layoutMessages.insertColumnRight,
+    side: 'right'
+  }
+};
+export const InsertColumnDropdownItem = ({
+  api,
+  side
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    Icon,
+    label
+  } = INSERT_COLUMN_OPTIONS[side];
+  const currentColumn = useCurrentLayoutColumn(api);
+  const currentLayoutSection = useCurrentLayoutSection(api);
+  const columnCount = getLayoutSectionColumnCount(currentLayoutSection);
+  const maxColumnCount = getEffectiveMaxLayoutColumns();
+  const canInsertColumn = currentColumn !== undefined && columnCount < maxColumnCount;
+  const onClick = useCallback(() => {
+    var _api$layout, _api$core;
+    const insertCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);
+    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$layout2;
+      const tr = insertCommand === null || insertCommand === void 0 ? void 0 : insertCommand(props);
+      if (!tr) {
+        return tr !== null && tr !== void 0 ? tr : null;
+      }
+      api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
+        isOpen: false
+      })({
+        tr
+      });
+      return tr;
+    });
+  }, [api, side]);
+  if (!canInsertColumn) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    onClick: onClick
+  }, formatMessage(label));
+};

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

@@ -1,7 +1,8 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
-import { useCurrentLayoutColumnValign } from './useCurrentLayoutColumnValign';
+import { getLayoutColumnValign } from './layoutColumnSelection';
+import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
 export const VerticalAlignDropdownItem = ({
   api,
@@ -11,25 +12,19 @@ export const VerticalAlignDropdownItem = ({
   const {
     formatMessage
   } = useIntl();
-  const {
-    currentValign,
-    selectedColumn
-  } = useCurrentLayoutColumnValign(api);
+  const currentColumn = useCurrentLayoutColumn(api);
+  const currentValign = useMemo(() => getLayoutColumnValign(currentColumn), [currentColumn]);
   const Icon = VERTICAL_ALIGN_ICONS[value];
   const onClick = useCallback(() => {
     var _api$core, _api$layout;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.setLayoutColumnValign(value));
   }, [api, value]);
-  if (!selectedColumn) {
-    return null;
-  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(Icon, {
       label: "",
       size: "small"
     }),
     isSelected: currentValign === value,
-    onClick: onClick,
-    testId: `layout-column-align-${value}`
+    onClick: onClick
   }, formatMessage(label));
 };

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { LayoutIcon, NestedDropdownRightIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import { useCurrentLayoutColumnValign } from './useCurrentLayoutColumnValign';
+import { getLayoutColumnValign } from './layoutColumnSelection';
+import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
 import { VERTICAL_ALIGN_ICONS } from './verticalAlignIcons';
 export const VerticalAlignNestedMenu = ({
   api,
@@ -11,12 +12,10 @@ export const VerticalAlignNestedMenu = ({
   const {
     formatMessage
   } = useIntl();
-  const {
-    currentValign,
-    selectedColumn
-  } = useCurrentLayoutColumnValign(api);
+  const currentColumn = useCurrentLayoutColumn(api);
+  const currentValign = useMemo(() => getLayoutColumnValign(currentColumn), [currentColumn]);
   const TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
-  if (!selectedColumn) {
+  if (!currentColumn) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
@@ -28,8 +27,6 @@ export const VerticalAlignNestedMenu = ({
       label: "",
       size: "small"
     }),
-    text: formatMessage(layoutMessages.alignColumn),
-    testId: "layout-column-align-menu",
-    dropdownTestId: "layout-column-align-dropdown"
+    text: formatMessage(layoutMessages.alignColumn)
   }, children);
 };

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

@@ -2,8 +2,10 @@ import React from 'react';
 import { layoutMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
+import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
 import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
-import { DISTRIBUTE_COLUMNS_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 { 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 { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
 import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
 export const LAYOUT_COLUMN_MENU_FALLBACKS = {
@@ -23,6 +25,26 @@ export const getLayoutColumnMenuComponents = ({
       ...LAYOUT_COLUMN_MENU,
       rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
     }]
+  }, {
+    ...INSERT_COLUMN_LEFT_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(InsertColumnDropdownItem, {
+      api: api,
+      side: "left"
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_MENU_SECTION,
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_LEFT_MENU_ITEM.key]
+    }]
+  }, {
+    ...INSERT_COLUMN_RIGHT_MENU_ITEM,
+    component: () => /*#__PURE__*/React.createElement(InsertColumnDropdownItem, {
+      api: api,
+      side: "right"
+    }),
+    parents: [{
+      ...LAYOUT_COLUMN_MENU_SECTION,
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_RIGHT_MENU_ITEM.key]
+    }]
   }, {
     ...DISTRIBUTE_COLUMNS_MENU_ITEM,
     component: createDistributeColumnsDropdownItem(api),
@@ -30,6 +52,15 @@ 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: ({

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

@@ -1,25 +1,33 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
+import { getLayoutColumnAtSelection } from './layoutColumnSelection';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
-const getLayoutColumnMenuTarget = (editorView, selectionAnchorPos) => {
-  if (selectionAnchorPos === undefined) {
+const FALLBACK_MENU_HEIGHT = 300;
+const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+
+/**
+ * Returns the drag handle button for the selected layout column.
+ */
+const getLayoutColumnMenuTarget = (editorView, selection) => {
+  var _columnDomRef$parentE;
+  if (!getLayoutColumnAtSelection(selection) || (selection === null || selection === void 0 ? void 0 : selection.from) === undefined) {
     return null;
   }
-  const selectionNode = editorView.state.doc.nodeAt(selectionAnchorPos);
-  if ((selectionNode === null || selectionNode === void 0 ? void 0 : selectionNode.type.name) !== 'layoutColumn') {
+  const columnDomRef = editorView.nodeDOM(selection.from);
+  if (!(columnDomRef instanceof HTMLElement)) {
     return null;
   }
-  return findDomRefAtPos(selectionAnchorPos, editorView.domAtPos.bind(editorView));
+  const dragHandleContainer = (_columnDomRef$parentE = columnDomRef.parentElement) === null || _columnDomRef$parentE === void 0 ? void 0 : _columnDomRef$parentE.querySelector(':scope > [data-blocks-drag-handle-container]');
+  return dragHandleContainer === null || dragHandleContainer === void 0 ? void 0 : dragHandleContainer.querySelector(DRAG_HANDLE_SELECTOR);
 };
 export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu({
   api,
@@ -41,6 +49,15 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   });
   const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   const menuRef = useRef(null);
+  const popupRef = useRef(undefined);
+  const [menuHeight, setMenuHeight] = React.useState(FALLBACK_MENU_HEIGHT);
+  useLayoutEffect(() => {
+    var _popupRef$current;
+    if (!isLayoutColumnMenuOpen) {
+      return;
+    }
+    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
+  }, [isLayoutColumnMenuOpen]);
   const closeLayoutColumnMenu = useCallback(() => {
     var _api$core, _api$layout;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
@@ -65,9 +82,12 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   const handleMenuRef = useCallback(el => {
     setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
     menuRef.current = el;
+    if (el) {
+      popupRef.current = el;
+    }
   }, [setOutsideClickTargetRef]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  const target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
+  const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection) : null, [editorView, isLayoutColumnMenuOpen, selection]);
   const hasValidTarget = target instanceof HTMLElement;
   useEffect(() => {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
@@ -82,10 +102,11 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     mountTo: mountTo,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    zIndex: akEditorFloatingPanelZIndex,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
-    alignY: "top",
-    forcePlacement: true,
+    fitHeight: menuHeight,
+    preventOverflow: true,
+    stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu

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

@@ -28,6 +28,14 @@ export const VERTICAL_ALIGN_MENU = {
 
 // --- Items ---
 
+export const INSERT_COLUMN_LEFT_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-insert-left-item'
+};
+export const INSERT_COLUMN_RIGHT_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-insert-right-item'
+};
 export const DISTRIBUTE_COLUMNS_MENU_ITEM = {
   type: 'menu-item',
   key: 'layout-column-menu-distribute-columns-item'
@@ -44,12 +52,19 @@ export const VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
   type: 'menu-item',
   key: 'layout-column-menu-vertical-align-bottom-item'
 };
+export const DELETE_COLUMN_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-delete-item'
+};
 
 // --- Item ranks within sections ---
 
 export const LAYOUT_COLUMN_MENU_SECTION_RANK = {
-  [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 100,
-  [VERTICAL_ALIGN_MENU.key]: 200
+  [VERTICAL_ALIGN_MENU.key]: 100,
+  [INSERT_COLUMN_LEFT_MENU_ITEM.key]: 200,
+  [INSERT_COLUMN_RIGHT_MENU_ITEM.key]: 300,
+  [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 400,
+  [DELETE_COLUMN_MENU_ITEM.key]: 500
 };
 export const VERTICAL_ALIGN_MENU_RANK = {
   [LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]: 100

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

@@ -0,0 +1,9 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const getLayoutColumnAtSelection = selection => selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
+export const getLayoutSectionAtSelection = selection => {
+  const selectedColumn = getLayoutColumnAtSelection(selection);
+  const parent = selectedColumn ? selection === null || selection === void 0 ? void 0 : selection.$from.parent : undefined;
+  return (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' ? parent : undefined;
+};
+export const getLayoutSectionColumnCount = layoutSection => (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
+export const getLayoutColumnValign = layoutColumn => layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;

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

@@ -0,0 +1,10 @@
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getLayoutColumnAtSelection, getLayoutSectionAtSelection } from './layoutColumnSelection';
+export const useCurrentLayoutColumn = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
+  var _states$selectionStat;
+  return getLayoutColumnAtSelection((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+});
+export const useCurrentLayoutSection = api => useSharedPluginStateWithSelector(api, ['selection'], states => {
+  var _states$selectionStat2;
+  return getLayoutSectionAtSelection((_states$selectionStat2 = states.selectionState) === null || _states$selectionStat2 === void 0 ? void 0 : _states$selectionStat2.selection);
+});

package/dist/esm/layoutPlugin.js

@@ -10,7 +10,7 @@ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, 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';
@@ -302,6 +302,14 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       return pluginKey.getState(editorState);
     },
     commands: {
+      deleteLayoutColumn: function deleteLayoutColumn(props) {
+        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);
+      },
+      insertLayoutColumn: function insertLayoutColumn(side) {
+        var _api$analytics5;
+        return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+      },
       setLayoutColumnValign: setLayoutColumnValign,
       toggleLayoutColumnMenu: toggleLayoutColumnMenu
     }

package/dist/esm/pm-plugins/actions.js

@@ -10,8 +10,9 @@ import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
+import { EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 import { pluginKey } from './plugin-key';
+import { redistributeAfterDeletion, redistributeProportionally } from './utils/redistribute-proportionally';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -540,9 +541,102 @@ var formatLayoutName = function formatLayoutName(layout) {
       return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
 };
+/**
+ * Returns the active maximum layout column count for the current advanced layouts experiment state.
+ */
+export function getEffectiveMaxLayoutColumns() {
+  return editorExperiment('advanced_layouts', true) ? MAX_LAYOUT_COLUMNS : MAX_STANDARD_LAYOUT_COLUMNS;
+}
+var getSelectedLayoutColumnInSection = function getSelectedLayoutColumnInSection(_ref4) {
+  var doc = _ref4.doc,
+    selection = _ref4.selection;
+  var _doc$type$schema$node = doc.type.schema.nodes,
+    layoutColumn = _doc$type$schema$node.layoutColumn,
+    layoutSection = _doc$type$schema$node.layoutSection;
+  if (!(selection instanceof NodeSelection) || selection.node.type !== layoutColumn) {
+    return;
+  }
+  var $from = selection.$from;
+  if ($from.parent.type !== layoutSection) {
+    return;
+  }
+  var selectedColumnIndex = $from.index($from.depth);
+  var selectedColumnNode = selection.node;
+  var selectedColumnPos = selection.from;
+  var layoutSectionPos = $from.before($from.depth);
+  return {
+    layoutSectionNode: $from.parent,
+    layoutSectionPos: layoutSectionPos,
+    selectedColumnIndex: selectedColumnIndex,
+    selectedColumnNode: selectedColumnNode,
+    selectedColumnPos: selectedColumnPos
+  };
+};
+var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAPI) {
+  return function (_ref5) {
+    var tr = _ref5.tr;
+    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return null;
+    }
+    var selectedColumn = getSelectedLayoutColumnInSection(tr);
+    if (!selectedColumn) {
+      return null;
+    }
+    var layoutSectionNode = selectedColumn.layoutSectionNode,
+      layoutSectionPos = selectedColumn.layoutSectionPos,
+      selectedColumnIndex = selectedColumn.selectedColumnIndex;
+    if (layoutSectionNode.childCount >= getEffectiveMaxLayoutColumns()) {
+      return null;
+    }
+    var insertIndex = side === 'left' ? selectedColumnIndex : selectedColumnIndex + 1;
+    var existingWidths = mapChildren(layoutSectionNode, function (column) {
+      return column.attrs.width;
+    });
+    var redistributedWidths = redistributeProportionally(existingWidths, insertIndex, getEffectiveMaxLayoutColumns(), MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+    if (redistributedWidths === existingWidths) {
+      return null;
+    }
+    var layoutColumn = tr.doc.type.schema.nodes.layoutColumn;
+    var newColumn = layoutColumn.createAndFill({
+      width: redistributedWidths[insertIndex]
+    });
+    if (!newColumn) {
+      return null;
+    }
+    var updatedColumns = [];
+    layoutSectionNode.forEach(function (column, _offset, index) {
+      if (index === insertIndex) {
+        updatedColumns.push(newColumn);
+      }
+      updatedColumns.push(column);
+    });
+    if (insertIndex === layoutSectionNode.childCount) {
+      updatedColumns.push(newColumn);
+    }
+    var updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(updatedColumns));
+    tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributedWidths));
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: redistributedWidths.length,
+        inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        selectedIndex: selectedColumnIndex,
+        side: side
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI) {
+  return insertLayoutColumnAt(side, editorAnalyticsAPI);
+};
 export var setLayoutColumnValign = function setLayoutColumnValign(valign) {
-  return function (_ref4) {
-    var tr = _ref4.tr;
+  return function (_ref6) {
+    var tr = _ref6.tr;
     if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -564,14 +658,69 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign) {
     return tr;
   };
 };
-export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref5) {
-  var isOpen = _ref5.isOpen;
-  return function (_ref6) {
-    var tr = _ref6.tr;
+export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref7) {
+  var isOpen = _ref7.isOpen;
+  return function (_ref8) {
+    var tr = _ref8.tr;
     tr.setMeta('toggleLayoutColumnMenu', {
       isOpen: isOpen
     });
     tr.setMeta('scrollIntoView', false);
     return tr;
   };
+};
+export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
+  return function (_ref9) {
+    var tr = _ref9.tr;
+    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return null;
+    }
+    var selectedColumn = getSelectedLayoutColumnInSection(tr);
+    if (!selectedColumn) {
+      return null;
+    }
+    var layoutSectionNode = selectedColumn.layoutSectionNode,
+      layoutSectionPos = selectedColumn.layoutSectionPos,
+      selectedColumnIndex = selectedColumn.selectedColumnIndex;
+    var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(columnCount) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.DELETED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+        attributes: {
+          columnCount: columnCount,
+          inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
+          selectedIndex: selectedColumnIndex
+        },
+        eventType: EVENT_TYPE.TRACK
+      })(tr);
+    };
+
+    // If only one column remains, remove the entire layoutSection
+    if (layoutSectionNode.childCount === 1) {
+      tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
+      emitDeleteColumnAnalytics(0);
+      tr.setMeta('scrollIntoView', false);
+      return tr;
+    }
+
+    // Build new column list without the selected column
+    var remainingColumns = [];
+    layoutSectionNode.forEach(function (column, _offset, index) {
+      if (index !== selectedColumnIndex) {
+        remainingColumns.push(column);
+      }
+    });
+
+    // Redistribute widths proportionally among remaining columns using shared utility
+    var existingWidths = mapChildren(layoutSectionNode, function (column) {
+      return column.attrs.width;
+    });
+    var redistributed = redistributeAfterDeletion(existingWidths, selectedColumnIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+    var updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(remainingColumns));
+    tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
+    emitDeleteColumnAnalytics(redistributed.length);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

package/dist/esm/pm-plugins/column-resize-divider.js

@@ -4,14 +4,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
+
 // Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
 var layoutColumnDividerClassName = 'layout-column-divider';
 var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
 var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
 
-// Minimum column width percentage to prevent columns from collapsing
-var MIN_COLUMN_WIDTH_PERCENT = 5;
-
 // Module-level drag state so it survives widget DOM recreation during transactions.
 var dragState = null;
 
@@ -72,12 +71,12 @@ var calcDragWidths = function calcDragWidths(clientX) {
   var deltaPercent = deltaX / columnsWidth * 100;
   var leftWidth = dragState.startLeftWidth + deltaPercent;
   var rightWidth = dragState.startRightWidth - deltaPercent;
-  if (leftWidth < MIN_COLUMN_WIDTH_PERCENT) {
-    leftWidth = MIN_COLUMN_WIDTH_PERCENT;
-    rightWidth = combinedWidth - MIN_COLUMN_WIDTH_PERCENT;
-  } else if (rightWidth < MIN_COLUMN_WIDTH_PERCENT) {
-    rightWidth = MIN_COLUMN_WIDTH_PERCENT;
-    leftWidth = combinedWidth - MIN_COLUMN_WIDTH_PERCENT;
+  if (leftWidth < MIN_LAYOUT_COLUMN_WIDTH_PERCENT) {
+    leftWidth = MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
+    rightWidth = combinedWidth - MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
+  } else if (rightWidth < MIN_LAYOUT_COLUMN_WIDTH_PERCENT) {
+    rightWidth = MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
+    leftWidth = combinedWidth - MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
   }
   return {
     leftWidth: leftWidth,

package/dist/esm/pm-plugins/consts.js

@@ -1,3 +1,6 @@
+export var MAX_STANDARD_LAYOUT_COLUMNS = 3;
+export var MAX_LAYOUT_COLUMNS = 5;
+export var MIN_LAYOUT_COLUMN_WIDTH_PERCENT = 5;
 export var EVEN_DISTRIBUTED_COL_WIDTHS = {
   1: 100,
   2: 50,