@atlaskit/editor-core 207.12.3 → 207.13.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 (49) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/CollapsedEditor/index.js +1 -2
  3. package/dist/cjs/composable-editor/BaseThemeWrapper.js +1 -2
  4. package/dist/cjs/composable-editor/composable-editor.js +1 -2
  5. package/dist/cjs/create-editor/ReactEditorView.js +1 -2
  6. package/dist/cjs/presets/context.js +1 -2
  7. package/dist/cjs/ui/Appearance/Chromeless.js +1 -2
  8. package/dist/cjs/ui/Appearance/Comment/Comment.js +1 -2
  9. package/dist/cjs/ui/Appearance/Comment/Toolbar.js +1 -2
  10. package/dist/cjs/ui/Appearance/FullPage/FullPage.js +1 -2
  11. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +1 -2
  12. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js +1 -2
  13. package/dist/cjs/ui/ChromeCollapsed/index.js +1 -2
  14. package/dist/cjs/ui/ContentStyles/index.js +5 -6
  15. package/dist/cjs/ui/ContentStyles/layout.js +5 -5
  16. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +14 -5
  17. package/dist/cjs/ui/EditorContentContainer/styles/blockTypeStyles.js +294 -0
  18. package/dist/cjs/ui/EditorContentContainer/styles/editorUGCTokenStyles.js +59 -0
  19. package/dist/cjs/ui/EditorContentContainer/styles/layout.js +12 -12
  20. package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +3 -2
  21. package/dist/cjs/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js +1 -2
  22. package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js +1 -2
  23. package/dist/cjs/version-wrapper.js +1 -1
  24. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +22 -3
  25. package/dist/es2019/ui/EditorContentContainer/styles/blockTypeStyles.js +287 -0
  26. package/dist/es2019/ui/EditorContentContainer/styles/editorUGCTokenStyles.js +53 -0
  27. package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +2 -1
  28. package/dist/es2019/version-wrapper.js +1 -1
  29. package/dist/esm/ui/ContentStyles/index.js +4 -4
  30. package/dist/esm/ui/ContentStyles/layout.js +5 -5
  31. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +11 -2
  32. package/dist/esm/ui/EditorContentContainer/styles/blockTypeStyles.js +287 -0
  33. package/dist/esm/ui/EditorContentContainer/styles/editorUGCTokenStyles.js +53 -0
  34. package/dist/esm/ui/EditorContentContainer/styles/layout.js +12 -12
  35. package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +2 -1
  36. package/dist/esm/version-wrapper.js +1 -1
  37. package/dist/types/create-editor/create-universal-preset.d.ts +15 -0
  38. package/dist/types/presets/universal.d.ts +15 -0
  39. package/dist/types/presets/useUniversalPreset.d.ts +15 -0
  40. package/dist/types/ui/EditorContentContainer/styles/blockTypeStyles.d.ts +4 -0
  41. package/dist/types/ui/EditorContentContainer/styles/editorUGCTokenStyles.d.ts +18 -0
  42. package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
  43. package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +18 -0
  44. package/dist/types-ts4.5/presets/universal.d.ts +18 -0
  45. package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +18 -0
  46. package/dist/types-ts4.5/ui/EditorContentContainer/styles/blockTypeStyles.d.ts +4 -0
  47. package/dist/types-ts4.5/ui/EditorContentContainer/styles/editorUGCTokenStyles.d.ts +18 -0
  48. package/dist/types-ts4.5/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
  49. package/package.json +5 -9
