@atlaskit/editor-plugin-layout 10.3.4 → 10.4.0

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

@@ -10,7 +10,9 @@ var _react = _interopRequireDefault(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
+var _DeleteColumnDropdownItem = require("./DeleteColumnDropdownItem");
 var _DistributeColumnsDropdownItem = require("./DistributeColumnsDropdownItem");
+var _InsertColumnDropdownItem = require("./InsertColumnDropdownItem");
 var _keys = require("./keys");
 var _VerticalAlignDropdownItem = require("./VerticalAlignDropdownItem");
 var _VerticalAlignNestedMenu = require("./VerticalAlignNestedMenu");
@@ -30,11 +32,40 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU), {}, {
       rank: _keys.LAYOUT_COLUMN_MENU_RANK[_keys.LAYOUT_COLUMN_MENU_SECTION.key]
     })]
+  }), _objectSpread(_objectSpread({}, _keys.INSERT_COLUMN_LEFT_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_InsertColumnDropdownItem.InsertColumnDropdownItem, {
+        api: api,
+        side: "left"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.INSERT_COLUMN_LEFT_MENU_ITEM.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _keys.INSERT_COLUMN_RIGHT_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_InsertColumnDropdownItem.InsertColumnDropdownItem, {
+        api: api,
+        side: "right"
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.INSERT_COLUMN_RIGHT_MENU_ITEM.key]
+    })]
   }), _objectSpread(_objectSpread({}, _keys.DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
     component: (0, _DistributeColumnsDropdownItem.createDistributeColumnsDropdownItem)(api),
     parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
       rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_MENU_ITEM.key]
     })]
