@atlaskit/editor-plugin-layout 23.0.2 → 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.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/layoutPlugin.js +13 -19
- package/dist/cjs/pm-plugins/actions.js +5 -20
- package/dist/cjs/pm-plugins/column-resize-divider.js +1 -3
- package/dist/cjs/pm-plugins/main.js +1 -2
- package/dist/cjs/pm-plugins/utils/index.js +3 -10
- package/dist/cjs/ui/LayoutColumnMenu/index.js +2 -28
- package/dist/cjs/ui/toolbar.js +2 -45
- package/dist/es2019/layoutPlugin.js +11 -17
- package/dist/es2019/pm-plugins/actions.js +5 -20
- package/dist/es2019/pm-plugins/column-resize-divider.js +1 -3
- package/dist/es2019/pm-plugins/main.js +1 -2
- package/dist/es2019/pm-plugins/utils/index.js +3 -10
- package/dist/es2019/ui/LayoutColumnMenu/index.js +2 -27
- package/dist/es2019/ui/toolbar.js +2 -45
- package/dist/esm/layoutPlugin.js +13 -19
- package/dist/esm/pm-plugins/actions.js +5 -20
- package/dist/esm/pm-plugins/column-resize-divider.js +1 -3
- package/dist/esm/pm-plugins/main.js +1 -2
- package/dist/esm/pm-plugins/utils/index.js +3 -10
- package/dist/esm/ui/LayoutColumnMenu/index.js +2 -28
- package/dist/esm/ui/toolbar.js +2 -45
- package/dist/types/pm-plugins/utils/index.d.ts +3 -5
- package/package.json +4 -7
- package/dist/cjs/ui/LayoutColumnMenu/utils.js +0 -69
- package/dist/es2019/ui/LayoutColumnMenu/utils.js +0 -65
- package/dist/esm/ui/LayoutColumnMenu/utils.js +0 -62
- package/dist/types/ui/LayoutColumnMenu/utils.d.ts +0 -19
|
@@ -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
|
|
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 =
|
|
183
|
+
const distributeColumnsButton = numberOfColumns > 1 ? {
|
|
227
184
|
disabled: isDistributedUniformly(getLayoutColumnWidths(node)),
|
|
228
185
|
icon: TableColumnsDistributeIcon,
|
|
229
186
|
onClick: (editorState, dispatch) => {
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -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
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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,
|
|
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
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
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 &&
|
|
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
|
|
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 (!
|
|
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
|
|
68
|
-
*
|
|
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:
|
|
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
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -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
|
|
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 =
|
|
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
|
|
22
|
-
*
|
|
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
|
+
"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.
|
|
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": "^
|
|
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.
|
|
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
|
-
};
|