@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.
Files changed (42) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/create-editor/ReactEditorView.js +6 -6
  3. package/dist/cjs/create-editor/create-schema.js +1 -1
  4. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +8 -2
  5. package/dist/cjs/ui/EditorContentContainer/styles/expandStyles.js +2 -2
  6. package/dist/cjs/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
  7. package/dist/cjs/ui/EditorContentContainer/styles/layout.js +98 -11
  8. package/dist/cjs/ui/EditorContentContainer/styles/list.js +12 -5
  9. package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
  10. package/dist/cjs/ui/EditorContentContainer/styles/smartCardStyles.js +36 -14
  11. package/dist/cjs/version-wrapper.js +1 -1
  12. package/dist/es2019/create-editor/ReactEditorView.js +2 -2
  13. package/dist/es2019/create-editor/create-schema.js +1 -1
  14. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +9 -3
  15. package/dist/es2019/ui/EditorContentContainer/styles/expandStyles.js +2 -2
  16. package/dist/es2019/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
  17. package/dist/es2019/ui/EditorContentContainer/styles/layout.js +119 -0
  18. package/dist/es2019/ui/EditorContentContainer/styles/list.js +12 -5
  19. package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
  20. package/dist/es2019/ui/EditorContentContainer/styles/smartCardStyles.js +42 -12
  21. package/dist/es2019/version-wrapper.js +1 -1
  22. package/dist/esm/create-editor/ReactEditorView.js +6 -6
  23. package/dist/esm/create-editor/create-schema.js +1 -1
  24. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +9 -3
  25. package/dist/esm/ui/EditorContentContainer/styles/expandStyles.js +2 -2
  26. package/dist/esm/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
  27. package/dist/esm/ui/EditorContentContainer/styles/layout.js +97 -10
  28. package/dist/esm/ui/EditorContentContainer/styles/list.js +12 -5
  29. package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
  30. package/dist/esm/ui/EditorContentContainer/styles/smartCardStyles.js +36 -14
  31. package/dist/esm/version-wrapper.js +1 -1
  32. package/dist/types/create-editor/create-schema.d.ts +1 -1
  33. package/dist/types/create-editor/create-universal-preset.d.ts +6 -0
  34. package/dist/types/presets/universal.d.ts +7 -4
  35. package/dist/types/presets/useUniversalPreset.d.ts +6 -0
  36. package/dist/types/ui/EditorContentContainer/styles/layout.d.ts +15 -0
  37. package/dist/types-ts4.5/create-editor/create-schema.d.ts +1 -1
  38. package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +6 -0
  39. package/dist/types-ts4.5/presets/universal.d.ts +7 -4
  40. package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +6 -0
  41. package/dist/types-ts4.5/ui/EditorContentContainer/styles/layout.d.ts +15 -0
  42. 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
- // Collapse wrapper task items (empty task items followed by a sibling nested task list)
227
- // Only hides empty task items that are actual wrappers, not regular empty task items being edited
228
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
229
- '[data-prosemirror-node-name="taskItem"]:has([data-empty="true"]):has(+ [data-node-type="actionList"])': {
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
- display: 'none !important'
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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-gray, #7D818A)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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-gray, #7D818A)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
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 = "217.9.3";
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
- // viewRef is intentionally omitted from the deps array — it's a stable ref object; the getter reads
881
- // .current lazily so there's no stale-closure risk.
882
- // eslint-disable-next-line react-hooks/exhaustive-deps
883
- ;
884
- }, [editorRef, props.editorProps.popupsMountPoint]);
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 {Object} params - Parameters object.
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
- 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 */
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 > .extension-container", {
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
- }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
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
- // Collapse wrapper task items (empty task items followed by a sibling nested task list)
223
- // Only hides empty task items that are actual wrappers, not regular empty task items being edited
224
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
225
- '[data-prosemirror-node-name="taskItem"]:has([data-empty="true"]):has(+ [data-node-type="actionList"])': {
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
- display: 'none !important'
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',