@@ -0,0 +1,287 @@
1
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
2
+ import { css } from '@emotion/react';
3
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
4
+ export const blocktypeStyles = css({
5
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
6
+ '.ProseMirror': {
7
+ // Block Quote Shared Styles
8
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
9
+ '& blockquote': {
10
+ boxSizing: 'border-box',
11
+ color: 'inherit',
12
+ width: '100%',
13
+ display: 'inline-block',
14
+ paddingLeft: "var(--ds-space-200, 16px)",
15
+ borderLeftWidth: '2px',
16
+ borderLeftStyle: 'solid',
17
+ borderLeftColor: "var(--ds-border, #091E4224)",
18
+ margin: '0.75rem 0 0 0',
19
+ // From https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
20
+ marginRight: 0,
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
22
+ '[dir="rtl"] &': {
23
+ paddingLeft: 0,
24
+ paddingRight: "var(--ds-space-200, 16px)"
25
+ },
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
27
+ '&:first-child': {
28
+ marginTop: 0
29
+ },
30
+ '&::before': {
31
+ content: "''"
32
+ },
33
+ '&::after': {
34
+ content: 'none'
35
+ },
36
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
37
+ '& p': {
38
+ display: 'block'
39
+ },
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
41
+ '& table, & table:last-child': {
42
+ display: 'inline-table'
43
+ },
44
+ // Workaround for overriding the inline-block display on last child of a blockquote set in CSS reset.
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
46
+ '> .code-block:last-child, >.mediaSingleView-content-wrap:last-child, >.mediaGroupView-content-wrap:last-child': {
47
+ display: 'block'
48
+ },
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
50
+ '> .extensionView-content-wrap:last-child': {
51
+ display: 'block'
52
+ }
53
+ },
54
+ // Headings Shared Styles -> Heading With Alignment Styles
55
+ // Override marginTop: 0 with default margin found in headingsSharedStyles for first heading in alignment block that is not the first child
56
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
57
+ '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
59
+ '> h1:first-child': {
60
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
61
+ marginTop: '1.667em'
62
+ },
63
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
64
+ '> h2:first-child': {
65
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
66
+ marginTop: '1.8em'
67
+ },
68
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
69
+ '> h3:first-child': {
70
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
71
+ marginTop: '2em'
72
+ },
73
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
74
+ '> h4:first-child': {
75
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
76
+ marginTop: '1.357em'
77
+ },
78
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
79
+ '> h5:first-child': {
80
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
81
+ marginTop: '1.667em'
82
+ },
83
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
84
+ '> h6:first-child': {
85
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
86
+ marginTop: '1.455em'
87
+ }
88
+ },
89
+ // Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
90
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
91
+ '.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
92
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
93
+ '> :is(h1, h2, h3, h4, h5, h6):first-child': {
94
+ marginTop: '0'
95
+ }
96
+ }
97
+ }
98
+ });
99
+
100
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
101
+ export const blocktypeStyles_fg_platform_editor_typography_ugc = css({
102
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
103
+ '.ProseMirror': {
104
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
105
+ '& h1': {
106
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
107
+ font: 'var(--editor-font-ugc-token-heading-h1)',
108
+ marginBottom: 0,
109
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
110
+ marginTop: '1.45833em',
111
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
112
+ '& strong': {
113
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
114
+ fontWeight: 'var(--editor-font-ugc-token-weight-heading-bold)'
115
+ }
116
+ },
117
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
118
+ '& h2': {
119
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
120
+ font: 'var(--editor-font-ugc-token-heading-h2)',
121
+ marginBottom: 0,
122
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
123
+ marginTop: '1.4em',
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
125
+ '& strong': {
126
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
127
+ fontWeight: 'var(--editor-font-ugc-token-weight-heading-bold)'
128
+ }
129
+ },
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
131
+ '& h3': {
132
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
133
+ font: 'var(--editor-font-ugc-token-heading-h3)',
134
+ marginBottom: 0,
135
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
136
+ marginTop: '1.31249em',
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
138
+ '& strong': {
139
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
140
+ fontWeight: 'var(--editor-font-ugc-token-weight-heading-bold)'
141
+ }
142
+ },
143
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
144
+ '& h4': {
145
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
146
+ font: 'var(--editor-font-ugc-token-heading-h4)',
147
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
148
+ marginTop: '1.25em',
149
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
150
+ '& strong': {
151
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
152
+ fontWeight: 'var(--editor-font-ugc-token-weight-heading-bold)'
153
+ }
154
+ },
155
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
156
+ '& h5': {
157
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
158
+ font: 'var(--editor-font-ugc-token-heading-h5)',
159
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
160
+ marginTop: '1.45833em',
161
+ textTransform: 'none',
162
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
163
+ '& strong': {
164
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
165
+ fontWeight: 'var(--editor-font-ugc-token-weight-heading-bold)'
166
+ }
167
+ },
168
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
169
+ '& h6': {
170
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
171
+ font: 'var(--editor-font-ugc-token-heading-h6)',
172
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
173
+ marginTop: '1.59091em',
174
+ textTransform: 'none',
175
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
176
+ '& strong': {
177
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
178
+ fontWeight: 'var(--editor-font-ugc-token-weight-heading-bold)'
179
+ }
180
+ }
181
+ }
182
+ });
183
+
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
185
+ export const blocktypeStyles_without_fg_platform_editor_typography_ugc = css({
186
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
187
+ '.ProseMirror': {
188
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
189
+ '& h1': {
190
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
191
+ fontSize: 'calc(24em / 14)',
192
+ fontStyle: 'inherit',
193
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
194
+ lineHeight: 'calc(28 / 24)',
195
+ color: "var(--ds-text, #172B4D)",
196
+ fontWeight: "var(--ds-font-weight-medium, 500)",
197
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
198
+ letterSpacing: `-0.01em`,
199
+ marginBottom: 0,
200
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
201
+ marginTop: '1.667em'
202
+ },
203
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
204
+ '& h2': {
205
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
206
+ fontSize: 'calc(20em / 14)',
207
+ fontStyle: 'inherit',
208
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
209
+ lineHeight: 'calc(24 / 20)',
210
+ color: "var(--ds-text, #172B4D)",
211
+ fontWeight: "var(--ds-font-weight-medium, 500)",
212
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
213
+ letterSpacing: `-0.008em`,
214
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
215
+ marginTop: '1.8em',
216
+ marginBottom: 0
217
+ },
218
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
219
+ '& h3': {
220
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
221
+ fontSize: 'calc(16em / 14)',
222
+ fontStyle: 'inherit',
223
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
224
+ lineHeight: 'calc(20 / 16)',
225
+ color: "var(--ds-text, #172B4D)",
226
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
227
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
228
+ letterSpacing: `-0.006em`,
229
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
230
+ marginTop: '2em',
231
+ marginBottom: 0
232
+ },
233
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
234
+ '& h4': {
235
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
236
+ fontSize: 'calc(14em / 14)',
237
+ fontStyle: 'inherit',
238
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
239
+ lineHeight: 'calc(16 / 14)',
240
+ color: "var(--ds-text, #172B4D)",
241
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
242
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
243
+ letterSpacing: `-0.003em`,
244
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
245
+ marginTop: '1.357em'
246
+ },
247
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
248
+ '& h5': {
249
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
250
+ fontSize: 'calc(12em / 14)',
251
+ fontStyle: 'inherit',
252
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
253
+ lineHeight: 'calc(16 / 12)',
254
+ color: "var(--ds-text, #172B4D)",
255
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
256
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
257
+ marginTop: '1.667em',
258
+ textTransform: 'none'
259
+ },
260
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
261
+ '& h6': {
262
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
263
+ fontSize: 'calc(11em / 14)',
264
+ fontStyle: 'inherit',
265
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
266
+ lineHeight: 'calc(16 / 11)',
267
+ color: "var(--ds-text-subtlest, #626F86)",
268
+ fontWeight: "var(--ds-font-weight-bold, 700)",
269
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
270
+ marginTop: '1.455em',
271
+ textTransform: 'none'
272
+ }
273
+ }
274
+ });
275
+
276
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
277
+ export const blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes = css({
278
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
279
+ '.ak-editor-content-area.appearance-full-page .ProseMirror blockquote': {
280
+ paddingLeft: "var(--ds-space-250, 20px)"
281
+ },
282
+ // Don't want extra padding for inline editor (nested)
283
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
284
+ '.ak-editor-content-area .ak-editor-content-area .ProseMirror blockquote': {
285
+ paddingLeft: "var(--ds-space-200, 16px)"
286
+ }
287
+ });
@@ -0,0 +1,53 @@
1
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
2
+ import { css } from '@emotion/react';
3
+
4
+ /**
5
+ * Use when fg('platform_editor_typography_ugc') is disabled.
6
+ */
7
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
8
+ export const editorUGCTokensDefault = css({
9
+ '--editor-font-ugc-token-heading-h1': 'normal 500 1.71429em/1.16667 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
10
+ '--editor-font-ugc-token-heading-h2': 'normal 500 1.42857em/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
11
+ '--editor-font-ugc-token-heading-h3': 'normal 600 1.14286em/1.25 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
12
+ '--editor-font-ugc-token-heading-h4': 'normal 600 1em/1.14286 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
13
+ '--editor-font-ugc-token-heading-h5': 'normal 600 0.857143em/1.33333 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
14
+ '--editor-font-ugc-token-heading-h6': 'normal 700 0.785714em/1.45455 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
15
+ '--editor-font-ugc-token-body': 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
16
+ '--editor-font-ugc-token-weight-heading-bold': '700'
17
+ });
18
+
19
+ /**
20
+ * Use when fg('platform_editor_typography_ugc') is enabled, but none of the following are enabled:
21
+ * - fg('platform-dst-jira-web-fonts')
22
+ * - fg('confluence_typography_refreshed')
23
+ * - fg('atlas_editor_typography_refreshed')
24
+ */
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
26
+ export const editorUGCTokensModernized = css({
27
+ '--editor-font-ugc-token-heading-h1': 'normal 600 1.71429em/1.16667 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
28
+ '--editor-font-ugc-token-heading-h2': 'normal 600 1.42857em/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
29
+ '--editor-font-ugc-token-heading-h3': 'normal 600 1.14286em/1.25 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
30
+ '--editor-font-ugc-token-heading-h4': 'normal 600 1em/1.14286 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
31
+ '--editor-font-ugc-token-heading-h5': 'normal 600 0.857143em/1.33333 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
32
+ '--editor-font-ugc-token-heading-h6': 'normal 600 0.785714em/1.45455 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
33
+ '--editor-font-ugc-token-body': 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
34
+ '--editor-font-ugc-token-weight-heading-bold': '700'
35
+ });
36
+
37
+ /**
38
+ * Use when fg('platform_editor_typography_ugc') is enabled and one of the following are enabled:
39
+ * - fg('platform-dst-jira-web-fonts')
40
+ * - fg('confluence_typography_refreshed')
41
+ * - fg('atlas_editor_typography_refreshed')
42
+ */
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
44
+ export const editorUGCTokensRefreshed = css({
45
+ '--editor-font-ugc-token-heading-h1': 'normal 600 1.71429em/1.16667 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
46
+ '--editor-font-ugc-token-heading-h2': 'normal 600 1.42857em/1.2 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
47
+ '--editor-font-ugc-token-heading-h3': 'normal 600 1.14286em/1.25 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
48
+ '--editor-font-ugc-token-heading-h4': 'normal 600 1em/1.14286 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
49
+ '--editor-font-ugc-token-heading-h5': 'normal 600 0.857143em/1.33333 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
50
+ '--editor-font-ugc-token-heading-h6': 'normal 600 0.785714em/1.45455 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
51
+ '--editor-font-ugc-token-body': 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
52
+ '--editor-font-ugc-token-weight-heading-bold': '700'
53
+ });
@@ -7,6 +7,7 @@ export const resizerHandleClassName = 'resizer-handle';
7
7
  export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
