@atlaskit/editor-plugin-layout 23.0.3 → 23.0.4

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.
@@ -14,7 +14,6 @@ import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-colu
14
14
  import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-right';
15
15
  import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
16
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
17
- import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
18
17
  import { deleteActiveLayoutNode, distributeLayoutColumns, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
19
18
  import { isDistributedUniformly } from '../pm-plugins/utils/layout-column-distribution';
20
19
  import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
@@ -53,47 +52,6 @@ const SIDEBAR_LAYOUT_TYPES = [{
53
52
  title: toolbarMessages.threeColumnsWithSidebars,
54
53
  icon: LayoutThreeColumnsSidebarsIcon
55
54
  }];
56
-
57
- // These are used for advanced layout options
58
- const LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD = [{
59
- id: 'editor.layout.twoEquals',
60
- type: 'two_equal',
61
- title: toolbarMessages.twoColumns,
62
- icon: LayoutTwoColumnsIcon
63
- }, {
64
- id: 'editor.layout.twoRightSidebar',
65
- type: 'two_right_sidebar',
66
- title: toolbarMessages.rightSidebar,
67
- icon: LayoutTwoColumnsSidebarRightIcon
68
- }, {
69
- id: 'editor.layout.twoLeftSidebar',
70
- type: 'two_left_sidebar',
71
- title: toolbarMessages.leftSidebar,
72
- icon: LayoutTwoColumnsSidebarLeftIcon
73
- }];
74
- const LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD = [{
75
- id: 'editor.layout.threeEquals',
76
- type: 'three_equal',
77
- title: toolbarMessages.threeColumns,
78
- icon: LayoutThreeColumnsIcon
79
- }, {
80
- id: 'editor.layout.threeWithSidebars',
81
- type: 'three_with_sidebars',
82
- title: toolbarMessages.threeColumnsWithSidebars,
83
- icon: LayoutThreeColumnsSidebarsIcon
84
- }, {
85
- id: 'editor.layout.threeRightSidebars',
86
- type: 'three_right_sidebars',
87
- title: toolbarMessages.threeColumnsWithRightSidebars,
88
- icon: LayoutThreeWithRightSidebarsIcon,
89
- iconFallback: LayoutThreeWithRightSidebarsIcon
90
- }, {
91
- id: 'editor.layout.threeLeftSidebars',
92
- type: 'three_left_sidebars',
93
- title: toolbarMessages.threeColumnsWithLeftSidebars,
94
- icon: LayoutThreeWithLeftSidebarsIcon,
95
- iconFallback: LayoutThreeWithLeftSidebarsIcon
96
- }];
97
55
  const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
98
56
  id: 'editor.layout.twoRightSidebar',
99
57
  type: 'two_right_sidebar',
@@ -179,8 +137,7 @@ const getAdvancedLayoutItems = ({
179
137
  allowAdvancedSingleColumnLayout
180
138
  }) => {
181
139
  const numberOfColumns = node.content.childCount || 2;
182
- const isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
183
- const distributionOptions = isLayoutColumnMenuEnabled ? numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [] : numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD : [];
140
+ const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
184
141
  const columnOptions = [{
185
142
  title: intl.formatMessage(layoutMessages.columnOption, {
186
143
  count: 2
@@ -223,7 +180,7 @@ const getAdvancedLayoutItems = ({
223
180
  onClick: setPresetLayout(editorAnalyticsAPI)('single'),
224
181
  selected: numberOfColumns === 1
225
182
  }] : []), ...columnOptions];
226
- const distributeColumnsButton = isLayoutColumnMenuEnabled && numberOfColumns > 1 ? {
183
+ const distributeColumnsButton = numberOfColumns > 1 ? {
227
184
  disabled: isDistributedUniformly(getLayoutColumnWidths(node)),
228
185
  icon: TableColumnsDistributeIcon,
229
186
  onClick: (editorState, dispatch) => {
@@ -10,7 +10,6 @@ import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
10
10
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
11
11
  import { fg } from '@atlaskit/platform-feature-flags/fg';
12
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
13
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
13
  import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
15
14
  import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
16
15
  import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -52,7 +51,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
52
51
  return tr;
53
52
  };
54
53
  export var layoutPlugin = function layoutPlugin(_ref) {
55
- var _api$blockMenu, _api$analytics2;
54
+ var _api$blockMenu, _api$uiControlRegistr, _api$analytics2;
56
55
  var _ref$config = _ref.config,
57
56
  options = _ref$config === void 0 ? {} : _ref$config,
58
57
  api = _ref.api;
@@ -75,12 +74,9 @@ export var layoutPlugin = function layoutPlugin(_ref) {
75
74
  return Boolean(api === null || api === void 0 || (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 ? void 0 : _api$blockMenu2.actions.isTransformOptionDisabled(LAYOUT_SECTION_NODE_NAME));
76
75
  }
77
76
  }]);
78
- if (expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
79
- var _api$uiControlRegistr;
80
- api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getLayoutColumnMenuComponents({
81
- api: api
82
- }));
83
- }
77
+ api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getLayoutColumnMenuComponents({
78
+ api: api
79
+ }));
84
80
  if (isRegisteredSlashCommandEnabled) {
85
81
  var _api$uiControlRegistr2;
86
82
  api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(getLayoutQuickInsertComponents({
@@ -106,16 +102,14 @@ export var layoutPlugin = function layoutPlugin(_ref) {
106
102
  return createLayoutPlugin(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
107
103
  }
108
104
  }];
109
- if (expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
110
- plugins.push({
111
- name: 'layoutKeymap',
112
- plugin: function plugin() {
113
- return createLayoutKeymapPlugin({
114
- api: api
115
- });
116
- }
117
- });
118
- }
105
+ plugins.push({
106
+ name: 'layoutKeymap',
107
+ plugin: function plugin() {
108
+ return createLayoutKeymapPlugin({
109
+ api: api
110
+ });
111
+ }
112
+ });
119
113
  if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max') && api && editorExperiment('advanced_layouts', true)) {
120
114
  plugins.push({
121
115
  name: 'layoutResizing',
@@ -284,7 +278,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
284
278
  popupsMountPoint = _ref5.popupsMountPoint,
285
279
  popupsBoundariesElement = _ref5.popupsBoundariesElement,
286
280
  popupsScrollableElement = _ref5.popupsScrollableElement;
287
- return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
281
+ return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
288
282
  api: api,
289
283
  editorView: editorView,
290
284
  mountTo: popupsMountPoint,
@@ -611,9 +611,6 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
611
611
  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
612
612
  return function (_ref5) {
613
613
  var tr = _ref5.tr;
614
- if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
615
- return null;
616
- }
617
614
  var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
618
615
  if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length === 0) {
619
616
  return null;
@@ -675,12 +672,10 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
675
672
 
676
673
  // Inserting left shifts positions at/after the new column right by its size; inserting
677
674
  // right leaves them unchanged. Remap the original selection through that mapping.
678
- if (!fg('platform_editor_layout_column_menu_kill_switch_1')) {
679
- var insertMapping = side === 'left' ? new Mapping([new StepMap([insertedColumnPos, 0, newColumn.nodeSize])]) : new Mapping();
680
- var restoredSelection = remapSelectionThroughMapping(originalSelection, insertMapping, tr.doc);
681
- if (restoredSelection) {
682
- tr.setSelection(restoredSelection);
683
- }
675
+ var insertMapping = side === 'left' ? new Mapping([new StepMap([insertedColumnPos, 0, newColumn.nodeSize])]) : new Mapping();
676
+ var restoredSelection = remapSelectionThroughMapping(originalSelection, insertMapping, tr.doc);
677
+ if (restoredSelection) {
678
+ tr.setSelection(restoredSelection);
684
679
  }
685
680
  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
686
681
  action: ACTION.INSERTED,
@@ -722,9 +717,6 @@ export var setLayoutColumnValign = function setLayoutColumnValign(_ref8, editorA
722
717
  inputMethod = _ref8$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod;
723
718
  return function (_ref9) {
724
719
  var tr = _ref9.tr;
725
- if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
726
- return null;
727
- }
728
720
  var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
729
721
  if (!selectedLayoutColumnsResult) {
730
722
  return null;
@@ -779,9 +771,6 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
779
771
  target = _ref10$target === void 0 ? 'selectedColumns' : _ref10$target;
780
772
  return function (_ref11) {
781
773
  var tr = _ref11.tr;
782
- if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
783
- return null;
784
- }
785
774
  var selectedLayoutColumnsResult = target === 'allColumns' ? getAllLayoutColumnsFromSelection(tr.selection) : getSelectedLayoutColumnsFromSelection(tr.selection);
786
775
  if (!selectedLayoutColumnsResult || selectedLayoutColumnsResult.selectedLayoutColumns.length < 2) {
787
776
  return null;
@@ -890,10 +879,6 @@ export var deleteLayoutColumn = function deleteLayoutColumn() {
890
879
  return function (_ref18) {
891
880
  var _api$blockControls4;
892
881
  var tr = _ref18.tr;
893
- if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
894
- return null;
895
- }
896
-
897
882
  // Only delete columns that are explicitly selected (a column NodeSelection or a selection
898
883
  // fully containing columns). This stops a bare caret inside a column — including inside
899
884
  // nested content such as a table — from deleting the whole column via the delete shortcut.
@@ -972,7 +957,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn() {
972
957
  // last column when the deleted slot no longer exists. Otherwise the replace above maps
973
958
  // the caret out of the layout to the following paragraph.
974
959
  var remainingColumnCount = remainingColumns.length;
975
- if (hadTextSelection && !fg('platform_editor_layout_column_menu_kill_switch_1') && remainingColumnCount > 0) {
960
+ if (hadTextSelection && remainingColumnCount > 0) {
976
961
  var targetColumnIndex = Math.min(startIndex, remainingColumnCount - 1);
977
962
  var updatedSectionNode = tr.doc.nodeAt(layoutSectionPos);
978
963
  if (updatedSectionNode) {
@@ -7,7 +7,6 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
7
7
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
8
8
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
9
9
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
10
- import { fg } from '@atlaskit/platform-feature-flags/fg';
11
10
  import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
12
11
 
13
12
  /**
@@ -78,8 +77,7 @@ var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftC
78
77
 
79
78
  // Capture the selection before the replace below, which otherwise maps the caret out of
80
79
  // the layout to the following paragraph. Restored at the same positions afterwards.
81
- var shouldPreserveSelection = !fg('platform_editor_layout_column_menu_kill_switch_1');
82
- var selectionBeforeResize = shouldPreserveSelection ? state.selection : null;
80
+ var selectionBeforeResize = state.selection;
83
81
  tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, Fragment.from(newColumns));
84
82
  tr.setMeta('layoutColumnResize', true);
85
83
  tr.setMeta('scrollIntoView', false);
@@ -12,7 +12,6 @@ import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosem
12
12
  import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
13
13
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
14
14
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
15
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
15
  import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
17
16
  import { getColumnDividerDecorations } from './column-resize-divider';
18
17
  import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
@@ -28,7 +27,7 @@ export var DEFAULT_LAYOUT = 'two_equal';
28
27
  * Returns `true` when it placed a selection and consumed the click, else `false`.
29
28
  */
30
29
  var applyBlankSpaceGapCursor = function applyBlankSpaceGapCursor(view, event) {
31
- if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) || !editorExperiment('advanced_layouts', true)) {
30
+ if (!editorExperiment('advanced_layouts', true)) {
32
31
  return false;
33
32
  }
34
33
  var gapTarget = getGapCursorTargetForBlankSpaceClick(view, event);
@@ -3,7 +3,6 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
3
3
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
4
4
  import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
5
5
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
6
- import { fg } from '@atlaskit/platform-feature-flags/fg';
7
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
8
7
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
8
  export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
@@ -64,18 +63,12 @@ var supportsBlankSpaceGapCursorFallback = function supportsBlankSpaceGapCursorFa
64
63
  /**
65
64
  * For a blank-space click inside a layout column — above the first child (middle/bottom-aligned
66
65
  * columns) or below the last child (any alignment) — return the ProseMirror position and side
67
- * for a gap cursor. Returns `undefined` when the kill switch is ON, the click is outside a
68
- * layoutColumn, or the Y coordinate is not in blank space.
69
- *
70
- * The `advanced_layouts` / `platform_editor_layout_column_menu` gates live in the caller
71
- * (`applyBlankSpaceGapCursor`); only the kill switch is checked here.
66
+ * for a gap cursor. Returns `undefined` when the click is outside a layoutColumn or the Y
67
+ * coordinate is not in blank space. The `advanced_layouts` gate lives in the caller
68
+ * (`applyBlankSpaceGapCursor`).
72
69
  */
73
70
  export var getGapCursorTargetForBlankSpaceClick = function getGapCursorTargetForBlankSpaceClick(view, event) {
74
71
  var _columnNode$attrs;
75
- if (fg('platform_editor_layout_column_menu_kill_switch_1')) {
76
- return undefined;
77
- }
78
-
79
72
  // Resolve the column from the DOM target so it works even when posAtCoords returns null
80
73
  // (nothing rendered at the clicked Y).
81
74
  var target = event.target;
@@ -14,10 +14,10 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
14
14
  import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
15
15
  import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
16
16
  import { LAYOUT_COLUMN_MENU } from './keys';
17
- import { calculateFallbackBottomPosition, getLayoutColumnMenuPositioningProps, shouldOpenLayoutColumnMenuBelow } from './utils';
18
17
  var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
19
18
  var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
20
19
  var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
20
+ var LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = [0, 2];
21
21
 
22
22
  /**
23
23
  * Returns the drag handle button for the selected layout column.
@@ -131,34 +131,11 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
131
131
  }
132
132
  var target = isExperimentEnabled('platform_editor_block_control_migration') ? surfaceTargetRef.current : legacyTarget;
133
133
  var hasValidTarget = target instanceof HTMLElement;
134
- var positionLayoutColumnMenu = useCallback(function (position) {
135
- var _menuWrapperRef$curre;
136
- var popup = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.parentElement;
137
- if (!(target instanceof HTMLElement) || !(popup instanceof HTMLElement)) {
138
- return position;
139
- }
140
- if (shouldOpenLayoutColumnMenuBelow({
141
- editorView: editorView,
142
- popup: popup,
143
- scrollableElement: scrollableElement,
144
- target: target
145
- })) {
146
- return calculateFallbackBottomPosition(position, target, popup);
147
- }
148
- return position;
149
- }, [editorView, scrollableElement, target]);
150
134
  useEffect(function () {
151
135
  if (isLayoutColumnMenuOpen && (!hasValidMenuSelection || !hasValidTarget || components.length === 0)) {
152
136
  closeLayoutColumnMenu();
153
137
  }
154
138
  }, [closeLayoutColumnMenu, components.length, hasValidMenuSelection, hasValidTarget, isLayoutColumnMenuOpen]);
155
- var _useMemo = useMemo(function () {
156
- return getLayoutColumnMenuPositioningProps();
157
- }, []),
158
- alignX = _useMemo.alignX,
159
- alignY = _useMemo.alignY,
160
- offset = _useMemo.offset,
161
- useManualBelowFlip = _useMemo.useManualBelowFlip;
162
139
  if (!isLayoutColumnMenuOpen || !hasValidMenuSelection || components.length === 0 || !hasValidTarget) {
163
140
  return null;
164
141
  }
@@ -168,13 +145,10 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
168
145
  boundariesElement: boundariesElement,
169
146
  scrollableElement: scrollableElement,
170
147
  zIndex: akEditorFloatingOverlapPanelZIndex,
171
- alignX: alignX,
172
- alignY: alignY,
173
148
  forcePlacement: true,
174
149
  preventOverflow: true,
175
150
  stick: true,
176
- offset: offset,
177
- onPositionCalculated: useManualBelowFlip ? positionLayoutColumnMenu : undefined,
151
+ offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW,
178
152
  handleClickOutside: handleClickOutside,
179
153
  handleEscapeKeydown: closeLayoutColumnMenu,
180
154
  focusTrap: openedViaKeyboard ? focusTrap : undefined
@@ -18,7 +18,6 @@ import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-colu
18
18
  import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-right';
19
19
  import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
20
20
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
21
- import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
22
21
  import { deleteActiveLayoutNode, distributeLayoutColumns, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
23
22
  import { isDistributedUniformly } from '../pm-plugins/utils/layout-column-distribution';
24
23
  import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
@@ -57,47 +56,6 @@ var SIDEBAR_LAYOUT_TYPES = [{
57
56
  title: toolbarMessages.threeColumnsWithSidebars,
58
57
  icon: LayoutThreeColumnsSidebarsIcon
59
58
  }];
60
-
61
- // These are used for advanced layout options
62
- var LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD = [{
63
- id: 'editor.layout.twoEquals',
64
- type: 'two_equal',
65
- title: toolbarMessages.twoColumns,
66
- icon: LayoutTwoColumnsIcon
67
- }, {
68
- id: 'editor.layout.twoRightSidebar',
69
- type: 'two_right_sidebar',
70
- title: toolbarMessages.rightSidebar,
71
- icon: LayoutTwoColumnsSidebarRightIcon
72
- }, {
73
- id: 'editor.layout.twoLeftSidebar',
74
- type: 'two_left_sidebar',
75
- title: toolbarMessages.leftSidebar,
76
- icon: LayoutTwoColumnsSidebarLeftIcon
77
- }];
78
- var LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD = [{
79
- id: 'editor.layout.threeEquals',
80
- type: 'three_equal',
81
- title: toolbarMessages.threeColumns,
82
- icon: LayoutThreeColumnsIcon
83
- }, {
84
- id: 'editor.layout.threeWithSidebars',
85
- type: 'three_with_sidebars',
86
- title: toolbarMessages.threeColumnsWithSidebars,
87
- icon: LayoutThreeColumnsSidebarsIcon
88
- }, {
89
- id: 'editor.layout.threeRightSidebars',
90
- type: 'three_right_sidebars',
91
- title: toolbarMessages.threeColumnsWithRightSidebars,
92
- icon: LayoutThreeWithRightSidebarsIcon,
93
- iconFallback: LayoutThreeWithRightSidebarsIcon
94
- }, {
95
- id: 'editor.layout.threeLeftSidebars',
96
- type: 'three_left_sidebars',
97
- title: toolbarMessages.threeColumnsWithLeftSidebars,
98
- icon: LayoutThreeWithLeftSidebarsIcon,
99
- iconFallback: LayoutThreeWithLeftSidebarsIcon
100
- }];
101
59
  var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
102
60
  id: 'editor.layout.twoRightSidebar',
103
61
  type: 'two_right_sidebar',
@@ -186,8 +144,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
186
144
  currentLayout = _ref.currentLayout,
187
145
  allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
188
146
  var numberOfColumns = node.content.childCount || 2;
189
- var isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
190
- var distributionOptions = isLayoutColumnMenuEnabled ? numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [] : numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION_OLD : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION_OLD : [];
147
+ var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
191
148
  var columnOptions = [{
192
149
  title: intl.formatMessage(layoutMessages.columnOption, {
193
150
  count: 2
@@ -230,7 +187,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
230
187
  onClick: setPresetLayout(editorAnalyticsAPI)('single'),
231
188
  selected: numberOfColumns === 1
232
189
  }] : []), columnOptions);
233
- var distributeColumnsButton = isLayoutColumnMenuEnabled && numberOfColumns > 1 ? {
190
+ var distributeColumnsButton = numberOfColumns > 1 ? {
234
191
  disabled: isDistributedUniformly(getLayoutColumnWidths(node)),
235
192
  icon: TableColumnsDistributeIcon,
236
193
  onClick: function onClick(editorState, dispatch) {
@@ -18,11 +18,9 @@ export type GapCursorTarget = {
18
18
  /**
19
19
  * For a blank-space click inside a layout column — above the first child (middle/bottom-aligned
20
20
  * columns) or below the last child (any alignment) — return the ProseMirror position and side
21
- * for a gap cursor. Returns `undefined` when the kill switch is ON, the click is outside a
22
- * layoutColumn, or the Y coordinate is not in blank space.
23
- *
24
- * The `advanced_layouts` / `platform_editor_layout_column_menu` gates live in the caller
25
- * (`applyBlankSpaceGapCursor`); only the kill switch is checked here.
21
+ * for a gap cursor. Returns `undefined` when the click is outside a layoutColumn or the Y
22
+ * coordinate is not in blank space. The `advanced_layouts` gate lives in the caller
23
+ * (`applyBlankSpaceGapCursor`).
26
24
  */
27
25
  export declare const getGapCursorTargetForBlankSpaceClick: (view: EditorView, event: MouseEvent) => GapCursorTarget | undefined;
28
26
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "23.0.3",
3
+ "version": "23.0.4",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -40,17 +40,17 @@
40
40
  "@atlaskit/editor-toolbar": "^2.8.0",
41
41
  "@atlaskit/editor-ui-control-model": "^2.10.0",
42
42
  "@atlaskit/icon": "^38.0.0",
43
- "@atlaskit/icon-lab": "^7.10.0",
43
+ "@atlaskit/icon-lab": "^7.11.0",
44
44
  "@atlaskit/platform-feature-experiments": "^0.3.0",
45
45
  "@atlaskit/platform-feature-flags": "^2.2.0",
46
- "@atlaskit/tmp-editor-statsig": "^212.0.0",
46
+ "@atlaskit/tmp-editor-statsig": "^213.0.0",
47
47
  "@atlaskit/tokens": "^20.1.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1",
50
50
  "bind-event-listener": "^3.0.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "@atlaskit/editor-common": "^126.1.0",
53
+ "@atlaskit/editor-common": "^126.2.0",
54
54
  "react": "^18.2.0 || ^19.2.0",
55
55
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
56
56
  },
@@ -61,9 +61,6 @@
61
61
  "platform_editor_adf_with_localid": {
62
62
  "type": "boolean"
63
63
  },
64
- "platform_editor_layout_column_menu_kill_switch_1": {
65
- "type": "boolean"
66
- },
67
64
  "platform_editor_vanilla_node_views_patch_1": {
68
65
  "type": "boolean"
69
66
  }
@@ -1,69 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.shouldOpenLayoutColumnMenuBelow = exports.getLayoutColumnMenuPositioningProps = exports.calculateFallbackBottomPosition = exports.LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = exports.LAYOUT_COLUMN_MENU_POPUP_OFFSET = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _ui = require("@atlaskit/editor-common/ui");
10
- var _fg = require("@atlaskit/platform-feature-flags/fg");
11
- 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; }
12
- 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; }
13
- var LAYOUT_COLUMN_MENU_POPUP_OFFSET = exports.LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
14
-
15
- // Gate OFF: small gap below the handle; Popup handles invert/nudge fallbacks.
16
- var LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = exports.LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = [0, 2];
17
- // Gate OFF: left-aligned, below the handle. Gate ON (legacy): centred, prefer above with manual flip.
18
- var getLayoutColumnMenuPositioningProps = exports.getLayoutColumnMenuPositioningProps = function getLayoutColumnMenuPositioningProps() {
19
- if (!(0, _fg.fg)('platform_editor_layout_column_menu_kill_switch_1')) {
20
- return {
21
- alignX: undefined,
22
- alignY: undefined,
23
- offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW,
24
- useManualBelowFlip: false
25
- };
26
- }
27
- return {
28
- alignX: 'center',
29
- alignY: 'top',
30
- offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
31
- useManualBelowFlip: true
32
- };
33
- };
34
- var getVisibleEditorAreaTop = function getVisibleEditorAreaTop(editorView, scrollableElement) {
35
- var visibleEditorArea = scrollableElement || (0, _ui.findOverflowScrollParent)(editorView.dom);
36
- return Math.max(visibleEditorArea ? visibleEditorArea.getBoundingClientRect().top : 0, 0);
37
- };
38
-
39
- // Prefer opening above the column drag handle, but fall back below when the visible editor
40
- // area does not have enough space above (for example near the top toolbar).
41
- var shouldOpenLayoutColumnMenuBelow = exports.shouldOpenLayoutColumnMenuBelow = function shouldOpenLayoutColumnMenuBelow(_ref) {
42
- var editorView = _ref.editorView,
43
- popup = _ref.popup,
44
- scrollableElement = _ref.scrollableElement,
45
- target = _ref.target;
46
- var offsetY = LAYOUT_COLUMN_MENU_POPUP_OFFSET[1];
47
- var spaceAbove = target.getBoundingClientRect().top - getVisibleEditorAreaTop(editorView, scrollableElement);
48
- var popupHeight = popup.getBoundingClientRect().height || popup.clientHeight;
49
- return spaceAbove <= popupHeight + offsetY;
50
- };
51
- var calculateFallbackBottomPosition = exports.calculateFallbackBottomPosition = function calculateFallbackBottomPosition(position, target, popup) {
52
- if (!(popup.offsetParent instanceof HTMLElement)) {
53
- return position;
54
- }
55
- var offsetParent = popup.offsetParent;
56
- var borderBottomWidth = parseInt(window.getComputedStyle(offsetParent).borderBottomWidth, 10) || 0;
57
- var _offsetParent$getBoun = offsetParent.getBoundingClientRect(),
58
- offsetParentTop = _offsetParent$getBoun.top;
59
- var _target$getBoundingCl = target.getBoundingClientRect(),
60
- targetTop = _target$getBoundingCl.top,
61
- targetHeight = _target$getBoundingCl.height;
62
- var offsetY = LAYOUT_COLUMN_MENU_POPUP_OFFSET[1];
63
- var top = Math.ceil(targetTop - offsetParentTop + targetHeight + (offsetParent === offsetParent.ownerDocument.body ? 0 : offsetParent.scrollTop) - borderBottomWidth + offsetY);
64
- var positionWithoutBottom = _objectSpread({}, position);
65
- delete positionWithoutBottom.bottom;
66
- return _objectSpread(_objectSpread({}, positionWithoutBottom), {}, {
67
- top: top
68
- });
69
- };
@@ -1,65 +0,0 @@
1
- import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
2
- import { fg } from '@atlaskit/platform-feature-flags/fg';
3
- export const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
4
-
5
- // Gate OFF: small gap below the handle; Popup handles invert/nudge fallbacks.
6
- export const LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = [0, 2];
7
- // Gate OFF: left-aligned, below the handle. Gate ON (legacy): centred, prefer above with manual flip.
8
- export const getLayoutColumnMenuPositioningProps = () => {
9
- if (!fg('platform_editor_layout_column_menu_kill_switch_1')) {
10
- return {
11
- alignX: undefined,
12
- alignY: undefined,
13
- offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW,
14
- useManualBelowFlip: false
15
- };
16
- }
17
- return {
18
- alignX: 'center',
19
- alignY: 'top',
20
- offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
21
- useManualBelowFlip: true
22
- };
23
- };
24
- const getVisibleEditorAreaTop = (editorView, scrollableElement) => {
25
- const visibleEditorArea = scrollableElement || findOverflowScrollParent(editorView.dom);
26
- return Math.max(visibleEditorArea ? visibleEditorArea.getBoundingClientRect().top : 0, 0);
27
- };
28
-
29
- // Prefer opening above the column drag handle, but fall back below when the visible editor
30
- // area does not have enough space above (for example near the top toolbar).
31
- export const shouldOpenLayoutColumnMenuBelow = ({
32
- editorView,
33
- popup,
34
- scrollableElement,
35
- target
36
- }) => {
37
- const [, offsetY] = LAYOUT_COLUMN_MENU_POPUP_OFFSET;
38
- const spaceAbove = target.getBoundingClientRect().top - getVisibleEditorAreaTop(editorView, scrollableElement);
39
- const popupHeight = popup.getBoundingClientRect().height || popup.clientHeight;
40
- return spaceAbove <= popupHeight + offsetY;
41
- };
42
- export const calculateFallbackBottomPosition = (position, target, popup) => {
43
- if (!(popup.offsetParent instanceof HTMLElement)) {
44
- return position;
45
- }
46
- const offsetParent = popup.offsetParent;
47
- const borderBottomWidth = parseInt(window.getComputedStyle(offsetParent).borderBottomWidth, 10) || 0;
48
- const {
49
- top: offsetParentTop
50
- } = offsetParent.getBoundingClientRect();
51
- const {
52
- top: targetTop,
53
- height: targetHeight
54
- } = target.getBoundingClientRect();
55
- const [, offsetY] = LAYOUT_COLUMN_MENU_POPUP_OFFSET;
56
- const top = Math.ceil(targetTop - offsetParentTop + targetHeight + (offsetParent === offsetParent.ownerDocument.body ? 0 : offsetParent.scrollTop) - borderBottomWidth + offsetY);
57
- const positionWithoutBottom = {
58
- ...position
59
- };
60
- delete positionWithoutBottom.bottom;
61
- return {
62
- ...positionWithoutBottom,
63
- top
64
- };
65
- };