@atlaskit/editor-plugin-layout 10.3.4 → 10.4.0

package/dist/esm/pm-plugins/utils/redistribute-proportionally.js

@@ -0,0 +1,134 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var roundLayoutColumnWidth = function roundLayoutColumnWidth(width) {
+  return Number(width.toFixed(2));
+};
+var sumWidths = function sumWidths(widths) {
+  return widths.reduce(function (sum, width) {
+    return sum + width;
+  }, 0);
+};
+var isValidWidth = function isValidWidth(width) {
+  return Number.isFinite(width) && width > 0;
+};
+var normaliseWidthsTotal = function normaliseWidthsTotal(widths, totalWidth, minWidth) {
+  var roundedWidths = widths.map(roundLayoutColumnWidth);
+  var remainder = roundLayoutColumnWidth(totalWidth - sumWidths(roundedWidths));
+  if (remainder === 0 || roundedWidths.length === 0) {
+    return roundedWidths;
+  }
+  var adjustmentIndex = 0;
+  roundedWidths.forEach(function (width, index) {
+    if (width > roundedWidths[adjustmentIndex]) {
+      adjustmentIndex = index;
+    }
+  });
+  var adjustedWidth = roundLayoutColumnWidth(roundedWidths[adjustmentIndex] + remainder);
+  if (adjustedWidth < minWidth) {
+    return roundedWidths;
+  }
+  return roundedWidths.map(function (width, index) {
+    return index === adjustmentIndex ? adjustedWidth : width;
+  });
+};
+var redistributeWithMinimumWidth = function redistributeWithMinimumWidth(_ref) {
+  var minWidth = _ref.minWidth,
+    totalWidth = _ref.totalWidth,
+    weights = _ref.weights;
+  if (weights.length * minWidth > totalWidth) {
+    return;
+  }
+  var widths = Array(weights.length).fill(0);
+  var clampedIndexes = new Set();
+  var remainingWidth = totalWidth;
+  var remainingWeight = sumWidths(weights);
+  var _loop = function _loop() {
+    var remainingWidthForPass = remainingWidth;
+    var remainingWeightForPass = remainingWeight;
+    var indexesToClamp = [];
+    weights.forEach(function (weight, index) {
+      if (clampedIndexes.has(index)) {
+        return;
+      }
+      var proportionalWidth = remainingWeightForPass > 0 ? weight / remainingWeightForPass * remainingWidthForPass : 0;
+      if (proportionalWidth < minWidth) {
+        indexesToClamp.push(index);
+      }
+    });
+    if (indexesToClamp.length === 0) {
+      return 1; // break
+    }
+    indexesToClamp.forEach(function (index) {
+      widths[index] = minWidth;
+      clampedIndexes.add(index);
+      remainingWidth -= minWidth;
+      remainingWeight -= weights[index];
+    });
+  };
+  while (clampedIndexes.size < weights.length) {
+    if (_loop()) break;
+  }
+  weights.forEach(function (weight, index) {
+    if (!clampedIndexes.has(index)) {
+      widths[index] = remainingWeight > 0 ? weight / remainingWeight * remainingWidth : minWidth;
+    }
+  });
+  return widths;
+};
+export var redistributeAfterDeletion = function redistributeAfterDeletion(currentWidths, removeIndex, minWidth) {
+  if (currentWidths.length === 0 || removeIndex < 0 || removeIndex >= currentWidths.length || !isValidWidth(minWidth)) {
+    return currentWidths;
+  }
+  if (currentWidths.some(function (width) {
+    return !isValidWidth(width);
+  })) {
+    return currentWidths.filter(function (_, i) {
+      return i !== removeIndex;
+    });
+  }
+  var remainingWidths = currentWidths.filter(function (_, i) {
+    return i !== removeIndex;
+  });
+  if (remainingWidths.length === 0) {
+    return remainingWidths;
+  }
+  var currentTotalWidth = sumWidths(currentWidths);
+  var targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
+  var redistributed = redistributeWithMinimumWidth({
+    weights: remainingWidths,
+    totalWidth: targetTotalWidth,
+    minWidth: minWidth
+  });
+  if (!redistributed) {
+    var equalWidth = roundLayoutColumnWidth(targetTotalWidth / remainingWidths.length);
+    return normaliseWidthsTotal(Array(remainingWidths.length).fill(equalWidth), targetTotalWidth, minWidth);
+  }
+  return normaliseWidthsTotal(redistributed, targetTotalWidth, minWidth);
+};
+export var redistributeProportionally = function redistributeProportionally(currentWidths, insertIndex, maxColumns, minWidth) {
+  if (currentWidths.length === 0 || !Number.isInteger(maxColumns) || maxColumns <= 0 || currentWidths.length >= maxColumns || insertIndex < 0 || insertIndex > currentWidths.length || !isValidWidth(minWidth) || currentWidths.some(function (width) {
+    return !isValidWidth(width);
+  })) {
+    return currentWidths;
+  }
+  var currentTotalWidth = sumWidths(currentWidths);
+  if (!isValidWidth(currentTotalWidth)) {
+    return currentWidths;
+  }
+  var targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
+  var newColumnWidth = Math.max(minWidth, roundLayoutColumnWidth(targetTotalWidth / (currentWidths.length + 1)));
+  var existingColumnsTotalWidth = targetTotalWidth - newColumnWidth;
+  if (existingColumnsTotalWidth < currentWidths.length * minWidth) {
+    return currentWidths;
+  }
+  var redistributedExistingWidths = redistributeWithMinimumWidth({
+    weights: currentWidths,
+    totalWidth: existingColumnsTotalWidth,
+    minWidth: minWidth
+  });
+  if (!redistributedExistingWidths) {
+    return currentWidths;
+  }
+  var nextWidths = _toConsumableArray(redistributedExistingWidths);
+  nextWidths.splice(insertIndex, 0, newColumnWidth);
+  return normaliseWidthsTotal(nextWidths, targetTotalWidth, minWidth);
+};

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

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { layoutMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
+var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var currentColumn = useCurrentLayoutColumn(api);
+  var onClick = useCallback(function () {
+    var _api$layout, _api$core;
+    var deleteCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
+      var _api$layout2;
+      var tr = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(props);
+      if (!tr) {
+        return tr !== null && tr !== void 0 ? tr : null;
+      }
+      api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
+        isOpen: false
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api]);
+  if (currentColumn === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: onClick
+  }, formatMessage(layoutMessages.deleteColumn));
+};
+export { DeleteColumnDropdownItem };

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