8
8
  export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
9
9
  export const resizerDangerClassName = `${resizerHandleClassName}-danger`;
10
+ export const resizerHandleThumbWidth = 3;
10
11
  export const handleWrapperClass = 'resizer-handle-wrapper';
11
12
 
12
13
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, Seems perfectly safe to autofix, but comments would be lost…
@@ -292,7 +293,7 @@ export const pragmaticResizerStyles = css({
292
293
  },
293
294
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
294
295
  '.pm-breakout-resize-handle-inner': {
295
- minWidth: 3,
296
+ minWidth: `${resizerHandleThumbWidth}px`,
296
297
  // copied from resizeStyles.clamped
297
298
  height: 'clamp(27px, calc(100% - 32px), 96px)',
298
299
  background: "var(--ds-border, #091E4224)",
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "207.12.3";
2
+ export const version = "207.13.0";
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
3
3
  /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
4
4
  /* eslint-disable react-hooks/rules-of-hooks */
5
5
  /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -149,9 +149,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
149
149
  // Under editor experiment platform_editor_core_static_emotion
150
150
  // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
151
151
  var legacyContentStyles = function legacyContentStyles(props) {
152
- return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
152
+ return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
153
153
  theme: props.theme
154
- }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
154
+ }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
155
155
  exposure: false
156
156
  }) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
