@atlaskit/editor-core 207.13.0 → 207.14.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 +23 -0
- package/dist/cjs/ui/EditorContentContainer/styles/layout.js +398 -30
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/styles/layout.js +412 -430
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/EditorContentContainer/styles/layout.js +395 -29
- package/dist/esm/version-wrapper.js +1 -1
- package/package.json +2 -6
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "207.
|
|
2
|
+
export const version = "207.14.0";
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
4
2
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
5
3
|
import { css } from '@emotion/react';
|
|
6
|
-
import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
|
|
7
|
-
import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
|
|
8
|
-
import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
|
|
9
|
-
import { gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle, akEditorSelectedBorderSize, akEditorDeleteBackground, akEditorDeleteBorder, akLayoutGutterOffset, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
10
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
+
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
7
|
+
var gridMediumMaxWidth = 1024;
|
|
8
|
+
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
12
9
|
var columnLayoutSharedStyle = css({
|
|
13
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
14
11
|
'[data-layout-section]': _defineProperty({
|
|
@@ -51,70 +48,439 @@ var columnLayoutResponsiveSharedStyle = css({
|
|
|
51
48
|
}
|
|
52
49
|
});
|
|
53
50
|
var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
54
|
-
return fg('platform_editor_nested_dnd_styles_changes') ?
|
|
55
|
-
|
|
56
|
-
css(
|
|
51
|
+
return fg('platform_editor_nested_dnd_styles_changes') ?
|
|
52
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
53
|
+
css({
|
|
54
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
55
|
+
'> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
|
|
56
|
+
marginTop: 0
|
|
57
|
+
}
|
|
58
|
+
}) :
|
|
59
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
60
|
+
css({
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
62
|
+
'> :not(style):first-child, > style:first-child + *': {
|
|
63
|
+
marginTop: 0
|
|
64
|
+
},
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
66
|
+
'> .ProseMirror-gapcursor:first-child + *, > style:first-child + .ProseMirror-gapcursor + *': {
|
|
67
|
+
marginTop: 0
|
|
68
|
+
},
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
70
|
+
'> .ProseMirror-gapcursor:first-child + span + *': {
|
|
71
|
+
marginTop: 0
|
|
72
|
+
}
|
|
73
|
+
});
|
|
57
74
|
};
|
|
58
75
|
var layoutColumnStyles = function layoutColumnStyles() {
|
|
59
|
-
return editorExperiment('advanced_layouts', true) ?
|
|
60
|
-
|
|
61
|
-
css(
|
|
76
|
+
return editorExperiment('advanced_layouts', true) ?
|
|
77
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
78
|
+
css(_defineProperty(_defineProperty({
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
80
|
+
'> [data-layout-column]': {
|
|
81
|
+
margin: '0 4px'
|
|
82
|
+
},
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
84
|
+
'> [data-layout-column]:first-of-type': {
|
|
85
|
+
marginLeft: 0
|
|
86
|
+
},
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
88
|
+
'> [data-layout-column]:last-of-type': {
|
|
89
|
+
marginRight: 0
|
|
90
|
+
}
|
|
91
|
+
}, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
|
|
92
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
93
|
+
'[data-layout-column] + [data-layout-column]': {
|
|
94
|
+
margin: 0
|
|
95
|
+
}
|
|
96
|
+
}), "> [data-layout-column].".concat(akEditorSelectedNodeClassName, ":not(.danger)"), [
|
|
97
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
98
|
+
blanketSelectionStyles,
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
100
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
101
|
+
// layout column selection shorter after layout border has been removed
|
|
102
|
+
'::before': {
|
|
103
|
+
width: 'calc(100% - 8px)',
|
|
104
|
+
left: 4,
|
|
105
|
+
borderRadius: "var(--ds-border-radius, 3px)"
|
|
106
|
+
}
|
|
107
|
+
}])) :
|
|
108
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
109
|
+
css(_defineProperty({
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
111
|
+
'[data-layout-column] + [data-layout-column]': {
|
|
112
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
113
|
+
marginLeft: 8
|
|
114
|
+
}
|
|
115
|
+
}, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
|
|
116
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
117
|
+
'[data-layout-column] + [data-layout-column]': {
|
|
118
|
+
marginLeft: 0
|
|
119
|
+
}
|
|
120
|
+
}));
|
|
62
121
|
};
|
|
63
122
|
var layoutSectionStyles = function layoutSectionStyles() {
|
|
64
|
-
return editorExperiment('advanced_layouts', true) ?
|
|
65
|
-
|
|
66
|
-
css(
|
|
123
|
+
return editorExperiment('advanced_layouts', true) ?
|
|
124
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
125
|
+
css(columnLayoutResponsiveSharedStyle, {
|
|
126
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
127
|
+
'.layout-section-container [data-layout-section]': {
|
|
128
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
129
|
+
'> .ProseMirror-widget': {
|
|
130
|
+
flex: 'none',
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
132
|
+
display: 'contents !important',
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
134
|
+
'&[data-blocks-drag-handle-container] div': {
|
|
135
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
136
|
+
display: 'contents !important'
|
|
137
|
+
},
|
|
138
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
139
|
+
'&[data-blocks-drop-target-container]': {
|
|
140
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
141
|
+
display: 'block !important',
|
|
142
|
+
margin: "var(--ds-space-negative-050, -4px)",
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
144
|
+
'[data-drop-target-for-element]': {
|
|
145
|
+
position: 'absolute'
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
149
|
+
'& + [data-layout-column]': {
|
|
150
|
+
margin: 0
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
154
|
+
'> [data-layout-column]': {
|
|
155
|
+
margin: 0
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}) : columnLayoutSharedStyle;
|
|
67
159
|
};
|
|
68
160
|
|
|
69
161
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
70
|
-
var layoutBorderBaseStyles = css(
|
|
162
|
+
var layoutBorderBaseStyles = css(_defineProperty({
|
|
163
|
+
// TODO: DSP-4441 - Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
|
|
164
|
+
// This is because the default state already uses the same token and, as such, the hover style won't change anything.
|
|
165
|
+
// https://product-fabric.atlassian.net/browse/DSP-4441
|
|
166
|
+
// Shows the border when cursor is inside a layout
|
|
167
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
168
|
+
'&.selected [data-layout-column], &:hover [data-layout-column]': {
|
|
169
|
+
border: "1px solid ".concat("var(--ds-border, #091E4224)")
|
|
170
|
+
},
|
|
171
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
172
|
+
'&.selected.danger [data-layout-column]': {
|
|
173
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)",
|
|
174
|
+
borderColor: "var(--ds-border-danger, #E2483D)"
|
|
175
|
+
}
|
|
176
|
+
}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
|
|
177
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
178
|
+
'[data-layout-column]': [
|
|
179
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
180
|
+
borderSelectionStyles,
|
|
181
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
182
|
+
blanketSelectionStyles,
|
|
183
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
184
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
185
|
+
'::after': {
|
|
186
|
+
backgroundColor: 'transparent'
|
|
187
|
+
}
|
|
188
|
+
}]
|
|
189
|
+
}));
|
|
71
190
|
|
|
72
191
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
73
|
-
var layoutBorderViewStyles = css(
|
|
192
|
+
var layoutBorderViewStyles = css({
|
|
193
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
194
|
+
'&.selected [data-layout-column], &:hover [data-layout-column]': {
|
|
195
|
+
border: 0
|
|
196
|
+
}
|
|
197
|
+
});
|
|
74
198
|
|
|
75
199
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
76
|
-
var columnSeparatorBaseStyles = css(
|
|
200
|
+
var columnSeparatorBaseStyles = css({
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
202
|
+
'[data-layout-content]::before': {
|
|
203
|
+
content: "''",
|
|
204
|
+
borderLeft: "1px solid ".concat("var(--ds-border, #091E4224)"),
|
|
205
|
+
position: 'absolute',
|
|
206
|
+
height: 'calc(100% - 24px)',
|
|
207
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
208
|
+
marginLeft: -25
|
|
209
|
+
}
|
|
210
|
+
});
|
|
77
211
|
|
|
78
212
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
79
|
-
var columnSeparatorViewStyles = css(
|
|
213
|
+
var columnSeparatorViewStyles = css({
|
|
214
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
215
|
+
'[data-layout-content]::before': {
|
|
216
|
+
borderLeft: 0
|
|
217
|
+
}
|
|
218
|
+
});
|
|
80
219
|
|
|
81
220
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
82
|
-
var rowSeparatorBaseStyles = css(
|
|
221
|
+
var rowSeparatorBaseStyles = css({
|
|
222
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
223
|
+
'[data-layout-content]::before': {
|
|
224
|
+
content: "''",
|
|
225
|
+
borderTop: "1px solid ".concat("var(--ds-border, #091E4224)"),
|
|
226
|
+
position: 'absolute',
|
|
227
|
+
width: 'calc(100% - 32px)',
|
|
228
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
229
|
+
marginTop: -13,
|
|
230
|
+
// clear styles for column separator
|
|
231
|
+
borderLeft: 'unset',
|
|
232
|
+
marginLeft: 'unset',
|
|
233
|
+
height: 'unset'
|
|
234
|
+
}
|
|
235
|
+
});
|
|
83
236
|
|
|
84
237
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
85
|
-
var rowSeparatorViewStyles = css(
|
|
238
|
+
var rowSeparatorViewStyles = css({
|
|
239
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
240
|
+
'[data-layout-content]::before': {
|
|
241
|
+
borderTop: 0
|
|
242
|
+
}
|
|
243
|
+
});
|
|
86
244
|
|
|
87
245
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
88
246
|
var layoutWithSeparatorBorderResponsiveBaseStyles = function layoutWithSeparatorBorderResponsiveBaseStyles(breakpoint
|
|
89
247
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
90
248
|
) {
|
|
91
|
-
return css(
|
|
249
|
+
return css(_defineProperty({}, "&.selected, &:hover, &.selected.danger, &.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
|
|
250
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
251
|
+
'[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:".concat(breakpoint, "px)"), rowSeparatorBaseStyles)
|
|
252
|
+
}));
|
|
92
253
|
};
|
|
93
254
|
|
|
94
255
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
95
256
|
var layoutWithSeparatorBorderResponsiveViewStyles = function layoutWithSeparatorBorderResponsiveViewStyles(breakpoint
|
|
96
257
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
97
258
|
) {
|
|
98
|
-
return css(
|
|
259
|
+
return css(_defineProperty({}, "&.selected, &:hover, &.selected.danger, &.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
|
|
260
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
261
|
+
'[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:".concat(breakpoint, "px)"), rowSeparatorViewStyles)
|
|
262
|
+
}));
|
|
99
263
|
};
|
|
100
264
|
|
|
101
265
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
102
|
-
var layoutWithSeparatorBorderBaseStyles = css(
|
|
266
|
+
var layoutWithSeparatorBorderBaseStyles = css(_defineProperty({
|
|
267
|
+
"&.selected [data-layout-column]:not(:first-of-type), [data-empty-layout='true'] [data-layout-column]:not(:first-of-type), &:hover [data-layout-column]:not(:first-of-type)":
|
|
268
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
269
|
+
columnSeparatorBaseStyles,
|
|
270
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
271
|
+
'&.selected.danger [data-layout-section]': {
|
|
272
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)",
|
|
273
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
|
|
274
|
+
borderRadius: 4,
|
|
275
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
276
|
+
'[data-layout-column]:not(:first-of-type)': columnSeparatorBaseStyles
|
|
277
|
+
}
|
|
278
|
+
}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
|
|
279
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
|
|
280
|
+
borderRadius: 4,
|
|
281
|
+
backgroundColor: "var(--ds-background-selected, #E9F2FF)",
|
|
282
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
283
|
+
'[data-layout-column]': [
|
|
284
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
285
|
+
blanketSelectionStyles,
|
|
286
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
287
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
288
|
+
border: 0,
|
|
289
|
+
'::before': {
|
|
290
|
+
backgroundColor: 'transparent'
|
|
291
|
+
}
|
|
292
|
+
}],
|
|
293
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
294
|
+
'[data-layout-column]:not(:first-of-type)': columnSeparatorBaseStyles
|
|
295
|
+
}));
|
|
103
296
|
|
|
104
297
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
105
|
-
var layoutWithSeparatorBorderViewStyles = css(
|
|
298
|
+
var layoutWithSeparatorBorderViewStyles = css(_defineProperty({
|
|
299
|
+
"&.selected [data-layout-column]:not(:first-of-type), [data-empty-layout='true'] [data-layout-column]:not(:first-of-type), &:hover [data-layout-column]:not(:first-of-type)":
|
|
300
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
301
|
+
columnSeparatorViewStyles,
|
|
302
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
303
|
+
'&.selected.danger [data-layout-section]': {
|
|
304
|
+
boxShadow: "0 0 0 0 ".concat("var(--ds-border-danger, #E2483D)"),
|
|
305
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
306
|
+
'[data-layout-column]:not(:first-of-type)': columnSeparatorViewStyles
|
|
307
|
+
}
|
|
308
|
+
}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
|
|
309
|
+
boxShadow: "0 0 0 0 ".concat("var(--ds-border-selected, #0C66E4)"),
|
|
310
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
311
|
+
'[data-layout-column]:not(:first-of-type)': columnSeparatorViewStyles
|
|
312
|
+
}));
|
|
106
313
|
|
|
107
314
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
108
315
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
109
|
-
var layoutResponsiveBaseStyles = css(
|
|
316
|
+
var layoutResponsiveBaseStyles = css({
|
|
317
|
+
// chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
|
|
318
|
+
// not resized layout in full-width editor
|
|
319
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
320
|
+
'.fabric-editor--full-width-mode .ProseMirror': {
|
|
321
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
322
|
+
'> .layoutSectionView-content-wrap': [{
|
|
323
|
+
'[data-layout-section]': {
|
|
324
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
|
|
325
|
+
'@container editor-area (max-width:724px)': {
|
|
326
|
+
flexDirection: 'column'
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
}, layoutWithSeparatorBorderResponsiveBaseStyles(724)]
|
|
330
|
+
},
|
|
331
|
+
// not resized layout in fixed-width editor
|
|
332
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
333
|
+
'.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror': {
|
|
334
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
335
|
+
'> .layoutSectionView-content-wrap': [{
|
|
336
|
+
'[data-layout-section]': {
|
|
337
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
|
|
338
|
+
'@container editor-area (max-width:788px)': {
|
|
339
|
+
flexDirection: 'column'
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
}, layoutWithSeparatorBorderResponsiveBaseStyles(788)]
|
|
343
|
+
},
|
|
344
|
+
// resized layout in full/fixed-width editor
|
|
345
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
346
|
+
'.ProseMirror .fabric-editor-breakout-mark': {
|
|
347
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
348
|
+
'.layoutSectionView-content-wrap': [{
|
|
349
|
+
'[data-layout-section]': {
|
|
350
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
|
|
351
|
+
'@container editor-area (max-width:820px)': {
|
|
352
|
+
flexDirection: 'column'
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
}, layoutWithSeparatorBorderResponsiveBaseStyles(820)]
|
|
356
|
+
}
|
|
357
|
+
});
|
|
110
358
|
|
|
111
359
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
112
|
-
var layoutResponsiveViewStyles = css(
|
|
360
|
+
var layoutResponsiveViewStyles = css({
|
|
361
|
+
// chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
|
|
362
|
+
// not resized layout in full-width editor
|
|
363
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
364
|
+
'.fabric-editor--full-width-mode .ProseMirror': {
|
|
365
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
366
|
+
'> .layoutSectionView-content-wrap': layoutWithSeparatorBorderResponsiveViewStyles(724)
|
|
367
|
+
},
|
|
368
|
+
// not resized layout in fixed-width editor
|
|
369
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
370
|
+
'.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror': {
|
|
371
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
372
|
+
'> .layoutSectionView-content-wrap': layoutWithSeparatorBorderResponsiveViewStyles(788)
|
|
373
|
+
},
|
|
374
|
+
// resized layout in full/fixed-width editor
|
|
375
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
376
|
+
'.ProseMirror .fabric-editor-breakout-mark': {
|
|
377
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
378
|
+
'.layoutSectionView-content-wrap': layoutWithSeparatorBorderResponsiveViewStyles(820)
|
|
379
|
+
}
|
|
380
|
+
});
|
|
113
381
|
|
|
114
382
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
115
383
|
export var layoutBaseStyles = function layoutBaseStyles() {
|
|
116
|
-
return css(
|
|
384
|
+
return css({
|
|
385
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
386
|
+
'.ProseMirror': [layoutSectionStyles(), {
|
|
387
|
+
'[data-layout-section]': [{
|
|
388
|
+
// TODO: EDF-123 - Migrate away from gridSize
|
|
389
|
+
// Recommendation: Replace directly with 7px
|
|
390
|
+
// Ignored via go/ees007
|
|
391
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
392
|
+
margin: "var(--ds-space-100, 8px)".concat(" -", 12 + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), "px 0"),
|
|
393
|
+
transition: 'border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
|
|
394
|
+
cursor: 'pointer',
|
|
395
|
+
// Inner cursor located 26px from left
|
|
396
|
+
'[data-layout-column]': {
|
|
397
|
+
flex: 1,
|
|
398
|
+
position: 'relative',
|
|
399
|
+
minWidth: 0,
|
|
400
|
+
/* disable 4 borders when in view mode and advanced layouts is on */
|
|
401
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
402
|
+
border: "".concat(editorExperiment('advanced_layouts', true) ? 0 : 1, "px solid ", "var(--ds-border, #091E4224)"),
|
|
403
|
+
borderRadius: 4,
|
|
404
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
405
|
+
padding: "12px ".concat(12 + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), "px"),
|
|
406
|
+
boxSizing: 'border-box',
|
|
407
|
+
'> div': [firstNodeWithNotMarginTop(), {
|
|
408
|
+
'> .embedCardView-content-wrap:first-of-type .rich-media-item': {
|
|
409
|
+
marginTop: 0
|
|
410
|
+
},
|
|
411
|
+
'> .mediaSingleView-content-wrap:first-of-type .rich-media-item': {
|
|
412
|
+
marginTop: 0
|
|
413
|
+
},
|
|
414
|
+
'> .ProseMirror-gapcursor.-right:first-child + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor.-right + .mediaSingleView-content-wrap .rich-media-item, > .ProseMirror-gapcursor.-right:first-of-type + .embedCardView-content-wrap .rich-media-item': {
|
|
415
|
+
marginTop: 0
|
|
416
|
+
},
|
|
417
|
+
'> .ProseMirror-gapcursor:first-child + span + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor + span + .mediaSingleView-content-wrap .rich-media-item': {
|
|
418
|
+
marginTop: 0
|
|
419
|
+
},
|
|
420
|
+
// Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down and shrinking layout's node selectable area (leniency margin)
|
|
421
|
+
"> [data-node-type='decisionList']": {
|
|
422
|
+
'li:first-of-type [data-decision-wrapper]': {
|
|
423
|
+
marginTop: 0
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}],
|
|
427
|
+
// Make the 'content' fill the entire height of the layout column to allow click handler of layout section nodeview to target only data-layout-column
|
|
428
|
+
'[data-layout-content]': {
|
|
429
|
+
height: '100%',
|
|
430
|
+
cursor: 'text',
|
|
431
|
+
'.mediaGroupView-content-wrap': {
|
|
432
|
+
clear: 'both'
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
}, layoutColumnStyles()],
|
|
437
|
+
// styles to support borders for layout
|
|
438
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
439
|
+
'[data-layout-section], .layoutSectionView-content-wrap': editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderBaseStyles : layoutBorderBaseStyles
|
|
440
|
+
}],
|
|
441
|
+
// hide separator when element is dragging on top of a layout column
|
|
442
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
443
|
+
'[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before': {
|
|
444
|
+
display: 'none'
|
|
445
|
+
},
|
|
446
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
447
|
+
'.fabric-editor--full-width-mode .ProseMirror': {
|
|
448
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
449
|
+
'[data-layout-section]': {
|
|
450
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
451
|
+
'.pm-table-container': {
|
|
452
|
+
margin: '0 2px'
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
},
|
|
457
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
458
|
+
editorExperiment('advanced_layouts', true) && layoutResponsiveBaseStyles,
|
|
459
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
460
|
+
editorExperiment('advanced_layouts', false) &&
|
|
461
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
462
|
+
fg('platform_editor_nested_dnd_styles_changes') && {
|
|
463
|
+
'.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section]': {
|
|
464
|
+
margin: "var(--ds-space-100, 8px)".concat(" -20px 0")
|
|
465
|
+
}
|
|
466
|
+
});
|
|
117
467
|
};
|
|
118
468
|
|
|
119
469
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
|
|
120
|
-
export var layoutViewStyles = css(
|
|
470
|
+
export var layoutViewStyles = css({
|
|
471
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
472
|
+
'.ProseMirror': {
|
|
473
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
474
|
+
'[data-layout-section]': {
|
|
475
|
+
cursor: 'default',
|
|
476
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
477
|
+
'[data-layout-column]': {
|
|
478
|
+
border: 0
|
|
479
|
+
}
|
|
480
|
+
},
|
|
481
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
482
|
+
'[data-layout-section], .layoutSectionView-content-wrap': editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderViewStyles : layoutBorderViewStyles
|
|
483
|
+
}
|
|
484
|
+
},
|
|
485
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
486
|
+
editorExperiment('advanced_layouts', true) && layoutResponsiveViewStyles);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "207.
|
|
2
|
+
export var version = "207.14.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "207.
|
|
3
|
+
"version": "207.14.0",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@atlaskit/platform-feature-flags-react": "^0.2.0",
|
|
63
63
|
"@atlaskit/react-ufo": "^3.13.0",
|
|
64
64
|
"@atlaskit/task-decision": "^19.2.0",
|
|
65
|
-
"@atlaskit/tmp-editor-statsig": "^5.
|
|
65
|
+
"@atlaskit/tmp-editor-statsig": "^5.7.0",
|
|
66
66
|
"@atlaskit/tokens": "^4.9.0",
|
|
67
67
|
"@atlaskit/tooltip": "^20.2.0",
|
|
68
68
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -544,10 +544,6 @@
|
|
|
544
544
|
"type": "boolean",
|
|
545
545
|
"referenceOnly": true
|
|
546
546
|
},
|
|
547
|
-
"platform_editor_comments_api_manager_select": {
|
|
548
|
-
"type": "boolean",
|
|
549
|
-
"referenceOnly": true
|
|
550
|
-
},
|
|
551
547
|
"platform_editor_elements_dnd_multi_select_patch_3": {
|
|
552
548
|
"type": "boolean",
|
|
553
549
|
"referenceOnly": true
|