@atlaskit/editor-plugin-layout 2.2.0 → 2.3.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 +17 -0
- package/dist/cjs/ui/global-styles.js +12 -13
- package/dist/cjs/ui/toolbar.js +21 -40
- package/dist/es2019/ui/global-styles.js +3 -2
- package/dist/es2019/ui/toolbar.js +18 -37
- package/dist/esm/ui/global-styles.js +11 -13
- package/dist/esm/ui/toolbar.js +18 -37
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 2.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#128788](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128788)
|
|
8
|
+
[`83a4d1ba203b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/83a4d1ba203b0) -
|
|
9
|
+
[ux] update icons
|
|
10
|
+
|
|
11
|
+
## 2.2.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#127914](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127914)
|
|
16
|
+
[`1240912e13dd0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1240912e13dd0) -
|
|
17
|
+
[ux] ED-27097 Hide layout placeholder when editor is not focussed
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 2.2.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.GlobalStylesWrapper = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
7
9
|
var _react = require("react");
|
|
8
10
|
var _react2 = require("@emotion/react");
|
|
9
11
|
var _reactIntlNext = require("react-intl-next");
|
|
@@ -16,22 +18,19 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
|
16
18
|
|
|
17
19
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
|
|
18
20
|
|
|
21
|
+
var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
|
|
19
22
|
var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
20
23
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
21
|
-
return (0, _react2.css)({
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
'
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
position: 'absolute',
|
|
30
|
-
color: "var(--ds-text-subtlest, #626F86)",
|
|
31
|
-
pointerEvents: 'none'
|
|
32
|
-
}
|
|
24
|
+
return (0, _react2.css)((0, _defineProperty2.default)({}, "".concat(PLACEHOLDER_SELECTOR), {
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
26
|
+
'&::before': {
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
28
|
+
content: "\"".concat(message, "\""),
|
|
29
|
+
position: 'absolute',
|
|
30
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
31
|
+
pointerEvents: 'none'
|
|
33
32
|
}
|
|
34
|
-
});
|
|
33
|
+
}));
|
|
35
34
|
}
|
|
36
35
|
return (0, _react2.css)({
|
|
37
36
|
// when paragraph is the only child, and it only has a trailingBreak.
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -11,20 +11,13 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
11
11
|
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
|
|
12
12
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
13
13
|
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var _layoutSingle = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-single"));
|
|
22
|
-
var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
|
|
23
|
-
var _layoutThreeWithSidebars = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-with-sidebars"));
|
|
24
|
-
var _layoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-equal"));
|
|
25
|
-
var _layoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-left-sidebar"));
|
|
26
|
-
var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-right-sidebar"));
|
|
27
|
-
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
14
|
+
var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
|
|
15
|
+
var _layoutOneColumnEditorLayoutSingle = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-one-column--editor-layout-single"));
|
|
16
|
+
var _layoutThreeColumnsEditorLayoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-three-columns--editor-layout-three-equal"));
|
|
17
|
+
var _layoutThreeColumnsSidebarsEditorLayoutThreeWithSidebars = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-three-columns-sidebars--editor-layout-three-with-sidebars"));
|
|
18
|
+
var _layoutTwoColumnsEditorLayoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal"));
|
|
19
|
+
var _layoutTwoColumnsSidebarLeftEditorLayoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar"));
|
|
20
|
+
var _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar"));
|
|
28
21
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
29
22
|
var _actions = require("../pm-plugins/actions");
|
|
30
23
|
var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
|
|
@@ -35,40 +28,34 @@ var LAYOUT_TYPES = [{
|
|
|
35
28
|
id: 'editor.layout.twoEquals',
|
|
36
29
|
type: 'two_equal',
|
|
37
30
|
title: _messages.layoutMessages.twoColumns,
|
|
38
|
-
icon:
|
|
39
|
-
iconFallback: _layoutTwoEqual.default
|
|
31
|
+
icon: _layoutTwoColumnsEditorLayoutTwoEqual.default
|
|
40
32
|
}, {
|
|
41
33
|
id: 'editor.layout.threeEquals',
|
|
42
34
|
type: 'three_equal',
|
|
43
35
|
title: _messages.layoutMessages.threeColumns,
|
|
44
|
-
icon:
|
|
45
|
-
iconFallback: _layoutThreeEqual.default
|
|
36
|
+
icon: _layoutThreeColumnsEditorLayoutThreeEqual.default
|
|
46
37
|
}];
|
|
47
38
|
var LAYOUT_TYPES_WITH_SINGLE_COL = [{
|
|
48
39
|
id: 'editor.layout.singeLayout',
|
|
49
40
|
type: 'single',
|
|
50
41
|
title: _messages.layoutMessages.singleColumn,
|
|
51
|
-
icon:
|
|
52
|
-
iconFallback: _layoutSingle.default
|
|
42
|
+
icon: _layoutOneColumnEditorLayoutSingle.default
|
|
53
43
|
}].concat(LAYOUT_TYPES);
|
|
54
44
|
var SIDEBAR_LAYOUT_TYPES = [{
|
|
55
45
|
id: 'editor.layout.twoRightSidebar',
|
|
56
46
|
type: 'two_right_sidebar',
|
|
57
47
|
title: _messages.layoutMessages.rightSidebar,
|
|
58
|
-
icon:
|
|
59
|
-
iconFallback: _layoutTwoRightSidebar.default
|
|
48
|
+
icon: _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar.default
|
|
60
49
|
}, {
|
|
61
50
|
id: 'editor.layout.twoLeftSidebar',
|
|
62
51
|
type: 'two_left_sidebar',
|
|
63
52
|
title: _messages.layoutMessages.leftSidebar,
|
|
64
|
-
icon:
|
|
65
|
-
iconFallback: _layoutTwoLeftSidebar.default
|
|
53
|
+
icon: _layoutTwoColumnsSidebarLeftEditorLayoutTwoLeftSidebar.default
|
|
66
54
|
}, {
|
|
67
55
|
id: 'editor.layout.threeWithSidebars',
|
|
68
56
|
type: 'three_with_sidebars',
|
|
69
57
|
title: _messages.layoutMessages.threeColumnsWithSidebars,
|
|
70
|
-
icon:
|
|
71
|
-
iconFallback: _layoutThreeWithSidebars.default
|
|
58
|
+
icon: _layoutThreeColumnsSidebarsEditorLayoutThreeWithSidebars.default
|
|
72
59
|
}];
|
|
73
60
|
|
|
74
61
|
// These are used for advanced layout options
|
|
@@ -76,33 +63,28 @@ var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
|
|
|
76
63
|
id: 'editor.layout.twoEquals',
|
|
77
64
|
type: 'two_equal',
|
|
78
65
|
title: _messages.layoutMessages.twoColumns,
|
|
79
|
-
icon:
|
|
80
|
-
iconFallback: _layoutTwoEqual.default
|
|
66
|
+
icon: _layoutTwoColumnsEditorLayoutTwoEqual.default
|
|
81
67
|
}, {
|
|
82
68
|
id: 'editor.layout.twoRightSidebar',
|
|
83
69
|
type: 'two_right_sidebar',
|
|
84
70
|
title: _messages.layoutMessages.rightSidebar,
|
|
85
|
-
icon:
|
|
86
|
-
iconFallback: _layoutTwoRightSidebar.default
|
|
71
|
+
icon: _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar.default
|
|
87
72
|
}, {
|
|
88
73
|
id: 'editor.layout.twoLeftSidebar',
|
|
89
74
|
type: 'two_left_sidebar',
|
|
90
75
|
title: _messages.layoutMessages.leftSidebar,
|
|
91
|
-
icon:
|
|
92
|
-
iconFallback: _layoutTwoLeftSidebar.default
|
|
76
|
+
icon: _layoutTwoColumnsSidebarLeftEditorLayoutTwoLeftSidebar.default
|
|
93
77
|
}];
|
|
94
78
|
var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
|
|
95
79
|
id: 'editor.layout.threeEquals',
|
|
96
80
|
type: 'three_equal',
|
|
97
81
|
title: _messages.layoutMessages.threeColumns,
|
|
98
|
-
icon:
|
|
99
|
-
iconFallback: _layoutThreeEqual.default
|
|
82
|
+
icon: _layoutThreeColumnsEditorLayoutThreeEqual.default
|
|
100
83
|
}, {
|
|
101
84
|
id: 'editor.layout.threeWithSidebars',
|
|
102
85
|
type: 'three_with_sidebars',
|
|
103
86
|
title: _messages.layoutMessages.threeColumnsWithSidebars,
|
|
104
|
-
icon:
|
|
105
|
-
iconFallback: _layoutThreeWithSidebars.default
|
|
87
|
+
icon: _layoutThreeColumnsSidebarsEditorLayoutThreeWithSidebars.default
|
|
106
88
|
}, {
|
|
107
89
|
id: 'editor.layout.threeRightSidebars',
|
|
108
90
|
type: 'three_right_sidebars',
|
|
@@ -130,7 +112,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
|
|
|
130
112
|
};
|
|
131
113
|
};
|
|
132
114
|
var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
|
|
133
|
-
var iconPlaceholder =
|
|
115
|
+
var iconPlaceholder = _layoutTwoColumnsEditorLayoutTwoEqual.default; // TODO: ED-25466 - Replace with proper icon
|
|
134
116
|
|
|
135
117
|
var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
136
118
|
var addSidebarLayouts = _ref.addSidebarLayouts,
|
|
@@ -221,8 +203,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
|
|
|
221
203
|
type: 'button',
|
|
222
204
|
appearance: 'danger',
|
|
223
205
|
focusEditoronEnter: true,
|
|
224
|
-
icon:
|
|
225
|
-
iconFallback: _remove.default,
|
|
206
|
+
icon: _deleteEditorRemove.default,
|
|
226
207
|
testId: _messages.default.remove.id,
|
|
227
208
|
title: intl.formatMessage(_messages.default.remove),
|
|
228
209
|
onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI),
|
|
@@ -257,7 +238,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
|
|
|
257
238
|
}, {
|
|
258
239
|
title: 'Delete',
|
|
259
240
|
onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI),
|
|
260
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
241
|
+
icon: /*#__PURE__*/_react.default.createElement(_deleteEditorRemove.default, {
|
|
261
242
|
label: "Delete"
|
|
262
243
|
})
|
|
263
244
|
}]
|
|
@@ -9,12 +9,13 @@ 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
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
|
+
const PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
|
|
12
13
|
const getPlaceholderStyle = message => {
|
|
13
14
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
14
15
|
return css({
|
|
15
16
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
17
|
-
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
|
+
[`${PLACEHOLDER_SELECTOR}`]: {
|
|
18
19
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
19
20
|
'&::before': {
|
|
20
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
@@ -2,20 +2,13 @@ import React from 'react';
|
|
|
2
2
|
import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
3
3
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
4
4
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
5
|
-
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
6
|
-
import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
|
|
7
|
-
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
8
|
-
import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/layout-three-columns-sidebars';
|
|
9
|
-
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
10
|
-
import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-left';
|
|
11
|
-
import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-right';
|
|
12
|
-
import EditorLayoutSingleIcon from '@atlaskit/icon/glyph/editor/layout-single';
|
|
13
|
-
import LayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
|
|
14
|
-
import LayoutThreeWithSidebarsIcon from '@atlaskit/icon/glyph/editor/layout-three-with-sidebars';
|
|
15
|
-
import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
|
|
16
|
-
import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-left-sidebar';
|
|
17
|
-
import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
|
|
18
|
-
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
5
|
+
import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
|
|
6
|
+
import LayoutOneColumnIcon from '@atlaskit/icon/core/migration/layout-one-column--editor-layout-single';
|
|
7
|
+
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/migration/layout-three-columns--editor-layout-three-equal';
|
|
8
|
+
import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout-three-columns-sidebars--editor-layout-three-with-sidebars';
|
|
9
|
+
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
|
|
10
|
+
import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
|
|
11
|
+
import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
|
|
19
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
13
|
import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
|
|
21
14
|
import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
|
|
@@ -24,40 +17,34 @@ const LAYOUT_TYPES = [{
|
|
|
24
17
|
id: 'editor.layout.twoEquals',
|
|
25
18
|
type: 'two_equal',
|
|
26
19
|
title: toolbarMessages.twoColumns,
|
|
27
|
-
icon: LayoutTwoColumnsIcon
|
|
28
|
-
iconFallback: LayoutTwoEqualIcon
|
|
20
|
+
icon: LayoutTwoColumnsIcon
|
|
29
21
|
}, {
|
|
30
22
|
id: 'editor.layout.threeEquals',
|
|
31
23
|
type: 'three_equal',
|
|
32
24
|
title: toolbarMessages.threeColumns,
|
|
33
|
-
icon: LayoutThreeColumnsIcon
|
|
34
|
-
iconFallback: LayoutThreeEqualIcon
|
|
25
|
+
icon: LayoutThreeColumnsIcon
|
|
35
26
|
}];
|
|
36
27
|
const LAYOUT_TYPES_WITH_SINGLE_COL = [{
|
|
37
28
|
id: 'editor.layout.singeLayout',
|
|
38
29
|
type: 'single',
|
|
39
30
|
title: toolbarMessages.singleColumn,
|
|
40
|
-
icon: LayoutOneColumnIcon
|
|
41
|
-
iconFallback: EditorLayoutSingleIcon
|
|
31
|
+
icon: LayoutOneColumnIcon
|
|
42
32
|
}, ...LAYOUT_TYPES];
|
|
43
33
|
const SIDEBAR_LAYOUT_TYPES = [{
|
|
44
34
|
id: 'editor.layout.twoRightSidebar',
|
|
45
35
|
type: 'two_right_sidebar',
|
|
46
36
|
title: toolbarMessages.rightSidebar,
|
|
47
|
-
icon: LayoutTwoColumnsSidebarRightIcon
|
|
48
|
-
iconFallback: LayoutTwoRightSidebarIcon
|
|
37
|
+
icon: LayoutTwoColumnsSidebarRightIcon
|
|
49
38
|
}, {
|
|
50
39
|
id: 'editor.layout.twoLeftSidebar',
|
|
51
40
|
type: 'two_left_sidebar',
|
|
52
41
|
title: toolbarMessages.leftSidebar,
|
|
53
|
-
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
54
|
-
iconFallback: LayoutTwoLeftSidebarIcon
|
|
42
|
+
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
55
43
|
}, {
|
|
56
44
|
id: 'editor.layout.threeWithSidebars',
|
|
57
45
|
type: 'three_with_sidebars',
|
|
58
46
|
title: toolbarMessages.threeColumnsWithSidebars,
|
|
59
|
-
icon: LayoutThreeColumnsSidebarsIcon
|
|
60
|
-
iconFallback: LayoutThreeWithSidebarsIcon
|
|
47
|
+
icon: LayoutThreeColumnsSidebarsIcon
|
|
61
48
|
}];
|
|
62
49
|
|
|
63
50
|
// These are used for advanced layout options
|
|
@@ -65,33 +52,28 @@ const LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
|
|
|
65
52
|
id: 'editor.layout.twoEquals',
|
|
66
53
|
type: 'two_equal',
|
|
67
54
|
title: toolbarMessages.twoColumns,
|
|
68
|
-
icon: LayoutTwoColumnsIcon
|
|
69
|
-
iconFallback: LayoutTwoEqualIcon
|
|
55
|
+
icon: LayoutTwoColumnsIcon
|
|
70
56
|
}, {
|
|
71
57
|
id: 'editor.layout.twoRightSidebar',
|
|
72
58
|
type: 'two_right_sidebar',
|
|
73
59
|
title: toolbarMessages.rightSidebar,
|
|
74
|
-
icon: LayoutTwoColumnsSidebarRightIcon
|
|
75
|
-
iconFallback: LayoutTwoRightSidebarIcon
|
|
60
|
+
icon: LayoutTwoColumnsSidebarRightIcon
|
|
76
61
|
}, {
|
|
77
62
|
id: 'editor.layout.twoLeftSidebar',
|
|
78
63
|
type: 'two_left_sidebar',
|
|
79
64
|
title: toolbarMessages.leftSidebar,
|
|
80
|
-
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
81
|
-
iconFallback: LayoutTwoLeftSidebarIcon
|
|
65
|
+
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
82
66
|
}];
|
|
83
67
|
const LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
|
|
84
68
|
id: 'editor.layout.threeEquals',
|
|
85
69
|
type: 'three_equal',
|
|
86
70
|
title: toolbarMessages.threeColumns,
|
|
87
|
-
icon: LayoutThreeColumnsIcon
|
|
88
|
-
iconFallback: LayoutThreeEqualIcon
|
|
71
|
+
icon: LayoutThreeColumnsIcon
|
|
89
72
|
}, {
|
|
90
73
|
id: 'editor.layout.threeWithSidebars',
|
|
91
74
|
type: 'three_with_sidebars',
|
|
92
75
|
title: toolbarMessages.threeColumnsWithSidebars,
|
|
93
|
-
icon: LayoutThreeColumnsSidebarsIcon
|
|
94
|
-
iconFallback: LayoutThreeWithSidebarsIcon
|
|
76
|
+
icon: LayoutThreeColumnsSidebarsIcon
|
|
95
77
|
}, {
|
|
96
78
|
id: 'editor.layout.threeRightSidebars',
|
|
97
79
|
type: 'three_right_sidebars',
|
|
@@ -209,7 +191,6 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
|
|
|
209
191
|
appearance: 'danger',
|
|
210
192
|
focusEditoronEnter: true,
|
|
211
193
|
icon: DeleteIcon,
|
|
212
|
-
iconFallback: RemoveIcon,
|
|
213
194
|
testId: commonMessages.remove.id,
|
|
214
195
|
title: intl.formatMessage(commonMessages.remove),
|
|
215
196
|
onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
1
2
|
/**
|
|
2
3
|
* @jsxRuntime classic
|
|
3
4
|
* @jsx jsx
|
|
@@ -9,22 +10,19 @@ import { css, Global, jsx } from '@emotion/react';
|
|
|
9
10
|
import { useIntl } from 'react-intl-next';
|
|
10
11
|
import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
|
+
var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
|
|
12
14
|
var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
13
15
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
14
|
-
return css({
|
|
15
|
-
//
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
'
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
position: 'absolute',
|
|
23
|
-
color: "var(--ds-text-subtlest, #626F86)",
|
|
24
|
-
pointerEvents: 'none'
|
|
25
|
-
}
|
|
16
|
+
return css(_defineProperty({}, "".concat(PLACEHOLDER_SELECTOR), {
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
18
|
+
'&::before': {
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
20
|
+
content: "\"".concat(message, "\""),
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
23
|
+
pointerEvents: 'none'
|
|
26
24
|
}
|
|
27
|
-
});
|
|
25
|
+
}));
|
|
28
26
|
}
|
|
29
27
|
return css({
|
|
30
28
|
// when paragraph is the only child, and it only has a trailingBreak.
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -3,20 +3,13 @@ import React from 'react';
|
|
|
3
3
|
import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
4
4
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
5
5
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
6
|
-
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
7
|
-
import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
|
|
8
|
-
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
9
|
-
import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/layout-three-columns-sidebars';
|
|
10
|
-
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
11
|
-
import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-left';
|
|
12
|
-
import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/layout-two-columns-sidebar-right';
|
|
13
|
-
import EditorLayoutSingleIcon from '@atlaskit/icon/glyph/editor/layout-single';
|
|
14
|
-
import LayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
|
|
15
|
-
import LayoutThreeWithSidebarsIcon from '@atlaskit/icon/glyph/editor/layout-three-with-sidebars';
|
|
16
|
-
import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
|
|
17
|
-
import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-left-sidebar';
|
|
18
|
-
import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
|
|
19
|
-
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
6
|
+
import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
|
|
7
|
+
import LayoutOneColumnIcon from '@atlaskit/icon/core/migration/layout-one-column--editor-layout-single';
|
|
8
|
+
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/migration/layout-three-columns--editor-layout-three-equal';
|
|
9
|
+
import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout-three-columns-sidebars--editor-layout-three-with-sidebars';
|
|
10
|
+
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
|
|
11
|
+
import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
|
|
12
|
+
import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
|
|
20
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
21
14
|
import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
|
|
22
15
|
import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
|
|
@@ -25,40 +18,34 @@ var LAYOUT_TYPES = [{
|
|
|
25
18
|
id: 'editor.layout.twoEquals',
|
|
26
19
|
type: 'two_equal',
|
|
27
20
|
title: toolbarMessages.twoColumns,
|
|
28
|
-
icon: LayoutTwoColumnsIcon
|
|
29
|
-
iconFallback: LayoutTwoEqualIcon
|
|
21
|
+
icon: LayoutTwoColumnsIcon
|
|
30
22
|
}, {
|
|
31
23
|
id: 'editor.layout.threeEquals',
|
|
32
24
|
type: 'three_equal',
|
|
33
25
|
title: toolbarMessages.threeColumns,
|
|
34
|
-
icon: LayoutThreeColumnsIcon
|
|
35
|
-
iconFallback: LayoutThreeEqualIcon
|
|
26
|
+
icon: LayoutThreeColumnsIcon
|
|
36
27
|
}];
|
|
37
28
|
var LAYOUT_TYPES_WITH_SINGLE_COL = [{
|
|
38
29
|
id: 'editor.layout.singeLayout',
|
|
39
30
|
type: 'single',
|
|
40
31
|
title: toolbarMessages.singleColumn,
|
|
41
|
-
icon: LayoutOneColumnIcon
|
|
42
|
-
iconFallback: EditorLayoutSingleIcon
|
|
32
|
+
icon: LayoutOneColumnIcon
|
|
43
33
|
}].concat(LAYOUT_TYPES);
|
|
44
34
|
var SIDEBAR_LAYOUT_TYPES = [{
|
|
45
35
|
id: 'editor.layout.twoRightSidebar',
|
|
46
36
|
type: 'two_right_sidebar',
|
|
47
37
|
title: toolbarMessages.rightSidebar,
|
|
48
|
-
icon: LayoutTwoColumnsSidebarRightIcon
|
|
49
|
-
iconFallback: LayoutTwoRightSidebarIcon
|
|
38
|
+
icon: LayoutTwoColumnsSidebarRightIcon
|
|
50
39
|
}, {
|
|
51
40
|
id: 'editor.layout.twoLeftSidebar',
|
|
52
41
|
type: 'two_left_sidebar',
|
|
53
42
|
title: toolbarMessages.leftSidebar,
|
|
54
|
-
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
55
|
-
iconFallback: LayoutTwoLeftSidebarIcon
|
|
43
|
+
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
56
44
|
}, {
|
|
57
45
|
id: 'editor.layout.threeWithSidebars',
|
|
58
46
|
type: 'three_with_sidebars',
|
|
59
47
|
title: toolbarMessages.threeColumnsWithSidebars,
|
|
60
|
-
icon: LayoutThreeColumnsSidebarsIcon
|
|
61
|
-
iconFallback: LayoutThreeWithSidebarsIcon
|
|
48
|
+
icon: LayoutThreeColumnsSidebarsIcon
|
|
62
49
|
}];
|
|
63
50
|
|
|
64
51
|
// These are used for advanced layout options
|
|
@@ -66,33 +53,28 @@ var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
|
|
|
66
53
|
id: 'editor.layout.twoEquals',
|
|
67
54
|
type: 'two_equal',
|
|
68
55
|
title: toolbarMessages.twoColumns,
|
|
69
|
-
icon: LayoutTwoColumnsIcon
|
|
70
|
-
iconFallback: LayoutTwoEqualIcon
|
|
56
|
+
icon: LayoutTwoColumnsIcon
|
|
71
57
|
}, {
|
|
72
58
|
id: 'editor.layout.twoRightSidebar',
|
|
73
59
|
type: 'two_right_sidebar',
|
|
74
60
|
title: toolbarMessages.rightSidebar,
|
|
75
|
-
icon: LayoutTwoColumnsSidebarRightIcon
|
|
76
|
-
iconFallback: LayoutTwoRightSidebarIcon
|
|
61
|
+
icon: LayoutTwoColumnsSidebarRightIcon
|
|
77
62
|
}, {
|
|
78
63
|
id: 'editor.layout.twoLeftSidebar',
|
|
79
64
|
type: 'two_left_sidebar',
|
|
80
65
|
title: toolbarMessages.leftSidebar,
|
|
81
|
-
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
82
|
-
iconFallback: LayoutTwoLeftSidebarIcon
|
|
66
|
+
icon: LayoutTwoColumnsSidebarLeftIcon
|
|
83
67
|
}];
|
|
84
68
|
var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
|
|
85
69
|
id: 'editor.layout.threeEquals',
|
|
86
70
|
type: 'three_equal',
|
|
87
71
|
title: toolbarMessages.threeColumns,
|
|
88
|
-
icon: LayoutThreeColumnsIcon
|
|
89
|
-
iconFallback: LayoutThreeEqualIcon
|
|
72
|
+
icon: LayoutThreeColumnsIcon
|
|
90
73
|
}, {
|
|
91
74
|
id: 'editor.layout.threeWithSidebars',
|
|
92
75
|
type: 'three_with_sidebars',
|
|
93
76
|
title: toolbarMessages.threeColumnsWithSidebars,
|
|
94
|
-
icon: LayoutThreeColumnsSidebarsIcon
|
|
95
|
-
iconFallback: LayoutThreeWithSidebarsIcon
|
|
77
|
+
icon: LayoutThreeColumnsSidebarsIcon
|
|
96
78
|
}, {
|
|
97
79
|
id: 'editor.layout.threeRightSidebars',
|
|
98
80
|
type: 'three_right_sidebars',
|
|
@@ -212,7 +194,6 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
|
|
|
212
194
|
appearance: 'danger',
|
|
213
195
|
focusEditoronEnter: true,
|
|
214
196
|
icon: DeleteIcon,
|
|
215
|
-
iconFallback: RemoveIcon,
|
|
216
197
|
testId: commonMessages.remove.id,
|
|
217
198
|
title: intl.formatMessage(commonMessages.remove),
|
|
218
199
|
onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^102.
|
|
37
|
+
"@atlaskit/editor-common": "^102.11.0",
|
|
38
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",
|