157
157
  exposure: false
@@ -165,7 +165,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
165
165
  exposure: false
166
166
  }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
167
167
  exposure: false
168
- }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
168
+ }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
169
169
  };
170
170
  var listLayoutShiftFix = css({
171
171
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
3
3
  /**
4
4
  * TODO ED-26957 - remove legacy styles when static emotion refactor is complete
5
5
  * We are moving this to new location under FF: platform_editor_core_static_emotion
@@ -53,23 +53,23 @@ var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
53
53
  var layoutWithSeparatorBorderResponsiveStyles = function layoutWithSeparatorBorderResponsiveStyles(breakpoint, viewMode
54
54
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
55
55
  ) {
56
- return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, breakpoint, rowSeparatorStyles(viewMode));
56
+ return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, breakpoint, rowSeparatorStyles(viewMode));
57
57
  };
58
58
 
59
59
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
60
60
  var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
61
61
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
62
- return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t&.selected [data-layout-column]:not(:first-of-type),\n\t\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\n\t\t&.selected.danger [data-layout-section] {\n\t\t\tbackground-color: ", ";\n\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", ":not(.danger) [data-layout-section] {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\tbackground-color: ", ";\n\t\t\t[data-layout-column] {\n\t\t\t\t", "\n\t\t\t\tborder: 0px;\n\t\t\t\t::before {\n\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t}\n\t\t\t}\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), columnSeparatorStyles(viewMode), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, columnSeparatorStyles(viewMode), akEditorSelectedNodeClassName, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), columnSeparatorStyles(viewMode));
62
+ return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t&.selected [data-layout-column]:not(:first-of-type),\n\t\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\n\t\t&.selected.danger [data-layout-section] {\n\t\t\tbackground-color: ", ";\n\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", ":not(.danger) [data-layout-section] {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\tbackground-color: ", ";\n\t\t\t[data-layout-column] {\n\t\t\t\t", "\n\t\t\t\tborder: 0px;\n\t\t\t\t::before {\n\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t}\n\t\t\t}\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), columnSeparatorStyles(viewMode), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, columnSeparatorStyles(viewMode), akEditorSelectedNodeClassName, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), columnSeparatorStyles(viewMode));
63
63
  };
64
64
 
65
65
  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
66
66
  var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
67
67
  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
68
- css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t\t/* not resized layout in full-width editor */\n\t\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* not resized layout in fixed-width editor */\n\t\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* resized layout in full/fixed-width editor */\n\t\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t\t.layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), layoutWithSeparatorBorderResponsiveStyles(724, viewMode), layoutWithSeparatorBorderResponsiveStyles(788, viewMode), layoutWithSeparatorBorderResponsiveStyles(820, viewMode))
68
+ css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t\t/* not resized layout in full-width editor */\n\t\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* not resized layout in fixed-width editor */\n\t\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* resized layout in full/fixed-width editor */\n\t\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t\t.layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), layoutWithSeparatorBorderResponsiveStyles(724, viewMode), layoutWithSeparatorBorderResponsiveStyles(788, viewMode), layoutWithSeparatorBorderResponsiveStyles(820, viewMode))
69
69
  );