@@ -0,0 +1,61 @@
+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';
+var INSERT_COLUMN_OPTIONS = {
+  left: {
+    Icon: TableColumnAddLeftIcon,
+    label: layoutMessages.insertColumnLeft,
+    side: 'left'
+  },
+  right: {
+    Icon: TableColumnAddRightIcon,
+    label: layoutMessages.insertColumnRight,
+    side: 'right'
+  }
+};
+export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
+  var api = _ref.api,
+    side = _ref.side;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
+    Icon = _INSERT_COLUMN_OPTION.Icon,
+    label = _INSERT_COLUMN_OPTION.label;
+  var currentColumn = useCurrentLayoutColumn(api);
+  var currentLayoutSection = useCurrentLayoutSection(api);
+  var columnCount = getLayoutSectionColumnCount(currentLayoutSection);
+  var maxColumnCount = getEffectiveMaxLayoutColumns();
+  var canInsertColumn = currentColumn !== undefined && columnCount < maxColumnCount;
+  var onClick = useCallback(function () {
+    var _api$layout, _api$core;
+    var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn(side);
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
+      var _api$layout2;
+      var 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 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
+        isOpen: false
+      })({
+        tr: 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/esm/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 var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
   var api = _ref.api,
@@ -9,24 +10,21 @@ export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref)
     value = _ref.value;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var _useCurrentLayoutColu = useCurrentLayoutColumnValign(api),
-    currentValign = _useCurrentLayoutColu.currentValign,
-    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var currentColumn = useCurrentLayoutColumn(api);
+  var currentValign = useMemo(function () {
+    return getLayoutColumnValign(currentColumn);
+  }, [currentColumn]);
   var Icon = VERTICAL_ALIGN_ICONS[value];
   var onClick = useCallback(function () {
     var _api$core, _api$layout;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === 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-".concat(value)
+    onClick: onClick
   }, formatMessage(label));
 };

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

@@ -1,19 +1,21 @@
-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 var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
   var api = _ref.api,
     children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var _useCurrentLayoutColu = useCurrentLayoutColumnValign(api),
-    currentValign = _useCurrentLayoutColu.currentValign,
-    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var currentColumn = useCurrentLayoutColumn(api);
+  var currentValign = useMemo(function () {
+    return getLayoutColumnValign(currentColumn);
+  }, [currentColumn]);
   var TriggerIcon = currentValign ? VERTICAL_ALIGN_ICONS[currentValign] : LayoutIcon;
-  if (!selectedColumn) {
+  if (!currentColumn) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
@@ -25,8 +27,6 @@ export var VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
       label: "",
       size: "small"
     }),
-    text: formatMessage(layoutMessages.alignColumn),
-    testId: "layout-column-align-menu",
-    dropdownTestId: "layout-column-align-dropdown"
+    text: formatMessage(layoutMessages.alignColumn)
   }, children);
 };

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

