@atlaskit/editor-plugin-layout 10.3.4 → 10.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-layout
 
+## 10.4.0
+
+### Minor Changes
+
+- [`6d95dce3d9a86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d95dce3d9a86) -
+  Add deleteLayoutColumn command to editor-plugin-layout with proportional width redistribution and
+  analytics tracking (EDITOR-6669)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.3.5
+
+### Patch Changes
+
+- [`626fb6e8ce019`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/626fb6e8ce019) -
+  Wire layout column menu insert actions with proportional width redistribution.
+- Updated dependencies
+
 ## 10.3.4
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -309,6 +309,14 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       return _pluginKey.pluginKey.getState(editorState);
     },
     commands: {
+      deleteLayoutColumn: function deleteLayoutColumn(props) {
+        var _api$analytics4;
+        return (0, _actions.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 (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+      },
       setLayoutColumnValign: _actions.setLayoutColumnValign,
       toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
     }

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
+exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
-exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
+exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
+exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -19,6 +20,7 @@ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equa
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
+var _redistributeProportionally = require("./utils/redistribute-proportionally");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ONE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = ['single'];
@@ -549,9 +551,102 @@ var formatLayoutName = function formatLayoutName(layout) {
       return _analytics.LAYOUT_TYPE.THREE_WITH_SIDEBARS;
   }
 };
+/**
+ * Returns the active maximum layout column count for the current advanced layouts experiment state.
+ */
+function getEffectiveMaxLayoutColumns() {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) ? _consts.MAX_LAYOUT_COLUMNS : _consts.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 _state.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 (!(0, _expValEqualsNoExposure.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 = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
+      return column.attrs.width;
+    });
+    var redistributedWidths = (0, _redistributeProportionally.redistributeProportionally)(existingWidths, insertIndex, getEffectiveMaxLayoutColumns(), _consts.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(_model.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: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+      attributes: {
+        columnCount: redistributedWidths.length,
+        inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+        selectedIndex: selectedColumnIndex,
+        side: side
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    tr.setMeta('scrollIntoView', false);
+    return tr;
+  };
+};
+var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI) {
+  return insertLayoutColumnAt(side, editorAnalyticsAPI);
+};
 var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign) {
-  return function (_ref4) {
-    var tr = _ref4.tr;
+  return function (_ref6) {
+    var tr = _ref6.tr;
     if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
@@ -573,14 +668,69 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
     return tr;
   };
 };
-var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref5) {
-  var isOpen = _ref5.isOpen;
-  return function (_ref6) {
-    var tr = _ref6.tr;
+var toggleLayoutColumnMenu = exports.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;
   };
+};
+var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
+  return function (_ref9) {
+    var tr = _ref9.tr;
+    if (!(0, _expValEqualsNoExposure.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: _analytics.ACTION.DELETED,
+        actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
+        attributes: {
+          columnCount: columnCount,
+          inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
+          selectedIndex: selectedColumnIndex
+        },
+        eventType: _analytics.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 = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
+      return column.attrs.width;
+    });
+    var redistributed = (0, _redistributeProportionally.redistributeAfterDeletion)(existingWidths, selectedColumnIndex, _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
+    var updatedLayoutSectionNode = layoutSectionNode.copy(_model.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/cjs/pm-plugins/column-resize-divider.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _bindEventListener = require("bind-event-listener");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _consts = require("./consts");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
@@ -16,9 +17,6 @@ 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;
 
@@ -79,12 +77,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 < _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT) {
+    leftWidth = _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
+    rightWidth = combinedWidth - _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
+  } else if (rightWidth < _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT) {
+    rightWidth = _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
+    leftWidth = combinedWidth - _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT;
   }
   return {
     leftWidth: leftWidth,

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

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EVEN_DISTRIBUTED_COL_WIDTHS = void 0;
+exports.MIN_LAYOUT_COLUMN_WIDTH_PERCENT = exports.MAX_STANDARD_LAYOUT_COLUMNS = exports.MAX_LAYOUT_COLUMNS = exports.EVEN_DISTRIBUTED_COL_WIDTHS = void 0;
+var MAX_STANDARD_LAYOUT_COLUMNS = exports.MAX_STANDARD_LAYOUT_COLUMNS = 3;
+var MAX_LAYOUT_COLUMNS = exports.MAX_LAYOUT_COLUMNS = 5;
+var MIN_LAYOUT_COLUMN_WIDTH_PERCENT = exports.MIN_LAYOUT_COLUMN_WIDTH_PERCENT = 5;
 var EVEN_DISTRIBUTED_COL_WIDTHS = exports.EVEN_DISTRIBUTED_COL_WIDTHS = {
   1: 100,
   2: 50,

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

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.redistributeProportionally = exports.redistributeAfterDeletion = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@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;
+};
+var redistributeAfterDeletion = exports.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);
+};
+var redistributeProportionally = exports.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 = (0, _toConsumableArray2.default)(redistributedExistingWidths);
+  nextWidths.splice(insertIndex, 0, newColumnWidth);
+  return normaliseWidthsTotal(nextWidths, targetTotalWidth, minWidth);
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteColumnDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
+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 DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
+  var onClick = (0, _react.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: onClick
+  }, formatMessage(_messages.layoutMessages.deleteColumn));
+};

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InsertColumnDropdownItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _actions = require("../../pm-plugins/actions");
+var _layoutColumnSelection = require("./layoutColumnSelection");
+var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
+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 INSERT_COLUMN_OPTIONS = {
+  left: {
+    Icon: _editorToolbar.TableColumnAddLeftIcon,
+    label: _messages.layoutMessages.insertColumnLeft,
+    side: 'left'
+  },
+  right: {
+    Icon: _editorToolbar.TableColumnAddRightIcon,
+    label: _messages.layoutMessages.insertColumnRight,
+    side: 'right'
+  }
+};
+var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
+  var api = _ref.api,
+    side = _ref.side;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
+    Icon = _INSERT_COLUMN_OPTION.Icon,
+    label = _INSERT_COLUMN_OPTION.label;
+  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
+  var currentLayoutSection = (0, _useCurrentLayoutColumn.useCurrentLayoutSection)(api);
+  var columnCount = (0, _layoutColumnSelection.getLayoutSectionColumnCount)(currentLayoutSection);
+  var maxColumnCount = (0, _actions.getEffectiveMaxLayoutColumns)();
+  var canInsertColumn = currentColumn !== undefined && columnCount < maxColumnCount;
+  var onClick = (0, _react.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    onClick: onClick
+  }, formatMessage(label));
+};

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

@@ -8,7 +8,8 @@ exports.VerticalAlignDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _useCurrentLayoutColumnValign = require("./useCurrentLayoutColumnValign");
+var _layoutColumnSelection = require("./layoutColumnSelection");
+var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
 var _verticalAlignIcons = require("./verticalAlignIcons");
 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 VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
@@ -17,24 +18,21 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
     value = _ref.value;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var _useCurrentLayoutColu = (0, _useCurrentLayoutColumnValign.useCurrentLayoutColumnValign)(api),
-    currentValign = _useCurrentLayoutColu.currentValign,
-    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
+  var currentValign = (0, _react.useMemo)(function () {
+    return (0, _layoutColumnSelection.getLayoutColumnValign)(currentColumn);
+  }, [currentColumn]);
   var Icon = _verticalAlignIcons.VERTICAL_ALIGN_ICONS[value];
   var onClick = (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.setLayoutColumnValign(value));
   }, [api, value]);
-  if (!selectedColumn) {
-    return null;
-  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
       label: "",
       size: "small"
     }),
     isSelected: currentValign === value,
-    onClick: onClick,
-    testId: "layout-column-align-".concat(value)
+    onClick: onClick
   }, formatMessage(label));
 };

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

@@ -1,26 +1,29 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VerticalAlignNestedMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _useCurrentLayoutColumnValign = require("./useCurrentLayoutColumnValign");
+var _layoutColumnSelection = require("./layoutColumnSelection");
+var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
 var _verticalAlignIcons = require("./verticalAlignIcons");
+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 VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function VerticalAlignNestedMenu(_ref) {
   var api = _ref.api,
     children = _ref.children;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var _useCurrentLayoutColu = (0, _useCurrentLayoutColumnValign.useCurrentLayoutColumnValign)(api),
-    currentValign = _useCurrentLayoutColu.currentValign,
-    selectedColumn = _useCurrentLayoutColu.selectedColumn;
+  var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
+  var currentValign = (0, _react.useMemo)(function () {
+    return (0, _layoutColumnSelection.getLayoutColumnValign)(currentColumn);
+  }, [currentColumn]);
   var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _editorToolbar.LayoutIcon;
-  if (!selectedColumn) {
+  if (!currentColumn) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
@@ -32,8 +35,6 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
       label: "",
       size: "small"
     }),
-    text: formatMessage(_messages.layoutMessages.alignColumn),
-    testId: "layout-column-align-menu",
-    dropdownTestId: "layout-column-align-dropdown"
+    text: formatMessage(_messages.layoutMessages.alignColumn)
   }, children);
 };