70
70
  };
71
71
 
72
72
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
73
73
  export var layoutStyles = function layoutStyles(viewMode) {
74
- return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
74
+ return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
75
75
  };
@@ -14,7 +14,6 @@ import { css, jsx, useTheme } from '@emotion/react';
14
14
  import { browser } from '@atlaskit/editor-common/browser';
15
15
  import { gapCursorStyles } from '@atlaskit/editor-common/selection';
16
16
  import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
17
- import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
18
17
  import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
19
18
  import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
20
19
  import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
@@ -34,9 +33,11 @@ import { aiPanelBaseFirefoxStyles, aiPanelBaseStyles, aiPanelDarkFirefoxStyles,
34
33
  import { annotationStyles } from './styles/annotationStyles';
35
34
  import { backgroundColorStyles } from './styles/backgroundColorStyles';
36
35
  import { blockMarksStyles } from './styles/blockMarksStyles';
36
+ import { blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc } from './styles/blockTypeStyles';
37
37
  import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
38
38
  import { codeMarkStyles } from './styles/codeMarkStyles';
39
39
  import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
40
+ import { editorUGCTokensDefault, editorUGCTokensModernized, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
40
41
  import { embedCardStyles } from './styles/embedCardStyles';
41
42
  import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
42
43
  import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlockNodeStyles';
@@ -98,7 +99,15 @@ var akEditorBreakpointForSmallDevice = "1266px";
98
99
 
99
100
  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
100
101
  var contentStyles = function contentStyles() {
101
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n ", "\n\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, telepointerColorAndCommonStyle, gapCursorStyles, panelStyles(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
102
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n \t", "\n\n\n \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n ", "\n\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, !fg('platform_editor_typography_ugc') && editorUGCTokensDefault,
103
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
104
+ fg('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
105
+ fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && editorUGCTokensRefreshed
106
+ /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */,
107
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
108
+ fg('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
109
+ !(fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && editorUGCTokensModernized
110
+ /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, blocktypeStyles, fg('platform_editor_typography_ugc') && blocktypeStyles_fg_platform_editor_typography_ugc, !fg('platform_editor_typography_ugc') && blocktypeStyles_without_fg_platform_editor_typography_ugc, fg('platform_editor_nested_dnd_styles_changes') && blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, telepointerColorAndCommonStyle, gapCursorStyles, panelStyles(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
102
111
  exposure: false
103
112
  }) && vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
104
113
  exposure: false