@atlaskit/editor-core 217.10.0 → 217.11.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 +21 -0
- package/dist/cjs/create-editor/ReactEditorView.js +6 -6
- package/dist/cjs/create-editor/create-schema.js +1 -1
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +8 -2
- package/dist/cjs/ui/EditorContentContainer/styles/expandStyles.js +2 -2
- package/dist/cjs/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
- package/dist/cjs/ui/EditorContentContainer/styles/layout.js +98 -11
- package/dist/cjs/ui/EditorContentContainer/styles/list.js +12 -5
- package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
- package/dist/cjs/ui/EditorContentContainer/styles/smartCardStyles.js +36 -14
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/create-editor/ReactEditorView.js +2 -2
- package/dist/es2019/create-editor/create-schema.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +9 -3
- package/dist/es2019/ui/EditorContentContainer/styles/expandStyles.js +2 -2
- package/dist/es2019/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
- package/dist/es2019/ui/EditorContentContainer/styles/layout.js +119 -0
- package/dist/es2019/ui/EditorContentContainer/styles/list.js +12 -5
- package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
- package/dist/es2019/ui/EditorContentContainer/styles/smartCardStyles.js +42 -12
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/create-editor/ReactEditorView.js +6 -6
- package/dist/esm/create-editor/create-schema.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +9 -3
- package/dist/esm/ui/EditorContentContainer/styles/expandStyles.js +2 -2
- package/dist/esm/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
- package/dist/esm/ui/EditorContentContainer/styles/layout.js +97 -10
- package/dist/esm/ui/EditorContentContainer/styles/list.js +12 -5
- package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
- package/dist/esm/ui/EditorContentContainer/styles/smartCardStyles.js +36 -14
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/create-editor/create-schema.d.ts +1 -1
- package/dist/types/create-editor/create-universal-preset.d.ts +6 -0
- package/dist/types/presets/universal.d.ts +7 -4
- package/dist/types/presets/useUniversalPreset.d.ts +6 -0
- package/dist/types/ui/EditorContentContainer/styles/layout.d.ts +15 -0
- package/dist/types-ts4.5/create-editor/create-schema.d.ts +1 -1
- package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +6 -0
- package/dist/types-ts4.5/presets/universal.d.ts +7 -4
- package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +6 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/layout.d.ts +15 -0
- package/package.json +6 -6
|
@@ -3,6 +3,80 @@ import { css } from '@emotion/react';
|
|
|
3
3
|
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
4
4
|
const gridMediumMaxWidth = 1024;
|
|
5
5
|
const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
6
|
+
|
|
7
|
+
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
|
|
8
|
+
const layoutColumnDividerClassName = 'layout-column-divider';
|
|
9
|
+
const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
|
|
10
|
+
const layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Styles for the column resize divider widget DOM elements.
|
|
14
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
15
|
+
* Applied only when advanced_layouts experiment is on.
|
|
16
|
+
*/
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
18
|
+
export const layoutColumnDividerStyles = css({
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
20
|
+
[`.${layoutColumnDividerClassName}`]: {
|
|
21
|
+
// Negative margin removes the applied 'gap' from the parent's flex box
|
|
22
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
23
|
+
marginInline: '-15px 0px',
|
|
24
|
+
flexShrink: 0,
|
|
25
|
+
boxSizing: 'content-box',
|
|
26
|
+
cursor: 'col-resize',
|
|
27
|
+
position: 'relative',
|
|
28
|
+
zIndex: 2,
|
|
29
|
+
alignSelf: 'stretch',
|
|
30
|
+
display: 'flex',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
34
|
+
[`&:hover .${layoutColumnDividerRailClassName}`]: {
|
|
35
|
+
background: "var(--ds-background-selected, #E9F2FE)"
|
|
36
|
+
},
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
+
[`&:hover .${layoutColumnDividerThumbClassName}`]: {
|
|
39
|
+
background: "var(--ds-border-focused, #4688EC)"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
// Rail and thumb styles intentionally mirror the breakout resize handle
|
|
43
|
+
// (see .pm-breakout-resize-handle-rail and .pm-breakout-resize-handle-thumb in resizerStyles.ts).
|
|
44
|
+
// If updating these styles, consider keeping both in sync.
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
46
|
+
[`.${layoutColumnDividerRailClassName}`]: {
|
|
47
|
+
width: 7,
|
|
48
|
+
height: '100%',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
alignItems: 'center',
|
|
51
|
+
justifyContent: 'center',
|
|
52
|
+
borderRadius: "var(--ds-radius-small, 4px)",
|
|
53
|
+
transition: 'background-color 0.2s',
|
|
54
|
+
pointerEvents: 'none'
|
|
55
|
+
},
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
57
|
+
[`.${layoutColumnDividerThumbClassName}`]: {
|
|
58
|
+
minWidth: 3,
|
|
59
|
+
height: 'clamp(27px, calc(100% - 32px), 96px)',
|
|
60
|
+
background: "var(--ds-border, #0B120E24)",
|
|
61
|
+
borderRadius: "var(--ds-radius-medium, 6px)",
|
|
62
|
+
pointerEvents: 'none',
|
|
63
|
+
position: 'sticky',
|
|
64
|
+
top: "var(--ds-space-150, 12px)",
|
|
65
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
/**
|
|
69
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
70
|
+
* since the layout section/column spacing changes.
|
|
71
|
+
*/
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
73
|
+
export const layoutColumnDividerStylesNestedDnD = css({
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
75
|
+
[`.${layoutColumnDividerClassName}`]: {
|
|
76
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
77
|
+
marginInline: '0 -7px'
|
|
78
|
+
}
|
|
79
|
+
});
|
|
6
80
|
const selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
|
|
7
81
|
const selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
|
|
8
82
|
const selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
|
|
@@ -51,6 +125,25 @@ export const layoutColumnStylesAdvanced = css({
|
|
|
51
125
|
}
|
|
52
126
|
});
|
|
53
127
|
|
|
128
|
+
/**
|
|
129
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
130
|
+
*/
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
132
|
+
export const layoutColumnResizeStyles = css({
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
134
|
+
'.ProseMirror [data-layout-section]': {
|
|
135
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
136
|
+
'> [data-layout-column][style*="--column-width"]': {
|
|
137
|
+
// Support CSS custom property for smooth resizing during drag
|
|
138
|
+
// When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
|
|
139
|
+
// Using attribute selector for higher specificity than inline styles
|
|
140
|
+
flexBasis: 'var(--column-resize-width, var(--column-width))',
|
|
141
|
+
// Also ensure flex-grow and flex-shrink are reset when using custom width
|
|
142
|
+
flex: 'var(--column-resize-flex, 1)'
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
|
|
54
147
|
/**
|
|
55
148
|
* Layout columns styles when advanced layouts experiment is off
|
|
56
149
|
*/
|
|
@@ -127,6 +220,15 @@ export const layoutSectionStylesAdvanced = css({
|
|
|
127
220
|
position: 'absolute'
|
|
128
221
|
}
|
|
129
222
|
},
|
|
223
|
+
// Column resize divider: always in DOM, hidden via opacity by default
|
|
224
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
225
|
+
[`&.${layoutColumnDividerClassName}`]: {
|
|
226
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
227
|
+
display: 'block !important',
|
|
228
|
+
flex: 'none',
|
|
229
|
+
opacity: 0,
|
|
230
|
+
transition: 'opacity 0.2s'
|
|
231
|
+
},
|
|
130
232
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
131
233
|
'& + [data-layout-column]': {
|
|
132
234
|
margin: 0
|
|
@@ -136,6 +238,19 @@ export const layoutSectionStylesAdvanced = css({
|
|
|
136
238
|
'> [data-layout-column]': {
|
|
137
239
|
margin: 0
|
|
138
240
|
}
|
|
241
|
+
},
|
|
242
|
+
// On hover: fade in drag divider and hide the 1px separator
|
|
243
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
244
|
+
[`.ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]`]: {
|
|
245
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
246
|
+
[`> .ProseMirror-widget.${layoutColumnDividerClassName}`]: {
|
|
247
|
+
opacity: 1
|
|
248
|
+
},
|
|
249
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
250
|
+
[`> .ProseMirror-widget.${layoutColumnDividerClassName} ~ [data-layout-column] [data-layout-content]::before`]: {
|
|
251
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
252
|
+
display: 'none !important'
|
|
253
|
+
}
|
|
139
254
|
}
|
|
140
255
|
});
|
|
141
256
|
|
|
@@ -158,6 +273,10 @@ export const layoutSectionStylesNotAdvanced = css({
|
|
|
158
273
|
'& > .unsupportedBlockView-content-wrap': {
|
|
159
274
|
minWidth: 'initial'
|
|
160
275
|
},
|
|
276
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
277
|
+
[`& > .${layoutColumnDividerClassName}`]: {
|
|
278
|
+
flex: 'none'
|
|
279
|
+
},
|
|
161
280
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
162
281
|
[`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
|
|
163
282
|
flexDirection: 'column'
|
|
@@ -223,12 +223,19 @@ export const listItemHiddenMarkerStyles = css({
|
|
|
223
223
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
224
224
|
marginTop: '0 !important'
|
|
225
225
|
},
|
|
226
|
-
//
|
|
227
|
-
//
|
|
228
|
-
//
|
|
229
|
-
|
|
226
|
+
// Remove top margin from nested taskLists not preceded by a sibling taskItem.
|
|
227
|
+
// The base rule (tasksAndDecisionsStyles) sets margin-top on all nested taskLists,
|
|
228
|
+
// but with flexible indentation a taskList can be the first child with no taskItem above.
|
|
229
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
230
|
+
'div[data-task-list-local-id] > div[data-task-list-local-id]': {
|
|
231
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
232
|
+
marginTop: '0 !important'
|
|
233
|
+
},
|
|
234
|
+
// Restore margin when a nested taskList follows a taskItem
|
|
235
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
236
|
+
'div[data-task-local-id] + div[data-task-list-local-id]': {
|
|
230
237
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
231
|
-
|
|
238
|
+
marginTop: `${"var(--ds-space-050, 4px)"} !important`
|
|
232
239
|
}
|
|
233
240
|
}
|
|
234
241
|
});
|
|
@@ -369,6 +369,9 @@ export const pragmaticResizerStyles = css({
|
|
|
369
369
|
'.pm-breakout-resize-handle-container--right': {
|
|
370
370
|
justifySelf: 'end'
|
|
371
371
|
},
|
|
372
|
+
// Rail and thumb styles intentionally mirror the layout column divider
|
|
373
|
+
// (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
|
|
374
|
+
// If updating these styles, consider keeping both in sync.
|
|
372
375
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
373
376
|
'.pm-breakout-resize-handle-rail': {
|
|
374
377
|
position: 'relative',
|
|
@@ -32,7 +32,7 @@ export const smartCardDiffStyles = css({
|
|
|
32
32
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
33
33
|
[`&[data-testid="show-diff-changed-decoration-node"] .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
34
34
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
35
|
-
boxShadow: `0 0 0 1px var(--diff-decoration-marker-color)`,
|
|
35
|
+
boxShadow: `0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)`,
|
|
36
36
|
borderColor: 'transparent'
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -55,15 +55,21 @@ export const showDiffDeletedNodeStyles = css({
|
|
|
55
55
|
borderColor: 'transparent'
|
|
56
56
|
},
|
|
57
57
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
|
+
[`&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
60
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
61
|
+
borderColor: 'transparent'
|
|
62
|
+
},
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
64
|
[`&.show-diff-deleted-node-traditional.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
59
65
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
60
|
-
boxShadow: `0 0 0
|
|
66
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
61
67
|
borderColor: 'transparent'
|
|
62
68
|
},
|
|
63
69
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
64
70
|
[`&.show-diff-deleted-node.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
65
71
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
66
|
-
boxShadow: `0 0 0
|
|
72
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
67
73
|
borderColor: 'transparent'
|
|
68
74
|
},
|
|
69
75
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -91,11 +97,20 @@ export const showDiffDeletedNodeStyles = css({
|
|
|
91
97
|
}
|
|
92
98
|
},
|
|
93
99
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
100
|
+
'.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper': {
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
102
|
+
'& > div': {
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
104
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
105
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
94
109
|
'.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper': {
|
|
95
110
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
96
111
|
'& > div': {
|
|
97
112
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
98
|
-
boxShadow: `0 0 0
|
|
113
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
99
114
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
100
115
|
}
|
|
101
116
|
},
|
|
@@ -104,7 +119,7 @@ export const showDiffDeletedNodeStyles = css({
|
|
|
104
119
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
105
120
|
'& > div': {
|
|
106
121
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
107
|
-
boxShadow: `0 0 0
|
|
122
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
108
123
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
109
124
|
opacity: 0.6
|
|
110
125
|
}
|
|
@@ -132,7 +147,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
132
147
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
133
148
|
[`&.show-diff-deleted-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
134
149
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
135
|
-
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-
|
|
150
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
136
151
|
borderColor: 'transparent'
|
|
137
152
|
},
|
|
138
153
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -142,15 +157,21 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
142
157
|
borderColor: 'transparent'
|
|
143
158
|
},
|
|
144
159
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
160
|
+
[`&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
161
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
162
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
163
|
+
borderColor: 'transparent'
|
|
164
|
+
},
|
|
165
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
145
166
|
[`&.show-diff-deleted-node-traditional.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
146
167
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
147
|
-
boxShadow: `0 0 0
|
|
168
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
148
169
|
borderColor: 'transparent'
|
|
149
170
|
},
|
|
150
171
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
151
172
|
[`&.show-diff-deleted-node.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
152
173
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
153
|
-
boxShadow: `0 0 0
|
|
174
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
154
175
|
borderColor: 'transparent'
|
|
155
176
|
},
|
|
156
177
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -163,7 +184,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
163
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
164
185
|
'& > div': {
|
|
165
186
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
166
|
-
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-
|
|
187
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
167
188
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
168
189
|
opacity: 0.8
|
|
169
190
|
}
|
|
@@ -173,7 +194,16 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
173
194
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
174
195
|
'& > div': {
|
|
175
196
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
176
|
-
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
197
|
+
boxShadow: `0 0 0 var(--diff-decoration-marker-ring-width, 1px) ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
198
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
202
|
+
'.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper': {
|
|
203
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
204
|
+
'& > div': {
|
|
205
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
206
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
177
207
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
178
208
|
}
|
|
179
209
|
},
|
|
@@ -182,7 +212,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
182
212
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
183
213
|
'& > div': {
|
|
184
214
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
185
|
-
boxShadow: `0 0 0
|
|
215
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
186
216
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
187
217
|
}
|
|
188
218
|
},
|
|
@@ -191,7 +221,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
191
221
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
192
222
|
'& > div': {
|
|
193
223
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
194
|
-
boxShadow: `0 0 0
|
|
224
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
195
225
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
196
226
|
opacity: 0.8
|
|
197
227
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "
|
|
2
|
+
export const version = "0.0.0-development";
|
|
@@ -876,12 +876,12 @@ export function ReactEditorView(props) {
|
|
|
876
876
|
return viewRef.current;
|
|
877
877
|
},
|
|
878
878
|
popupsMountPoint: props.editorProps.popupsMountPoint
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
879
|
+
};
|
|
880
|
+
},
|
|
881
|
+
// viewRef is intentionally omitted from the deps array — it's a stable ref object; the getter reads
|
|
882
|
+
// .current lazily so there's no stale-closure risk.
|
|
883
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
884
|
+
[editorRef, props.editorProps.popupsMountPoint]);
|
|
885
885
|
// eslint-disable-next-line @atlassian/perf-linting/no-inline-context-value, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017
|
|
886
886
|
var reactEditorViewContext = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedReactEditorViewContext : {
|
|
887
887
|
editorRef: editorRef,
|
|
@@ -10,7 +10,7 @@ import { fixExcludes } from './create-editor';
|
|
|
10
10
|
* Adds generic metadata attributes to a DOMOutputSpec array based on the provided node or mark.
|
|
11
11
|
* This function ensures that the DOMOutputSpec is annotated with ProseMirror-specific metadata.
|
|
12
12
|
*
|
|
13
|
-
* @param {
|
|
13
|
+
* @param {object} params - Parameters object.
|
|
14
14
|
* @param {PMNode | PMMark} params.nodeOrMark - The ProseMirror node or mark to extract metadata from.
|
|
15
15
|
* @param {DOMOutputSpec} params.domSpec - The DOMOutputSpec to which attributes will be added.
|
|
16
16
|
* @returns {DOMOutputSpec} The modified DOMOutputSpec with additional metadata.
|
|
@@ -43,7 +43,7 @@ import { gapCursorStyles, gapCursorStylesVisibilityFix } from './styles/gapCurso
|
|
|
43
43
|
import { gridStyles } from './styles/gridStyles';
|
|
44
44
|
import { indentationStyles } from './styles/indentationStyles';
|
|
45
45
|
import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
|
|
46
|
-
import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
|
|
46
|
+
import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnDividerStyles, layoutColumnDividerStylesNestedDnD, layoutColumnResizeStyles, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
|
|
47
47
|
import { hyperLinkFloatingToolbarStyles, linkStyles } from './styles/link';
|
|
48
48
|
import { diffListStyles, getDenseListStyles, listItemHiddenMarkerStyles, listsStyles, listsStylesMarginLayoutShiftFix, listsStylesSafariFix } from './styles/list';
|
|
49
49
|
import { mediaAlignmentStyles, mediaCaptionStyles, mediaDangerStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
|
|
@@ -385,11 +385,17 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
385
385
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
386
386
|
layoutSectionStylesAdvanced :
|
|
387
387
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
388
|
-
layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true)
|
|
388
|
+
layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
|
|
389
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
390
|
+
layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') &&
|
|
391
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
392
|
+
layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ?
|
|
389
393
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
390
394
|
layoutColumnStylesAdvanced :
|
|
391
395
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
392
|
-
layoutColumnStylesNotAdvanced,
|
|
396
|
+
layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
|
|
397
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
398
|
+
layoutColumnResizeStyles,
|
|
393
399
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
394
400
|
editorExperiment('advanced_layouts', true) ?
|
|
395
401
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -87,8 +87,8 @@ export var expandStylesBase = css({
|
|
|
87
87
|
marginLeft: "var(--ds-space-050, 4px)",
|
|
88
88
|
display: 'flow-root',
|
|
89
89
|
/* The follow rules inside @supports block are added as a part of ED-8893
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
The fix is targeting mobile bridge on iOS 12 or below,
|
|
91
|
+
We should consider remove this fix when we no longer support iOS 12 */
|
|
92
92
|
'@supports not (display: flow-root)': {
|
|
93
93
|
width: '100%',
|
|
94
94
|
boxSizing: 'border-box'
|
|
@@ -424,6 +424,6 @@ export var getExtensionStyles = function getExtensionStyles(contentMode) {
|
|
|
424
424
|
};
|
|
425
425
|
|
|
426
426
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
427
|
-
export var extensionDiffStyles = css(_defineProperty({}, ".show-diff-changed-decoration-node > span
|
|
428
|
-
boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)"
|
|
427
|
+
export var extensionDiffStyles = css(_defineProperty({}, ".show-diff-changed-decoration-node > span .extension-container", {
|
|
428
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)"
|
|
429
429
|
}));
|
|
@@ -4,6 +4,63 @@ import { css } from '@emotion/react';
|
|
|
4
4
|
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
5
5
|
var gridMediumMaxWidth = 1024;
|
|
6
6
|
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
7
|
+
|
|
8
|
+
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
|
|
9
|
+
var layoutColumnDividerClassName = 'layout-column-divider';
|
|
10
|
+
var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
|
|
11
|
+
var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Styles for the column resize divider widget DOM elements.
|
|
15
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
16
|
+
* Applied only when advanced_layouts experiment is on.
|
|
17
|
+
*/
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
19
|
+
export var layoutColumnDividerStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(layoutColumnDividerClassName), _defineProperty(_defineProperty({
|
|
20
|
+
// Negative margin removes the applied 'gap' from the parent's flex box
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
22
|
+
marginInline: '-15px 0px',
|
|
23
|
+
flexShrink: 0,
|
|
24
|
+
boxSizing: 'content-box',
|
|
25
|
+
cursor: 'col-resize',
|
|
26
|
+
position: 'relative',
|
|
27
|
+
zIndex: 2,
|
|
28
|
+
alignSelf: 'stretch',
|
|
29
|
+
display: 'flex',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
justifyContent: 'center'
|
|
32
|
+
}, "&:hover .".concat(layoutColumnDividerRailClassName), {
|
|
33
|
+
background: "var(--ds-background-selected, #E9F2FE)"
|
|
34
|
+
}), "&:hover .".concat(layoutColumnDividerThumbClassName), {
|
|
35
|
+
background: "var(--ds-border-focused, #4688EC)"
|
|
36
|
+
})), ".".concat(layoutColumnDividerRailClassName), {
|
|
37
|
+
width: 7,
|
|
38
|
+
height: '100%',
|
|
39
|
+
display: 'flex',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
borderRadius: "var(--ds-radius-small, 4px)",
|
|
43
|
+
transition: 'background-color 0.2s',
|
|
44
|
+
pointerEvents: 'none'
|
|
45
|
+
}), ".".concat(layoutColumnDividerThumbClassName), {
|
|
46
|
+
minWidth: 3,
|
|
47
|
+
height: 'clamp(27px, calc(100% - 32px), 96px)',
|
|
48
|
+
background: "var(--ds-border, #0B120E24)",
|
|
49
|
+
borderRadius: "var(--ds-radius-medium, 6px)",
|
|
50
|
+
pointerEvents: 'none',
|
|
51
|
+
position: 'sticky',
|
|
52
|
+
top: "var(--ds-space-150, 12px)",
|
|
53
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
54
|
+
}));
|
|
55
|
+
/**
|
|
56
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
57
|
+
* since the layout section/column spacing changes.
|
|
58
|
+
*/
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
60
|
+
export var layoutColumnDividerStylesNestedDnD = css(_defineProperty({}, ".".concat(layoutColumnDividerClassName), {
|
|
61
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
62
|
+
marginInline: '0 -7px'
|
|
63
|
+
}));
|
|
7
64
|
var selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
|
|
8
65
|
var selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
|
|
9
66
|
var selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
|
|
@@ -48,6 +105,25 @@ export var layoutColumnStylesAdvanced = css({
|
|
|
48
105
|
}])
|
|
49
106
|
});
|
|
50
107
|
|
|
108
|
+
/**
|
|
109
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
110
|
+
*/
|
|
111
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
112
|
+
export var layoutColumnResizeStyles = css({
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
114
|
+
'.ProseMirror [data-layout-section]': {
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
116
|
+
'> [data-layout-column][style*="--column-width"]': {
|
|
117
|
+
// Support CSS custom property for smooth resizing during drag
|
|
118
|
+
// When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
|
|
119
|
+
// Using attribute selector for higher specificity than inline styles
|
|
120
|
+
flexBasis: 'var(--column-resize-width, var(--column-width))',
|
|
121
|
+
// Also ensure flex-grow and flex-shrink are reset when using custom width
|
|
122
|
+
flex: 'var(--column-resize-flex, 1)'
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
|
|
51
127
|
/**
|
|
52
128
|
* Layout columns styles when advanced layouts experiment is off
|
|
53
129
|
*/
|
|
@@ -99,11 +175,11 @@ export var layoutColumnResponsiveStyles = css({
|
|
|
99
175
|
* Layout section styles when advanced layouts experiment is on
|
|
100
176
|
*/
|
|
101
177
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-exported-styles
|
|
102
|
-
export var layoutSectionStylesAdvanced = css({
|
|
178
|
+
export var layoutSectionStylesAdvanced = css(_defineProperty({
|
|
103
179
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
104
180
|
'.ProseMirror .layout-section-container [data-layout-section]': {
|
|
105
181
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
106
|
-
'> .ProseMirror-widget': {
|
|
182
|
+
'> .ProseMirror-widget': _defineProperty(_defineProperty({
|
|
107
183
|
flex: 'none',
|
|
108
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
109
185
|
display: 'contents !important',
|
|
@@ -121,18 +197,27 @@ export var layoutSectionStylesAdvanced = css({
|
|
|
121
197
|
'[data-drop-target-for-element]': {
|
|
122
198
|
position: 'absolute'
|
|
123
199
|
}
|
|
124
|
-
},
|
|
125
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
126
|
-
'& + [data-layout-column]': {
|
|
127
|
-
margin: 0
|
|
128
200
|
}
|
|
129
|
-
},
|
|
201
|
+
}, "&.".concat(layoutColumnDividerClassName), {
|
|
202
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
203
|
+
display: 'block !important',
|
|
204
|
+
flex: 'none',
|
|
205
|
+
opacity: 0,
|
|
206
|
+
transition: 'opacity 0.2s'
|
|
207
|
+
}), '& + [data-layout-column]', {
|
|
208
|
+
margin: 0
|
|
209
|
+
}),
|
|
130
210
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
131
211
|
'> [data-layout-column]': {
|
|
132
212
|
margin: 0
|
|
133
213
|
}
|
|
134
214
|
}
|
|
135
|
-
})
|
|
215
|
+
}, ".ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]", _defineProperty(_defineProperty({}, "> .ProseMirror-widget.".concat(layoutColumnDividerClassName), {
|
|
216
|
+
opacity: 1
|
|
217
|
+
}), "> .ProseMirror-widget.".concat(layoutColumnDividerClassName, " ~ [data-layout-column] [data-layout-content]::before"), {
|
|
218
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
219
|
+
display: 'none !important'
|
|
220
|
+
})));
|
|
136
221
|
|
|
137
222
|
/**
|
|
138
223
|
* Layout section styles when advanced layouts experiment is off
|
|
@@ -140,7 +225,7 @@ export var layoutSectionStylesAdvanced = css({
|
|
|
140
225
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
141
226
|
export var layoutSectionStylesNotAdvanced = css({
|
|
142
227
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
143
|
-
'.ProseMirror [data-layout-section]': _defineProperty({
|
|
228
|
+
'.ProseMirror [data-layout-section]': _defineProperty(_defineProperty({
|
|
144
229
|
position: 'relative',
|
|
145
230
|
display: 'flex',
|
|
146
231
|
flexDirection: 'row',
|
|
@@ -153,7 +238,9 @@ export var layoutSectionStylesNotAdvanced = css({
|
|
|
153
238
|
'& > .unsupportedBlockView-content-wrap': {
|
|
154
239
|
minWidth: 'initial'
|
|
155
240
|
}
|
|
156
|
-
}, "
|
|
241
|
+
}, "& > .".concat(layoutColumnDividerClassName), {
|
|
242
|
+
flex: 'none'
|
|
243
|
+
}), "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
|
|
157
244
|
flexDirection: 'column'
|
|
158
245
|
})
|
|
159
246
|
});
|
|
@@ -219,12 +219,19 @@ export var listItemHiddenMarkerStyles = css({
|
|
|
219
219
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
220
220
|
marginTop: '0 !important'
|
|
221
221
|
},
|
|
222
|
-
//
|
|
223
|
-
//
|
|
224
|
-
//
|
|
225
|
-
|
|
222
|
+
// Remove top margin from nested taskLists not preceded by a sibling taskItem.
|
|
223
|
+
// The base rule (tasksAndDecisionsStyles) sets margin-top on all nested taskLists,
|
|
224
|
+
// but with flexible indentation a taskList can be the first child with no taskItem above.
|
|
225
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
226
|
+
'div[data-task-list-local-id] > div[data-task-list-local-id]': {
|
|
227
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
228
|
+
marginTop: '0 !important'
|
|
229
|
+
},
|
|
230
|
+
// Restore margin when a nested taskList follows a taskItem
|
|
231
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
232
|
+
'div[data-task-local-id] + div[data-task-list-local-id]': {
|
|
226
233
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
227
|
-
|
|
234
|
+
marginTop: "var(--ds-space-050, 4px)".concat(" !important")
|
|
228
235
|
}
|
|
229
236
|
}
|
|
230
237
|
});
|
|
@@ -314,6 +314,9 @@ export var pragmaticResizerStyles = css({
|
|
|
314
314
|
'.pm-breakout-resize-handle-container--right': {
|
|
315
315
|
justifySelf: 'end'
|
|
316
316
|
},
|
|
317
|
+
// Rail and thumb styles intentionally mirror the layout column divider
|
|
318
|
+
// (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
|
|
319
|
+
// If updating these styles, consider keeping both in sync.
|
|
317
320
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
318
321
|
'.pm-breakout-resize-handle-rail': {
|
|
319
322
|
position: 'relative',
|