@atlaskit/editor-plugin-layout 20.0.1 → 20.0.2
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 +9 -0
- package/dist/cjs/layoutPlugin.js +55 -142
- package/dist/cjs/nodeviews/index.js +1 -1
- package/dist/cjs/pm-plugins/actions.js +1 -1
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/cjs/pm-plugins/utils/index.js +1 -1
- package/dist/cjs/ui/quick-insert/LayoutQuickInsertMenuItem.js +2 -2
- package/dist/cjs/ui/toolbar.js +1 -1
- package/dist/es2019/entry-points/layout-plugin.js +1 -0
- package/dist/es2019/layoutPlugin.js +54 -133
- package/dist/es2019/nodeviews/index.js +1 -1
- package/dist/es2019/pm-plugins/actions.js +1 -1
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/es2019/pm-plugins/utils/index.js +1 -1
- package/dist/es2019/ui/quick-insert/LayoutQuickInsertMenuItem.js +2 -2
- package/dist/es2019/ui/toolbar.js +1 -1
- package/dist/esm/entry-points/layout-plugin.js +1 -0
- package/dist/esm/layoutPlugin.js +55 -142
- package/dist/esm/nodeviews/index.js +1 -1
- package/dist/esm/pm-plugins/actions.js +1 -1
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/esm/pm-plugins/utils/index.js +1 -1
- package/dist/esm/ui/quick-insert/LayoutQuickInsertMenuItem.js +2 -2
- package/dist/esm/ui/toolbar.js +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 20.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`1e8d2aad8e882`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1e8d2aad8e882) -
|
|
8
|
+
Remove the permanent `platform_editor_layout_typeahead_reorder` experiment and its temporary
|
|
9
|
+
Editor Statsig registration.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 20.0.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.selectIntoLayoutSection = exports.layoutPlugin = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _layoutColumn = require("@atlaskit/adf-schema/nodes/layout-column");
|
|
10
9
|
var _layoutSection = require("@atlaskit/adf-schema/layout-section");
|
|
10
|
+
var _layoutColumn = require("@atlaskit/adf-schema/nodes/layout-column");
|
|
11
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
12
12
|
var _blockMenu = require("@atlaskit/editor-common/block-menu");
|
|
13
13
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
@@ -16,8 +16,8 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
16
16
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
17
17
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
18
18
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
19
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
19
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
20
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
21
21
|
var _actions = require("./pm-plugins/actions");
|
|
22
22
|
var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
|
|
23
23
|
var _main = _interopRequireDefault(require("./pm-plugins/main"));
|
|
@@ -174,6 +174,34 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
174
174
|
return tr;
|
|
175
175
|
};
|
|
176
176
|
if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true)) {
|
|
177
|
+
var createAdvancedColumnLayoutOption = function createAdvancedColumnLayoutOption(_ref4) {
|
|
178
|
+
var columnCount = _ref4.columnCount,
|
|
179
|
+
descriptionColumnCount = _ref4.descriptionColumnCount,
|
|
180
|
+
Icon = _ref4.icon,
|
|
181
|
+
id = _ref4.id,
|
|
182
|
+
keyword = _ref4.keyword,
|
|
183
|
+
title = _ref4.title;
|
|
184
|
+
return {
|
|
185
|
+
id: id,
|
|
186
|
+
title: title,
|
|
187
|
+
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
188
|
+
numberOfColumns: descriptionColumnCount
|
|
189
|
+
}),
|
|
190
|
+
keywords: ['layout', 'column', 'section', 'col', keyword],
|
|
191
|
+
priority: 1100,
|
|
192
|
+
icon: Icon,
|
|
193
|
+
action: function action(insert, state) {
|
|
194
|
+
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, columnCount));
|
|
195
|
+
if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
|
|
196
|
+
withInsertLayoutAnalytics(tr, columnCount);
|
|
197
|
+
} else {
|
|
198
|
+
withInsertLayoutAnalytics(tr);
|
|
199
|
+
}
|
|
200
|
+
selectIntoLayoutSection(tr);
|
|
201
|
+
return tr;
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
};
|
|
177
205
|
var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
|
|
178
206
|
id: 'onecolumnlayout',
|
|
179
207
|
title: formatMessage(_messages.layoutMessages.singleColumnAdvancedLayout),
|
|
@@ -194,158 +222,43 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
194
222
|
return tr;
|
|
195
223
|
}
|
|
196
224
|
}] : [];
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
descriptionColumnCount = _ref4.descriptionColumnCount,
|
|
201
|
-
Icon = _ref4.icon,
|
|
202
|
-
id = _ref4.id,
|
|
203
|
-
keyword = _ref4.keyword,
|
|
204
|
-
title = _ref4.title;
|
|
205
|
-
return {
|
|
206
|
-
id: id,
|
|
207
|
-
title: title,
|
|
208
|
-
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
209
|
-
numberOfColumns: descriptionColumnCount
|
|
210
|
-
}),
|
|
211
|
-
keywords: ['layout', 'column', 'section', 'col', keyword],
|
|
212
|
-
priority: 1100,
|
|
213
|
-
icon: Icon,
|
|
214
|
-
action: function action(insert, state) {
|
|
215
|
-
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, columnCount));
|
|
216
|
-
if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
|
|
217
|
-
withInsertLayoutAnalytics(tr, columnCount);
|
|
218
|
-
} else {
|
|
219
|
-
withInsertLayoutAnalytics(tr);
|
|
220
|
-
}
|
|
221
|
-
selectIntoLayoutSection(tr);
|
|
222
|
-
return tr;
|
|
223
|
-
}
|
|
224
|
-
};
|
|
225
|
-
};
|
|
226
|
-
return [createAdvancedColumnLayoutOption({
|
|
227
|
-
columnCount: 2,
|
|
228
|
-
descriptionColumnCount: 'two',
|
|
229
|
-
icon: function icon() {
|
|
230
|
-
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
|
|
231
|
-
},
|
|
232
|
-
id: 'twocolumnslayout',
|
|
233
|
-
keyword: 'two column',
|
|
234
|
-
title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout)
|
|
235
|
-
})].concat(advancedSingleColumnOption, [createAdvancedColumnLayoutOption({
|
|
236
|
-
columnCount: 3,
|
|
237
|
-
descriptionColumnCount: 'three',
|
|
238
|
-
icon: function icon() {
|
|
239
|
-
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
|
|
240
|
-
},
|
|
241
|
-
id: 'threecolumnslayout',
|
|
242
|
-
keyword: 'three column',
|
|
243
|
-
title: formatMessage(_messages.layoutMessages.threeColumnsAdvancedLayout)
|
|
244
|
-
}), createAdvancedColumnLayoutOption({
|
|
245
|
-
columnCount: 4,
|
|
246
|
-
descriptionColumnCount: 'four',
|
|
247
|
-
icon: function icon() {
|
|
248
|
-
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
|
|
249
|
-
},
|
|
250
|
-
id: 'fourcolumnslayout',
|
|
251
|
-
keyword: 'four column',
|
|
252
|
-
title: formatMessage(_messages.layoutMessages.fourColumns)
|
|
253
|
-
}), createAdvancedColumnLayoutOption({
|
|
254
|
-
columnCount: 5,
|
|
255
|
-
descriptionColumnCount: 'five',
|
|
256
|
-
icon: function icon() {
|
|
257
|
-
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
|
|
258
|
-
},
|
|
259
|
-
id: 'fivecolumnslayout',
|
|
260
|
-
keyword: 'five column',
|
|
261
|
-
title: formatMessage(_messages.layoutMessages.fiveColumns)
|
|
262
|
-
})]);
|
|
263
|
-
}
|
|
264
|
-
return [].concat(advancedSingleColumnOption, [{
|
|
265
|
-
id: 'twocolumnslayout',
|
|
266
|
-
title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout),
|
|
267
|
-
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
268
|
-
numberOfColumns: 'two'
|
|
269
|
-
}),
|
|
270
|
-
keywords: ['layout', 'column', 'section', 'col', 'two column'],
|
|
271
|
-
priority: 1100,
|
|
225
|
+
return [createAdvancedColumnLayoutOption({
|
|
226
|
+
columnCount: 2,
|
|
227
|
+
descriptionColumnCount: 'two',
|
|
272
228
|
icon: function icon() {
|
|
273
229
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
|
|
274
230
|
},
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
}
|
|
282
|
-
selectIntoLayoutSection(tr);
|
|
283
|
-
return tr;
|
|
284
|
-
}
|
|
285
|
-
}, {
|
|
286
|
-
id: 'threecolumnslayout',
|
|
287
|
-
title: formatMessage(_messages.layoutMessages.threeColumnsAdvancedLayout),
|
|
288
|
-
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
289
|
-
numberOfColumns: 'three'
|
|
290
|
-
}),
|
|
291
|
-
keywords: ['layout', 'column', 'section', 'col', 'three column'],
|
|
292
|
-
priority: 1100,
|
|
231
|
+
id: 'twocolumnslayout',
|
|
232
|
+
keyword: 'two column',
|
|
233
|
+
title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout)
|
|
234
|
+
})].concat(advancedSingleColumnOption, [createAdvancedColumnLayoutOption({
|
|
235
|
+
columnCount: 3,
|
|
236
|
+
descriptionColumnCount: 'three',
|
|
293
237
|
icon: function icon() {
|
|
294
238
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
|
|
295
239
|
},
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
}
|
|
303
|
-
selectIntoLayoutSection(tr);
|
|
304
|
-
return tr;
|
|
305
|
-
}
|
|
306
|
-
}, {
|
|
307
|
-
id: 'fourcolumnslayout',
|
|
308
|
-
title: formatMessage(_messages.layoutMessages.fourColumns),
|
|
309
|
-
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
310
|
-
numberOfColumns: 'four'
|
|
311
|
-
}),
|
|
312
|
-
keywords: ['layout', 'column', 'section', 'col', 'four column'],
|
|
313
|
-
priority: 1100,
|
|
240
|
+
id: 'threecolumnslayout',
|
|
241
|
+
keyword: 'three column',
|
|
242
|
+
title: formatMessage(_messages.layoutMessages.threeColumnsAdvancedLayout)
|
|
243
|
+
}), createAdvancedColumnLayoutOption({
|
|
244
|
+
columnCount: 4,
|
|
245
|
+
descriptionColumnCount: 'four',
|
|
314
246
|
icon: function icon() {
|
|
315
247
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
|
|
316
248
|
},
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
}
|
|
324
|
-
selectIntoLayoutSection(tr);
|
|
325
|
-
return tr;
|
|
326
|
-
}
|
|
327
|
-
}, {
|
|
328
|
-
id: 'fivecolumnslayout',
|
|
329
|
-
title: formatMessage(_messages.layoutMessages.fiveColumns),
|
|
330
|
-
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
331
|
-
numberOfColumns: 'five'
|
|
332
|
-
}),
|
|
333
|
-
keywords: ['layout', 'column', 'section', 'col', 'five column'],
|
|
334
|
-
priority: 1100,
|
|
249
|
+
id: 'fourcolumnslayout',
|
|
250
|
+
keyword: 'four column',
|
|
251
|
+
title: formatMessage(_messages.layoutMessages.fourColumns)
|
|
252
|
+
}), createAdvancedColumnLayoutOption({
|
|
253
|
+
columnCount: 5,
|
|
254
|
+
descriptionColumnCount: 'five',
|
|
335
255
|
icon: function icon() {
|
|
336
256
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
|
|
337
257
|
},
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
} else {
|
|
343
|
-
withInsertLayoutAnalytics(tr);
|
|
344
|
-
}
|
|
345
|
-
selectIntoLayoutSection(tr);
|
|
346
|
-
return tr;
|
|
347
|
-
}
|
|
348
|
-
}]);
|
|
258
|
+
id: 'fivecolumnslayout',
|
|
259
|
+
keyword: 'five column',
|
|
260
|
+
title: formatMessage(_messages.layoutMessages.fiveColumns)
|
|
261
|
+
})]);
|
|
349
262
|
} else {
|
|
350
263
|
return [{
|
|
351
264
|
id: 'layout',
|
|
@@ -20,8 +20,8 @@ var _resizer = require("@atlaskit/editor-common/resizer");
|
|
|
20
20
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
21
21
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
22
22
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
23
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
24
23
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
24
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
25
25
|
var _utils = require("../pm-plugins/utils");
|
|
26
26
|
var _LayoutSSRReactContextsProvider = require("../ui/LayoutSSRReactContextsProvider");
|
|
27
27
|
var _utils2 = require("./utils");
|
|
@@ -17,8 +17,8 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
17
17
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
18
18
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
19
19
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
20
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
21
20
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
21
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
22
22
|
var _consts = require("./consts");
|
|
23
23
|
var _pluginKey = require("./plugin-key");
|
|
24
24
|
var _layoutColumnDistribution = require("./utils/layout-column-distribution");
|
|
@@ -16,8 +16,8 @@ var _model = require("@atlaskit/editor-prosemirror/model");
|
|
|
16
16
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
17
17
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
18
18
|
var _view2 = require("@atlaskit/editor-prosemirror/view");
|
|
19
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
19
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
20
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
21
21
|
var _actions = require("./actions");
|
|
22
22
|
var _columnResizeDivider = require("./column-resize-divider");
|
|
23
23
|
var _consts = require("./consts");
|
|
@@ -9,8 +9,8 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
9
9
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
10
10
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
11
11
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
12
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
12
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
13
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
14
14
|
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
|
|
15
15
|
|
|
16
16
|
var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLayoutSection(state) {
|
|
@@ -10,10 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _reactIntl = require("react-intl");
|
|
11
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
12
12
|
var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
|
|
13
|
-
var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
|
|
14
|
-
var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
|
|
15
13
|
var _layoutFiveColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-five-columns"));
|
|
16
14
|
var _layoutFourColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-four-columns"));
|
|
15
|
+
var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
|
|
16
|
+
var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
|
|
17
17
|
var _layoutPlugin = require("../../layoutPlugin");
|
|
18
18
|
var _actions = require("../../pm-plugins/actions");
|
|
19
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -23,8 +23,8 @@ var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layo
|
|
|
23
23
|
var _layoutTwoColumnsSidebarLeft = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns-sidebar-left"));
|
|
24
24
|
var _layoutTwoColumnsSidebarRight = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns-sidebar-right"));
|
|
25
25
|
var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
|
|
26
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
27
26
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
27
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
28
28
|
var _actions = require("../pm-plugins/actions");
|
|
29
29
|
var _layoutColumnDistribution = require("../pm-plugins/utils/layout-column-distribution");
|
|
30
30
|
var _LayoutColumnsIcon = require("./icons/LayoutColumnsIcon");
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { layoutColumn, layoutColumnWithLocalId } from '@atlaskit/adf-schema/nodes/layout-column';
|
|
3
2
|
import { layoutSection, layoutSectionWithLocalId, layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/layout-section';
|
|
3
|
+
import { layoutColumn, layoutColumnWithLocalId } from '@atlaskit/adf-schema/nodes/layout-column';
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
|
|
6
6
|
import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
@@ -9,8 +9,8 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
9
9
|
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
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
13
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
14
|
import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
|
|
15
15
|
import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
|
|
16
16
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
@@ -166,159 +166,80 @@ export const layoutPlugin = ({
|
|
|
166
166
|
return tr;
|
|
167
167
|
};
|
|
168
168
|
if (editorExperiment('advanced_layouts', true)) {
|
|
169
|
-
const
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
withInsertLayoutAnalytics(tr, 1);
|
|
180
|
-
} else {
|
|
181
|
-
withInsertLayoutAnalytics(tr);
|
|
182
|
-
}
|
|
183
|
-
selectIntoLayoutSection(tr);
|
|
184
|
-
return tr;
|
|
185
|
-
}
|
|
186
|
-
}] : [];
|
|
187
|
-
if (expValEquals('platform_editor_layout_typeahead_reorder', 'isEnabled', true)) {
|
|
188
|
-
const createAdvancedColumnLayoutOption = ({
|
|
189
|
-
columnCount,
|
|
190
|
-
descriptionColumnCount,
|
|
191
|
-
icon: Icon,
|
|
192
|
-
id,
|
|
193
|
-
keyword,
|
|
194
|
-
title
|
|
195
|
-
}) => ({
|
|
196
|
-
id,
|
|
197
|
-
title,
|
|
198
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
199
|
-
numberOfColumns: descriptionColumnCount
|
|
200
|
-
}),
|
|
201
|
-
keywords: ['layout', 'column', 'section', 'col', keyword],
|
|
202
|
-
priority: 1100,
|
|
203
|
-
icon: Icon,
|
|
204
|
-
action(insert, state) {
|
|
205
|
-
const tr = insert(createMultiColumnLayoutSection(state, columnCount));
|
|
206
|
-
if (fg('platform_editor_column_count_analytics')) {
|
|
207
|
-
withInsertLayoutAnalytics(tr, columnCount);
|
|
208
|
-
} else {
|
|
209
|
-
withInsertLayoutAnalytics(tr);
|
|
210
|
-
}
|
|
211
|
-
selectIntoLayoutSection(tr);
|
|
212
|
-
return tr;
|
|
213
|
-
}
|
|
214
|
-
});
|
|
215
|
-
return [createAdvancedColumnLayoutOption({
|
|
216
|
-
columnCount: 2,
|
|
217
|
-
descriptionColumnCount: 'two',
|
|
218
|
-
icon: () => /*#__PURE__*/React.createElement(IconTwoColumnLayout, null),
|
|
219
|
-
id: 'twocolumnslayout',
|
|
220
|
-
keyword: 'two column',
|
|
221
|
-
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout)
|
|
222
|
-
}), ...advancedSingleColumnOption, createAdvancedColumnLayoutOption({
|
|
223
|
-
columnCount: 3,
|
|
224
|
-
descriptionColumnCount: 'three',
|
|
225
|
-
icon: () => /*#__PURE__*/React.createElement(IconThreeColumnLayout, null),
|
|
226
|
-
id: 'threecolumnslayout',
|
|
227
|
-
keyword: 'three column',
|
|
228
|
-
title: formatMessage(layoutMessages.threeColumnsAdvancedLayout)
|
|
229
|
-
}), createAdvancedColumnLayoutOption({
|
|
230
|
-
columnCount: 4,
|
|
231
|
-
descriptionColumnCount: 'four',
|
|
232
|
-
icon: () => /*#__PURE__*/React.createElement(IconFourColumnLayout, null),
|
|
233
|
-
id: 'fourcolumnslayout',
|
|
234
|
-
keyword: 'four column',
|
|
235
|
-
title: formatMessage(layoutMessages.fourColumns)
|
|
236
|
-
}), createAdvancedColumnLayoutOption({
|
|
237
|
-
columnCount: 5,
|
|
238
|
-
descriptionColumnCount: 'five',
|
|
239
|
-
icon: () => /*#__PURE__*/React.createElement(IconFiveColumnLayout, null),
|
|
240
|
-
id: 'fivecolumnslayout',
|
|
241
|
-
keyword: 'five column',
|
|
242
|
-
title: formatMessage(layoutMessages.fiveColumns)
|
|
243
|
-
})];
|
|
244
|
-
}
|
|
245
|
-
return [...advancedSingleColumnOption, {
|
|
246
|
-
id: 'twocolumnslayout',
|
|
247
|
-
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
|
|
169
|
+
const createAdvancedColumnLayoutOption = ({
|
|
170
|
+
columnCount,
|
|
171
|
+
descriptionColumnCount,
|
|
172
|
+
icon: Icon,
|
|
173
|
+
id,
|
|
174
|
+
keyword,
|
|
175
|
+
title
|
|
176
|
+
}) => ({
|
|
177
|
+
id,
|
|
178
|
+
title,
|
|
248
179
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
249
|
-
numberOfColumns:
|
|
180
|
+
numberOfColumns: descriptionColumnCount
|
|
250
181
|
}),
|
|
251
|
-
keywords: ['layout', 'column', 'section', 'col',
|
|
182
|
+
keywords: ['layout', 'column', 'section', 'col', keyword],
|
|
252
183
|
priority: 1100,
|
|
253
|
-
icon:
|
|
184
|
+
icon: Icon,
|
|
254
185
|
action(insert, state) {
|
|
255
|
-
const tr = insert(createMultiColumnLayoutSection(state,
|
|
186
|
+
const tr = insert(createMultiColumnLayoutSection(state, columnCount));
|
|
256
187
|
if (fg('platform_editor_column_count_analytics')) {
|
|
257
|
-
withInsertLayoutAnalytics(tr,
|
|
188
|
+
withInsertLayoutAnalytics(tr, columnCount);
|
|
258
189
|
} else {
|
|
259
190
|
withInsertLayoutAnalytics(tr);
|
|
260
191
|
}
|
|
261
192
|
selectIntoLayoutSection(tr);
|
|
262
193
|
return tr;
|
|
263
194
|
}
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
keywords: ['layout', 'column', 'section', 'col', 'three column'],
|
|
195
|
+
});
|
|
196
|
+
const advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
|
|
197
|
+
id: 'onecolumnlayout',
|
|
198
|
+
title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
|
|
199
|
+
description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
|
|
200
|
+
keywords: ['layout', 'column', 'section', 'col', 'single column'],
|
|
271
201
|
priority: 1100,
|
|
272
|
-
icon: () => /*#__PURE__*/React.createElement(
|
|
202
|
+
icon: () => /*#__PURE__*/React.createElement(IconOneColumnLayout, null),
|
|
273
203
|
action(insert, state) {
|
|
274
|
-
const tr = insert(createMultiColumnLayoutSection(state,
|
|
204
|
+
const tr = insert(createMultiColumnLayoutSection(state, 1));
|
|
275
205
|
if (fg('platform_editor_column_count_analytics')) {
|
|
276
|
-
withInsertLayoutAnalytics(tr,
|
|
206
|
+
withInsertLayoutAnalytics(tr, 1);
|
|
277
207
|
} else {
|
|
278
208
|
withInsertLayoutAnalytics(tr);
|
|
279
209
|
}
|
|
280
210
|
selectIntoLayoutSection(tr);
|
|
281
211
|
return tr;
|
|
282
212
|
}
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
213
|
+
}] : [];
|
|
214
|
+
return [createAdvancedColumnLayoutOption({
|
|
215
|
+
columnCount: 2,
|
|
216
|
+
descriptionColumnCount: 'two',
|
|
217
|
+
icon: () => /*#__PURE__*/React.createElement(IconTwoColumnLayout, null),
|
|
218
|
+
id: 'twocolumnslayout',
|
|
219
|
+
keyword: 'two column',
|
|
220
|
+
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout)
|
|
221
|
+
}), ...advancedSingleColumnOption, createAdvancedColumnLayoutOption({
|
|
222
|
+
columnCount: 3,
|
|
223
|
+
descriptionColumnCount: 'three',
|
|
224
|
+
icon: () => /*#__PURE__*/React.createElement(IconThreeColumnLayout, null),
|
|
225
|
+
id: 'threecolumnslayout',
|
|
226
|
+
keyword: 'three column',
|
|
227
|
+
title: formatMessage(layoutMessages.threeColumnsAdvancedLayout)
|
|
228
|
+
}), createAdvancedColumnLayoutOption({
|
|
229
|
+
columnCount: 4,
|
|
230
|
+
descriptionColumnCount: 'four',
|
|
291
231
|
icon: () => /*#__PURE__*/React.createElement(IconFourColumnLayout, null),
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
}
|
|
299
|
-
selectIntoLayoutSection(tr);
|
|
300
|
-
return tr;
|
|
301
|
-
}
|
|
302
|
-
}, {
|
|
303
|
-
id: 'fivecolumnslayout',
|
|
304
|
-
title: formatMessage(layoutMessages.fiveColumns),
|
|
305
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
306
|
-
numberOfColumns: 'five'
|
|
307
|
-
}),
|
|
308
|
-
keywords: ['layout', 'column', 'section', 'col', 'five column'],
|
|
309
|
-
priority: 1100,
|
|
232
|
+
id: 'fourcolumnslayout',
|
|
233
|
+
keyword: 'four column',
|
|
234
|
+
title: formatMessage(layoutMessages.fourColumns)
|
|
235
|
+
}), createAdvancedColumnLayoutOption({
|
|
236
|
+
columnCount: 5,
|
|
237
|
+
descriptionColumnCount: 'five',
|
|
310
238
|
icon: () => /*#__PURE__*/React.createElement(IconFiveColumnLayout, null),
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
} else {
|
|
316
|
-
withInsertLayoutAnalytics(tr);
|
|
317
|
-
}
|
|
318
|
-
selectIntoLayoutSection(tr);
|
|
319
|
-
return tr;
|
|
320
|
-
}
|
|
321
|
-
}];
|
|
239
|
+
id: 'fivecolumnslayout',
|
|
240
|
+
keyword: 'five column',
|
|
241
|
+
title: formatMessage(layoutMessages.fiveColumns)
|
|
242
|
+
})];
|
|
322
243
|
} else {
|
|
323
244
|
return [{
|
|
324
245
|
id: 'layout',
|
|
@@ -6,8 +6,8 @@ import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common
|
|
|
6
6
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
7
7
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
10
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
11
|
import { selectIntoLayout } from '../pm-plugins/utils';
|
|
12
12
|
import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
|
|
13
13
|
import { isEmptyLayout } from './utils';
|
|
@@ -6,8 +6,8 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
|
|
|
6
6
|
import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
|
|
7
7
|
import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
10
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
11
|
import { DEFAULT_LAYOUT_COLUMN_VALIGN, EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
|
|
12
12
|
import { pluginKey } from './plugin-key';
|
|
13
13
|
import { calculateDistribution, isDistributedUniformly, redistributeAfterDeletion, redistributeProportionally } from './utils/layout-column-distribution';
|
|
@@ -7,8 +7,8 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
|
7
7
|
import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
8
8
|
import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
10
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
11
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
12
12
|
import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
|
|
13
13
|
import { getColumnDividerDecorations } from './column-resize-divider';
|
|
14
14
|
import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
|
|
@@ -4,8 +4,8 @@ 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
6
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
9
|
export const getMaybeLayoutSection = state => {
|
|
10
10
|
const {
|
|
11
11
|
schema: {
|
|
@@ -2,10 +2,10 @@ import React, { useCallback } from 'react';
|
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
|
|
5
|
-
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
6
|
-
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
7
5
|
import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
|
|
8
6
|
import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
|
|
7
|
+
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
8
|
+
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
9
9
|
import { selectIntoLayoutSection } from '../../layoutPlugin';
|
|
10
10
|
import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
|
|
11
11
|
const icons = {
|
|
@@ -13,8 +13,8 @@ import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
|
13
13
|
import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-left';
|
|
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
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
17
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
17
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
18
18
|
import { deleteActiveLayoutNode, distributeLayoutColumns, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
|
|
19
19
|
import { isDistributedUniformly } from '../pm-plugins/utils/layout-column-distribution';
|
|
20
20
|
import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { layoutColumn, layoutColumnWithLocalId } from '@atlaskit/adf-schema/nodes/layout-column';
|
|
3
2
|
import { layoutSection, layoutSectionWithLocalId, layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/layout-section';
|
|
3
|
+
import { layoutColumn, layoutColumnWithLocalId } from '@atlaskit/adf-schema/nodes/layout-column';
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
|
|
6
6
|
import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
@@ -9,8 +9,8 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
9
9
|
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
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
13
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
14
|
import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
|
|
15
15
|
import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
|
|
16
16
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
@@ -167,6 +167,34 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
167
167
|
return tr;
|
|
168
168
|
};
|
|
169
169
|
if (editorExperiment('advanced_layouts', true)) {
|
|
170
|
+
var createAdvancedColumnLayoutOption = function createAdvancedColumnLayoutOption(_ref4) {
|
|
171
|
+
var columnCount = _ref4.columnCount,
|
|
172
|
+
descriptionColumnCount = _ref4.descriptionColumnCount,
|
|
173
|
+
Icon = _ref4.icon,
|
|
174
|
+
id = _ref4.id,
|
|
175
|
+
keyword = _ref4.keyword,
|
|
176
|
+
title = _ref4.title;
|
|
177
|
+
return {
|
|
178
|
+
id: id,
|
|
179
|
+
title: title,
|
|
180
|
+
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
181
|
+
numberOfColumns: descriptionColumnCount
|
|
182
|
+
}),
|
|
183
|
+
keywords: ['layout', 'column', 'section', 'col', keyword],
|
|
184
|
+
priority: 1100,
|
|
185
|
+
icon: Icon,
|
|
186
|
+
action: function action(insert, state) {
|
|
187
|
+
var tr = insert(createMultiColumnLayoutSection(state, columnCount));
|
|
188
|
+
if (fg('platform_editor_column_count_analytics')) {
|
|
189
|
+
withInsertLayoutAnalytics(tr, columnCount);
|
|
190
|
+
} else {
|
|
191
|
+
withInsertLayoutAnalytics(tr);
|
|
192
|
+
}
|
|
193
|
+
selectIntoLayoutSection(tr);
|
|
194
|
+
return tr;
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
};
|
|
170
198
|
var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
|
|
171
199
|
id: 'onecolumnlayout',
|
|
172
200
|
title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
|
|
@@ -187,158 +215,43 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
187
215
|
return tr;
|
|
188
216
|
}
|
|
189
217
|
}] : [];
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
descriptionColumnCount = _ref4.descriptionColumnCount,
|
|
194
|
-
Icon = _ref4.icon,
|
|
195
|
-
id = _ref4.id,
|
|
196
|
-
keyword = _ref4.keyword,
|
|
197
|
-
title = _ref4.title;
|
|
198
|
-
return {
|
|
199
|
-
id: id,
|
|
200
|
-
title: title,
|
|
201
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
202
|
-
numberOfColumns: descriptionColumnCount
|
|
203
|
-
}),
|
|
204
|
-
keywords: ['layout', 'column', 'section', 'col', keyword],
|
|
205
|
-
priority: 1100,
|
|
206
|
-
icon: Icon,
|
|
207
|
-
action: function action(insert, state) {
|
|
208
|
-
var tr = insert(createMultiColumnLayoutSection(state, columnCount));
|
|
209
|
-
if (fg('platform_editor_column_count_analytics')) {
|
|
210
|
-
withInsertLayoutAnalytics(tr, columnCount);
|
|
211
|
-
} else {
|
|
212
|
-
withInsertLayoutAnalytics(tr);
|
|
213
|
-
}
|
|
214
|
-
selectIntoLayoutSection(tr);
|
|
215
|
-
return tr;
|
|
216
|
-
}
|
|
217
|
-
};
|
|
218
|
-
};
|
|
219
|
-
return [createAdvancedColumnLayoutOption({
|
|
220
|
-
columnCount: 2,
|
|
221
|
-
descriptionColumnCount: 'two',
|
|
222
|
-
icon: function icon() {
|
|
223
|
-
return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
|
|
224
|
-
},
|
|
225
|
-
id: 'twocolumnslayout',
|
|
226
|
-
keyword: 'two column',
|
|
227
|
-
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout)
|
|
228
|
-
})].concat(advancedSingleColumnOption, [createAdvancedColumnLayoutOption({
|
|
229
|
-
columnCount: 3,
|
|
230
|
-
descriptionColumnCount: 'three',
|
|
231
|
-
icon: function icon() {
|
|
232
|
-
return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
|
|
233
|
-
},
|
|
234
|
-
id: 'threecolumnslayout',
|
|
235
|
-
keyword: 'three column',
|
|
236
|
-
title: formatMessage(layoutMessages.threeColumnsAdvancedLayout)
|
|
237
|
-
}), createAdvancedColumnLayoutOption({
|
|
238
|
-
columnCount: 4,
|
|
239
|
-
descriptionColumnCount: 'four',
|
|
240
|
-
icon: function icon() {
|
|
241
|
-
return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
|
|
242
|
-
},
|
|
243
|
-
id: 'fourcolumnslayout',
|
|
244
|
-
keyword: 'four column',
|
|
245
|
-
title: formatMessage(layoutMessages.fourColumns)
|
|
246
|
-
}), createAdvancedColumnLayoutOption({
|
|
247
|
-
columnCount: 5,
|
|
248
|
-
descriptionColumnCount: 'five',
|
|
249
|
-
icon: function icon() {
|
|
250
|
-
return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
|
|
251
|
-
},
|
|
252
|
-
id: 'fivecolumnslayout',
|
|
253
|
-
keyword: 'five column',
|
|
254
|
-
title: formatMessage(layoutMessages.fiveColumns)
|
|
255
|
-
})]);
|
|
256
|
-
}
|
|
257
|
-
return [].concat(advancedSingleColumnOption, [{
|
|
258
|
-
id: 'twocolumnslayout',
|
|
259
|
-
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
|
|
260
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
261
|
-
numberOfColumns: 'two'
|
|
262
|
-
}),
|
|
263
|
-
keywords: ['layout', 'column', 'section', 'col', 'two column'],
|
|
264
|
-
priority: 1100,
|
|
218
|
+
return [createAdvancedColumnLayoutOption({
|
|
219
|
+
columnCount: 2,
|
|
220
|
+
descriptionColumnCount: 'two',
|
|
265
221
|
icon: function icon() {
|
|
266
222
|
return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
|
|
267
223
|
},
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
275
|
-
selectIntoLayoutSection(tr);
|
|
276
|
-
return tr;
|
|
277
|
-
}
|
|
278
|
-
}, {
|
|
279
|
-
id: 'threecolumnslayout',
|
|
280
|
-
title: formatMessage(layoutMessages.threeColumnsAdvancedLayout),
|
|
281
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
282
|
-
numberOfColumns: 'three'
|
|
283
|
-
}),
|
|
284
|
-
keywords: ['layout', 'column', 'section', 'col', 'three column'],
|
|
285
|
-
priority: 1100,
|
|
224
|
+
id: 'twocolumnslayout',
|
|
225
|
+
keyword: 'two column',
|
|
226
|
+
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout)
|
|
227
|
+
})].concat(advancedSingleColumnOption, [createAdvancedColumnLayoutOption({
|
|
228
|
+
columnCount: 3,
|
|
229
|
+
descriptionColumnCount: 'three',
|
|
286
230
|
icon: function icon() {
|
|
287
231
|
return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
|
|
288
232
|
},
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
}
|
|
296
|
-
selectIntoLayoutSection(tr);
|
|
297
|
-
return tr;
|
|
298
|
-
}
|
|
299
|
-
}, {
|
|
300
|
-
id: 'fourcolumnslayout',
|
|
301
|
-
title: formatMessage(layoutMessages.fourColumns),
|
|
302
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
303
|
-
numberOfColumns: 'four'
|
|
304
|
-
}),
|
|
305
|
-
keywords: ['layout', 'column', 'section', 'col', 'four column'],
|
|
306
|
-
priority: 1100,
|
|
233
|
+
id: 'threecolumnslayout',
|
|
234
|
+
keyword: 'three column',
|
|
235
|
+
title: formatMessage(layoutMessages.threeColumnsAdvancedLayout)
|
|
236
|
+
}), createAdvancedColumnLayoutOption({
|
|
237
|
+
columnCount: 4,
|
|
238
|
+
descriptionColumnCount: 'four',
|
|
307
239
|
icon: function icon() {
|
|
308
240
|
return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
|
|
309
241
|
},
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
}
|
|
317
|
-
selectIntoLayoutSection(tr);
|
|
318
|
-
return tr;
|
|
319
|
-
}
|
|
320
|
-
}, {
|
|
321
|
-
id: 'fivecolumnslayout',
|
|
322
|
-
title: formatMessage(layoutMessages.fiveColumns),
|
|
323
|
-
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
324
|
-
numberOfColumns: 'five'
|
|
325
|
-
}),
|
|
326
|
-
keywords: ['layout', 'column', 'section', 'col', 'five column'],
|
|
327
|
-
priority: 1100,
|
|
242
|
+
id: 'fourcolumnslayout',
|
|
243
|
+
keyword: 'four column',
|
|
244
|
+
title: formatMessage(layoutMessages.fourColumns)
|
|
245
|
+
}), createAdvancedColumnLayoutOption({
|
|
246
|
+
columnCount: 5,
|
|
247
|
+
descriptionColumnCount: 'five',
|
|
328
248
|
icon: function icon() {
|
|
329
249
|
return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
|
|
330
250
|
},
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
} else {
|
|
336
|
-
withInsertLayoutAnalytics(tr);
|
|
337
|
-
}
|
|
338
|
-
selectIntoLayoutSection(tr);
|
|
339
|
-
return tr;
|
|
340
|
-
}
|
|
341
|
-
}]);
|
|
251
|
+
id: 'fivecolumnslayout',
|
|
252
|
+
keyword: 'five column',
|
|
253
|
+
title: formatMessage(layoutMessages.fiveColumns)
|
|
254
|
+
})]);
|
|
342
255
|
} else {
|
|
343
256
|
return [{
|
|
344
257
|
id: 'layout',
|
|
@@ -16,8 +16,8 @@ import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common
|
|
|
16
16
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
17
17
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
18
18
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
19
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
20
19
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
20
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
21
21
|
import { selectIntoLayout } from '../pm-plugins/utils';
|
|
22
22
|
import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
|
|
23
23
|
import { isEmptyLayout } from './utils';
|
|
@@ -9,8 +9,8 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
|
|
|
9
9
|
import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
|
|
10
10
|
import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
12
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
13
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
14
|
import { DEFAULT_LAYOUT_COLUMN_VALIGN, EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
|
|
15
15
|
import { pluginKey } from './plugin-key';
|
|
16
16
|
import { calculateDistribution, isDistributedUniformly, redistributeAfterDeletion, redistributeProportionally } from './utils/layout-column-distribution';
|
|
@@ -11,8 +11,8 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
|
11
11
|
import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
12
12
|
import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
13
13
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
14
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
15
14
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
15
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
16
16
|
import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
|
|
17
17
|
import { getColumnDividerDecorations } from './column-resize-divider';
|
|
18
18
|
import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
|
|
@@ -4,8 +4,8 @@ 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
6
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
9
|
export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
|
|
10
10
|
var _state$schema$nodes = state.schema.nodes,
|
|
11
11
|
layoutSection = _state$schema$nodes.layoutSection,
|
|
@@ -2,10 +2,10 @@ import React, { useCallback } from 'react';
|
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
|
|
5
|
-
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
6
|
-
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
7
5
|
import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
|
|
8
6
|
import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
|
|
7
|
+
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
8
|
+
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
9
9
|
import { selectIntoLayoutSection } from '../../layoutPlugin';
|
|
10
10
|
import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
|
|
11
11
|
var icons = {
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -17,8 +17,8 @@ import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
|
17
17
|
import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-left';
|
|
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
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
21
20
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
21
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
22
22
|
import { deleteActiveLayoutNode, distributeLayoutColumns, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
|
|
23
23
|
import { isDistributedUniformly } from '../pm-plugins/utils/layout-column-distribution';
|
|
24
24
|
import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "20.0.
|
|
3
|
+
"version": "20.0.2",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"@atlaskit/editor-plugin-width": "^20.0.0",
|
|
38
38
|
"@atlaskit/editor-prosemirror": "^9.0.0",
|
|
39
39
|
"@atlaskit/editor-shared-styles": "^4.3.0",
|
|
40
|
-
"@atlaskit/editor-toolbar": "^2.
|
|
40
|
+
"@atlaskit/editor-toolbar": "^2.7.0",
|
|
41
41
|
"@atlaskit/editor-ui-control-model": "^2.9.0",
|
|
42
42
|
"@atlaskit/icon": "^37.7.0",
|
|
43
43
|
"@atlaskit/icon-lab": "^7.9.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": "^201.0.0",
|
|
47
47
|
"@atlaskit/tokens": "^18.2.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": "^123.
|
|
53
|
+
"@atlaskit/editor-common": "^123.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
|
},
|