@atlaskit/editor-plugin-layout 2.1.4 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/layoutPlugin.js +29 -16
- package/dist/cjs/nodeviews/index.js +5 -12
- package/dist/cjs/pm-plugins/actions.js +1 -1
- package/dist/cjs/ui/global-styles.js +1 -20
- package/dist/cjs/ui/toolbar.js +15 -4
- package/dist/es2019/layoutPlugin.js +27 -16
- package/dist/es2019/nodeviews/index.js +5 -12
- package/dist/es2019/pm-plugins/actions.js +1 -1
- package/dist/es2019/ui/global-styles.js +1 -20
- package/dist/es2019/ui/toolbar.js +15 -4
- package/dist/esm/layoutPlugin.js +30 -17
- package/dist/esm/nodeviews/index.js +5 -12
- package/dist/esm/pm-plugins/actions.js +1 -1
- package/dist/esm/ui/global-styles.js +1 -20
- package/dist/esm/ui/toolbar.js +15 -4
- package/dist/types/types/index.d.ts +5 -0
- package/dist/types/ui/toolbar.d.ts +1 -1
- package/dist/types-ts4.5/types/index.d.ts +5 -0
- package/dist/types-ts4.5/ui/toolbar.d.ts +1 -1
- package/package.json +5 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 2.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#115815](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/115815)
|
|
8
|
+
[`ad7c517ed3b47`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad7c517ed3b47) -
|
|
9
|
+
ED-26661 add option enables single column layout
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 2.1.5
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 2.1.4
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -11,7 +11,6 @@ var _schema = require("@atlaskit/adf-schema/schema");
|
|
|
11
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
12
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
13
|
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
16
15
|
var _actions = require("./pm-plugins/actions");
|
|
17
16
|
var _main = _interopRequireDefault(require("./pm-plugins/main"));
|
|
@@ -24,6 +23,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
24
23
|
var _ref$config = _ref.config,
|
|
25
24
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
26
25
|
api = _ref.api;
|
|
26
|
+
var allowAdvancedSingleColumnLayout = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('single_column_layouts', true);
|
|
27
27
|
return {
|
|
28
28
|
name: 'layout',
|
|
29
29
|
nodes: function nodes() {
|
|
@@ -65,27 +65,40 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
65
65
|
addSidebarLayouts = _ref3.addSidebarLayouts,
|
|
66
66
|
allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
|
|
67
67
|
if (pos !== null) {
|
|
68
|
-
return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
|
|
68
|
+
return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
|
|
69
69
|
}
|
|
70
70
|
return undefined;
|
|
71
71
|
},
|
|
72
72
|
quickInsert: function quickInsert(_ref4) {
|
|
73
73
|
var formatMessage = _ref4.formatMessage;
|
|
74
74
|
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
})(tr);
|
|
86
|
-
}
|
|
75
|
+
var _api$analytics2;
|
|
76
|
+
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
|
|
77
|
+
action: _analytics.ACTION.INSERTED,
|
|
78
|
+
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
79
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
|
|
80
|
+
attributes: {
|
|
81
|
+
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
|
|
82
|
+
},
|
|
83
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
84
|
+
})(tr);
|
|
87
85
|
return tr;
|
|
88
86
|
};
|
|
87
|
+
var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
|
|
88
|
+
id: 'onecolumnlayout',
|
|
89
|
+
title: formatMessage(_messages.layoutMessages.singleColumnAdvancedLayout),
|
|
90
|
+
description: formatMessage(_messages.toolbarInsertBlockMessages.singleColumnsDescriptionAdvancedLayout),
|
|
91
|
+
keywords: ['layout', 'column', 'section', 'single column'],
|
|
92
|
+
priority: 1100,
|
|
93
|
+
icon: function icon() {
|
|
94
|
+
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconOneColumnLayout, null);
|
|
95
|
+
},
|
|
96
|
+
action: function action(insert, state, _source) {
|
|
97
|
+
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 1));
|
|
98
|
+
withInsertLayoutAnalytics(tr);
|
|
99
|
+
return tr;
|
|
100
|
+
}
|
|
101
|
+
}] : [];
|
|
89
102
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
90
103
|
if ((0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1')) {
|
|
91
104
|
return [{
|
|
@@ -106,7 +119,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
106
119
|
}
|
|
107
120
|
}];
|
|
108
121
|
} else {
|
|
109
|
-
return [{
|
|
122
|
+
return [].concat(advancedSingleColumnOption, [{
|
|
110
123
|
id: 'twocolumnslayout',
|
|
111
124
|
title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout),
|
|
112
125
|
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
@@ -170,7 +183,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
170
183
|
withInsertLayoutAnalytics(tr);
|
|
171
184
|
return tr;
|
|
172
185
|
}
|
|
173
|
-
}];
|
|
186
|
+
}]);
|
|
174
187
|
}
|
|
175
188
|
} else {
|
|
176
189
|
return [{
|
|
@@ -16,7 +16,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
16
16
|
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
|
|
17
17
|
var _resizer = require("@atlaskit/editor-common/resizer");
|
|
18
18
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
19
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
19
|
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); }
|
|
21
20
|
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; }
|
|
22
21
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
@@ -86,9 +85,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
86
85
|
var _this;
|
|
87
86
|
(0, _classCallCheck2.default)(this, LayoutSectionView);
|
|
88
87
|
_this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
|
|
89
|
-
|
|
90
|
-
_this.isEmpty = isEmptyLayout(_this.node);
|
|
91
|
-
}
|
|
88
|
+
_this.isEmpty = isEmptyLayout(_this.node);
|
|
92
89
|
_this.options = props.options;
|
|
93
90
|
return _this;
|
|
94
91
|
}
|
|
@@ -104,9 +101,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
104
101
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
105
102
|
this.layoutDOM = container.querySelector('[data-layout-section]');
|
|
106
103
|
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
|
|
107
|
-
|
|
108
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
109
|
-
}
|
|
104
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
110
105
|
return {
|
|
111
106
|
dom: container,
|
|
112
107
|
contentDOM: contentDOM
|
|
@@ -122,11 +117,9 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
122
117
|
}, {
|
|
123
118
|
key: "render",
|
|
124
119
|
value: function render(props, forwardRef) {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
129
|
-
}
|
|
120
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
121
|
+
if (this.layoutDOM) {
|
|
122
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
130
123
|
}
|
|
131
124
|
return /*#__PURE__*/_react.default.createElement(LayoutBreakoutResizer, {
|
|
132
125
|
pluginInjectionApi: props.pluginInjectionApi,
|
|
@@ -398,7 +398,7 @@ var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
|
|
|
398
398
|
|
|
399
399
|
// This prevents the creation of a single column layout
|
|
400
400
|
// once we support single column layout, we can return 'single'
|
|
401
|
-
return
|
|
401
|
+
return 'two_equal';
|
|
402
402
|
}
|
|
403
403
|
switch (layoutColumnCount) {
|
|
404
404
|
case 2:
|
|
@@ -8,7 +8,6 @@ var _react = require("react");
|
|
|
8
8
|
var _react2 = require("@emotion/react");
|
|
9
9
|
var _reactIntlNext = require("react-intl-next");
|
|
10
10
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
12
|
/**
|
|
14
13
|
* @jsxRuntime classic
|
|
@@ -34,28 +33,10 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
|
34
33
|
}
|
|
35
34
|
});
|
|
36
35
|
}
|
|
37
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
38
|
-
return (0, _react2.css)({
|
|
39
|
-
// when paragraph is the only child, and it only has a trailingBreak.
|
|
40
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
41
|
-
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
42
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
43
|
-
'&::before': {
|
|
44
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
45
|
-
content: "\"".concat(message, "\""),
|
|
46
|
-
position: 'absolute',
|
|
47
|
-
color: "var(--ds-text-disabled, #A5ADBA)",
|
|
48
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
49
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
50
|
-
pointerEvents: 'none'
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
36
|
return (0, _react2.css)({
|
|
56
37
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
57
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
58
|
-
'.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
39
|
+
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
59
40
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
60
41
|
'&::before': {
|
|
61
42
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -141,7 +141,8 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
|
141
141
|
nodeType = _ref.nodeType,
|
|
142
142
|
separator = _ref.separator,
|
|
143
143
|
deleteButton = _ref.deleteButton,
|
|
144
|
-
currentLayout = _ref.currentLayout
|
|
144
|
+
currentLayout = _ref.currentLayout,
|
|
145
|
+
allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
|
|
145
146
|
var numberOfColumns = node.content.childCount || 2;
|
|
146
147
|
var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
|
|
147
148
|
var columnOptions = [{
|
|
@@ -177,13 +178,22 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
|
177
178
|
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal'),
|
|
178
179
|
selected: numberOfColumns === 5
|
|
179
180
|
}];
|
|
181
|
+
var singleColumnOption = allowAdvancedSingleColumnLayout ? {
|
|
182
|
+
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
183
|
+
count: 1
|
|
184
|
+
}),
|
|
185
|
+
//'1-columns',
|
|
186
|
+
icon: iconPlaceholder,
|
|
187
|
+
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('single'),
|
|
188
|
+
selected: numberOfColumns === 1
|
|
189
|
+
} : [];
|
|
180
190
|
return [{
|
|
181
191
|
type: 'dropdown',
|
|
182
192
|
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
|
|
183
193
|
count: numberOfColumns
|
|
184
194
|
}),
|
|
185
195
|
//`${numberOfColumns}-columns`,
|
|
186
|
-
options: columnOptions,
|
|
196
|
+
options: [singleColumnOption, columnOptions].flat(),
|
|
187
197
|
showSelected: true,
|
|
188
198
|
testId: 'column-options-button'
|
|
189
199
|
}].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
|
|
@@ -194,7 +204,7 @@ var fullHeightSeparator = {
|
|
|
194
204
|
type: 'separator',
|
|
195
205
|
fullHeight: true
|
|
196
206
|
};
|
|
197
|
-
var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
|
|
207
|
+
var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) {
|
|
198
208
|
var _api$decorations$acti, _api$decorations, _api$analytics;
|
|
199
209
|
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 : {},
|
|
200
210
|
hoverDecoration = _ref2.hoverDecoration;
|
|
@@ -270,7 +280,8 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
|
|
|
270
280
|
node: node,
|
|
271
281
|
separator: separator,
|
|
272
282
|
deleteButton: deleteButton,
|
|
273
|
-
currentLayout: currentLayout
|
|
283
|
+
currentLayout: currentLayout,
|
|
284
|
+
allowAdvancedSingleColumnLayout: allowAdvancedSingleColumnLayout
|
|
274
285
|
}) : [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
|
|
275
286
|
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
276
287
|
})), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
|
|
@@ -3,8 +3,7 @@ import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
|
|
|
3
3
|
import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
|
|
8
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
8
|
import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
|
|
10
9
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
@@ -17,6 +16,7 @@ export const layoutPlugin = ({
|
|
|
17
16
|
api
|
|
18
17
|
}) => {
|
|
19
18
|
var _api$analytics;
|
|
19
|
+
const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true);
|
|
20
20
|
return {
|
|
21
21
|
name: 'layout',
|
|
22
22
|
nodes() {
|
|
@@ -56,7 +56,7 @@ export const layoutPlugin = ({
|
|
|
56
56
|
allowSingleColumnLayout
|
|
57
57
|
} = pluginKey.getState(state);
|
|
58
58
|
if (pos !== null) {
|
|
59
|
-
return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
|
|
59
|
+
return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
|
|
60
60
|
}
|
|
61
61
|
return undefined;
|
|
62
62
|
},
|
|
@@ -64,20 +64,31 @@ export const layoutPlugin = ({
|
|
|
64
64
|
formatMessage
|
|
65
65
|
}) => {
|
|
66
66
|
const withInsertLayoutAnalytics = tr => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
})(tr);
|
|
78
|
-
}
|
|
67
|
+
var _api$analytics2, _api$analytics2$actio;
|
|
68
|
+
api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent({
|
|
69
|
+
action: ACTION.INSERTED,
|
|
70
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
71
|
+
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
72
|
+
attributes: {
|
|
73
|
+
inputMethod: INPUT_METHOD.QUICK_INSERT
|
|
74
|
+
},
|
|
75
|
+
eventType: EVENT_TYPE.TRACK
|
|
76
|
+
})(tr);
|
|
79
77
|
return tr;
|
|
80
78
|
};
|
|
79
|
+
const advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
|
|
80
|
+
id: 'onecolumnlayout',
|
|
81
|
+
title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
|
|
82
|
+
description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
|
|
83
|
+
keywords: ['layout', 'column', 'section', 'single column'],
|
|
84
|
+
priority: 1100,
|
|
85
|
+
icon: () => /*#__PURE__*/React.createElement(IconOneColumnLayout, null),
|
|
86
|
+
action(insert, state, _source) {
|
|
87
|
+
const tr = insert(createMultiColumnLayoutSection(state, 1));
|
|
88
|
+
withInsertLayoutAnalytics(tr);
|
|
89
|
+
return tr;
|
|
90
|
+
}
|
|
91
|
+
}] : [];
|
|
81
92
|
if (editorExperiment('advanced_layouts', true)) {
|
|
82
93
|
if (editorExperiment('platform_editor_insertion', 'variant1')) {
|
|
83
94
|
return [{
|
|
@@ -96,7 +107,7 @@ export const layoutPlugin = ({
|
|
|
96
107
|
}
|
|
97
108
|
}];
|
|
98
109
|
} else {
|
|
99
|
-
return [{
|
|
110
|
+
return [...advancedSingleColumnOption, {
|
|
100
111
|
id: 'twocolumnslayout',
|
|
101
112
|
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
|
|
102
113
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
@@ -3,7 +3,6 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
3
3
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
4
4
|
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
5
5
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
const isEmptyParagraph = node => {
|
|
8
7
|
return !!node && node.type.name === 'paragraph' && !node.childCount;
|
|
9
8
|
};
|
|
@@ -67,9 +66,7 @@ const toDOM = () => ['div', {
|
|
|
67
66
|
export class LayoutSectionView extends ReactNodeView {
|
|
68
67
|
constructor(props) {
|
|
69
68
|
super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
|
|
70
|
-
|
|
71
|
-
this.isEmpty = isEmptyLayout(this.node);
|
|
72
|
-
}
|
|
69
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
73
70
|
this.options = props.options;
|
|
74
71
|
}
|
|
75
72
|
getContentDOM() {
|
|
@@ -82,9 +79,7 @@ export class LayoutSectionView extends ReactNodeView {
|
|
|
82
79
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
83
80
|
this.layoutDOM = container.querySelector('[data-layout-section]');
|
|
84
81
|
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
|
|
85
|
-
|
|
86
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
87
|
-
}
|
|
82
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
88
83
|
return {
|
|
89
84
|
dom: container,
|
|
90
85
|
contentDOM
|
|
@@ -96,11 +91,9 @@ export class LayoutSectionView extends ReactNodeView {
|
|
|
96
91
|
}
|
|
97
92
|
}
|
|
98
93
|
render(props, forwardRef) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
103
|
-
}
|
|
94
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
95
|
+
if (this.layoutDOM) {
|
|
96
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
104
97
|
}
|
|
105
98
|
return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
|
|
106
99
|
pluginInjectionApi: props.pluginInjectionApi,
|
|
@@ -373,7 +373,7 @@ const getDefaultPresetLayout = layoutNode => {
|
|
|
373
373
|
|
|
374
374
|
// This prevents the creation of a single column layout
|
|
375
375
|
// once we support single column layout, we can return 'single'
|
|
376
|
-
return
|
|
376
|
+
return 'two_equal';
|
|
377
377
|
}
|
|
378
378
|
switch (layoutColumnCount) {
|
|
379
379
|
case 2:
|
|
@@ -8,7 +8,6 @@ import { useMemo } from 'react';
|
|
|
8
8
|
import { css, Global, jsx } from '@emotion/react';
|
|
9
9
|
import { useIntl } from 'react-intl-next';
|
|
10
10
|
import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
12
|
const getPlaceholderStyle = message => {
|
|
14
13
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -27,28 +26,10 @@ const getPlaceholderStyle = message => {
|
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
31
|
-
return css({
|
|
32
|
-
// when paragraph is the only child, and it only has a trailingBreak.
|
|
33
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
|
-
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
35
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
36
|
-
'&::before': {
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
-
content: `"${message}"`,
|
|
39
|
-
position: 'absolute',
|
|
40
|
-
color: "var(--ds-text-disabled, #A5ADBA)",
|
|
41
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
42
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
43
|
-
pointerEvents: 'none'
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
29
|
return css({
|
|
49
30
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
50
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
51
|
-
'.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
32
|
+
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
52
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
53
34
|
'&::before': {
|
|
54
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
@@ -128,7 +128,8 @@ const getAdvancedLayoutItems = ({
|
|
|
128
128
|
nodeType,
|
|
129
129
|
separator,
|
|
130
130
|
deleteButton,
|
|
131
|
-
currentLayout
|
|
131
|
+
currentLayout,
|
|
132
|
+
allowAdvancedSingleColumnLayout
|
|
132
133
|
}) => {
|
|
133
134
|
const numberOfColumns = node.content.childCount || 2;
|
|
134
135
|
const distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
|
|
@@ -165,13 +166,22 @@ const getAdvancedLayoutItems = ({
|
|
|
165
166
|
onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
|
|
166
167
|
selected: numberOfColumns === 5
|
|
167
168
|
}];
|
|
169
|
+
const singleColumnOption = allowAdvancedSingleColumnLayout ? {
|
|
170
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
171
|
+
count: 1
|
|
172
|
+
}),
|
|
173
|
+
//'1-columns',
|
|
174
|
+
icon: iconPlaceholder,
|
|
175
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('single'),
|
|
176
|
+
selected: numberOfColumns === 1
|
|
177
|
+
} : [];
|
|
168
178
|
return [{
|
|
169
179
|
type: 'dropdown',
|
|
170
180
|
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
171
181
|
count: numberOfColumns
|
|
172
182
|
}),
|
|
173
183
|
//`${numberOfColumns}-columns`,
|
|
174
|
-
options: columnOptions,
|
|
184
|
+
options: [singleColumnOption, columnOptions].flat(),
|
|
175
185
|
showSelected: true,
|
|
176
186
|
testId: 'column-options-button'
|
|
177
187
|
}, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])];
|
|
@@ -180,7 +190,7 @@ const fullHeightSeparator = {
|
|
|
180
190
|
type: 'separator',
|
|
181
191
|
fullHeight: true
|
|
182
192
|
};
|
|
183
|
-
export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
|
|
193
|
+
export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) => {
|
|
184
194
|
var _api$decorations$acti, _api$decorations, _api$analytics;
|
|
185
195
|
const {
|
|
186
196
|
hoverDecoration
|
|
@@ -255,7 +265,8 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
|
|
|
255
265
|
node,
|
|
256
266
|
separator,
|
|
257
267
|
deleteButton,
|
|
258
|
-
currentLayout
|
|
268
|
+
currentLayout,
|
|
269
|
+
allowAdvancedSingleColumnLayout
|
|
259
270
|
}) : [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])]), ...(editorExperiment('platform_editor_controls', 'variant1') ? [fullHeightSeparator, overflowMenu] : [separator, copyButton, separator, deleteButton])],
|
|
260
271
|
scrollable: true
|
|
261
272
|
};
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -3,8 +3,7 @@ import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
|
|
|
3
3
|
import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
|
|
8
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
8
|
import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
|
|
10
9
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
@@ -17,6 +16,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
17
16
|
var _ref$config = _ref.config,
|
|
18
17
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
19
18
|
api = _ref.api;
|
|
19
|
+
var allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true);
|
|
20
20
|
return {
|
|
21
21
|
name: 'layout',
|
|
22
22
|
nodes: function nodes() {
|
|
@@ -58,27 +58,40 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
58
58
|
addSidebarLayouts = _ref3.addSidebarLayouts,
|
|
59
59
|
allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
|
|
60
60
|
if (pos !== null) {
|
|
61
|
-
return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
|
|
61
|
+
return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
|
|
62
62
|
}
|
|
63
63
|
return undefined;
|
|
64
64
|
},
|
|
65
65
|
quickInsert: function quickInsert(_ref4) {
|
|
66
66
|
var formatMessage = _ref4.formatMessage;
|
|
67
67
|
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
})(tr);
|
|
79
|
-
}
|
|
68
|
+
var _api$analytics2;
|
|
69
|
+
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
|
|
70
|
+
action: ACTION.INSERTED,
|
|
71
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
72
|
+
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
73
|
+
attributes: {
|
|
74
|
+
inputMethod: INPUT_METHOD.QUICK_INSERT
|
|
75
|
+
},
|
|
76
|
+
eventType: EVENT_TYPE.TRACK
|
|
77
|
+
})(tr);
|
|
80
78
|
return tr;
|
|
81
79
|
};
|
|
80
|
+
var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
|
|
81
|
+
id: 'onecolumnlayout',
|
|
82
|
+
title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
|
|
83
|
+
description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
|
|
84
|
+
keywords: ['layout', 'column', 'section', 'single column'],
|
|
85
|
+
priority: 1100,
|
|
86
|
+
icon: function icon() {
|
|
87
|
+
return /*#__PURE__*/React.createElement(IconOneColumnLayout, null);
|
|
88
|
+
},
|
|
89
|
+
action: function action(insert, state, _source) {
|
|
90
|
+
var tr = insert(createMultiColumnLayoutSection(state, 1));
|
|
91
|
+
withInsertLayoutAnalytics(tr);
|
|
92
|
+
return tr;
|
|
93
|
+
}
|
|
94
|
+
}] : [];
|
|
82
95
|
if (editorExperiment('advanced_layouts', true)) {
|
|
83
96
|
if (editorExperiment('platform_editor_insertion', 'variant1')) {
|
|
84
97
|
return [{
|
|
@@ -99,7 +112,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
99
112
|
}
|
|
100
113
|
}];
|
|
101
114
|
} else {
|
|
102
|
-
return [{
|
|
115
|
+
return [].concat(advancedSingleColumnOption, [{
|
|
103
116
|
id: 'twocolumnslayout',
|
|
104
117
|
title: formatMessage(layoutMessages.twoColumnsAdvancedLayout),
|
|
105
118
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
@@ -163,7 +176,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
163
176
|
withInsertLayoutAnalytics(tr);
|
|
164
177
|
return tr;
|
|
165
178
|
}
|
|
166
|
-
}];
|
|
179
|
+
}]);
|
|
167
180
|
}
|
|
168
181
|
} else {
|
|
169
182
|
return [{
|
|
@@ -10,7 +10,6 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
10
10
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
11
11
|
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
12
12
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
13
|
var isEmptyParagraph = function isEmptyParagraph(node) {
|
|
15
14
|
return !!node && node.type.name === 'paragraph' && !node.childCount;
|
|
16
15
|
};
|
|
@@ -76,9 +75,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
76
75
|
var _this;
|
|
77
76
|
_classCallCheck(this, LayoutSectionView);
|
|
78
77
|
_this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
|
|
79
|
-
|
|
80
|
-
_this.isEmpty = isEmptyLayout(_this.node);
|
|
81
|
-
}
|
|
78
|
+
_this.isEmpty = isEmptyLayout(_this.node);
|
|
82
79
|
_this.options = props.options;
|
|
83
80
|
return _this;
|
|
84
81
|
}
|
|
@@ -94,9 +91,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
94
91
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
95
92
|
this.layoutDOM = container.querySelector('[data-layout-section]');
|
|
96
93
|
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
|
|
97
|
-
|
|
98
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
99
|
-
}
|
|
94
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
100
95
|
return {
|
|
101
96
|
dom: container,
|
|
102
97
|
contentDOM: contentDOM
|
|
@@ -112,11 +107,9 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
112
107
|
}, {
|
|
113
108
|
key: "render",
|
|
114
109
|
value: function render(props, forwardRef) {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
119
|
-
}
|
|
110
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
111
|
+
if (this.layoutDOM) {
|
|
112
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
120
113
|
}
|
|
121
114
|
return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
|
|
122
115
|
pluginInjectionApi: props.pluginInjectionApi,
|
|
@@ -389,7 +389,7 @@ var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
|
|
|
389
389
|
|
|
390
390
|
// This prevents the creation of a single column layout
|
|
391
391
|
// once we support single column layout, we can return 'single'
|
|
392
|
-
return
|
|
392
|
+
return 'two_equal';
|
|
393
393
|
}
|
|
394
394
|
switch (layoutColumnCount) {
|
|
395
395
|
case 2:
|
|
@@ -8,7 +8,6 @@ import { useMemo } from 'react';
|
|
|
8
8
|
import { css, Global, jsx } from '@emotion/react';
|
|
9
9
|
import { useIntl } from 'react-intl-next';
|
|
10
10
|
import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
12
|
var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
14
13
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -27,28 +26,10 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
31
|
-
return css({
|
|
32
|
-
// when paragraph is the only child, and it only has a trailingBreak.
|
|
33
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
|
-
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
35
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
36
|
-
'&::before': {
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
-
content: "\"".concat(message, "\""),
|
|
39
|
-
position: 'absolute',
|
|
40
|
-
color: "var(--ds-text-disabled, #A5ADBA)",
|
|
41
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
42
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
43
|
-
pointerEvents: 'none'
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
29
|
return css({
|
|
49
30
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
50
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
51
|
-
'.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
32
|
+
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
52
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
53
34
|
'&::before': {
|
|
54
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -131,7 +131,8 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
|
131
131
|
nodeType = _ref.nodeType,
|
|
132
132
|
separator = _ref.separator,
|
|
133
133
|
deleteButton = _ref.deleteButton,
|
|
134
|
-
currentLayout = _ref.currentLayout
|
|
134
|
+
currentLayout = _ref.currentLayout,
|
|
135
|
+
allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
|
|
135
136
|
var numberOfColumns = node.content.childCount || 2;
|
|
136
137
|
var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
|
|
137
138
|
var columnOptions = [{
|
|
@@ -167,13 +168,22 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
|
167
168
|
onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
|
|
168
169
|
selected: numberOfColumns === 5
|
|
169
170
|
}];
|
|
171
|
+
var singleColumnOption = allowAdvancedSingleColumnLayout ? {
|
|
172
|
+
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
173
|
+
count: 1
|
|
174
|
+
}),
|
|
175
|
+
//'1-columns',
|
|
176
|
+
icon: iconPlaceholder,
|
|
177
|
+
onClick: setPresetLayout(editorAnalyticsAPI)('single'),
|
|
178
|
+
selected: numberOfColumns === 1
|
|
179
|
+
} : [];
|
|
170
180
|
return [{
|
|
171
181
|
type: 'dropdown',
|
|
172
182
|
title: intl.formatMessage(layoutMessages.columnOption, {
|
|
173
183
|
count: numberOfColumns
|
|
174
184
|
}),
|
|
175
185
|
//`${numberOfColumns}-columns`,
|
|
176
|
-
options: columnOptions,
|
|
186
|
+
options: [singleColumnOption, columnOptions].flat(),
|
|
177
187
|
showSelected: true,
|
|
178
188
|
testId: 'column-options-button'
|
|
179
189
|
}].concat(_toConsumableArray(distributionOptions.length > 0 ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
|
|
@@ -184,7 +194,7 @@ var fullHeightSeparator = {
|
|
|
184
194
|
type: 'separator',
|
|
185
195
|
fullHeight: true
|
|
186
196
|
};
|
|
187
|
-
export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
|
|
197
|
+
export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) {
|
|
188
198
|
var _api$decorations$acti, _api$decorations, _api$analytics;
|
|
189
199
|
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 : {},
|
|
190
200
|
hoverDecoration = _ref2.hoverDecoration;
|
|
@@ -260,7 +270,8 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
|
|
|
260
270
|
node: node,
|
|
261
271
|
separator: separator,
|
|
262
272
|
deleteButton: deleteButton,
|
|
263
|
-
currentLayout: currentLayout
|
|
273
|
+
currentLayout: currentLayout,
|
|
274
|
+
allowAdvancedSingleColumnLayout: allowAdvancedSingleColumnLayout
|
|
264
275
|
}) : [].concat(_toConsumableArray(layoutTypes.map(function (i) {
|
|
265
276
|
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
|
|
266
277
|
})), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
|
|
@@ -3,6 +3,11 @@ import type { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
|
3
3
|
export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
|
|
4
4
|
allowBreakout?: boolean;
|
|
5
5
|
UNSAFE_addSidebarLayouts?: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* @private
|
|
8
|
+
* @deprecated
|
|
9
|
+
* @see https://product-fabric.atlassian.net/browse/ED-26662
|
|
10
|
+
*/
|
|
6
11
|
UNSAFE_allowSingleColumnLayout?: boolean;
|
|
7
12
|
editorAppearance?: EditorAppearance;
|
|
8
13
|
}
|
|
@@ -3,4 +3,4 @@ import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/edito
|
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import type { LayoutPlugin } from '../index';
|
|
5
5
|
export declare const layoutToolbarTitle = "Layout floating controls";
|
|
6
|
-
export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;
|
|
6
|
+
export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, allowAdvancedSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;
|
|
@@ -3,6 +3,11 @@ import type { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
|
3
3
|
export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
|
|
4
4
|
allowBreakout?: boolean;
|
|
5
5
|
UNSAFE_addSidebarLayouts?: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* @private
|
|
8
|
+
* @deprecated
|
|
9
|
+
* @see https://product-fabric.atlassian.net/browse/ED-26662
|
|
10
|
+
*/
|
|
6
11
|
UNSAFE_allowSingleColumnLayout?: boolean;
|
|
7
12
|
editorAppearance?: EditorAppearance;
|
|
8
13
|
}
|
|
@@ -3,4 +3,4 @@ import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/edito
|
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import type { LayoutPlugin } from '../index';
|
|
5
5
|
export declare const layoutToolbarTitle = "Layout floating controls";
|
|
6
|
-
export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;
|
|
6
|
+
export declare const buildToolbar: (state: EditorState, intl: IntlShape, pos: number, _allowBreakout: boolean, addSidebarLayouts: boolean, allowSingleColumnLayout: boolean, allowAdvancedSingleColumnLayout: boolean, api: ExtractInjectionAPI<LayoutPlugin> | undefined) => FloatingToolbarConfig | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^102.
|
|
38
|
-
"@atlaskit/editor-plugin-analytics": "^2.
|
|
37
|
+
"@atlaskit/editor-common": "^102.9.0",
|
|
38
|
+
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-decorations": "^2.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
41
41
|
"@atlaskit/editor-plugin-selection": "^2.1.0",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
44
44
|
"@atlaskit/icon": "^25.0.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
46
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
47
|
-
"@atlaskit/tokens": "^4.
|
|
46
|
+
"@atlaskit/tmp-editor-statsig": "^4.1.0",
|
|
47
|
+
"@atlaskit/tokens": "^4.5.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@emotion/react": "^11.7.1"
|
|
50
50
|
},
|
|
@@ -100,9 +100,6 @@
|
|
|
100
100
|
"platform-visual-refresh-icons": {
|
|
101
101
|
"type": "boolean"
|
|
102
102
|
},
|
|
103
|
-
"platform_editor_advanced_layouts_post_fix_patch_1": {
|
|
104
|
-
"type": "boolean"
|
|
105
|
-
},
|
|
106
103
|
"platform_editor_advanced_layouts_post_fix_patch_3": {
|
|
107
104
|
"type": "boolean"
|
|
108
105
|
},
|