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