+  }), _objectSpread(_objectSpread({}, _keys.DELETE_COLUMN_MENU_ITEM), {}, {
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DeleteColumnDropdownItem.DeleteColumnDropdownItem, {
+        api: api
+      });
+    },
+    parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
+      rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
+    })]
   }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
     component: function component(_ref3) {
       var children = _ref3.children;

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

@@ -1,33 +1,43 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LayoutColumnMenu = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _styles = require("@atlaskit/editor-common/styles");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
 var _components = require("./components");
 var _keys = require("./keys");
+var _layoutColumnSelection = require("./layoutColumnSelection");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.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 (!(0, _layoutColumnSelection.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 (0, _utils.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(_styles.DRAG_HANDLE_SELECTOR);
 };
 var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.memo(function LayoutColumnMenu(_ref) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
@@ -47,6 +57,18 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     selection = _useSharedPluginState.selection;
   var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
   var menuRef = (0, _react.useRef)(null);
+  var popupRef = (0, _react.useRef)(undefined);
+  var _React$useState = _react.default.useState(FALLBACK_MENU_HEIGHT),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    menuHeight = _React$useState2[0],
+    setMenuHeight = _React$useState2[1];
+  (0, _react.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 = (0, _react.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({
@@ -71,9 +93,14 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
   var handleMenuRef = (0, _react.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(_keys.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 = (0, _react.useMemo)(function () {
+    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection) : null;
+  }, [editorView, isLayoutColumnMenuOpen, selection]);
   var hasValidTarget = target instanceof HTMLElement;
   (0, _react.useEffect)(function () {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
@@ -88,10 +115,11 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     mountTo: mountTo,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+    zIndex: _editorSharedStyles.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/cjs/ui/LayoutColumnMenu/keys.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_ALIGN_TOP_MENU_ITEM = exports.VERTICAL_ALIGN_MIDDLE_MENU_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = void 0;
+exports.VERTICAL_ALIGN_TOP_MENU_ITEM = exports.VERTICAL_ALIGN_MIDDLE_MENU_ITEM = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION = exports.LAYOUT_COLUMN_MENU_RANK = exports.LAYOUT_COLUMN_MENU = exports.INSERT_COLUMN_RIGHT_MENU_ITEM = exports.INSERT_COLUMN_LEFT_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 // --- Menu surface ---
 
@@ -34,6 +34,14 @@ var VERTICAL_ALIGN_MENU = exports.VERTICAL_ALIGN_MENU = {
 
 // --- Items ---
 
+var INSERT_COLUMN_LEFT_MENU_ITEM = exports.INSERT_COLUMN_LEFT_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-insert-left-item'
+};
+var INSERT_COLUMN_RIGHT_MENU_ITEM = exports.INSERT_COLUMN_RIGHT_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-insert-right-item'
+};
 var DISTRIBUTE_COLUMNS_MENU_ITEM = exports.DISTRIBUTE_COLUMNS_MENU_ITEM = {
   type: 'menu-item',
   key: 'layout-column-menu-distribute-columns-item'
@@ -50,9 +58,13 @@ var VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM =
   type: 'menu-item',
   key: 'layout-column-menu-vertical-align-bottom-item'
 };
+var DELETE_COLUMN_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = {
+  type: 'menu-item',
+  key: 'layout-column-menu-delete-item'
+};
 
 // --- Item ranks within sections ---
 
-var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 100), VERTICAL_ALIGN_MENU.key, 200);
+var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 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);
 var VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
 var VERTICAL_ALIGN_MENU_SECTION_RANK = exports.VERTICAL_ALIGN_MENU_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VERTICAL_ALIGN_TOP_MENU_ITEM.key, 100), VERTICAL_ALIGN_MIDDLE_MENU_ITEM.key, 200), VERTICAL_ALIGN_BOTTOM_MENU_ITEM.key, 300);

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLayoutSectionColumnCount = exports.getLayoutSectionAtSelection = exports.getLayoutColumnValign = exports.getLayoutColumnAtSelection = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var getLayoutColumnAtSelection = exports.getLayoutColumnAtSelection = function getLayoutColumnAtSelection(selection) {
+  return selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn' ? selection.node : undefined;
+};
+var getLayoutSectionAtSelection = exports.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;
+};
+var getLayoutSectionColumnCount = exports.getLayoutSectionColumnCount = function getLayoutSectionColumnCount(layoutSection) {
+  return (layoutSection === null || layoutSection === void 0 ? void 0 : layoutSection.type.name) === 'layoutSection' ? layoutSection.childCount : 0;
+};
+var getLayoutColumnValign = exports.getLayoutColumnValign = function getLayoutColumnValign(layoutColumn) {
+  return layoutColumn === null || layoutColumn === void 0 ? void 0 : layoutColumn.attrs.valign;
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentLayoutSection = exports.useCurrentLayoutColumn = void 0;
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _layoutColumnSelection = require("./layoutColumnSelection");
+var useCurrentLayoutColumn = exports.useCurrentLayoutColumn = function useCurrentLayoutColumn(api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+    var _states$selectionStat;
+    return (0, _layoutColumnSelection.getLayoutColumnAtSelection)((_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection);
+  });
+};
+var useCurrentLayoutSection = exports.useCurrentLayoutSection = function useCurrentLayoutSection(api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+    var _states$selectionStat2;
+    return (0, _layoutColumnSelection.getLayoutSectionAtSelection)((_states$selectionStat2 = states.selectionState) === null || _states$selectionStat2 === void 0 ? void 0 : _states$selectionStat2.selection);
+  });
+};

package/dist/es2019/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, 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';
@@ -290,6 +290,14 @@ export const layoutPlugin = ({
       return pluginKey.getState(editorState);
     },
     commands: {
+      deleteLayoutColumn: props => {
+        var _api$analytics4;
+        return deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
+      },
+      insertLayoutColumn: side => {
+        var _api$analytics5;
+        return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+      },
       setLayoutColumnValign,
       toggleLayoutColumnMenu
     }

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

@@ -7,8 +7,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 const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -526,6 +527,102 @@ const 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;
+}
+const getSelectedLayoutColumnInSection = ({
+  doc,
+  selection
+}) => {
+  const {
+    layoutColumn,
+    layoutSection
+  } = doc.type.schema.nodes;
+  if (!(selection instanceof NodeSelection) || selection.node.type !== layoutColumn) {
+    return;
+  }
+  const {
+    $from
+  } = selection;
+  if ($from.parent.type !== layoutSection) {
+    return;
+  }
+  const selectedColumnIndex = $from.index($from.depth);
+  const selectedColumnNode = selection.node;
+  const selectedColumnPos = selection.from;
+  const layoutSectionPos = $from.before($from.depth);
+  return {
+    layoutSectionNode: $from.parent,
+    layoutSectionPos,
+    selectedColumnIndex,
+    selectedColumnNode,
+    selectedColumnPos
+  };
+};
+const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
+  tr
+}) => {
+  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    return null;
+  }
+  const selectedColumn = getSelectedLayoutColumnInSection(tr);
+  if (!selectedColumn) {
+    return null;
+  }
+  const {
+    layoutSectionNode,
+    layoutSectionPos,
+    selectedColumnIndex
+  } = selectedColumn;
+  if (layoutSectionNode.childCount >= getEffectiveMaxLayoutColumns()) {
+    return null;
+  }
+  const insertIndex = side === 'left' ? selectedColumnIndex : selectedColumnIndex + 1;
+  const existingWidths = mapChildren(layoutSectionNode, column => column.attrs.width);
+  const redistributedWidths = redistributeProportionally(existingWidths, insertIndex, getEffectiveMaxLayoutColumns(), MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+  if (redistributedWidths === existingWidths) {
+    return null;
+  }
+  const {
+    layoutColumn
+  } = tr.doc.type.schema.nodes;
+  const newColumn = layoutColumn.createAndFill({
+    width: redistributedWidths[insertIndex]
+  });
+  if (!newColumn) {
+    return null;
+  }
+  const updatedColumns = [];
+  layoutSectionNode.forEach((column, _offset, index) => {
+    if (index === insertIndex) {
+      updatedColumns.push(newColumn);
+    }
+    updatedColumns.push(column);
+  });
+  if (insertIndex === layoutSectionNode.childCount) {
+    updatedColumns.push(newColumn);
+  }
+  const 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 ? 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
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+  tr.setMeta('scrollIntoView', false);
+  return tr;
+};
+export const insertLayoutColumn = (side, editorAnalyticsAPI) => insertLayoutColumnAt(side, editorAnalyticsAPI);
 export const setLayoutColumnValign = valign => ({
   tr
 }) => {
@@ -562,4 +659,58 @@ export const toggleLayoutColumnMenu = ({
   });
   tr.setMeta('scrollIntoView', false);
   return tr;
+};
+export const deleteLayoutColumn = editorAnalyticsAPI => ({
+  tr
+}) => {
+  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    return null;
+  }
+  const selectedColumn = getSelectedLayoutColumnInSection(tr);
+  if (!selectedColumn) {
+    return null;
+  }
+  const {
+    layoutSectionNode,
+    layoutSectionPos,
+    selectedColumnIndex
+  } = selectedColumn;
+  const emitDeleteColumnAnalytics = columnCount => {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.DELETED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        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
+  const remainingColumns = [];
+  layoutSectionNode.forEach((column, _offset, index) => {
+    if (index !== selectedColumnIndex) {
+      remainingColumns.push(column);
+    }
+  });
+
+  // Redistribute widths proportionally among remaining columns using shared utility
+  const existingWidths = mapChildren(layoutSectionNode, column => column.attrs.width);
+  const redistributed = redistributeAfterDeletion(existingWidths, selectedColumnIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+  const 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/es2019/pm-plugins/column-resize-divider.js

@@ -1,14 +1,13 @@
 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
 const layoutColumnDividerClassName = 'layout-column-divider';
 const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
 const layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
 
-// Minimum column width percentage to prevent columns from collapsing
-const MIN_COLUMN_WIDTH_PERCENT = 5;
-
 // Module-level drag state so it survives widget DOM recreation during transactions.
 let dragState = null;
 
@@ -75,12 +74,12 @@ const calcDragWidths = clientX => {
   const deltaPercent = deltaX / columnsWidth * 100;
   let leftWidth = dragState.startLeftWidth + deltaPercent;
   let 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,

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

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

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

@@ -0,0 +1,113 @@
+const roundLayoutColumnWidth = width => Number(width.toFixed(2));
+const sumWidths = widths => widths.reduce((sum, width) => sum + width, 0);
+const isValidWidth = width => Number.isFinite(width) && width > 0;
+const normaliseWidthsTotal = (widths, totalWidth, minWidth) => {
+  const roundedWidths = widths.map(roundLayoutColumnWidth);
+  const remainder = roundLayoutColumnWidth(totalWidth - sumWidths(roundedWidths));
+  if (remainder === 0 || roundedWidths.length === 0) {
+    return roundedWidths;
+  }
+  let adjustmentIndex = 0;
+  roundedWidths.forEach((width, index) => {
+    if (width > roundedWidths[adjustmentIndex]) {
+      adjustmentIndex = index;
+    }
+  });
+  const adjustedWidth = roundLayoutColumnWidth(roundedWidths[adjustmentIndex] + remainder);
+  if (adjustedWidth < minWidth) {
+    return roundedWidths;
+  }
+  return roundedWidths.map((width, index) => index === adjustmentIndex ? adjustedWidth : width);
+};
+const redistributeWithMinimumWidth = ({
+  minWidth,
+  totalWidth,
+  weights
+}) => {
+  if (weights.length * minWidth > totalWidth) {
+    return;
+  }
+  const widths = Array(weights.length).fill(0);
+  const clampedIndexes = new Set();
+  let remainingWidth = totalWidth;
+  let remainingWeight = sumWidths(weights);
+  while (clampedIndexes.size < weights.length) {
+    const remainingWidthForPass = remainingWidth;
+    const remainingWeightForPass = remainingWeight;
+    const indexesToClamp = [];
+    weights.forEach((weight, index) => {
+      if (clampedIndexes.has(index)) {
+        return;
+      }
+      const proportionalWidth = remainingWeightForPass > 0 ? weight / remainingWeightForPass * remainingWidthForPass : 0;
+      if (proportionalWidth < minWidth) {
+        indexesToClamp.push(index);
+      }
+    });
+    if (indexesToClamp.length === 0) {
+      break;
+    }
+    indexesToClamp.forEach(index => {
+      widths[index] = minWidth;
+      clampedIndexes.add(index);
+      remainingWidth -= minWidth;
+      remainingWeight -= weights[index];
+    });
+  }
+  weights.forEach((weight, index) => {
+    if (!clampedIndexes.has(index)) {
+      widths[index] = remainingWeight > 0 ? weight / remainingWeight * remainingWidth : minWidth;
+    }
+  });
+  return widths;
+};
+export const redistributeAfterDeletion = (currentWidths, removeIndex, minWidth) => {
+  if (currentWidths.length === 0 || removeIndex < 0 || removeIndex >= currentWidths.length || !isValidWidth(minWidth)) {
+    return currentWidths;
+  }
+  if (currentWidths.some(width => !isValidWidth(width))) {
+    return currentWidths.filter((_, i) => i !== removeIndex);
+  }
+  const remainingWidths = currentWidths.filter((_, i) => i !== removeIndex);
+  if (remainingWidths.length === 0) {
+    return remainingWidths;
+  }
+  const currentTotalWidth = sumWidths(currentWidths);
+  const targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
+  const redistributed = redistributeWithMinimumWidth({
+    weights: remainingWidths,
+    totalWidth: targetTotalWidth,
+    minWidth
+  });
+  if (!redistributed) {
+    const equalWidth = roundLayoutColumnWidth(targetTotalWidth / remainingWidths.length);
+    return normaliseWidthsTotal(Array(remainingWidths.length).fill(equalWidth), targetTotalWidth, minWidth);
+  }
+  return normaliseWidthsTotal(redistributed, targetTotalWidth, minWidth);
+};
+export const 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(width => !isValidWidth(width))) {
+    return currentWidths;
+  }
+  const currentTotalWidth = sumWidths(currentWidths);
+  if (!isValidWidth(currentTotalWidth)) {
+    return currentWidths;
+  }
+  const targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
+  const newColumnWidth = Math.max(minWidth, roundLayoutColumnWidth(targetTotalWidth / (currentWidths.length + 1)));
+  const existingColumnsTotalWidth = targetTotalWidth - newColumnWidth;
+  if (existingColumnsTotalWidth < currentWidths.length * minWidth) {
+    return currentWidths;
+  }
+  const redistributedExistingWidths = redistributeWithMinimumWidth({
+    weights: currentWidths,
+    totalWidth: existingColumnsTotalWidth,
+    minWidth
+  });
+  if (!redistributedExistingWidths) {
+    return currentWidths;
+  }
+  const nextWidths = [...redistributedExistingWidths];
+  nextWidths.splice(insertIndex, 0, newColumnWidth);
+  return normaliseWidthsTotal(nextWidths, targetTotalWidth, minWidth);
+};

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

@@ -0,0 +1,37 @@
+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';
+const DeleteColumnDropdownItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const currentColumn = useCurrentLayoutColumn(api);
+  const onClick = useCallback(() => {
+    var _api$layout, _api$core;
+    const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
+    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 = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(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]);
+  if (currentColumn === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: onClick
+  }, formatMessage(layoutMessages.deleteColumn));
+};
+export { DeleteColumnDropdownItem };