@@ -5,8 +5,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 var LAYOUT_COLUMN_MENU_FALLBACKS = {
@@ -23,11 +25,40 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
       rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
     })]
+  }), _objectSpread(_objectSpread({}, INSERT_COLUMN_LEFT_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(InsertColumnDropdownItem, {
+        api: api,
+        side: "left"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_LEFT_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, INSERT_COLUMN_RIGHT_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(InsertColumnDropdownItem, {
+        api: api,
+        side: "right"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[INSERT_COLUMN_RIGHT_MENU_ITEM.key]
+    })]
   }), _objectSpread(_objectSpread({}, DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
     component: createDistributeColumnsDropdownItem(api),
     parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]
+  }), _objectSpread(_objectSpread({}, DELETE_COLUMN_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
+        api: api
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
+    })]
   }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_MENU), {}, {
     component: function component(_ref3) {
       var children = _ref3.children;

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

@@ -1,25 +1,34 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 10];
-var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selectionAnchorPos) {
-  if (selectionAnchorPos === undefined) {
+var FALLBACK_MENU_HEIGHT = 300;
+var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+
+/**
+ * Returns the drag handle button for the selected layout column.
+ */
+var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection) {
+  var _columnDomRef$parentE;
+  if (!getLayoutColumnAtSelection(selection) || (selection === null || selection === void 0 ? void 0 : selection.from) === undefined) {
     return null;
   }
-  var selectionNode = editorView.state.doc.nodeAt(selectionAnchorPos);
-  if ((selectionNode === null || selectionNode === void 0 ? void 0 : selectionNode.type.name) !== 'layoutColumn') {
+  var columnDomRef = editorView.nodeDOM(selection.from);
+  if (!(columnDomRef instanceof HTMLElement)) {
     return null;
   }
-  return findDomRefAtPos(selectionAnchorPos, editorView.domAtPos.bind(editorView));
+  var 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 var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
@@ -39,6 +48,18 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     selection = _useSharedPluginState.selection;
   var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   var menuRef = useRef(null);
+  var popupRef = useRef(undefined);
+  var _React$useState = React.useState(FALLBACK_MENU_HEIGHT),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    menuHeight = _React$useState2[0],
+    setMenuHeight = _React$useState2[1];
+  useLayoutEffect(function () {
+    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]);
   var closeLayoutColumnMenu = useCallback(function () {
     var _api$core, _api$layout;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
@@ -63,9 +84,14 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
   var handleMenuRef = useCallback(function (el) {
     setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
     menuRef.current = el;
+    if (el) {
+      popupRef.current = el;
+    }
   }, [setOutsideClickTargetRef]);
   var components = (_api$uiControlRegistr = api === null || api === 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 : [];
-  var target = isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection === null || selection === void 0 ? void 0 : selection.from) : null;
+  var target = useMemo(function () {
+    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection) : null;
+  }, [editorView, isLayoutColumnMenuOpen, selection]);
   var hasValidTarget = target instanceof HTMLElement;
   useEffect(function () {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
@@ -80,10 +106,11 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     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/esm/ui/LayoutColumnMenu/keys.js

@@ -27,6 +27,14 @@ export var VERTICAL_ALIGN_MENU = {
 
 // --- Items ---
 
+export var INSERT_COLUMN_LEFT_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-insert-left-item'
+};
+export var INSERT_COLUMN_RIGHT_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-insert-right-item'
+};
 export var DISTRIBUTE_COLUMNS_MENU_ITEM = {
   type: 'menu-item',
   key: 'layout-column-menu-distribute-columns-item'
@@ -43,9 +51,13 @@ export var VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
   type: 'menu-item',
   key: 'layout-column-menu-vertical-align-bottom-item'
 };
+export var DELETE_COLUMN_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-delete-item'
+};
 
 // --- Item ranks within sections ---
 
-export var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty(_defineProperty({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200);
+export var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, VERTICAL_ALIGN_MENU.key, 100), INSERT_COLUMN_LEFT_MENU_ITEM.key, 200), INSERT_COLUMN_RIGHT_MENU_ITEM.key, 300), DISTRIBUTE_COLUMNS_MENU_ITEM.key, 400), DELETE_COLUMN_MENU_ITEM.key, 500);
 export var VERTICAL_ALIGN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
 export var VERTICAL_ALIGN_MENU_SECTION_RANK = _defineProperty(_defineProperty(_defineProperty({}, VERTICAL_ALIGN_TOP_MENU_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key, 300);

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

@@ -0,0 +1,15 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export var getLayoutColumnAtSelection = function getLayoutColumnAtSelection(selection) {
+  return selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
+};
+export var getLayoutSectionAtSelection = function getLayoutSectionAtSelection(selection) {
+  var selectedColumn = getLayoutColumnAtSelection(selection);
+  var 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 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) {
+  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+};

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

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

package/dist/types/layoutPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
@@ -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 { insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
+import type { deleteLayoutColumn, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import type { LayoutState } from './pm-plugins/types';
 import type { LayoutPluginOptions } from './types';
 export type LayoutPluginDependencies = [
@@ -29,6 +29,8 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
         insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
     };
     commands: {
+        deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
+        insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
         setLayoutColumnValign: typeof setLayoutColumnValign;
         toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
     };

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

@@ -27,7 +27,14 @@ export declare const setPresetLayout: (editorAnalyticsAPI: EditorAnalyticsAPI |
 export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState) => Change | undefined;
 export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
 export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, inputMethod?: INPUT_METHOD.FLOATING_TB) => Command;
+export type InsertLayoutColumnSide = 'left' | 'right';
+/**
+ * Returns the active maximum layout column count for the current advanced layouts experiment state.
+ */
+export declare function getEffectiveMaxLayoutColumns(): number;
+export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
 export declare const setLayoutColumnValign: (valign: Valign) => EditorCommand;
 export declare const toggleLayoutColumnMenu: ({ isOpen }: {
     isOpen?: boolean;
 }) => EditorCommand;
+export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;

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

@@ -1,3 +1,6 @@
+export declare const MAX_STANDARD_LAYOUT_COLUMNS = 3;
+export declare const MAX_LAYOUT_COLUMNS = 5;
+export declare const MIN_LAYOUT_COLUMN_WIDTH_PERCENT = 5;
 export declare const EVEN_DISTRIBUTED_COL_WIDTHS: {
     [key: number]: number;
 };

package/dist/types/pm-plugins/utils/redistribute-proportionally.d.ts

@@ -0,0 +1,2 @@
+export declare const redistributeAfterDeletion: (currentWidths: number[], removeIndex: number, minWidth: number) => number[];
+export declare const redistributeProportionally: (currentWidths: number[], insertIndex: number, maxColumns: number, minWidth: number) => number[];

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../../layoutPluginType';
+type DeleteColumnDropdownItemProps = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+};
+declare const DeleteColumnDropdownItem: ({ api, }: DeleteColumnDropdownItemProps) => React.JSX.Element | null;
+export { DeleteColumnDropdownItem };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../../layoutPluginType';
+import { type InsertLayoutColumnSide } from '../../pm-plugins/actions';
+type InsertColumnDropdownItemProps = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+    side: InsertLayoutColumnSide;
+};
+export declare const InsertColumnDropdownItem: ({ api, side, }: InsertColumnDropdownItemProps) => React.JSX.Element | null;
+export {};

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

@@ -4,10 +4,13 @@ export declare const LAYOUT_COLUMN_MENU_SECTION: MenuSectionType;
 export declare const LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION: MenuSectionType;
 export declare const LAYOUT_COLUMN_MENU_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU: NestedMenuType;
+export declare const INSERT_COLUMN_LEFT_MENU_ITEM: MenuItemType;
+export declare const INSERT_COLUMN_RIGHT_MENU_ITEM: MenuItemType;
 export declare const DISTRIBUTE_COLUMNS_MENU_ITEM: MenuItemType;
 export declare const VERTICAL_ALIGN_TOP_MENU_ITEM: MenuItemType;
 export declare const VERTICAL_ALIGN_MIDDLE_MENU_ITEM: MenuItemType;
 export declare const VERTICAL_ALIGN_BOTTOM_MENU_ITEM: MenuItemType;
+export declare const DELETE_COLUMN_MENU_ITEM: MenuItemType;
 export declare const LAYOUT_COLUMN_MENU_SECTION_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU_RANK: Record<string, number>;
 export declare const VERTICAL_ALIGN_MENU_SECTION_RANK: Record<string, number>;

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

@@ -0,0 +1,7 @@
+import type { Valign } from '@atlaskit/editor-common/types/valign';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const getLayoutColumnAtSelection: (selection: Selection | undefined) => PMNode | undefined;
+export declare const getLayoutSectionAtSelection: (selection: Selection | undefined) => PMNode | undefined;
+export declare const getLayoutSectionColumnCount: (layoutSection: PMNode | undefined) => number;
+export declare const getLayoutColumnValign: (layoutColumn: PMNode | undefined) => Valign | undefined;

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

@@ -0,0 +1,5 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { LayoutPlugin } from '../../layoutPluginType';
+export declare const useCurrentLayoutColumn: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => PMNode | undefined;
+export declare const useCurrentLayoutSection: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => PMNode | undefined;