@atlaskit/editor-plugin-layout 1.12.4 → 1.12.5
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 +12 -0
- package/dist/cjs/actions.js +9 -3
- package/dist/cjs/toolbar.js +101 -59
- package/dist/cjs/ui/icons/LayoutThreeWithLeftSidebars.js +56 -0
- package/dist/cjs/ui/icons/LayoutThreeWithRightSidebars.js +56 -0
- package/dist/es2019/actions.js +8 -2
- package/dist/es2019/toolbar.js +97 -54
- package/dist/es2019/ui/icons/LayoutThreeWithLeftSidebars.js +46 -0
- package/dist/es2019/ui/icons/LayoutThreeWithRightSidebars.js +46 -0
- package/dist/esm/actions.js +8 -2
- package/dist/esm/toolbar.js +101 -59
- package/dist/esm/ui/icons/LayoutThreeWithLeftSidebars.js +48 -0
- package/dist/esm/ui/icons/LayoutThreeWithRightSidebars.js +48 -0
- package/dist/types/actions.d.ts +0 -2
- package/dist/types/types.d.ts +1 -1
- package/dist/types/ui/icons/LayoutThreeWithLeftSidebars.d.ts +7 -0
- package/dist/types/ui/icons/LayoutThreeWithRightSidebars.d.ts +7 -0
- package/dist/types-ts4.5/actions.d.ts +0 -2
- package/dist/types-ts4.5/types.d.ts +1 -1
- package/dist/types-ts4.5/ui/icons/LayoutThreeWithLeftSidebars.d.ts +7 -0
- package/dist/types-ts4.5/ui/icons/LayoutThreeWithRightSidebars.d.ts +7 -0
- package/package.json +8 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 1.12.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#165765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165765)
|
|
8
|
+
[`3f441f30e6507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f441f30e6507) -
|
|
9
|
+
Bump adf-schema to 46.0.0
|
|
10
|
+
- [#168790](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168790)
|
|
11
|
+
[`e08e221fb797c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e08e221fb797c) -
|
|
12
|
+
Add new distributions for 3 column layouts for advanced layouts
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 1.12.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/actions.js
CHANGED
|
@@ -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 =
|
|
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;
|
|
8
8
|
exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
|
|
9
9
|
exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
@@ -23,8 +23,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
23
23
|
var ONE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = ['single'];
|
|
24
24
|
var TWO_COL_LAYOUTS = exports.TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
|
|
25
25
|
var THREE_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
|
|
26
|
-
var FOUR_COL_LAYOUTS = exports.FOUR_COL_LAYOUTS = ['four_equal'];
|
|
27
|
-
var FIVE_COL_LAYOUTS = exports.FIVE_COL_LAYOUTS = ['five_equal'];
|
|
28
26
|
var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
|
|
29
27
|
if ((0, _preRelease.isPreRelease2)()) {
|
|
30
28
|
switch (presetLayout) {
|
|
@@ -40,6 +38,10 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
|
|
|
40
38
|
return [66.66, 33.33];
|
|
41
39
|
case 'three_with_sidebars':
|
|
42
40
|
return [25, 50, 25];
|
|
41
|
+
case 'three_left_sidebars':
|
|
42
|
+
return [25, 25, 50];
|
|
43
|
+
case 'three_right_sidebars':
|
|
44
|
+
return [50, 25, 25];
|
|
43
45
|
case 'four_equal':
|
|
44
46
|
return [25, 25, 25, 25];
|
|
45
47
|
case 'five_equal':
|
|
@@ -87,6 +89,10 @@ var getPresetLayout = exports.getPresetLayout = function getPresetLayout(section
|
|
|
87
89
|
return 'three_equal';
|
|
88
90
|
case '25,50,25':
|
|
89
91
|
return 'three_with_sidebars';
|
|
92
|
+
case '50,25,25':
|
|
93
|
+
return 'three_right_sidebars';
|
|
94
|
+
case '25,25,50':
|
|
95
|
+
return 'three_left_sidebars';
|
|
90
96
|
case '50,50':
|
|
91
97
|
return 'two_equal';
|
|
92
98
|
case '33.33,66.66':
|
package/dist/cjs/toolbar.js
CHANGED
|
@@ -25,6 +25,8 @@ var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyp
|
|
|
25
25
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
26
26
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
27
27
|
var _actions = require("./actions");
|
|
28
|
+
var _LayoutThreeWithLeftSidebars = require("./ui/icons/LayoutThreeWithLeftSidebars");
|
|
29
|
+
var _LayoutThreeWithRightSidebars = require("./ui/icons/LayoutThreeWithRightSidebars");
|
|
28
30
|
var _preRelease = require("./utils/preRelease");
|
|
29
31
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
30
32
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -67,7 +69,9 @@ var SIDEBAR_LAYOUT_TYPES = [{
|
|
|
67
69
|
icon: _layoutThreeColumnsSidebars.default,
|
|
68
70
|
iconFallback: _layoutThreeWithSidebars.default
|
|
69
71
|
}];
|
|
70
|
-
|
|
72
|
+
|
|
73
|
+
// These are used for advanced layout options
|
|
74
|
+
var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
|
|
71
75
|
id: 'editor.layout.twoEquals',
|
|
72
76
|
type: 'two_equal',
|
|
73
77
|
title: _messages.layoutMessages.twoColumns,
|
|
@@ -85,7 +89,8 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
|
|
|
85
89
|
title: _messages.layoutMessages.leftSidebar,
|
|
86
90
|
icon: _layoutTwoColumnsSidebarLeft.default,
|
|
87
91
|
iconFallback: _layoutTwoLeftSidebar.default
|
|
88
|
-
}
|
|
92
|
+
}];
|
|
93
|
+
var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
|
|
89
94
|
id: 'editor.layout.threeEquals',
|
|
90
95
|
type: 'three_equal',
|
|
91
96
|
title: _messages.layoutMessages.threeColumns,
|
|
@@ -97,13 +102,19 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
|
|
|
97
102
|
title: _messages.layoutMessages.threeColumnsWithSidebars,
|
|
98
103
|
icon: _layoutThreeColumnsSidebars.default,
|
|
99
104
|
iconFallback: _layoutThreeWithSidebars.default
|
|
105
|
+
}, {
|
|
106
|
+
id: 'editor.layout.threeRightSidebars',
|
|
107
|
+
type: 'three_right_sidebars',
|
|
108
|
+
title: _messages.layoutMessages.threeColumnsWithRightSidebars,
|
|
109
|
+
icon: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon,
|
|
110
|
+
iconFallback: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon
|
|
111
|
+
}, {
|
|
112
|
+
id: 'editor.layout.threeLeftSidebars',
|
|
113
|
+
type: 'three_left_sidebars',
|
|
114
|
+
title: _messages.layoutMessages.threeColumnsWithLeftSidebars,
|
|
115
|
+
icon: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon,
|
|
116
|
+
iconFallback: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon
|
|
100
117
|
}];
|
|
101
|
-
var SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
|
|
102
|
-
2: [LAYOUT_DISTRIBUTION_TYPES[0], LAYOUT_DISTRIBUTION_TYPES[1], LAYOUT_DISTRIBUTION_TYPES[2]],
|
|
103
|
-
3: [LAYOUT_DISTRIBUTION_TYPES[3], LAYOUT_DISTRIBUTION_TYPES[4]],
|
|
104
|
-
4: [],
|
|
105
|
-
5: []
|
|
106
|
-
};
|
|
107
118
|
var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
|
|
108
119
|
return {
|
|
109
120
|
id: item.id,
|
|
@@ -119,15 +130,81 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
|
|
|
119
130
|
};
|
|
120
131
|
var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
|
|
121
132
|
var iconPlaceholder = _layoutTwoColumns.default; // TODO: Replace with proper icon ED-25466
|
|
133
|
+
|
|
134
|
+
var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
135
|
+
var addSidebarLayouts = _ref.addSidebarLayouts,
|
|
136
|
+
intl = _ref.intl,
|
|
137
|
+
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
138
|
+
state = _ref.state,
|
|
139
|
+
node = _ref.node,
|
|
140
|
+
nodeType = _ref.nodeType,
|
|
141
|
+
separator = _ref.separator,
|
|
142
|
+
deleteButton = _ref.deleteButton,
|
|
143
|
+
currentLayout = _ref.currentLayout;
|
|
144
|
+
var numberOfColumns = node.content.childCount || 2;
|
|
145
|
+
var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
|
|
146
|
+
var columnOptions = [{
|
|
147
|
+
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
148
|
+
count: 2
|
|
149
|
+
}),
|
|
150
|
+
//'2-columns',
|
|
151
|
+
icon: iconPlaceholder,
|
|
152
|
+
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal', intl.formatMessage),
|
|
153
|
+
selected: numberOfColumns === 2
|
|
154
|
+
}, {
|
|
155
|
+
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
156
|
+
count: 3
|
|
157
|
+
}),
|
|
158
|
+
//'3-columns'
|
|
159
|
+
icon: iconPlaceholder,
|
|
160
|
+
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal', intl.formatMessage),
|
|
161
|
+
selected: numberOfColumns === 3
|
|
162
|
+
}, {
|
|
163
|
+
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
164
|
+
count: 4
|
|
165
|
+
}),
|
|
166
|
+
//'4-columns'
|
|
167
|
+
icon: iconPlaceholder,
|
|
168
|
+
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
|
|
169
|
+
selected: numberOfColumns === 4
|
|
170
|
+
}, {
|
|
171
|
+
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
172
|
+
count: 5
|
|
173
|
+
}),
|
|
174
|
+
//'5-columns'
|
|
175
|
+
icon: iconPlaceholder,
|
|
176
|
+
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
|
|
177
|
+
selected: numberOfColumns === 5
|
|
178
|
+
}];
|
|
179
|
+
return [{
|
|
180
|
+
type: 'dropdown',
|
|
181
|
+
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
182
|
+
count: numberOfColumns
|
|
183
|
+
}),
|
|
184
|
+
//`${numberOfColumns}-columns`,
|
|
185
|
+
options: columnOptions,
|
|
186
|
+
showSelected: true,
|
|
187
|
+
testId: 'column-options-button'
|
|
188
|
+
}].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
|
|
189
|
+
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
190
|
+
}) : []), [separator, {
|
|
191
|
+
type: 'copy-button',
|
|
192
|
+
supportsViewMode: !(0, _platformFeatureFlags.fg)('platform_editor_remove_copy_button_from_view_mode'),
|
|
193
|
+
items: [{
|
|
194
|
+
state: state,
|
|
195
|
+
formatMessage: intl.formatMessage,
|
|
196
|
+
nodeType: nodeType
|
|
197
|
+
}]
|
|
198
|
+
}, separator, deleteButton]);
|
|
199
|
+
};
|
|
122
200
|
var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
|
|
123
201
|
var _api$decorations$acti, _api$decorations, _api$analytics;
|
|
124
|
-
var
|
|
125
|
-
hoverDecoration =
|
|
202
|
+
var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
|
|
203
|
+
hoverDecoration = _ref2.hoverDecoration;
|
|
126
204
|
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
127
205
|
var node = state.doc.nodeAt(pos);
|
|
128
206
|
if (node) {
|
|
129
207
|
var currentLayout = (0, _actions.getPresetLayout)(node);
|
|
130
|
-
var numberOfColumns = node.content.childCount || 2;
|
|
131
208
|
var separator = {
|
|
132
209
|
type: 'separator'
|
|
133
210
|
};
|
|
@@ -148,41 +225,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
|
|
|
148
225
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
|
|
149
226
|
tabIndex: null
|
|
150
227
|
};
|
|
151
|
-
var layoutTypes =
|
|
152
|
-
var columnOptions = [{
|
|
153
|
-
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
154
|
-
count: 2
|
|
155
|
-
}),
|
|
156
|
-
//'2-columns',
|
|
157
|
-
icon: iconPlaceholder,
|
|
158
|
-
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal', intl.formatMessage),
|
|
159
|
-
selected: numberOfColumns === 2
|
|
160
|
-
}, {
|
|
161
|
-
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
162
|
-
count: 3
|
|
163
|
-
}),
|
|
164
|
-
//'3-columns'
|
|
165
|
-
icon: iconPlaceholder,
|
|
166
|
-
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal', intl.formatMessage),
|
|
167
|
-
selected: numberOfColumns === 3
|
|
168
|
-
}, {
|
|
169
|
-
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
170
|
-
count: 4
|
|
171
|
-
}),
|
|
172
|
-
//'4-columns'
|
|
173
|
-
icon: iconPlaceholder,
|
|
174
|
-
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
|
|
175
|
-
selected: numberOfColumns === 4
|
|
176
|
-
}, {
|
|
177
|
-
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
178
|
-
count: 5
|
|
179
|
-
}),
|
|
180
|
-
//'5-columns'
|
|
181
|
-
icon: iconPlaceholder,
|
|
182
|
-
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
|
|
183
|
-
selected: numberOfColumns === 5
|
|
184
|
-
}];
|
|
185
|
-
var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
|
|
228
|
+
var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
|
|
186
229
|
return {
|
|
187
230
|
title: layoutToolbarTitle,
|
|
188
231
|
getDomRef: function getDomRef(view) {
|
|
@@ -190,20 +233,19 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
|
|
|
190
233
|
},
|
|
191
234
|
nodeType: nodeType,
|
|
192
235
|
groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
|
|
193
|
-
items:
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
})), (0, _toConsumableArray2.default)(addSidebarLayouts ? (0, _preRelease.isPreRelease2)() ? sidebarTypesByColumns.map(function (i) {
|
|
236
|
+
items: (0, _preRelease.isPreRelease2)() ? getAdvancedLayoutItems({
|
|
237
|
+
addSidebarLayouts: addSidebarLayouts,
|
|
238
|
+
intl: intl,
|
|
239
|
+
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
240
|
+
state: state,
|
|
241
|
+
nodeType: nodeType,
|
|
242
|
+
node: node,
|
|
243
|
+
separator: separator,
|
|
244
|
+
deleteButton: deleteButton,
|
|
245
|
+
currentLayout: currentLayout
|
|
246
|
+
}) : [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
|
|
205
247
|
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
206
|
-
})
|
|
248
|
+
})), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
|
|
207
249
|
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
208
250
|
}) : []), [separator, {
|
|
209
251
|
type: 'copy-button',
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.LayoutThreeWithLeftSidebarsIcon = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _icon = _interopRequireDefault(require("@atlaskit/icon"));
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
+
/**
|
|
13
|
+
* @jsxRuntime classic
|
|
14
|
+
* @jsx jsx
|
|
15
|
+
*/
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
17
|
+
|
|
18
|
+
var LayoutThreeWithLeftSidebarsGlyph = function LayoutThreeWithLeftSidebarsGlyph(props) {
|
|
19
|
+
if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
|
|
20
|
+
return (0, _react.jsx)("svg", (0, _extends2.default)({
|
|
21
|
+
width: "16",
|
|
22
|
+
height: "14",
|
|
23
|
+
viewBox: "0 0 16 14",
|
|
24
|
+
fill: "none",
|
|
25
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
26
|
+
}, props), (0, _react.jsx)("path", {
|
|
27
|
+
fillRule: "evenodd",
|
|
28
|
+
clipRule: "evenodd",
|
|
29
|
+
d: "M7.5 1.375C7.5 0.615609 8.11561 0 8.875 0H9.625C10.3844 0 11 0.615608 11 1.375V12.625C11 13.3844 10.3844 14 9.625 14H8.875C8.11561 14 7.5 13.3844 7.5 12.625V1.375ZM9 1.5V12.5H9.5V1.5H9ZM0 1.37505C0 0.615655 0.615608 4.66853e-05 1.375 4.66853e-05H4.625C5.38439 4.66853e-05 6 0.615655 6 1.37505V12.625C6 13.3844 5.38439 14 4.625 14H1.375C0.615608 14 0 13.3844 0 12.625V1.37505ZM1.5 1.50005V12.5H4.5V1.50005H1.5ZM12.5 1.37505C12.5 0.615655 13.1156 4.66853e-05 13.875 4.66853e-05H14.625C15.3844 4.66853e-05 16 0.615655 16 1.37505V12.625C16 13.3844 15.3844 14 14.625 14H13.875C13.1156 14 12.5 13.3844 12.5 12.625V1.37505ZM14 1.50005V12.5H14.5V1.50005H14Z",
|
|
30
|
+
fill: "currentcolor"
|
|
31
|
+
}));
|
|
32
|
+
}
|
|
33
|
+
return (0, _react.jsx)("svg", (0, _extends2.default)({
|
|
34
|
+
width: "16",
|
|
35
|
+
height: "14",
|
|
36
|
+
viewBox: "0 0 16 14",
|
|
37
|
+
fill: "none",
|
|
38
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
39
|
+
}, props), (0, _react.jsx)("path", {
|
|
40
|
+
fillRule: "evenodd",
|
|
41
|
+
clipRule: "evenodd",
|
|
42
|
+
d: "M1 0C1.26522 0 1.51957 0.105357 1.70711 0.292893C1.89464 0.48043 2 0.734784 2 1V13C2 13.2652 1.89464 13.5196 1.70711 13.7071C1.51957 13.8946 1.26522 14 1 14C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM9 0H15C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H9C8.73478 14 8.48043 13.8946 8.29289 13.7071C8.10536 13.5196 8 13.2652 8 13V1C8 0.734784 8.10536 0.48043 8.29289 0.292893C8.48043 0.105357 8.73478 0 9 0ZM5 0C5.26522 0 5.51957 0.105356 5.70711 0.292892C5.89464 0.480429 6 0.734784 6 1V13C6 13.2652 5.89464 13.5196 5.70711 13.7071C5.51957 13.8946 5.26522 14 5 14C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13V1C4 0.734784 4.10536 0.480429 4.29289 0.292892C4.48043 0.105356 4.73478 0 5 0Z",
|
|
43
|
+
fill: "currentcolor"
|
|
44
|
+
}));
|
|
45
|
+
};
|
|
46
|
+
var floatingToolbarPadding = (0, _react.css)({
|
|
47
|
+
paddingRight: "var(--ds-space-050, 4px)",
|
|
48
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
49
|
+
});
|
|
50
|
+
var LayoutThreeWithLeftSidebarsIcon = exports.LayoutThreeWithLeftSidebarsIcon = function LayoutThreeWithLeftSidebarsIcon(props) {
|
|
51
|
+
return (0, _react.jsx)("span", {
|
|
52
|
+
css: floatingToolbarPadding
|
|
53
|
+
}, (0, _react.jsx)(_icon.default, (0, _extends2.default)({
|
|
54
|
+
glyph: LayoutThreeWithLeftSidebarsGlyph
|
|
55
|
+
}, props)));
|
|
56
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.LayoutThreeWithRightSidebarsIcon = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _icon = _interopRequireDefault(require("@atlaskit/icon"));
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
+
/**
|
|
13
|
+
* @jsxRuntime classic
|
|
14
|
+
* @jsx jsx
|
|
15
|
+
*/
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
17
|
+
|
|
18
|
+
var LayoutThreeWithRightSidebarsGlyph = function LayoutThreeWithRightSidebarsGlyph(props) {
|
|
19
|
+
if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
|
|
20
|
+
return (0, _react.jsx)("svg", (0, _extends2.default)({
|
|
21
|
+
width: "16",
|
|
22
|
+
height: "14",
|
|
23
|
+
viewBox: "0 0 16 14",
|
|
24
|
+
fill: "none",
|
|
25
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
26
|
+
}, props), (0, _react.jsx)("path", {
|
|
27
|
+
fillRule: "evenodd",
|
|
28
|
+
clipRule: "evenodd",
|
|
29
|
+
d: "M8.5 1.375C8.5 0.615609 7.88439 0 7.125 0H6.375C5.61561 0 5 0.615608 5 1.375V12.625C5 13.3844 5.61561 14 6.375 14H7.125C7.88439 14 8.5 13.3844 8.5 12.625V1.375ZM7 1.5V12.5H6.5V1.5H7ZM16 1.37505C16 0.615655 15.3844 4.66853e-05 14.625 4.66853e-05H11.375C10.6156 4.66853e-05 10 0.615655 10 1.37505V12.625C10 13.3844 10.6156 14 11.375 14H14.625C15.3844 14 16 13.3844 16 12.625V1.37505ZM14.5 1.50005V12.5H11.5V1.50005H14.5ZM3.5 1.37505C3.5 0.615655 2.88439 4.66853e-05 2.125 4.66853e-05H1.375C0.615608 4.66853e-05 0 0.615655 0 1.37505V12.625C0 13.3844 0.615608 14 1.375 14H2.125C2.88439 14 3.5 13.3844 3.5 12.625V1.37505ZM2 1.50005V12.5H1.5V1.50005H2Z",
|
|
30
|
+
fill: "currentcolor"
|
|
31
|
+
}));
|
|
32
|
+
}
|
|
33
|
+
return (0, _react.jsx)("svg", (0, _extends2.default)({
|
|
34
|
+
width: "16",
|
|
35
|
+
height: "14",
|
|
36
|
+
viewBox: "0 0 16 14",
|
|
37
|
+
fill: "none",
|
|
38
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
39
|
+
}, props), (0, _react.jsx)("path", {
|
|
40
|
+
fillRule: "evenodd",
|
|
41
|
+
clipRule: "evenodd",
|
|
42
|
+
d: "M11 0C11.2652 0 11.5196 0.105357 11.7071 0.292893C11.8946 0.48043 12 0.734784 12 1V13C12 13.2652 11.8946 13.5196 11.7071 13.7071C11.5196 13.8946 11.2652 14 11 14C10.7348 14 10.4804 13.8946 10.2929 13.7071C10.1054 13.5196 10 13.2652 10 13V1C10 0.734784 10.1054 0.48043 10.2929 0.292893C10.4804 0.105357 10.7348 0 11 0ZM1 0H7C7.26522 0 7.51957 0.105357 7.70711 0.292893C7.89464 0.48043 8 0.734784 8 1V13C8 13.2652 7.89464 13.5196 7.70711 13.7071C7.51957 13.8946 7.26522 14 7 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM15 0C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14C14.7348 14 14.4804 13.8946 14.2929 13.7071C14.1054 13.5196 14 13.2652 14 13V1C14 0.734784 14.1054 0.48043 14.2929 0.292893C14.4804 0.105357 14.7348 0 15 0Z",
|
|
43
|
+
fill: "currentcolor"
|
|
44
|
+
}));
|
|
45
|
+
};
|
|
46
|
+
var floatingToolbarPadding = (0, _react.css)({
|
|
47
|
+
paddingRight: "var(--ds-space-050, 4px)",
|
|
48
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
49
|
+
});
|
|
50
|
+
var LayoutThreeWithRightSidebarsIcon = exports.LayoutThreeWithRightSidebarsIcon = function LayoutThreeWithRightSidebarsIcon(props) {
|
|
51
|
+
return (0, _react.jsx)("span", {
|
|
52
|
+
css: floatingToolbarPadding
|
|
53
|
+
}, (0, _react.jsx)(_icon.default, (0, _extends2.default)({
|
|
54
|
+
glyph: LayoutThreeWithRightSidebarsGlyph
|
|
55
|
+
}, props)));
|
|
56
|
+
};
|
package/dist/es2019/actions.js
CHANGED
|
@@ -11,8 +11,6 @@ import { isPreRelease2 } from './utils/preRelease';
|
|
|
11
11
|
export const ONE_COL_LAYOUTS = ['single'];
|
|
12
12
|
export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
|
|
13
13
|
export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
|
|
14
|
-
export const FOUR_COL_LAYOUTS = ['four_equal'];
|
|
15
|
-
export const FIVE_COL_LAYOUTS = ['five_equal'];
|
|
16
14
|
const getWidthsForPreset = presetLayout => {
|
|
17
15
|
if (isPreRelease2()) {
|
|
18
16
|
switch (presetLayout) {
|
|
@@ -28,6 +26,10 @@ const getWidthsForPreset = presetLayout => {
|
|
|
28
26
|
return [66.66, 33.33];
|
|
29
27
|
case 'three_with_sidebars':
|
|
30
28
|
return [25, 50, 25];
|
|
29
|
+
case 'three_left_sidebars':
|
|
30
|
+
return [25, 25, 50];
|
|
31
|
+
case 'three_right_sidebars':
|
|
32
|
+
return [50, 25, 25];
|
|
31
33
|
case 'four_equal':
|
|
32
34
|
return [25, 25, 25, 25];
|
|
33
35
|
case 'five_equal':
|
|
@@ -71,6 +73,10 @@ export const getPresetLayout = section => {
|
|
|
71
73
|
return 'three_equal';
|
|
72
74
|
case '25,50,25':
|
|
73
75
|
return 'three_with_sidebars';
|
|
76
|
+
case '50,25,25':
|
|
77
|
+
return 'three_right_sidebars';
|
|
78
|
+
case '25,25,50':
|
|
79
|
+
return 'three_left_sidebars';
|
|
74
80
|
case '50,50':
|
|
75
81
|
return 'two_equal';
|
|
76
82
|
case '33.33,66.66':
|
package/dist/es2019/toolbar.js
CHANGED
|
@@ -16,6 +16,8 @@ import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-ri
|
|
|
16
16
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
17
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
18
|
import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
|
|
19
|
+
import { LayoutThreeWithLeftSidebarsIcon } from './ui/icons/LayoutThreeWithLeftSidebars';
|
|
20
|
+
import { LayoutThreeWithRightSidebarsIcon } from './ui/icons/LayoutThreeWithRightSidebars';
|
|
19
21
|
import { isPreRelease2 } from './utils/preRelease';
|
|
20
22
|
const LAYOUT_TYPES = [{
|
|
21
23
|
id: 'editor.layout.twoEquals',
|
|
@@ -56,7 +58,9 @@ const SIDEBAR_LAYOUT_TYPES = [{
|
|
|
56
58
|
icon: LayoutThreeColumnsSidebarsIcon,
|
|
57
59
|
iconFallback: LayoutThreeWithSidebarsIcon
|
|
58
60
|
}];
|
|
59
|
-
|
|
61
|
+
|
|
62
|
+
// These are used for advanced layout options
|
|
63
|
+
const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
|
|
60
64
|
id: 'editor.layout.twoEquals',
|
|
61
65
|
type: 'two_equal',
|
|
62
66
|
title: toolbarMessages.twoColumns,
|
|
@@ -74,7 +78,8 @@ const LAYOUT_DISTRIBUTION_TYPES = [{
|
|
|
74
78
|
title: toolbarMessages.leftSidebar,
|
|
75
79
|
icon: LayoutTwoColumnsSidebarLeftIcon,
|
|
76
80
|
iconFallback: LayoutTwoLeftSidebarIcon
|
|
77
|
-
}
|
|
81
|
+
}];
|
|
82
|
+
const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
|
|
78
83
|
id: 'editor.layout.threeEquals',
|
|
79
84
|
type: 'three_equal',
|
|
80
85
|
title: toolbarMessages.threeColumns,
|
|
@@ -86,13 +91,19 @@ const LAYOUT_DISTRIBUTION_TYPES = [{
|
|
|
86
91
|
title: toolbarMessages.threeColumnsWithSidebars,
|
|
87
92
|
icon: LayoutThreeColumnsSidebarsIcon,
|
|
88
93
|
iconFallback: LayoutThreeWithSidebarsIcon
|
|
94
|
+
}, {
|
|
95
|
+
id: 'editor.layout.threeRightSidebars',
|
|
96
|
+
type: 'three_right_sidebars',
|
|
97
|
+
title: toolbarMessages.threeColumnsWithRightSidebars,
|
|
98
|
+
icon: LayoutThreeWithRightSidebarsIcon,
|
|
99
|
+
iconFallback: LayoutThreeWithRightSidebarsIcon
|
|
100
|
+
}, {
|
|
101
|
+
id: 'editor.layout.threeLeftSidebars',
|
|
102
|
+
type: 'three_left_sidebars',
|
|
103
|
+
title: toolbarMessages.threeColumnsWithLeftSidebars,
|
|
104
|
+
icon: LayoutThreeWithLeftSidebarsIcon,
|
|
105
|
+
iconFallback: LayoutThreeWithLeftSidebarsIcon
|
|
89
106
|
}];
|
|
90
|
-
const SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
|
|
91
|
-
2: [LAYOUT_DISTRIBUTION_TYPES[0], LAYOUT_DISTRIBUTION_TYPES[1], LAYOUT_DISTRIBUTION_TYPES[2]],
|
|
92
|
-
3: [LAYOUT_DISTRIBUTION_TYPES[3], LAYOUT_DISTRIBUTION_TYPES[4]],
|
|
93
|
-
4: [],
|
|
94
|
-
5: []
|
|
95
|
-
};
|
|
96
107
|
const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
|
|
97
108
|
id: item.id,
|
|
98
109
|
type: 'button',
|
|
@@ -106,6 +117,72 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
|
|
|
106
117
|
});
|
|
107
118
|
export const layoutToolbarTitle = 'Layout floating controls';
|
|
108
119
|
const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
|
|
120
|
+
|
|
121
|
+
const getAdvancedLayoutItems = ({
|
|
122
|
+
addSidebarLayouts,
|
|
123
|
+
intl,
|
|
124
|
+
editorAnalyticsAPI,
|
|
125
|
+
state,
|
|
126
|
+
node,
|
|
127
|
+
nodeType,
|
|
128
|
+
separator,
|
|
129
|
+
deleteButton,
|
|
130
|
+
currentLayout
|
|
131
|
+
}) => {
|
|
132
|
+
const numberOfColumns = node.content.childCount || 2;
|
|
133
|
+
const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
|
|
134
|
+
const columnOptions = [{
|
|
135
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
136
|
+
count: 2
|
|
137
|
+
}),
|
|
138
|
+
//'2-columns',
|
|
139
|
+
icon: iconPlaceholder,
|
|
140
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
|
|
141
|
+
selected: numberOfColumns === 2
|
|
142
|
+
}, {
|
|
143
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
144
|
+
count: 3
|
|
145
|
+
}),
|
|
146
|
+
//'3-columns'
|
|
147
|
+
icon: iconPlaceholder,
|
|
148
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
|
|
149
|
+
selected: numberOfColumns === 3
|
|
150
|
+
}, {
|
|
151
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
152
|
+
count: 4
|
|
153
|
+
}),
|
|
154
|
+
//'4-columns'
|
|
155
|
+
icon: iconPlaceholder,
|
|
156
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
|
|
157
|
+
selected: numberOfColumns === 4
|
|
158
|
+
}, {
|
|
159
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
160
|
+
count: 5
|
|
161
|
+
}),
|
|
162
|
+
//'5-columns'
|
|
163
|
+
icon: iconPlaceholder,
|
|
164
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
|
|
165
|
+
selected: numberOfColumns === 5
|
|
166
|
+
}];
|
|
167
|
+
return [{
|
|
168
|
+
type: 'dropdown',
|
|
169
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
170
|
+
count: numberOfColumns
|
|
171
|
+
}),
|
|
172
|
+
//`${numberOfColumns}-columns`,
|
|
173
|
+
options: columnOptions,
|
|
174
|
+
showSelected: true,
|
|
175
|
+
testId: 'column-options-button'
|
|
176
|
+
}, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
|
|
177
|
+
type: 'copy-button',
|
|
178
|
+
supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
|
|
179
|
+
items: [{
|
|
180
|
+
state,
|
|
181
|
+
formatMessage: intl.formatMessage,
|
|
182
|
+
nodeType
|
|
183
|
+
}]
|
|
184
|
+
}, separator, deleteButton];
|
|
185
|
+
};
|
|
109
186
|
export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
|
|
110
187
|
var _api$decorations$acti, _api$decorations, _api$analytics;
|
|
111
188
|
const {
|
|
@@ -115,7 +192,6 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
|
|
|
115
192
|
const node = state.doc.nodeAt(pos);
|
|
116
193
|
if (node) {
|
|
117
194
|
const currentLayout = getPresetLayout(node);
|
|
118
|
-
const numberOfColumns = node.content.childCount || 2;
|
|
119
195
|
const separator = {
|
|
120
196
|
type: 'separator'
|
|
121
197
|
};
|
|
@@ -136,56 +212,23 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
|
|
|
136
212
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
|
|
137
213
|
tabIndex: null
|
|
138
214
|
};
|
|
139
|
-
const layoutTypes =
|
|
140
|
-
const columnOptions = [{
|
|
141
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
142
|
-
count: 2
|
|
143
|
-
}),
|
|
144
|
-
//'2-columns',
|
|
145
|
-
icon: iconPlaceholder,
|
|
146
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
|
|
147
|
-
selected: numberOfColumns === 2
|
|
148
|
-
}, {
|
|
149
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
150
|
-
count: 3
|
|
151
|
-
}),
|
|
152
|
-
//'3-columns'
|
|
153
|
-
icon: iconPlaceholder,
|
|
154
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
|
|
155
|
-
selected: numberOfColumns === 3
|
|
156
|
-
}, {
|
|
157
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
158
|
-
count: 4
|
|
159
|
-
}),
|
|
160
|
-
//'4-columns'
|
|
161
|
-
icon: iconPlaceholder,
|
|
162
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
|
|
163
|
-
selected: numberOfColumns === 4
|
|
164
|
-
}, {
|
|
165
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
166
|
-
count: 5
|
|
167
|
-
}),
|
|
168
|
-
//'5-columns'
|
|
169
|
-
icon: iconPlaceholder,
|
|
170
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
|
|
171
|
-
selected: numberOfColumns === 5
|
|
172
|
-
}];
|
|
173
|
-
const sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
|
|
215
|
+
const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
|
|
174
216
|
return {
|
|
175
217
|
title: layoutToolbarTitle,
|
|
176
218
|
getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
|
|
177
219
|
nodeType,
|
|
178
220
|
groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
|
|
179
|
-
items:
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
221
|
+
items: isPreRelease2() ? getAdvancedLayoutItems({
|
|
222
|
+
addSidebarLayouts,
|
|
223
|
+
intl,
|
|
224
|
+
editorAnalyticsAPI,
|
|
225
|
+
state,
|
|
226
|
+
nodeType,
|
|
227
|
+
node,
|
|
228
|
+
separator,
|
|
229
|
+
deleteButton,
|
|
230
|
+
currentLayout
|
|
231
|
+
}) : [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
|
|
189
232
|
type: 'copy-button',
|
|
190
233
|
supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
|
|
191
234
|
items: [{
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
7
|
+
import { css, jsx } from '@emotion/react';
|
|
8
|
+
import Icon from '@atlaskit/icon';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
const LayoutThreeWithLeftSidebarsGlyph = props => {
|
|
11
|
+
if (fg('platform-visual-refresh-icons')) {
|
|
12
|
+
return jsx("svg", _extends({
|
|
13
|
+
width: "16",
|
|
14
|
+
height: "14",
|
|
15
|
+
viewBox: "0 0 16 14",
|
|
16
|
+
fill: "none",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
18
|
+
}, props), jsx("path", {
|
|
19
|
+
fillRule: "evenodd",
|
|
20
|
+
clipRule: "evenodd",
|
|
21
|
+
d: "M7.5 1.375C7.5 0.615609 8.11561 0 8.875 0H9.625C10.3844 0 11 0.615608 11 1.375V12.625C11 13.3844 10.3844 14 9.625 14H8.875C8.11561 14 7.5 13.3844 7.5 12.625V1.375ZM9 1.5V12.5H9.5V1.5H9ZM0 1.37505C0 0.615655 0.615608 4.66853e-05 1.375 4.66853e-05H4.625C5.38439 4.66853e-05 6 0.615655 6 1.37505V12.625C6 13.3844 5.38439 14 4.625 14H1.375C0.615608 14 0 13.3844 0 12.625V1.37505ZM1.5 1.50005V12.5H4.5V1.50005H1.5ZM12.5 1.37505C12.5 0.615655 13.1156 4.66853e-05 13.875 4.66853e-05H14.625C15.3844 4.66853e-05 16 0.615655 16 1.37505V12.625C16 13.3844 15.3844 14 14.625 14H13.875C13.1156 14 12.5 13.3844 12.5 12.625V1.37505ZM14 1.50005V12.5H14.5V1.50005H14Z",
|
|
22
|
+
fill: "currentcolor"
|
|
23
|
+
}));
|
|
24
|
+
}
|
|
25
|
+
return jsx("svg", _extends({
|
|
26
|
+
width: "16",
|
|
27
|
+
height: "14",
|
|
28
|
+
viewBox: "0 0 16 14",
|
|
29
|
+
fill: "none",
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
31
|
+
}, props), jsx("path", {
|
|
32
|
+
fillRule: "evenodd",
|
|
33
|
+
clipRule: "evenodd",
|
|
34
|
+
d: "M1 0C1.26522 0 1.51957 0.105357 1.70711 0.292893C1.89464 0.48043 2 0.734784 2 1V13C2 13.2652 1.89464 13.5196 1.70711 13.7071C1.51957 13.8946 1.26522 14 1 14C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM9 0H15C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H9C8.73478 14 8.48043 13.8946 8.29289 13.7071C8.10536 13.5196 8 13.2652 8 13V1C8 0.734784 8.10536 0.48043 8.29289 0.292893C8.48043 0.105357 8.73478 0 9 0ZM5 0C5.26522 0 5.51957 0.105356 5.70711 0.292892C5.89464 0.480429 6 0.734784 6 1V13C6 13.2652 5.89464 13.5196 5.70711 13.7071C5.51957 13.8946 5.26522 14 5 14C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13V1C4 0.734784 4.10536 0.480429 4.29289 0.292892C4.48043 0.105356 4.73478 0 5 0Z",
|
|
35
|
+
fill: "currentcolor"
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
const floatingToolbarPadding = css({
|
|
39
|
+
paddingRight: "var(--ds-space-050, 4px)",
|
|
40
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
41
|
+
});
|
|
42
|
+
export const LayoutThreeWithLeftSidebarsIcon = props => jsx("span", {
|
|
43
|
+
css: floatingToolbarPadding
|
|
44
|
+
}, jsx(Icon, _extends({
|
|
45
|
+
glyph: LayoutThreeWithLeftSidebarsGlyph
|
|
46
|
+
}, props)));
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
7
|
+
import { css, jsx } from '@emotion/react';
|
|
8
|
+
import Icon from '@atlaskit/icon';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
const LayoutThreeWithRightSidebarsGlyph = props => {
|
|
11
|
+
if (fg('platform-visual-refresh-icons')) {
|
|
12
|
+
return jsx("svg", _extends({
|
|
13
|
+
width: "16",
|
|
14
|
+
height: "14",
|
|
15
|
+
viewBox: "0 0 16 14",
|
|
16
|
+
fill: "none",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
18
|
+
}, props), jsx("path", {
|
|
19
|
+
fillRule: "evenodd",
|
|
20
|
+
clipRule: "evenodd",
|
|
21
|
+
d: "M8.5 1.375C8.5 0.615609 7.88439 0 7.125 0H6.375C5.61561 0 5 0.615608 5 1.375V12.625C5 13.3844 5.61561 14 6.375 14H7.125C7.88439 14 8.5 13.3844 8.5 12.625V1.375ZM7 1.5V12.5H6.5V1.5H7ZM16 1.37505C16 0.615655 15.3844 4.66853e-05 14.625 4.66853e-05H11.375C10.6156 4.66853e-05 10 0.615655 10 1.37505V12.625C10 13.3844 10.6156 14 11.375 14H14.625C15.3844 14 16 13.3844 16 12.625V1.37505ZM14.5 1.50005V12.5H11.5V1.50005H14.5ZM3.5 1.37505C3.5 0.615655 2.88439 4.66853e-05 2.125 4.66853e-05H1.375C0.615608 4.66853e-05 0 0.615655 0 1.37505V12.625C0 13.3844 0.615608 14 1.375 14H2.125C2.88439 14 3.5 13.3844 3.5 12.625V1.37505ZM2 1.50005V12.5H1.5V1.50005H2Z",
|
|
22
|
+
fill: "currentcolor"
|
|
23
|
+
}));
|
|
24
|
+
}
|
|
25
|
+
return jsx("svg", _extends({
|
|
26
|
+
width: "16",
|
|
27
|
+
height: "14",
|
|
28
|
+
viewBox: "0 0 16 14",
|
|
29
|
+
fill: "none",
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
31
|
+
}, props), jsx("path", {
|
|
32
|
+
fillRule: "evenodd",
|
|
33
|
+
clipRule: "evenodd",
|
|
34
|
+
d: "M11 0C11.2652 0 11.5196 0.105357 11.7071 0.292893C11.8946 0.48043 12 0.734784 12 1V13C12 13.2652 11.8946 13.5196 11.7071 13.7071C11.5196 13.8946 11.2652 14 11 14C10.7348 14 10.4804 13.8946 10.2929 13.7071C10.1054 13.5196 10 13.2652 10 13V1C10 0.734784 10.1054 0.48043 10.2929 0.292893C10.4804 0.105357 10.7348 0 11 0ZM1 0H7C7.26522 0 7.51957 0.105357 7.70711 0.292893C7.89464 0.48043 8 0.734784 8 1V13C8 13.2652 7.89464 13.5196 7.70711 13.7071C7.51957 13.8946 7.26522 14 7 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM15 0C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14C14.7348 14 14.4804 13.8946 14.2929 13.7071C14.1054 13.5196 14 13.2652 14 13V1C14 0.734784 14.1054 0.48043 14.2929 0.292893C14.4804 0.105357 14.7348 0 15 0Z",
|
|
35
|
+
fill: "currentcolor"
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
const floatingToolbarPadding = css({
|
|
39
|
+
paddingRight: "var(--ds-space-050, 4px)",
|
|
40
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
41
|
+
});
|
|
42
|
+
export const LayoutThreeWithRightSidebarsIcon = props => jsx("span", {
|
|
43
|
+
css: floatingToolbarPadding
|
|
44
|
+
}, jsx(Icon, _extends({
|
|
45
|
+
glyph: LayoutThreeWithRightSidebarsGlyph
|
|
46
|
+
}, props)));
|
package/dist/esm/actions.js
CHANGED
|
@@ -14,8 +14,6 @@ import { isPreRelease2 } from './utils/preRelease';
|
|
|
14
14
|
export var ONE_COL_LAYOUTS = ['single'];
|
|
15
15
|
export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
|
|
16
16
|
export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
|
|
17
|
-
export var FOUR_COL_LAYOUTS = ['four_equal'];
|
|
18
|
-
export var FIVE_COL_LAYOUTS = ['five_equal'];
|
|
19
17
|
var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
|
|
20
18
|
if (isPreRelease2()) {
|
|
21
19
|
switch (presetLayout) {
|
|
@@ -31,6 +29,10 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
|
|
|
31
29
|
return [66.66, 33.33];
|
|
32
30
|
case 'three_with_sidebars':
|
|
33
31
|
return [25, 50, 25];
|
|
32
|
+
case 'three_left_sidebars':
|
|
33
|
+
return [25, 25, 50];
|
|
34
|
+
case 'three_right_sidebars':
|
|
35
|
+
return [50, 25, 25];
|
|
34
36
|
case 'four_equal':
|
|
35
37
|
return [25, 25, 25, 25];
|
|
36
38
|
case 'five_equal':
|
|
@@ -78,6 +80,10 @@ export var getPresetLayout = function getPresetLayout(section) {
|
|
|
78
80
|
return 'three_equal';
|
|
79
81
|
case '25,50,25':
|
|
80
82
|
return 'three_with_sidebars';
|
|
83
|
+
case '50,25,25':
|
|
84
|
+
return 'three_right_sidebars';
|
|
85
|
+
case '25,25,50':
|
|
86
|
+
return 'three_left_sidebars';
|
|
81
87
|
case '50,50':
|
|
82
88
|
return 'two_equal';
|
|
83
89
|
case '33.33,66.66':
|
package/dist/esm/toolbar.js
CHANGED
|
@@ -17,6 +17,8 @@ import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-ri
|
|
|
17
17
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
18
18
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
19
|
import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
|
|
20
|
+
import { LayoutThreeWithLeftSidebarsIcon } from './ui/icons/LayoutThreeWithLeftSidebars';
|
|
21
|
+
import { LayoutThreeWithRightSidebarsIcon } from './ui/icons/LayoutThreeWithRightSidebars';
|
|
20
22
|
import { isPreRelease2 } from './utils/preRelease';
|
|
21
23
|
var LAYOUT_TYPES = [{
|
|
22
24
|
id: 'editor.layout.twoEquals',
|
|
@@ -57,7 +59,9 @@ var SIDEBAR_LAYOUT_TYPES = [{
|
|
|
57
59
|
icon: LayoutThreeColumnsSidebarsIcon,
|
|
58
60
|
iconFallback: LayoutThreeWithSidebarsIcon
|
|
59
61
|
}];
|
|
60
|
-
|
|
62
|
+
|
|
63
|
+
// These are used for advanced layout options
|
|
64
|
+
var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
|
|
61
65
|
id: 'editor.layout.twoEquals',
|
|
62
66
|
type: 'two_equal',
|
|
63
67
|
title: toolbarMessages.twoColumns,
|
|
@@ -75,7 +79,8 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
|
|
|
75
79
|
title: toolbarMessages.leftSidebar,
|
|
76
80
|
icon: LayoutTwoColumnsSidebarLeftIcon,
|
|
77
81
|
iconFallback: LayoutTwoLeftSidebarIcon
|
|
78
|
-
}
|
|
82
|
+
}];
|
|
83
|
+
var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
|
|
79
84
|
id: 'editor.layout.threeEquals',
|
|
80
85
|
type: 'three_equal',
|
|
81
86
|
title: toolbarMessages.threeColumns,
|
|
@@ -87,13 +92,19 @@ var LAYOUT_DISTRIBUTION_TYPES = [{
|
|
|
87
92
|
title: toolbarMessages.threeColumnsWithSidebars,
|
|
88
93
|
icon: LayoutThreeColumnsSidebarsIcon,
|
|
89
94
|
iconFallback: LayoutThreeWithSidebarsIcon
|
|
95
|
+
}, {
|
|
96
|
+
id: 'editor.layout.threeRightSidebars',
|
|
97
|
+
type: 'three_right_sidebars',
|
|
98
|
+
title: toolbarMessages.threeColumnsWithRightSidebars,
|
|
99
|
+
icon: LayoutThreeWithRightSidebarsIcon,
|
|
100
|
+
iconFallback: LayoutThreeWithRightSidebarsIcon
|
|
101
|
+
}, {
|
|
102
|
+
id: 'editor.layout.threeLeftSidebars',
|
|
103
|
+
type: 'three_left_sidebars',
|
|
104
|
+
title: toolbarMessages.threeColumnsWithLeftSidebars,
|
|
105
|
+
icon: LayoutThreeWithLeftSidebarsIcon,
|
|
106
|
+
iconFallback: LayoutThreeWithLeftSidebarsIcon
|
|
90
107
|
}];
|
|
91
|
-
var SIDEBAR_LAYOUT_TYPES_BY_COLUMNS = {
|
|
92
|
-
2: [LAYOUT_DISTRIBUTION_TYPES[0], LAYOUT_DISTRIBUTION_TYPES[1], LAYOUT_DISTRIBUTION_TYPES[2]],
|
|
93
|
-
3: [LAYOUT_DISTRIBUTION_TYPES[3], LAYOUT_DISTRIBUTION_TYPES[4]],
|
|
94
|
-
4: [],
|
|
95
|
-
5: []
|
|
96
|
-
};
|
|
97
108
|
var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
|
|
98
109
|
return {
|
|
99
110
|
id: item.id,
|
|
@@ -109,15 +120,81 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
|
|
|
109
120
|
};
|
|
110
121
|
export var layoutToolbarTitle = 'Layout floating controls';
|
|
111
122
|
var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
|
|
123
|
+
|
|
124
|
+
var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
125
|
+
var addSidebarLayouts = _ref.addSidebarLayouts,
|
|
126
|
+
intl = _ref.intl,
|
|
127
|
+
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
128
|
+
state = _ref.state,
|
|
129
|
+
node = _ref.node,
|
|
130
|
+
nodeType = _ref.nodeType,
|
|
131
|
+
separator = _ref.separator,
|
|
132
|
+
deleteButton = _ref.deleteButton,
|
|
133
|
+
currentLayout = _ref.currentLayout;
|
|
134
|
+
var numberOfColumns = node.content.childCount || 2;
|
|
135
|
+
var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
|
|
136
|
+
var columnOptions = [{
|
|
137
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
138
|
+
count: 2
|
|
139
|
+
}),
|
|
140
|
+
//'2-columns',
|
|
141
|
+
icon: iconPlaceholder,
|
|
142
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
|
|
143
|
+
selected: numberOfColumns === 2
|
|
144
|
+
}, {
|
|
145
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
146
|
+
count: 3
|
|
147
|
+
}),
|
|
148
|
+
//'3-columns'
|
|
149
|
+
icon: iconPlaceholder,
|
|
150
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
|
|
151
|
+
selected: numberOfColumns === 3
|
|
152
|
+
}, {
|
|
153
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
154
|
+
count: 4
|
|
155
|
+
}),
|
|
156
|
+
//'4-columns'
|
|
157
|
+
icon: iconPlaceholder,
|
|
158
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
|
|
159
|
+
selected: numberOfColumns === 4
|
|
160
|
+
}, {
|
|
161
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
162
|
+
count: 5
|
|
163
|
+
}),
|
|
164
|
+
//'5-columns'
|
|
165
|
+
icon: iconPlaceholder,
|
|
166
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
|
|
167
|
+
selected: numberOfColumns === 5
|
|
168
|
+
}];
|
|
169
|
+
return [{
|
|
170
|
+
type: 'dropdown',
|
|
171
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
172
|
+
count: numberOfColumns
|
|
173
|
+
}),
|
|
174
|
+
//`${numberOfColumns}-columns`,
|
|
175
|
+
options: columnOptions,
|
|
176
|
+
showSelected: true,
|
|
177
|
+
testId: 'column-options-button'
|
|
178
|
+
}].concat(_toConsumableArray(distributionOptions.length > 0 ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
|
|
179
|
+
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
180
|
+
}) : []), [separator, {
|
|
181
|
+
type: 'copy-button',
|
|
182
|
+
supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
|
|
183
|
+
items: [{
|
|
184
|
+
state: state,
|
|
185
|
+
formatMessage: intl.formatMessage,
|
|
186
|
+
nodeType: nodeType
|
|
187
|
+
}]
|
|
188
|
+
}, separator, deleteButton]);
|
|
189
|
+
};
|
|
112
190
|
export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
|
|
113
191
|
var _api$decorations$acti, _api$decorations, _api$analytics;
|
|
114
|
-
var
|
|
115
|
-
hoverDecoration =
|
|
192
|
+
var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
|
|
193
|
+
hoverDecoration = _ref2.hoverDecoration;
|
|
116
194
|
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
117
195
|
var node = state.doc.nodeAt(pos);
|
|
118
196
|
if (node) {
|
|
119
197
|
var currentLayout = getPresetLayout(node);
|
|
120
|
-
var numberOfColumns = node.content.childCount || 2;
|
|
121
198
|
var separator = {
|
|
122
199
|
type: 'separator'
|
|
123
200
|
};
|
|
@@ -138,41 +215,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
|
|
|
138
215
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
|
|
139
216
|
tabIndex: null
|
|
140
217
|
};
|
|
141
|
-
var layoutTypes =
|
|
142
|
-
var columnOptions = [{
|
|
143
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
144
|
-
count: 2
|
|
145
|
-
}),
|
|
146
|
-
//'2-columns',
|
|
147
|
-
icon: iconPlaceholder,
|
|
148
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
|
|
149
|
-
selected: numberOfColumns === 2
|
|
150
|
-
}, {
|
|
151
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
152
|
-
count: 3
|
|
153
|
-
}),
|
|
154
|
-
//'3-columns'
|
|
155
|
-
icon: iconPlaceholder,
|
|
156
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
|
|
157
|
-
selected: numberOfColumns === 3
|
|
158
|
-
}, {
|
|
159
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
160
|
-
count: 4
|
|
161
|
-
}),
|
|
162
|
-
//'4-columns'
|
|
163
|
-
icon: iconPlaceholder,
|
|
164
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
|
|
165
|
-
selected: numberOfColumns === 4
|
|
166
|
-
}, {
|
|
167
|
-
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
168
|
-
count: 5
|
|
169
|
-
}),
|
|
170
|
-
//'5-columns'
|
|
171
|
-
icon: iconPlaceholder,
|
|
172
|
-
onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
|
|
173
|
-
selected: numberOfColumns === 5
|
|
174
|
-
}];
|
|
175
|
-
var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
|
|
218
|
+
var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
|
|
176
219
|
return {
|
|
177
220
|
title: layoutToolbarTitle,
|
|
178
221
|
getDomRef: function getDomRef(view) {
|
|
@@ -180,20 +223,19 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
|
|
|
180
223
|
},
|
|
181
224
|
nodeType: nodeType,
|
|
182
225
|
groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
|
|
183
|
-
items:
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
})), _toConsumableArray(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(function (i) {
|
|
226
|
+
items: isPreRelease2() ? getAdvancedLayoutItems({
|
|
227
|
+
addSidebarLayouts: addSidebarLayouts,
|
|
228
|
+
intl: intl,
|
|
229
|
+
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
230
|
+
state: state,
|
|
231
|
+
nodeType: nodeType,
|
|
232
|
+
node: node,
|
|
233
|
+
separator: separator,
|
|
234
|
+
deleteButton: deleteButton,
|
|
235
|
+
currentLayout: currentLayout
|
|
236
|
+
}) : [].concat(_toConsumableArray(layoutTypes.map(function (i) {
|
|
195
237
|
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
196
|
-
})
|
|
238
|
+
})), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
|
|
197
239
|
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
198
240
|
}) : []), [separator, {
|
|
199
241
|
type: 'copy-button',
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
7
|
+
import { css, jsx } from '@emotion/react';
|
|
8
|
+
import Icon from '@atlaskit/icon';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
var LayoutThreeWithLeftSidebarsGlyph = function LayoutThreeWithLeftSidebarsGlyph(props) {
|
|
11
|
+
if (fg('platform-visual-refresh-icons')) {
|
|
12
|
+
return jsx("svg", _extends({
|
|
13
|
+
width: "16",
|
|
14
|
+
height: "14",
|
|
15
|
+
viewBox: "0 0 16 14",
|
|
16
|
+
fill: "none",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
18
|
+
}, props), jsx("path", {
|
|
19
|
+
fillRule: "evenodd",
|
|
20
|
+
clipRule: "evenodd",
|
|
21
|
+
d: "M7.5 1.375C7.5 0.615609 8.11561 0 8.875 0H9.625C10.3844 0 11 0.615608 11 1.375V12.625C11 13.3844 10.3844 14 9.625 14H8.875C8.11561 14 7.5 13.3844 7.5 12.625V1.375ZM9 1.5V12.5H9.5V1.5H9ZM0 1.37505C0 0.615655 0.615608 4.66853e-05 1.375 4.66853e-05H4.625C5.38439 4.66853e-05 6 0.615655 6 1.37505V12.625C6 13.3844 5.38439 14 4.625 14H1.375C0.615608 14 0 13.3844 0 12.625V1.37505ZM1.5 1.50005V12.5H4.5V1.50005H1.5ZM12.5 1.37505C12.5 0.615655 13.1156 4.66853e-05 13.875 4.66853e-05H14.625C15.3844 4.66853e-05 16 0.615655 16 1.37505V12.625C16 13.3844 15.3844 14 14.625 14H13.875C13.1156 14 12.5 13.3844 12.5 12.625V1.37505ZM14 1.50005V12.5H14.5V1.50005H14Z",
|
|
22
|
+
fill: "currentcolor"
|
|
23
|
+
}));
|
|
24
|
+
}
|
|
25
|
+
return jsx("svg", _extends({
|
|
26
|
+
width: "16",
|
|
27
|
+
height: "14",
|
|
28
|
+
viewBox: "0 0 16 14",
|
|
29
|
+
fill: "none",
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
31
|
+
}, props), jsx("path", {
|
|
32
|
+
fillRule: "evenodd",
|
|
33
|
+
clipRule: "evenodd",
|
|
34
|
+
d: "M1 0C1.26522 0 1.51957 0.105357 1.70711 0.292893C1.89464 0.48043 2 0.734784 2 1V13C2 13.2652 1.89464 13.5196 1.70711 13.7071C1.51957 13.8946 1.26522 14 1 14C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM9 0H15C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H9C8.73478 14 8.48043 13.8946 8.29289 13.7071C8.10536 13.5196 8 13.2652 8 13V1C8 0.734784 8.10536 0.48043 8.29289 0.292893C8.48043 0.105357 8.73478 0 9 0ZM5 0C5.26522 0 5.51957 0.105356 5.70711 0.292892C5.89464 0.480429 6 0.734784 6 1V13C6 13.2652 5.89464 13.5196 5.70711 13.7071C5.51957 13.8946 5.26522 14 5 14C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13V1C4 0.734784 4.10536 0.480429 4.29289 0.292892C4.48043 0.105356 4.73478 0 5 0Z",
|
|
35
|
+
fill: "currentcolor"
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
var floatingToolbarPadding = css({
|
|
39
|
+
paddingRight: "var(--ds-space-050, 4px)",
|
|
40
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
41
|
+
});
|
|
42
|
+
export var LayoutThreeWithLeftSidebarsIcon = function LayoutThreeWithLeftSidebarsIcon(props) {
|
|
43
|
+
return jsx("span", {
|
|
44
|
+
css: floatingToolbarPadding
|
|
45
|
+
}, jsx(Icon, _extends({
|
|
46
|
+
glyph: LayoutThreeWithLeftSidebarsGlyph
|
|
47
|
+
}, props)));
|
|
48
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
7
|
+
import { css, jsx } from '@emotion/react';
|
|
8
|
+
import Icon from '@atlaskit/icon';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
var LayoutThreeWithRightSidebarsGlyph = function LayoutThreeWithRightSidebarsGlyph(props) {
|
|
11
|
+
if (fg('platform-visual-refresh-icons')) {
|
|
12
|
+
return jsx("svg", _extends({
|
|
13
|
+
width: "16",
|
|
14
|
+
height: "14",
|
|
15
|
+
viewBox: "0 0 16 14",
|
|
16
|
+
fill: "none",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
18
|
+
}, props), jsx("path", {
|
|
19
|
+
fillRule: "evenodd",
|
|
20
|
+
clipRule: "evenodd",
|
|
21
|
+
d: "M8.5 1.375C8.5 0.615609 7.88439 0 7.125 0H6.375C5.61561 0 5 0.615608 5 1.375V12.625C5 13.3844 5.61561 14 6.375 14H7.125C7.88439 14 8.5 13.3844 8.5 12.625V1.375ZM7 1.5V12.5H6.5V1.5H7ZM16 1.37505C16 0.615655 15.3844 4.66853e-05 14.625 4.66853e-05H11.375C10.6156 4.66853e-05 10 0.615655 10 1.37505V12.625C10 13.3844 10.6156 14 11.375 14H14.625C15.3844 14 16 13.3844 16 12.625V1.37505ZM14.5 1.50005V12.5H11.5V1.50005H14.5ZM3.5 1.37505C3.5 0.615655 2.88439 4.66853e-05 2.125 4.66853e-05H1.375C0.615608 4.66853e-05 0 0.615655 0 1.37505V12.625C0 13.3844 0.615608 14 1.375 14H2.125C2.88439 14 3.5 13.3844 3.5 12.625V1.37505ZM2 1.50005V12.5H1.5V1.50005H2Z",
|
|
22
|
+
fill: "currentcolor"
|
|
23
|
+
}));
|
|
24
|
+
}
|
|
25
|
+
return jsx("svg", _extends({
|
|
26
|
+
width: "16",
|
|
27
|
+
height: "14",
|
|
28
|
+
viewBox: "0 0 16 14",
|
|
29
|
+
fill: "none",
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
31
|
+
}, props), jsx("path", {
|
|
32
|
+
fillRule: "evenodd",
|
|
33
|
+
clipRule: "evenodd",
|
|
34
|
+
d: "M11 0C11.2652 0 11.5196 0.105357 11.7071 0.292893C11.8946 0.48043 12 0.734784 12 1V13C12 13.2652 11.8946 13.5196 11.7071 13.7071C11.5196 13.8946 11.2652 14 11 14C10.7348 14 10.4804 13.8946 10.2929 13.7071C10.1054 13.5196 10 13.2652 10 13V1C10 0.734784 10.1054 0.48043 10.2929 0.292893C10.4804 0.105357 10.7348 0 11 0ZM1 0H7C7.26522 0 7.51957 0.105357 7.70711 0.292893C7.89464 0.48043 8 0.734784 8 1V13C8 13.2652 7.89464 13.5196 7.70711 13.7071C7.51957 13.8946 7.26522 14 7 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM15 0C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14C14.7348 14 14.4804 13.8946 14.2929 13.7071C14.1054 13.5196 14 13.2652 14 13V1C14 0.734784 14.1054 0.48043 14.2929 0.292893C14.4804 0.105357 14.7348 0 15 0Z",
|
|
35
|
+
fill: "currentcolor"
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
var floatingToolbarPadding = css({
|
|
39
|
+
paddingRight: "var(--ds-space-050, 4px)",
|
|
40
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
41
|
+
});
|
|
42
|
+
export var LayoutThreeWithRightSidebarsIcon = function LayoutThreeWithRightSidebarsIcon(props) {
|
|
43
|
+
return jsx("span", {
|
|
44
|
+
css: floatingToolbarPadding
|
|
45
|
+
}, jsx(Icon, _extends({
|
|
46
|
+
glyph: LayoutThreeWithRightSidebarsGlyph
|
|
47
|
+
}, props)));
|
|
48
|
+
};
|
package/dist/types/actions.d.ts
CHANGED
|
@@ -7,8 +7,6 @@ import type { Change, PresetLayout } from './types';
|
|
|
7
7
|
export declare const ONE_COL_LAYOUTS: PresetLayout[];
|
|
8
8
|
export declare const TWO_COL_LAYOUTS: PresetLayout[];
|
|
9
9
|
export declare const THREE_COL_LAYOUTS: PresetLayout[];
|
|
10
|
-
export declare const FOUR_COL_LAYOUTS: PresetLayout[];
|
|
11
|
-
export declare const FIVE_COL_LAYOUTS: PresetLayout[];
|
|
12
10
|
/**
|
|
13
11
|
* Finds layout preset based on the width attrs of all the layoutColumn nodes
|
|
14
12
|
* inside the layoutSection node
|
package/dist/types/types.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
|
|
|
6
6
|
UNSAFE_allowSingleColumnLayout?: boolean;
|
|
7
7
|
editorAppearance?: EditorAppearance;
|
|
8
8
|
}
|
|
9
|
-
export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'four_equal' | 'five_equal';
|
|
9
|
+
export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'three_left_sidebars' | 'three_right_sidebars' | 'four_equal' | 'five_equal';
|
|
10
10
|
export interface Change {
|
|
11
11
|
from: number;
|
|
12
12
|
to: number;
|
|
@@ -7,8 +7,6 @@ import type { Change, PresetLayout } from './types';
|
|
|
7
7
|
export declare const ONE_COL_LAYOUTS: PresetLayout[];
|
|
8
8
|
export declare const TWO_COL_LAYOUTS: PresetLayout[];
|
|
9
9
|
export declare const THREE_COL_LAYOUTS: PresetLayout[];
|
|
10
|
-
export declare const FOUR_COL_LAYOUTS: PresetLayout[];
|
|
11
|
-
export declare const FIVE_COL_LAYOUTS: PresetLayout[];
|
|
12
10
|
/**
|
|
13
11
|
* Finds layout preset based on the width attrs of all the layoutColumn nodes
|
|
14
12
|
* inside the layoutSection node
|
|
@@ -6,7 +6,7 @@ export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
|
|
|
6
6
|
UNSAFE_allowSingleColumnLayout?: boolean;
|
|
7
7
|
editorAppearance?: EditorAppearance;
|
|
8
8
|
}
|
|
9
|
-
export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'four_equal' | 'five_equal';
|
|
9
|
+
export type PresetLayout = 'single' | 'two_equal' | 'three_equal' | 'two_right_sidebar' | 'two_left_sidebar' | 'three_with_sidebars' | 'three_left_sidebars' | 'three_right_sidebars' | 'four_equal' | 'five_equal';
|
|
10
10
|
export interface Change {
|
|
11
11
|
from: number;
|
|
12
12
|
to: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.5",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
".": "./src/index.ts"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/adf-schema": "^
|
|
35
|
-
"@atlaskit/editor-common": "^95.
|
|
34
|
+
"@atlaskit/adf-schema": "^46.1.0",
|
|
35
|
+
"@atlaskit/editor-common": "^95.7.0",
|
|
36
36
|
"@atlaskit/editor-plugin-analytics": "^1.10.0",
|
|
37
37
|
"@atlaskit/editor-plugin-decorations": "^1.3.0",
|
|
38
38
|
"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
|
|
39
39
|
"@atlaskit/editor-plugin-width": "^1.3.0",
|
|
40
40
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
41
|
-
"@atlaskit/icon": "^22.
|
|
41
|
+
"@atlaskit/icon": "^22.26.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
43
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
43
|
+
"@atlaskit/tmp-editor-statsig": "^2.21.0",
|
|
44
44
|
"@atlaskit/tokens": "^2.3.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@emotion/react": "^11.7.1"
|
|
@@ -99,6 +99,9 @@
|
|
|
99
99
|
},
|
|
100
100
|
"platform_editor_advanced_layouts_breakout_resizing": {
|
|
101
101
|
"type": "boolean"
|
|
102
|
+
},
|
|
103
|
+
"platform-visual-refresh-icons": {
|
|
104
|
+
"type": "boolean"
|
|
102
105
|
}
|
|
103
106
|
}
|
|
104
107
|
}
|