@atlaskit/editor-plugin-layout 10.3.5 → 10.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/layoutPlugin.js +6 -2
  3. package/dist/cjs/pm-plugins/actions.js +56 -1
  4. package/dist/cjs/pm-plugins/utils/redistribute-proportionally.js +31 -1
  5. package/dist/cjs/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js +42 -0
  6. package/dist/cjs/ui/LayoutColumnMenu/components.js +10 -0
  7. package/dist/cjs/ui/LayoutColumnMenu/keys.js +6 -2
  8. package/dist/es2019/layoutPlugin.js +7 -3
  9. package/dist/es2019/pm-plugins/actions.js +55 -1
  10. package/dist/es2019/pm-plugins/utils/redistribute-proportionally.js +24 -0
  11. package/dist/es2019/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js +37 -0
  12. package/dist/es2019/ui/LayoutColumnMenu/components.js +11 -1
  13. package/dist/es2019/ui/LayoutColumnMenu/keys.js +6 -1
  14. package/dist/esm/layoutPlugin.js +7 -3
  15. package/dist/esm/pm-plugins/actions.js +56 -1
  16. package/dist/esm/pm-plugins/utils/redistribute-proportionally.js +30 -0
  17. package/dist/esm/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js +35 -0
  18. package/dist/esm/ui/LayoutColumnMenu/components.js +11 -1
  19. package/dist/esm/ui/LayoutColumnMenu/keys.js +5 -1
  20. package/dist/types/layoutPluginType.d.ts +2 -1
  21. package/dist/types/pm-plugins/actions.d.ts +1 -0
  22. package/dist/types/pm-plugins/utils/redistribute-proportionally.d.ts +1 -0
  23. package/dist/types/ui/LayoutColumnMenu/DeleteColumnDropdownItem.d.ts +8 -0
  24. package/dist/types/ui/LayoutColumnMenu/keys.d.ts +1 -0
  25. package/dist/types-ts4.5/layoutPluginType.d.ts +2 -1
  26. package/dist/types-ts4.5/pm-plugins/actions.d.ts +1 -0
  27. package/dist/types-ts4.5/pm-plugins/utils/redistribute-proportionally.d.ts +1 -0
  28. package/dist/types-ts4.5/ui/LayoutColumnMenu/DeleteColumnDropdownItem.d.ts +8 -0
  29. package/dist/types-ts4.5/ui/LayoutColumnMenu/keys.d.ts +1 -0
  30. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 10.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`6d95dce3d9a86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d95dce3d9a86) -
8
+ Add deleteLayoutColumn command to editor-plugin-layout with proportional width redistribution and
9
+ analytics tracking (EDITOR-6669)
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 10.3.5
4
16
 
5
17
  ### Patch Changes
@@ -309,9 +309,13 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
309
309
  return _pluginKey.pluginKey.getState(editorState);
310
310
  },
311
311
  commands: {
312
- insertLayoutColumn: function insertLayoutColumn(side) {
312
+ deleteLayoutColumn: function deleteLayoutColumn(props) {
313
313
  var _api$analytics4;
314
- return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
314
+ return (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
315
+ },
316
+ insertLayoutColumn: function insertLayoutColumn(side) {
317
+ var _api$analytics5;
318
+ return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
315
319
  },
316
320
  setLayoutColumnValign: _actions.setLayoutColumnValign,
317
321
  toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
7
+ 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;
8
8
  exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
9
9
  exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
10
10
  exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
@@ -678,4 +678,59 @@ var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLay
678
678
  tr.setMeta('scrollIntoView', false);
679
679
  return tr;
680
680
  };
681
+ };
682
+ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
683
+ return function (_ref9) {
684
+ var tr = _ref9.tr;
685
+ if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
686
+ return null;
687
+ }
688
+ var selectedColumn = getSelectedLayoutColumnInSection(tr);
689
+ if (!selectedColumn) {
690
+ return null;
691
+ }
692
+ var layoutSectionNode = selectedColumn.layoutSectionNode,
693
+ layoutSectionPos = selectedColumn.layoutSectionPos,
694
+ selectedColumnIndex = selectedColumn.selectedColumnIndex;
695
+ var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(columnCount) {
696
+ editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
697
+ action: _analytics.ACTION.DELETED,
698
+ actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
699
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
700
+ attributes: {
701
+ columnCount: columnCount,
702
+ inputMethod: _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU,
703
+ selectedIndex: selectedColumnIndex
704
+ },
705
+ eventType: _analytics.EVENT_TYPE.TRACK
706
+ })(tr);
707
+ };
708
+
709
+ // If only one column remains, remove the entire layoutSection
710
+ if (layoutSectionNode.childCount === 1) {
711
+ tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
712
+ emitDeleteColumnAnalytics(0);
713
+ tr.setMeta('scrollIntoView', false);
714
+ return tr;
715
+ }
716
+
717
+ // Build new column list without the selected column
718
+ var remainingColumns = [];
719
+ layoutSectionNode.forEach(function (column, _offset, index) {
720
+ if (index !== selectedColumnIndex) {
721
+ remainingColumns.push(column);
722
+ }
723
+ });
724
+
725
+ // Redistribute widths proportionally among remaining columns using shared utility
726
+ var existingWidths = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
727
+ return column.attrs.width;
728
+ });
729
+ var redistributed = (0, _redistributeProportionally.redistributeAfterDeletion)(existingWidths, selectedColumnIndex, _consts.MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
730
+ var updatedLayoutSectionNode = layoutSectionNode.copy(_model.Fragment.fromArray(remainingColumns));
731
+ tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
732
+ emitDeleteColumnAnalytics(redistributed.length);
733
+ tr.setMeta('scrollIntoView', false);
734
+ return tr;
735
+ };
681
736
  };
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.redistributeProportionally = void 0;
7
+ exports.redistributeProportionally = exports.redistributeAfterDeletion = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var roundLayoutColumnWidth = function roundLayoutColumnWidth(width) {
10
10
  return Number(width.toFixed(2));
@@ -81,6 +81,36 @@ var redistributeWithMinimumWidth = function redistributeWithMinimumWidth(_ref) {
81
81
  });
82
82
  return widths;
83
83
  };
84
+ var redistributeAfterDeletion = exports.redistributeAfterDeletion = function redistributeAfterDeletion(currentWidths, removeIndex, minWidth) {
85
+ if (currentWidths.length === 0 || removeIndex < 0 || removeIndex >= currentWidths.length || !isValidWidth(minWidth)) {
86
+ return currentWidths;
87
+ }
88
+ if (currentWidths.some(function (width) {
89
+ return !isValidWidth(width);
90
+ })) {
91
+ return currentWidths.filter(function (_, i) {
92
+ return i !== removeIndex;
93
+ });
94
+ }
95
+ var remainingWidths = currentWidths.filter(function (_, i) {
96
+ return i !== removeIndex;
97
+ });
98
+ if (remainingWidths.length === 0) {
99
+ return remainingWidths;
100
+ }
101
+ var currentTotalWidth = sumWidths(currentWidths);
102
+ var targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
103
+ var redistributed = redistributeWithMinimumWidth({
104
+ weights: remainingWidths,
105
+ totalWidth: targetTotalWidth,
106
+ minWidth: minWidth
107
+ });
108
+ if (!redistributed) {
109
+ var equalWidth = roundLayoutColumnWidth(targetTotalWidth / remainingWidths.length);
110
+ return normaliseWidthsTotal(Array(remainingWidths.length).fill(equalWidth), targetTotalWidth, minWidth);
111
+ }
112
+ return normaliseWidthsTotal(redistributed, targetTotalWidth, minWidth);
113
+ };
84
114
  var redistributeProportionally = exports.redistributeProportionally = function redistributeProportionally(currentWidths, insertIndex, maxColumns, minWidth) {
85
115
  if (currentWidths.length === 0 || !Number.isInteger(maxColumns) || maxColumns <= 0 || currentWidths.length >= maxColumns || insertIndex < 0 || insertIndex > currentWidths.length || !isValidWidth(minWidth) || currentWidths.some(function (width) {
86
116
  return !isValidWidth(width);
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.DeleteColumnDropdownItem = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _reactIntl = require("react-intl");
10
+ var _messages = require("@atlaskit/editor-common/messages");
11
+ var _editorToolbar = require("@atlaskit/editor-toolbar");
12
+ var _useCurrentLayoutColumn = require("./useCurrentLayoutColumn");
13
+ 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); }
14
+ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
15
+ var api = _ref.api;
16
+ var _useIntl = (0, _reactIntl.useIntl)(),
17
+ formatMessage = _useIntl.formatMessage;
18
+ var currentColumn = (0, _useCurrentLayoutColumn.useCurrentLayoutColumn)(api);
19
+ var onClick = (0, _react.useCallback)(function () {
20
+ var _api$layout, _api$core;
21
+ var deleteCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
22
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
23
+ var _api$layout2;
24
+ var tr = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(props);
25
+ if (!tr) {
26
+ return tr !== null && tr !== void 0 ? tr : null;
27
+ }
28
+ api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
29
+ isOpen: false
30
+ })({
31
+ tr: tr
32
+ });
33
+ return tr;
34
+ });
35
+ }, [api]);
36
+ if (currentColumn === undefined) {
37
+ return null;
38
+ }
39
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
40
+ onClick: onClick
41
+ }, formatMessage(_messages.layoutMessages.deleteColumn));
42
+ };
@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _messages = require("@atlaskit/editor-common/messages");
11
11
  var _editorToolbar = require("@atlaskit/editor-toolbar");
12
12
  var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
13
+ var _DeleteColumnDropdownItem = require("./DeleteColumnDropdownItem");
13
14
  var _DistributeColumnsDropdownItem = require("./DistributeColumnsDropdownItem");
14
15
  var _InsertColumnDropdownItem = require("./InsertColumnDropdownItem");
15
16
  var _keys = require("./keys");
@@ -56,6 +57,15 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
56
57
  parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
57
58
  rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DISTRIBUTE_COLUMNS_MENU_ITEM.key]
58
59
  })]
60
+ }), _objectSpread(_objectSpread({}, _keys.DELETE_COLUMN_MENU_ITEM), {}, {
61
+ component: function component() {
62
+ return /*#__PURE__*/_react.default.createElement(_DeleteColumnDropdownItem.DeleteColumnDropdownItem, {
63
+ api: api
64
+ });
65
+ },
66
+ parents: [_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_MENU_SECTION), {}, {
67
+ rank: _keys.LAYOUT_COLUMN_MENU_SECTION_RANK[_keys.DELETE_COLUMN_MENU_ITEM.key]
68
+ })]
59
69
  }), _objectSpread(_objectSpread({}, _keys.VERTICAL_ALIGN_MENU), {}, {
60
70
  component: function component(_ref3) {
61
71
  var children = _ref3.children;
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- 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 = void 0;
7
+ 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;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  // --- Menu surface ---
10
10
 
@@ -58,9 +58,13 @@ var VERTICAL_ALIGN_BOTTOM_MENU_ITEM = exports.VERTICAL_ALIGN_BOTTOM_MENU_ITEM =
58
58
  type: 'menu-item',
59
59
  key: 'layout-column-menu-vertical-align-bottom-item'
60
60
  };
61
+ var DELETE_COLUMN_MENU_ITEM = exports.DELETE_COLUMN_MENU_ITEM = {
62
+ type: 'menu-item',
63
+ key: 'layout-column-menu-delete-item'
64
+ };
61
65
 
62
66
  // --- Item ranks within sections ---
63
67
 
64
- var LAYOUT_COLUMN_MENU_SECTION_RANK = exports.LAYOUT_COLUMN_MENU_SECTION_RANK = (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);
68
+ 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);
65
69
  var VERTICAL_ALIGN_MENU_RANK = exports.VERTICAL_ALIGN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
66
70
  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);
@@ -10,7 +10,7 @@ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
11
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
12
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
- import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
13
+ import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
14
14
  import { default as createLayoutPlugin } from './pm-plugins/main';
15
15
  import { pluginKey } from './pm-plugins/plugin-key';
16
16
  import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
@@ -290,9 +290,13 @@ export const layoutPlugin = ({
290
290
  return pluginKey.getState(editorState);
291
291
  },
292
292
  commands: {
293
- insertLayoutColumn: side => {
293
+ deleteLayoutColumn: props => {
294
294
  var _api$analytics4;
295
- return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
295
+ return deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
296
+ },
297
+ insertLayoutColumn: side => {
298
+ var _api$analytics5;
299
+ return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
296
300
  },
297
301
  setLayoutColumnValign,
298
302
  toggleLayoutColumnMenu
@@ -9,7 +9,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
9
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
10
  import { EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
11
11
  import { pluginKey } from './plugin-key';
12
- import { redistributeProportionally } from './utils/redistribute-proportionally';
12
+ import { redistributeAfterDeletion, redistributeProportionally } from './utils/redistribute-proportionally';
13
13
  export const ONE_COL_LAYOUTS = ['single'];
14
14
  export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
15
15
  export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -659,4 +659,58 @@ export const toggleLayoutColumnMenu = ({
659
659
  });
660
660
  tr.setMeta('scrollIntoView', false);
661
661
  return tr;
662
+ };
663
+ export const deleteLayoutColumn = editorAnalyticsAPI => ({
664
+ tr
665
+ }) => {
666
+ if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
667
+ return null;
668
+ }
669
+ const selectedColumn = getSelectedLayoutColumnInSection(tr);
670
+ if (!selectedColumn) {
671
+ return null;
672
+ }
673
+ const {
674
+ layoutSectionNode,
675
+ layoutSectionPos,
676
+ selectedColumnIndex
677
+ } = selectedColumn;
678
+ const emitDeleteColumnAnalytics = columnCount => {
679
+ editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
680
+ action: ACTION.DELETED,
681
+ actionSubject: ACTION_SUBJECT.DOCUMENT,
682
+ actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
683
+ attributes: {
684
+ columnCount,
685
+ inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
686
+ selectedIndex: selectedColumnIndex
687
+ },
688
+ eventType: EVENT_TYPE.TRACK
689
+ })(tr);
690
+ };
691
+
692
+ // If only one column remains, remove the entire layoutSection
693
+ if (layoutSectionNode.childCount === 1) {
694
+ tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
695
+ emitDeleteColumnAnalytics(0);
696
+ tr.setMeta('scrollIntoView', false);
697
+ return tr;
698
+ }
699
+
700
+ // Build new column list without the selected column
701
+ const remainingColumns = [];
702
+ layoutSectionNode.forEach((column, _offset, index) => {
703
+ if (index !== selectedColumnIndex) {
704
+ remainingColumns.push(column);
705
+ }
706
+ });
707
+
708
+ // Redistribute widths proportionally among remaining columns using shared utility
709
+ const existingWidths = mapChildren(layoutSectionNode, column => column.attrs.width);
710
+ const redistributed = redistributeAfterDeletion(existingWidths, selectedColumnIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
711
+ const updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(remainingColumns));
712
+ tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
713
+ emitDeleteColumnAnalytics(redistributed.length);
714
+ tr.setMeta('scrollIntoView', false);
715
+ return tr;
662
716
  };
@@ -61,6 +61,30 @@ const redistributeWithMinimumWidth = ({
61
61
  });
62
62
  return widths;
63
63
  };
64
+ export const redistributeAfterDeletion = (currentWidths, removeIndex, minWidth) => {
65
+ if (currentWidths.length === 0 || removeIndex < 0 || removeIndex >= currentWidths.length || !isValidWidth(minWidth)) {
66
+ return currentWidths;
67
+ }
68
+ if (currentWidths.some(width => !isValidWidth(width))) {
69
+ return currentWidths.filter((_, i) => i !== removeIndex);
70
+ }
71
+ const remainingWidths = currentWidths.filter((_, i) => i !== removeIndex);
72
+ if (remainingWidths.length === 0) {
73
+ return remainingWidths;
74
+ }
75
+ const currentTotalWidth = sumWidths(currentWidths);
76
+ const targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
77
+ const redistributed = redistributeWithMinimumWidth({
78
+ weights: remainingWidths,
79
+ totalWidth: targetTotalWidth,
80
+ minWidth
81
+ });
82
+ if (!redistributed) {
83
+ const equalWidth = roundLayoutColumnWidth(targetTotalWidth / remainingWidths.length);
84
+ return normaliseWidthsTotal(Array(remainingWidths.length).fill(equalWidth), targetTotalWidth, minWidth);
85
+ }
86
+ return normaliseWidthsTotal(redistributed, targetTotalWidth, minWidth);
87
+ };
64
88
  export const redistributeProportionally = (currentWidths, insertIndex, maxColumns, minWidth) => {
65
89
  if (currentWidths.length === 0 || !Number.isInteger(maxColumns) || maxColumns <= 0 || currentWidths.length >= maxColumns || insertIndex < 0 || insertIndex > currentWidths.length || !isValidWidth(minWidth) || currentWidths.some(width => !isValidWidth(width))) {
66
90
  return currentWidths;
@@ -0,0 +1,37 @@
1
+ import React, { useCallback } from 'react';
2
+ import { useIntl } from 'react-intl';
3
+ import { layoutMessages } from '@atlaskit/editor-common/messages';
4
+ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
5
+ import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
6
+ const DeleteColumnDropdownItem = ({
7
+ api
8
+ }) => {
9
+ const {
10
+ formatMessage
11
+ } = useIntl();
12
+ const currentColumn = useCurrentLayoutColumn(api);
13
+ const onClick = useCallback(() => {
14
+ var _api$layout, _api$core;
15
+ const deleteCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
16
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(props => {
17
+ var _api$layout2;
18
+ const tr = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(props);
19
+ if (!tr) {
20
+ return tr !== null && tr !== void 0 ? tr : null;
21
+ }
22
+ api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
23
+ isOpen: false
24
+ })({
25
+ tr
26
+ });
27
+ return tr;
28
+ });
29
+ }, [api]);
30
+ if (currentColumn === undefined) {
31
+ return null;
32
+ }
33
+ return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
34
+ onClick: onClick
35
+ }, formatMessage(layoutMessages.deleteColumn));
36
+ };
37
+ export { DeleteColumnDropdownItem };
@@ -2,9 +2,10 @@ import React from 'react';
2
2
  import { layoutMessages } from '@atlaskit/editor-common/messages';
3
3
  import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
4
4
  import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
5
+ import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
5
6
  import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
6
7
  import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
7
- import { 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';
8
+ 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';
8
9
  import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
9
10
  import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
10
11
  export const LAYOUT_COLUMN_MENU_FALLBACKS = {
@@ -51,6 +52,15 @@ export const getLayoutColumnMenuComponents = ({
51
52
  ...LAYOUT_COLUMN_MENU_SECTION,
52
53
  rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
53
54
  }]
55
+ }, {
56
+ ...DELETE_COLUMN_MENU_ITEM,
57
+ component: () => /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
58
+ api: api
59
+ }),
60
+ parents: [{
61
+ ...LAYOUT_COLUMN_MENU_SECTION,
62
+ rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
63
+ }]
54
64
  }, {
55
65
  ...VERTICAL_ALIGN_MENU,
56
66
  component: ({
@@ -52,6 +52,10 @@ export const VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
52
52
  type: 'menu-item',
53
53
  key: 'layout-column-menu-vertical-align-bottom-item'
54
54
  };
55
+ export const DELETE_COLUMN_MENU_ITEM = {
56
+ type: 'menu-item',
57
+ key: 'layout-column-menu-delete-item'
58
+ };
55
59
 
56
60
  // --- Item ranks within sections ---
57
61
 
@@ -59,7 +63,8 @@ export const LAYOUT_COLUMN_MENU_SECTION_RANK = {
59
63
  [VERTICAL_ALIGN_MENU.key]: 100,
60
64
  [INSERT_COLUMN_LEFT_MENU_ITEM.key]: 200,
61
65
  [INSERT_COLUMN_RIGHT_MENU_ITEM.key]: 300,
62
- [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 400
66
+ [DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 400,
67
+ [DELETE_COLUMN_MENU_ITEM.key]: 500
63
68
  };
64
69
  export const VERTICAL_ALIGN_MENU_RANK = {
65
70
  [LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key]: 100
@@ -10,7 +10,7 @@ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
11
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
12
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
- import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
13
+ import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
14
14
  import { default as createLayoutPlugin } from './pm-plugins/main';
15
15
  import { pluginKey } from './pm-plugins/plugin-key';
16
16
  import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
@@ -302,9 +302,13 @@ export var layoutPlugin = function layoutPlugin(_ref) {
302
302
  return pluginKey.getState(editorState);
303
303
  },
304
304
  commands: {
305
- insertLayoutColumn: function insertLayoutColumn(side) {
305
+ deleteLayoutColumn: function deleteLayoutColumn(props) {
306
306
  var _api$analytics4;
307
- return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
307
+ return _deleteLayoutColumn(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(props);
308
+ },
309
+ insertLayoutColumn: function insertLayoutColumn(side) {
310
+ var _api$analytics5;
311
+ return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
308
312
  },
309
313
  setLayoutColumnValign: setLayoutColumnValign,
310
314
  toggleLayoutColumnMenu: toggleLayoutColumnMenu
@@ -12,7 +12,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
12
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
13
  import { EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
14
14
  import { pluginKey } from './plugin-key';
15
- import { redistributeProportionally } from './utils/redistribute-proportionally';
15
+ import { redistributeAfterDeletion, redistributeProportionally } from './utils/redistribute-proportionally';
16
16
  export var ONE_COL_LAYOUTS = ['single'];
17
17
  export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
18
18
  export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
@@ -668,4 +668,59 @@ export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref7) {
668
668
  tr.setMeta('scrollIntoView', false);
669
669
  return tr;
670
670
  };
671
+ };
672
+ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
673
+ return function (_ref9) {
674
+ var tr = _ref9.tr;
675
+ if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
676
+ return null;
677
+ }
678
+ var selectedColumn = getSelectedLayoutColumnInSection(tr);
679
+ if (!selectedColumn) {
680
+ return null;
681
+ }
682
+ var layoutSectionNode = selectedColumn.layoutSectionNode,
683
+ layoutSectionPos = selectedColumn.layoutSectionPos,
684
+ selectedColumnIndex = selectedColumn.selectedColumnIndex;
685
+ var emitDeleteColumnAnalytics = function emitDeleteColumnAnalytics(columnCount) {
686
+ editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
687
+ action: ACTION.DELETED,
688
+ actionSubject: ACTION_SUBJECT.DOCUMENT,
689
+ actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
690
+ attributes: {
691
+ columnCount: columnCount,
692
+ inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU,
693
+ selectedIndex: selectedColumnIndex
694
+ },
695
+ eventType: EVENT_TYPE.TRACK
696
+ })(tr);
697
+ };
698
+
699
+ // If only one column remains, remove the entire layoutSection
700
+ if (layoutSectionNode.childCount === 1) {
701
+ tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
702
+ emitDeleteColumnAnalytics(0);
703
+ tr.setMeta('scrollIntoView', false);
704
+ return tr;
705
+ }
706
+
707
+ // Build new column list without the selected column
708
+ var remainingColumns = [];
709
+ layoutSectionNode.forEach(function (column, _offset, index) {
710
+ if (index !== selectedColumnIndex) {
711
+ remainingColumns.push(column);
712
+ }
713
+ });
714
+
715
+ // Redistribute widths proportionally among remaining columns using shared utility
716
+ var existingWidths = mapChildren(layoutSectionNode, function (column) {
717
+ return column.attrs.width;
718
+ });
719
+ var redistributed = redistributeAfterDeletion(existingWidths, selectedColumnIndex, MIN_LAYOUT_COLUMN_WIDTH_PERCENT);
720
+ var updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(remainingColumns));
721
+ tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
722
+ emitDeleteColumnAnalytics(redistributed.length);
723
+ tr.setMeta('scrollIntoView', false);
724
+ return tr;
725
+ };
671
726
  };
@@ -74,6 +74,36 @@ var redistributeWithMinimumWidth = function redistributeWithMinimumWidth(_ref) {
74
74
  });
75
75
  return widths;
76
76
  };
77
+ export var redistributeAfterDeletion = function redistributeAfterDeletion(currentWidths, removeIndex, minWidth) {
78
+ if (currentWidths.length === 0 || removeIndex < 0 || removeIndex >= currentWidths.length || !isValidWidth(minWidth)) {
79
+ return currentWidths;
80
+ }
81
+ if (currentWidths.some(function (width) {
82
+ return !isValidWidth(width);
83
+ })) {
84
+ return currentWidths.filter(function (_, i) {
85
+ return i !== removeIndex;
86
+ });
87
+ }
88
+ var remainingWidths = currentWidths.filter(function (_, i) {
89
+ return i !== removeIndex;
90
+ });
91
+ if (remainingWidths.length === 0) {
92
+ return remainingWidths;
93
+ }
94
+ var currentTotalWidth = sumWidths(currentWidths);
95
+ var targetTotalWidth = Math.round(currentTotalWidth) === 100 ? 100 : currentTotalWidth;
96
+ var redistributed = redistributeWithMinimumWidth({
97
+ weights: remainingWidths,
98
+ totalWidth: targetTotalWidth,
99
+ minWidth: minWidth
100
+ });
101
+ if (!redistributed) {
102
+ var equalWidth = roundLayoutColumnWidth(targetTotalWidth / remainingWidths.length);
103
+ return normaliseWidthsTotal(Array(remainingWidths.length).fill(equalWidth), targetTotalWidth, minWidth);
104
+ }
105
+ return normaliseWidthsTotal(redistributed, targetTotalWidth, minWidth);
106
+ };
77
107
  export var redistributeProportionally = function redistributeProportionally(currentWidths, insertIndex, maxColumns, minWidth) {
78
108
  if (currentWidths.length === 0 || !Number.isInteger(maxColumns) || maxColumns <= 0 || currentWidths.length >= maxColumns || insertIndex < 0 || insertIndex > currentWidths.length || !isValidWidth(minWidth) || currentWidths.some(function (width) {
79
109
  return !isValidWidth(width);
@@ -0,0 +1,35 @@
1
+ import React, { useCallback } from 'react';
2
+ import { useIntl } from 'react-intl';
3
+ import { layoutMessages } from '@atlaskit/editor-common/messages';
4
+ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
5
+ import { useCurrentLayoutColumn } from './useCurrentLayoutColumn';
6
+ var DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
7
+ var api = _ref.api;
8
+ var _useIntl = useIntl(),
9
+ formatMessage = _useIntl.formatMessage;
10
+ var currentColumn = useCurrentLayoutColumn(api);
11
+ var onClick = useCallback(function () {
12
+ var _api$layout, _api$core;
13
+ var deleteCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.deleteLayoutColumn;
14
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
15
+ var _api$layout2;
16
+ var tr = deleteCommand === null || deleteCommand === void 0 ? void 0 : deleteCommand(props);
17
+ if (!tr) {
18
+ return tr !== null && tr !== void 0 ? tr : null;
19
+ }
20
+ api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
21
+ isOpen: false
22
+ })({
23
+ tr: tr
24
+ });
25
+ return tr;
26
+ });
27
+ }, [api]);
28
+ if (currentColumn === undefined) {
29
+ return null;
30
+ }
31
+ return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
32
+ onClick: onClick
33
+ }, formatMessage(layoutMessages.deleteColumn));
34
+ };
35
+ export { DeleteColumnDropdownItem };
@@ -5,9 +5,10 @@ import React from 'react';
5
5
  import { layoutMessages } from '@atlaskit/editor-common/messages';
6
6
  import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
7
7
  import { ToolbarMenuContainer } from '@atlaskit/editor-toolbar/toolbar-menu-container';
8
+ import { DeleteColumnDropdownItem } from './DeleteColumnDropdownItem';
8
9
  import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
9
10
  import { InsertColumnDropdownItem } from './InsertColumnDropdownItem';
10
- import { 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';
11
+ 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';
11
12
  import { VerticalAlignDropdownItem } from './VerticalAlignDropdownItem';
12
13
  import { VerticalAlignNestedMenu } from './VerticalAlignNestedMenu';
13
14
  export var LAYOUT_COLUMN_MENU_FALLBACKS = {
@@ -49,6 +50,15 @@ export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponent
49
50
  parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
50
51
  rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
51
52
  })]
53
+ }), _objectSpread(_objectSpread({}, DELETE_COLUMN_MENU_ITEM), {}, {
54
+ component: function component() {
55
+ return /*#__PURE__*/React.createElement(DeleteColumnDropdownItem, {
56
+ api: api
57
+ });
58
+ },
59
+ parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
60
+ rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DELETE_COLUMN_MENU_ITEM.key]
61
+ })]
52
62
  }), _objectSpread(_objectSpread({}, VERTICAL_ALIGN_MENU), {}, {
53
63
  component: function component(_ref3) {
54
64
  var children = _ref3.children;
@@ -51,9 +51,13 @@ export var VERTICAL_ALIGN_BOTTOM_MENU_ITEM = {
51
51
  type: 'menu-item',
52
52
  key: 'layout-column-menu-vertical-align-bottom-item'
53
53
  };
54
+ export var DELETE_COLUMN_MENU_ITEM = {
55
+ type: 'menu-item',
56
+ key: 'layout-column-menu-delete-item'
57
+ };
54
58
 
55
59
  // --- Item ranks within sections ---
56
60
 
57
- export var LAYOUT_COLUMN_MENU_SECTION_RANK = _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);
61
+ 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);
58
62
  export var VERTICAL_ALIGN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_VERTICAL_ALIGN_MENU_SECTION.key, 100);
59
63
  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);
@@ -9,7 +9,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
9
9
  import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
10
10
  import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
11
11
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
12
- import type { InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
12
+ import type { deleteLayoutColumn, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
13
13
  import type { LayoutState } from './pm-plugins/types';
14
14
  import type { LayoutPluginOptions } from './types';
15
15
  export type LayoutPluginDependencies = [
@@ -29,6 +29,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
29
29
  insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
30
30
  };
31
31
  commands: {
32
+ deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
32
33
  insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
33
34
  setLayoutColumnValign: typeof setLayoutColumnValign;
34
35
  toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
@@ -37,3 +37,4 @@ export declare const setLayoutColumnValign: (valign: Valign) => EditorCommand;
37
37
  export declare const toggleLayoutColumnMenu: ({ isOpen }: {
38
38
  isOpen?: boolean;
39
39
  }) => EditorCommand;
40
+ export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
@@ -1 +1,2 @@
1
+ export declare const redistributeAfterDeletion: (currentWidths: number[], removeIndex: number, minWidth: number) => number[];
1
2
  export declare const redistributeProportionally: (currentWidths: number[], insertIndex: number, maxColumns: number, minWidth: number) => number[];
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { LayoutPlugin } from '../../layoutPluginType';
4
+ type DeleteColumnDropdownItemProps = {
5
+ api: ExtractInjectionAPI<LayoutPlugin> | undefined;
6
+ };
7
+ declare const DeleteColumnDropdownItem: ({ api, }: DeleteColumnDropdownItemProps) => React.JSX.Element | null;
8
+ export { DeleteColumnDropdownItem };
@@ -10,6 +10,7 @@ export declare const DISTRIBUTE_COLUMNS_MENU_ITEM: MenuItemType;
10
10
  export declare const VERTICAL_ALIGN_TOP_MENU_ITEM: MenuItemType;
11
11
  export declare const VERTICAL_ALIGN_MIDDLE_MENU_ITEM: MenuItemType;
12
12
  export declare const VERTICAL_ALIGN_BOTTOM_MENU_ITEM: MenuItemType;
13
+ export declare const DELETE_COLUMN_MENU_ITEM: MenuItemType;
13
14
  export declare const LAYOUT_COLUMN_MENU_SECTION_RANK: Record<string, number>;
14
15
  export declare const VERTICAL_ALIGN_MENU_RANK: Record<string, number>;
15
16
  export declare const VERTICAL_ALIGN_MENU_SECTION_RANK: Record<string, number>;
@@ -9,7 +9,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
9
9
  import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
10
10
  import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
11
11
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
12
- import type { InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
12
+ import type { deleteLayoutColumn, InsertLayoutColumnSide, insertLayoutColumnsWithAnalytics, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
13
13
  import type { LayoutState } from './pm-plugins/types';
14
14
  import type { LayoutPluginOptions } from './types';
15
15
  export type LayoutPluginDependencies = [
@@ -29,6 +29,7 @@ export type LayoutPlugin = NextEditorPlugin<'layout', {
29
29
  insertLayoutColumns: ReturnType<typeof insertLayoutColumnsWithAnalytics>;
30
30
  };
31
31
  commands: {
32
+ deleteLayoutColumn: ReturnType<typeof deleteLayoutColumn>;
32
33
  insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
33
34
  setLayoutColumnValign: typeof setLayoutColumnValign;
34
35
  toggleLayoutColumnMenu: typeof toggleLayoutColumnMenu;
@@ -37,3 +37,4 @@ export declare const setLayoutColumnValign: (valign: Valign) => EditorCommand;
37
37
  export declare const toggleLayoutColumnMenu: ({ isOpen }: {
38
38
  isOpen?: boolean;
39
39
  }) => EditorCommand;
40
+ export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
@@ -1 +1,2 @@
1
+ export declare const redistributeAfterDeletion: (currentWidths: number[], removeIndex: number, minWidth: number) => number[];
1
2
  export declare const redistributeProportionally: (currentWidths: number[], insertIndex: number, maxColumns: number, minWidth: number) => number[];
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { LayoutPlugin } from '../../layoutPluginType';
4
+ type DeleteColumnDropdownItemProps = {
5
+ api: ExtractInjectionAPI<LayoutPlugin> | undefined;
6
+ };
7
+ declare const DeleteColumnDropdownItem: ({ api, }: DeleteColumnDropdownItemProps) => React.JSX.Element | null;
8
+ export { DeleteColumnDropdownItem };
@@ -10,6 +10,7 @@ export declare const DISTRIBUTE_COLUMNS_MENU_ITEM: MenuItemType;
10
10
  export declare const VERTICAL_ALIGN_TOP_MENU_ITEM: MenuItemType;
11
11
  export declare const VERTICAL_ALIGN_MIDDLE_MENU_ITEM: MenuItemType;
12
12
  export declare const VERTICAL_ALIGN_BOTTOM_MENU_ITEM: MenuItemType;
13
+ export declare const DELETE_COLUMN_MENU_ITEM: MenuItemType;
13
14
  export declare const LAYOUT_COLUMN_MENU_SECTION_RANK: Record<string, number>;
14
15
  export declare const VERTICAL_ALIGN_MENU_RANK: Record<string, number>;
15
16
  export declare const VERTICAL_ALIGN_MENU_SECTION_RANK: Record<string, number>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "10.3.5",
3
+ "version": "10.4.0",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -43,19 +43,19 @@
43
43
  "@atlaskit/editor-plugin-width": "^11.1.0",
44
44
  "@atlaskit/editor-prosemirror": "^7.3.0",
45
45
  "@atlaskit/editor-shared-styles": "^3.11.0",
46
- "@atlaskit/editor-toolbar": "^1.6.0",
46
+ "@atlaskit/editor-toolbar": "^1.7.0",
47
47
  "@atlaskit/editor-ui-control-model": "^1.2.0",
48
48
  "@atlaskit/icon": "^35.0.0",
49
49
  "@atlaskit/icon-lab": "^6.9.0",
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
- "@atlaskit/tmp-editor-statsig": "^82.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^82.1.0",
52
52
  "@atlaskit/tokens": "^13.0.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@emotion/react": "^11.7.1",
55
55
  "bind-event-listener": "^3.0.0"
56
56
  },
57
57
  "peerDependencies": {
58
- "@atlaskit/editor-common": "^114.37.0",
58
+ "@atlaskit/editor-common": "^114.39.0",
59
59
  "react": "^18.2.0",
60
60
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
61
61
  },