@atlaskit/editor-core 217.8.3 → 217.9.1

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 (45) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/presets/universal.js +4 -2
  3. package/dist/cjs/ui/Appearance/Comment/Comment.js +8 -1
  4. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +7 -2
  5. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +15 -8
  6. package/dist/cjs/ui/EditorContentContainer/styles/codeMarkStyles.js +9 -1
  7. package/dist/cjs/ui/EditorContentContainer/styles/expandStyles.js +17 -9
  8. package/dist/cjs/ui/EditorContentContainer/styles/syncBlockStyles.js +12 -4
  9. package/dist/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +1 -343
  10. package/dist/cjs/version-wrapper.js +1 -1
  11. package/dist/es2019/presets/universal.js +4 -2
  12. package/dist/es2019/ui/Appearance/Comment/Comment.js +8 -1
  13. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +7 -2
  14. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +19 -12
  15. package/dist/es2019/ui/EditorContentContainer/styles/codeMarkStyles.js +8 -0
  16. package/dist/es2019/ui/EditorContentContainer/styles/expandStyles.js +16 -8
  17. package/dist/es2019/ui/EditorContentContainer/styles/syncBlockStyles.js +14 -3
  18. package/dist/es2019/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +0 -346
  19. package/dist/es2019/version-wrapper.js +1 -1
  20. package/dist/esm/presets/universal.js +4 -2
  21. package/dist/esm/ui/Appearance/Comment/Comment.js +8 -1
  22. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +7 -2
  23. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +19 -12
  24. package/dist/esm/ui/EditorContentContainer/styles/codeMarkStyles.js +8 -0
  25. package/dist/esm/ui/EditorContentContainer/styles/expandStyles.js +16 -8
  26. package/dist/esm/ui/EditorContentContainer/styles/syncBlockStyles.js +11 -3
  27. package/dist/esm/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +0 -342
  28. package/dist/esm/version-wrapper.js +1 -1
  29. package/dist/types/presets/universal.d.ts +5 -1
  30. package/dist/types/ui/Appearance/Comment/Comment.d.ts +3 -1
  31. package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +7 -1
  32. package/dist/types/ui/EditorContentContainer/EditorContentContainer.d.ts +5 -0
  33. package/dist/types/ui/EditorContentContainer/styles/codeMarkStyles.d.ts +1 -0
  34. package/dist/types/ui/EditorContentContainer/styles/expandStyles.d.ts +4 -0
  35. package/dist/types/ui/EditorContentContainer/styles/syncBlockStyles.d.ts +1 -0
  36. package/dist/types/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.d.ts +0 -2
  37. package/dist/types-ts4.5/presets/universal.d.ts +5 -1
  38. package/dist/types-ts4.5/ui/Appearance/Comment/Comment.d.ts +3 -1
  39. package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts +7 -4
  40. package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer.d.ts +5 -0
  41. package/dist/types-ts4.5/ui/EditorContentContainer/styles/codeMarkStyles.d.ts +1 -0
  42. package/dist/types-ts4.5/ui/EditorContentContainer/styles/expandStyles.d.ts +4 -0
  43. package/dist/types-ts4.5/ui/EditorContentContainer/styles/syncBlockStyles.d.ts +1 -0
  44. package/dist/types-ts4.5/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.d.ts +0 -2
  45. package/package.json +3 -3
@@ -2,7 +2,7 @@
2
2
  import { css, keyframes } from '@emotion/react';
3
3
  import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
4
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
5
- export const syncBlockStyles = css({
5
+ export const syncBlockStylesBase = css({
6
6
  '@property --angle': {
7
7
  syntax: '"<angle>"',
8
8
  initialValue: '0deg',
@@ -15,8 +15,6 @@ export const syncBlockStyles = css({
15
15
  position: 'relative',
16
16
  cursor: 'pointer',
17
17
  borderRadius: "var(--ds-radius-small, 3px)",
18
- marginRight: `-18px`,
19
- marginLeft: `-18px`,
20
18
  marginBottom: 0,
21
19
  marginTop: "var(--ds-space-075, 6px)",
22
20
  paddingBlock: "var(--ds-space-150, 12px)",
@@ -204,6 +202,19 @@ export const syncBlockStyles = css({
204
202
  }
205
203
  });
206
204
 
205
+ // Export the default styles with negative margins (original behavior)
206
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
207
+ export const syncBlockStyles = css({
208
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
209
+ '.ProseMirror': {
210
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
211
+ [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
212
+ marginRight: `-18px`,
213
+ marginLeft: `-18px`
214
+ }
215
+ }
216
+ });
217
+
207
218
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
208
219
  export const syncBlockOverflowStyles = css({
209
220
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -302,352 +302,6 @@ export const taskItemStyles = css({
302
302
 
303
303
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
304
304
  export const taskItemCheckboxStyles = css({
305
- // copied styles from packages/design-system/icon/src/components/icon-new.tsx
306
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
307
- '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
308
- display: 'inline-block',
309
- boxSizing: 'border-box',
310
- flexShrink: 0,
311
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
312
- lineHeight: 1,
313
- paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
314
- paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
315
- },
316
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
317
- '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
318
- overflow: 'hidden',
319
- pointerEvents: 'none',
320
- color: 'currentColor',
321
- verticalAlign: 'bottom',
322
- width: "var(--ds-space-200, 16px)",
323
- height: "var(--ds-space-200, 16px)"
324
- },
325
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
326
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
327
- display: 'none'
328
- },
329
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
330
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
331
- display: 'inline'
332
- },
333
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
334
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
335
- display: 'inline'
336
- },
337
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
338
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
339
- display: 'none'
340
- },
341
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
342
- [`[data-prosemirror-node-name="taskItem"] .${TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER}`]: {
343
- flex: '0 0 24px',
344
- width: '24px',
345
- height: '24px',
346
- position: 'relative',
347
- alignSelf: 'start',
348
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
349
- "& > input[type='checkbox']": {
350
- width: '16px',
351
- height: '16px',
352
- zIndex: 1,
353
- cursor: 'pointer',
354
- outline: 'none',
355
- margin: 0,
356
- opacity: 0,
357
- position: 'absolute',
358
- top: '50%',
359
- left: '50%',
360
- transform: 'translate(-50%, -50%)',
361
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
362
- '&[disabled]': {
363
- cursor: 'default'
364
- },
365
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
366
- '+ span': {
367
- width: '24px',
368
- height: '24px',
369
- position: 'absolute',
370
- top: '50%',
371
- left: '50%',
372
- transform: 'translate(-50%, -50%)'
373
- },
374
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
375
- '+ span > svg': {
376
- boxSizing: 'border-box',
377
- display: 'inline',
378
- top: '50%',
379
- left: '50%',
380
- transform: 'translate(-50%, -50%)',
381
- maxWidth: 'unset',
382
- maxHeight: 'unset',
383
- position: 'absolute',
384
- overflow: 'hidden',
385
- color: "var(--ds-background-input, #FFFFFF)",
386
- transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
387
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
388
- 'path:first-of-type': {
389
- visibility: 'hidden'
390
- },
391
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
392
- 'rect:first-of-type': {
393
- stroke: "var(--ds-border-input, #8C8F97)",
394
- strokeWidth: 1,
395
- transition: 'stroke 0.2s ease-in-out'
396
- }
397
- },
398
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
399
- '&:hover + span > svg': {
400
- color: "var(--ds-background-input-hovered, #F8F8F8)",
401
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
402
- 'rect:first-of-type': {
403
- stroke: "var(--ds-border-input, #8C8F97)"
404
- }
405
- },
406
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
407
- '&:checked:hover + span > svg': {
408
- color: "var(--ds-background-selected-bold-hovered, #1558BC)",
409
- fill: "var(--ds-icon-inverse, #FFFFFF)",
410
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
411
- 'rect:first-of-type': {
412
- stroke: "var(--ds-background-selected-bold-hovered, #1558BC)"
413
- }
414
- },
415
- '&:checked': {
416
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
417
- '+ span > svg': {
418
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
419
- 'path:first-of-type': {
420
- visibility: 'visible'
421
- },
422
- color: "var(--ds-background-selected-bold, #1868DB)",
423
- fill: "var(--ds-icon-inverse, #FFFFFF)",
424
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
425
- 'rect:first-of-type': {
426
- stroke: "var(--ds-background-selected-bold, #1868DB)"
427
- }
428
- }
429
- },
430
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
431
- '&:active + span > svg': {
432
- color: "var(--ds-background-input-pressed, #FFFFFF)",
433
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
434
- 'rect:first-of-type': {
435
- stroke: "var(--ds-border, #0B120E24)"
436
- }
437
- },
438
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
439
- '&:checked:active + span > svg': {
440
- color: "var(--ds-background-input-pressed, #FFFFFF)",
441
- fill: "var(--ds-icon-inverse, #FFFFFF)",
442
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
443
- 'rect:first-of-type': {
444
- stroke: "var(--ds-border, #0B120E24)"
445
- }
446
- },
447
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
448
- '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
449
- color: "var(--ds-background-disabled, #17171708)",
450
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
451
- 'rect:first-of-type': {
452
- stroke: "var(--ds-background-disabled, #17171708)"
453
- }
454
- },
455
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
456
- '&:disabled:checked + span > svg': {
457
- fill: "var(--ds-icon-disabled, #080F214A)"
458
- },
459
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
460
- '&:focus + span::after': {
461
- position: 'absolute',
462
- width: "var(--ds-space-200, 16px)",
463
- height: "var(--ds-space-200, 16px)",
464
- border: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`,
465
- borderRadius: "var(--ds-space-050, 4px)",
466
- content: "''",
467
- display: 'block',
468
- top: '50%',
469
- left: '50%',
470
- transform: 'translate(-50%, -50%)'
471
- }
472
- }
473
- }
474
- });
475
-
476
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
477
- export const taskItemCheckboxStylesWithBlockTaskItem = css({
478
- // copied styles from packages/design-system/icon/src/components/icon-new.tsx
479
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
480
- '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"], [data-prosemirror-node-name="blockTaskItem"] [data-component="checkbox-icon-wrap"]': {
481
- display: 'inline-block',
482
- boxSizing: 'border-box',
483
- flexShrink: 0,
484
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
485
- lineHeight: 1,
486
- paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
487
- paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
488
- },
489
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
490
- '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg, [data-prosemirror-node-name="blockTaskItem"] [data-component="checkbox-icon-wrap"] svg': {
491
- overflow: 'hidden',
492
- pointerEvents: 'none',
493
- color: 'currentColor',
494
- verticalAlign: 'bottom',
495
- width: "var(--ds-space-200, 16px)",
496
- height: "var(--ds-space-200, 16px)"
497
- },
498
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
499
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
500
- display: 'none'
501
- },
502
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
503
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
504
- display: 'inline'
505
- },
506
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
507
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
508
- display: 'inline'
509
- },
510
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
511
- '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
512
- display: 'none'
513
- },
514
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
515
- [`[data-prosemirror-node-name="taskItem"] .${TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER}, [data-prosemirror-node-name="blockTaskItem"] .${TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER}`]: {
516
- flex: '0 0 24px',
517
- width: '24px',
518
- height: '24px',
519
- position: 'relative',
520
- alignSelf: 'start',
521
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
522
- "& > input[type='checkbox']": {
523
- width: '16px',
524
- height: '16px',
525
- zIndex: 1,
526
- cursor: 'pointer',
527
- outline: 'none',
528
- margin: 0,
529
- opacity: 0,
530
- position: 'absolute',
531
- top: '50%',
532
- left: '50%',
533
- transform: 'translate(-50%, -50%)',
534
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
535
- '&[disabled]': {
536
- cursor: 'default'
537
- },
538
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
539
- '+ span': {
540
- width: '24px',
541
- height: '24px',
542
- position: 'absolute',
543
- top: '50%',
544
- left: '50%',
545
- transform: 'translate(-50%, -50%)'
546
- },
547
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
548
- '+ span > svg': {
549
- boxSizing: 'border-box',
550
- display: 'inline',
551
- top: '50%',
552
- left: '50%',
553
- transform: 'translate(-50%, -50%)',
554
- maxWidth: 'unset',
555
- maxHeight: 'unset',
556
- position: 'absolute',
557
- overflow: 'hidden',
558
- color: "var(--ds-background-input, #FFFFFF)",
559
- transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
560
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
561
- 'path:first-of-type': {
562
- visibility: 'hidden'
563
- },
564
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
565
- 'rect:first-of-type': {
566
- stroke: "var(--ds-border-input, #8C8F97)",
567
- strokeWidth: 1,
568
- transition: 'stroke 0.2s ease-in-out'
569
- }
570
- },
571
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
572
- '&:hover + span > svg': {
573
- color: "var(--ds-background-input-hovered, #F8F8F8)",
574
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
575
- 'rect:first-of-type': {
576
- stroke: "var(--ds-border-input, #8C8F97)"
577
- }
578
- },
579
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
580
- '&:checked:hover + span > svg': {
581
- color: "var(--ds-background-selected-bold-hovered, #1558BC)",
582
- fill: "var(--ds-icon-inverse, #FFFFFF)",
583
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
584
- 'rect:first-of-type': {
585
- stroke: "var(--ds-background-selected-bold-hovered, #1558BC)"
586
- }
587
- },
588
- '&:checked': {
589
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
590
- '+ span > svg': {
591
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
592
- 'path:first-of-type': {
593
- visibility: 'visible'
594
- },
595
- color: "var(--ds-background-selected-bold, #1868DB)",
596
- fill: "var(--ds-icon-inverse, #FFFFFF)",
597
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
598
- 'rect:first-of-type': {
599
- stroke: "var(--ds-background-selected-bold, #1868DB)"
600
- }
601
- }
602
- },
603
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
604
- '&:active + span > svg': {
605
- color: "var(--ds-background-input-pressed, #FFFFFF)",
606
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
607
- 'rect:first-of-type': {
608
- stroke: "var(--ds-border, #0B120E24)"
609
- }
610
- },
611
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
612
- '&:checked:active + span > svg': {
613
- color: "var(--ds-background-input-pressed, #FFFFFF)",
614
- fill: "var(--ds-icon-inverse, #FFFFFF)",
615
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
616
- 'rect:first-of-type': {
617
- stroke: "var(--ds-border, #0B120E24)"
618
- }
619
- },
620
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
621
- '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
622
- color: "var(--ds-background-disabled, #17171708)",
623
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
624
- 'rect:first-of-type': {
625
- stroke: "var(--ds-background-disabled, #17171708)"
626
- }
627
- },
628
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
629
- '&:disabled:checked + span > svg': {
630
- fill: "var(--ds-icon-disabled, #080F214A)"
631
- },
632
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
633
- '&:focus + span::after': {
634
- position: 'absolute',
635
- width: "var(--ds-space-200, 16px)",
636
- height: "var(--ds-space-200, 16px)",
637
- border: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`,
638
- borderRadius: "var(--ds-space-050, 4px)",
639
- content: "''",
640
- display: 'block',
641
- top: '50%',
642
- left: '50%',
643
- transform: 'translate(-50%, -50%)'
644
- }
645
- }
646
- }
647
- });
648
-
649
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
650
- export const taskItemNextCheckboxStyles = css({
651
305
  /**
652
306
  * Background
653
307
  */
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "217.8.2";
2
+ export const version = "217.9.0";
@@ -80,7 +80,7 @@ import { createDefaultPreset } from './default';
80
80
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
81
81
  */
82
82
  export default function createUniversalPresetInternal(_ref) {
83
- var _featureFlags$lpLinkP, _initialPluginConfigu, _initialPluginConfigu2, _initialPluginConfigu3, _initialPluginConfigu4, _initialPluginConfigu5, _initialPluginConfigu6, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
83
+ var _featureFlags$lpLinkP, _initialPluginConfigu, _initialPluginConfigu2, _initialPluginConfigu3, _initialPluginConfigu4, _initialPluginConfigu5, _initialPluginConfigu6, _initialPluginConfigu7, _initialPluginConfigu8, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
84
84
  var appearance = _ref.appearance,
85
85
  props = _ref.props,
86
86
  featureFlags = _ref.featureFlags,
@@ -112,7 +112,9 @@ export default function createUniversalPresetInternal(_ref) {
112
112
  };
113
113
  var finalPreset = defaultPreset.add(ufoPlugin).add(dataConsumerPlugin).add(accessibilityUtilsPlugin).add(contentInsertionPlugin).add(batchAttributeUpdatesPlugin).maybeAdd([blockControlsPlugin, {
114
114
  quickInsertButtonEnabled: (_initialPluginConfigu = initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu2 = initialPluginConfiguration.blockControlsPlugin) === null || _initialPluginConfigu2 === void 0 ? void 0 : _initialPluginConfigu2.quickInsertButtonEnabled) !== null && _initialPluginConfigu !== void 0 ? _initialPluginConfigu : true
115
- }], Boolean((_initialPluginConfigu3 = initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu4 = initialPluginConfiguration.blockControlsPlugin) === null || _initialPluginConfigu4 === void 0 ? void 0 : _initialPluginConfigu4.enabled) !== null && _initialPluginConfigu3 !== void 0 ? _initialPluginConfigu3 : false)).maybeAdd([blockMenuPlugin, {}], Boolean((_initialPluginConfigu5 = initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu6 = initialPluginConfiguration.blockMenuPlugin) === null || _initialPluginConfigu6 === void 0 ? void 0 : _initialPluginConfigu6.enabled) !== null && _initialPluginConfigu5 !== void 0 ? _initialPluginConfigu5 : false)).maybeAdd([breakoutPlugin, {
115
+ }], Boolean((_initialPluginConfigu3 = initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu4 = initialPluginConfiguration.blockControlsPlugin) === null || _initialPluginConfigu4 === void 0 ? void 0 : _initialPluginConfigu4.enabled) !== null && _initialPluginConfigu3 !== void 0 ? _initialPluginConfigu3 : false)).maybeAdd([blockMenuPlugin, {
116
+ useStandardNodeWidth: (_initialPluginConfigu5 = initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu6 = initialPluginConfiguration.blockMenuPlugin) === null || _initialPluginConfigu6 === void 0 ? void 0 : _initialPluginConfigu6.useStandardNodeWidth) !== null && _initialPluginConfigu5 !== void 0 ? _initialPluginConfigu5 : false
117
+ }], Boolean((_initialPluginConfigu7 = initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu8 = initialPluginConfiguration.blockMenuPlugin) === null || _initialPluginConfigu8 === void 0 ? void 0 : _initialPluginConfigu8.enabled) !== null && _initialPluginConfigu7 !== void 0 ? _initialPluginConfigu7 : false)).maybeAdd([breakoutPlugin, {
116
118
  allowBreakoutButton: appearance === 'full-page',
117
119
  appearance: appearance
118
120
  }], Boolean(props.allowBreakout && (isFullPage || appearance === 'max' && (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEqualsNoExposure('confluence_max_width_content_appearance', 'isEnabled', true)) && fg('platform_editor_breakout_in_universal_preset')))).maybeAdd(alignmentPlugin, Boolean(props.allowTextAlignment)).maybeAdd([textColorPlugin, props.allowTextColor], Boolean(props.allowTextColor)).add(listPlugin).maybeAdd(rulePlugin, Boolean(props.allowRule)).maybeAdd([expandPlugin, {
@@ -18,6 +18,7 @@ import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
18
18
  import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
19
19
  import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
20
20
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
21
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
21
22
  // Ignored via go/ees005
22
23
  // eslint-disable-next-line import/no-named-as-default
23
24
  import ClickAreaBlock from '../../Addon/ClickAreaBlock';
@@ -92,7 +93,12 @@ var mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew = css(_defineProperty(
92
93
  }));
93
94
  var appearance = 'comment';
94
95
  export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
96
+ var _editorAPI$blockMenu$, _editorAPI$blockMenu;
95
97
  var editorAPI = props.editorAPI;
98
+
99
+ // Get useStandardNodeWidth from block menu plugin shared state
100
+ // Only access editorAPI when the experiment is enabled to avoid performance impact
101
+ var useStandardNodeWidth = editorExperiment('platform_editor_controls', 'variant1') && ((_editorAPI$blockMenu$ = editorAPI === null || editorAPI === void 0 || (_editorAPI$blockMenu = editorAPI.blockMenu) === null || _editorAPI$blockMenu === void 0 || (_editorAPI$blockMenu = _editorAPI$blockMenu.sharedState) === null || _editorAPI$blockMenu === void 0 || (_editorAPI$blockMenu = _editorAPI$blockMenu.currentState()) === null || _editorAPI$blockMenu === void 0 ? void 0 : _editorAPI$blockMenu.useStandardNodeWidth) !== null && _editorAPI$blockMenu$ !== void 0 ? _editorAPI$blockMenu$ : false);
96
102
  var _useSharedPluginState = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
97
103
  var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
98
104
  return {
@@ -275,7 +281,8 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
275
281
  }),
276
282
  featureFlags: featureFlags,
277
283
  viewMode: editorViewMode,
278
- appearance: appearance
284
+ appearance: appearance,
285
+ useStandardNodeWidth: useStandardNodeWidth
279
286
  }, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
280
287
  editorView: editorView,
281
288
  editorActions: editorActions,
@@ -203,7 +203,7 @@ var contentAreaHeightNoToolbar = css({
203
203
  export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
204
204
  export var EDITOR_CONTAINER = 'ak-editor-container';
205
205
  var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
206
- var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
206
+ var _props$editorAPI, _props$editorAPI$bloc, _props$editorAPI2, _contentAreaRef$curre, _allowScrollGutter$gu;
207
207
  var theme = useTheme();
208
208
  var fullWidthMode = props.appearance === 'full-width';
209
209
  var maxWidthMode = props.appearance === 'max';
@@ -212,6 +212,10 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
212
212
  var containerRef = useRef(null);
213
213
  var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
214
214
  var contentAreaMaxWidth = getTotalPadding() + (!fullWidthMode ? maxWidthMode ? akEditorUltraWideLayoutWidth : theme.layoutMaxWidth : akEditorFullWidthLayoutWidth);
215
+
216
+ // Get useStandardNodeWidth from block menu plugin shared state
217
+ // Only access editorAPI when the experiment is enabled to avoid performance impact
218
+ var useStandardNodeWidth = editorExperiment('platform_editor_controls', 'variant1') && ((_props$editorAPI$bloc = (_props$editorAPI2 = props.editorAPI) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.blockMenu) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.sharedState) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.currentState()) === null || _props$editorAPI2 === void 0 ? void 0 : _props$editorAPI2.useStandardNodeWidth) !== null && _props$editorAPI$bloc !== void 0 ? _props$editorAPI$bloc : false);
215
219
  useImperativeHandle(ref, function () {
216
220
  return {
217
221
  get scrollContainer() {
@@ -244,7 +248,8 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
244
248
  viewMode: props === null || props === void 0 ? void 0 : props.viewMode,
245
249
  isScrollable: true,
246
250
  appearance: props.appearance,
247
- contentMode: props.contentMode
251
+ contentMode: props.contentMode,
252
+ useStandardNodeWidth: useStandardNodeWidth
248
253
  }, jsx(ClickAreaBlock, {
249
254
  editorView: props.editorView,
250
255
  editorDisabled: props.disabled
@@ -25,14 +25,14 @@ import { baseStyles, baseStylesMaxContainerWidthFixes, editorLargeGutterPuddingB
25
25
  import { blockMarksStyles } from './styles/blockMarksStyles';
26
26
  import { blockquoteDangerStyles, blockquoteSelectedNodeStyles, blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc, listDangerStyles, listSelectedNodeStyles, textDangerStyles, textSelectedNodeStyles } from './styles/blockTypeStyles';
27
27
  import { codeBlockStyles, codeBlockStylesWithEmUnits, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
28
- import { codeMarkStyles } from './styles/codeMarkStyles';
28
+ import { codeMarkStyles, codeMarkStylesA11yFix } from './styles/codeMarkStyles';
29
29
  import { commentEditorStyles } from './styles/commentEditorStyles';
30
30
  import { cursorStyles } from './styles/cursorStyles';
31
31
  import { dangerDateStyles, dateStyles, dateVanillaStyles } from './styles/dateStyles';
32
32
  import { editorUGCSmallText, editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
33
33
  import { embedCardStyles } from './styles/embedCardStyles';
34
34
  import { emojiDangerStyles, emojiStyles, getDenseEmojiStyles, getScaledDenseEmojiStyles, scaledEmojiStyles } from './styles/emoji';
35
- import { expandStyles, expandStylesMixin_experiment_platform_editor_chromeless_expand_fix, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, getDenseExpandTitleStyles } from './styles/expandStyles';
35
+ import { expandStyles, expandStylesBase, expandStylesMixin_experiment_platform_editor_chromeless_expand_fix, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, getDenseExpandTitleStyles } from './styles/expandStyles';
36
36
  import { extensionDiffStyles, getExtensionStyles } from './styles/extensionStyles';
37
37
  import { findReplaceStyles, findReplaceStylesNewWithA11Y, findReplaceStylesNewWithCodeblockColorContrastFix, findReplaceStylesWithCodeblockColorContrastFix } from './styles/findReplaceStyles';
38
38
  import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
@@ -59,9 +59,9 @@ import { selectionToolbarAnimationStyles } from './styles/selectionToolbarStyles
59
59
  import { shadowStyles } from './styles/shadowStyles';
60
60
  import { editorControlsSmartCardStyles, linkingVisualRefreshV1Styles, showDiffDeletedNodeStyles, showDiffDeletedNodeStylesNew, smartCardDiffStyles, smartCardStyles, smartCardStylesWithSearchMatch, smartCardStylesWithSearchMatchAndBlockMenuDangerStyles, smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, smartLinksInLivePagesStyles } from './styles/smartCardStyles';
61
61
  import { statusDangerStyles, statusStyles, statusStylesMixin_fg_platform_component_visual_refresh, statusStylesMixin_fg_platform_component_visual_refresh_with_search_match, statusStylesMixin_without_fg_platform_component_visual_refresh, statusStylesMixin_without_fg_platform_component_visual_refresh_with_search_match, statusStylesTeam26 } from './styles/statusStyles';
62
- import { syncBlockStyles, syncBlockFirstNodeStyles, syncBlockOverflowStyles } from './styles/syncBlockStyles';
62
+ import { syncBlockStyles, syncBlockStylesBase, syncBlockFirstNodeStyles, syncBlockOverflowStyles } from './styles/syncBlockStyles';
63
63
  import { tableCommentEditorStyles, tableContainerStyles, tableEmptyRowStyles, tableLayoutFixes } from './styles/tableStyles';
64
- import { decisionDangerStyles, decisionIconWithVisualRefresh, decisionStyles, getDenseTasksAndDecisionsStyles, taskItemCheckboxStyles, taskItemCheckboxStylesWithBlockTaskItem, taskItemNextCheckboxStyles, taskItemStyles, taskItemStylesWithBlockTaskItem, tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
64
+ import { decisionDangerStyles, decisionIconWithVisualRefresh, decisionStyles, getDenseTasksAndDecisionsStyles, taskItemCheckboxStyles, taskItemStyles, taskItemStylesWithBlockTaskItem, tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
65
65
  import { telepointerColorAndCommonStyle, telepointerStyle } from './styles/telepointerStyles';
66
66
  import { textColorStyles } from './styles/textColorStyles';
67
67
  import { textHighlightStyle } from './styles/textHighlightStyles';
@@ -109,7 +109,8 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
109
109
  viewMode = props.viewMode,
110
110
  isScrollable = props.isScrollable,
111
111
  appearance = props.appearance,
112
- contentMode = props.contentMode;
112
+ contentMode = props.contentMode,
113
+ useStandardNodeWidth = props.useStandardNodeWidth;
113
114
  var theme = useTheme();
114
115
  var _useThemeObserver = useThemeObserver(),
115
116
  colorMode = _useThemeObserver.colorMode;
@@ -218,7 +219,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
218
219
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
219
220
  blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes,
220
221
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
221
- codeMarkStyles,
222
+ codeMarkStyles, expValEquals('platform_editor_a11y_scrollable_region', 'isEnabled', true) &&
223
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
224
+ codeMarkStylesA11yFix,
222
225
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
223
226
  textColorStyles,
224
227
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -292,7 +295,10 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
292
295
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
293
296
  extensionDiffStyles,
294
297
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
295
- expandStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
298
+ expandStylesBase,
299
+ // Apply expand delta styles conditionally based on useStandardNodeWidth (negative margins or not)
300
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
301
+ !useStandardNodeWidth && expandStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
296
302
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
297
303
  expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) &&
298
304
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -322,11 +328,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
322
328
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
323
329
  taskItemStylesWithBlockTaskItem :
324
330
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
325
- taskItemStyles, expValEquals('platform_editor_task_item_styles', 'isEnabled', true) ?
326
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
327
- taskItemNextCheckboxStyles : expValEqualsNoExposure('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true) ?
328
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
329
- taskItemCheckboxStylesWithBlockTaskItem :
331
+ taskItemStyles,
330
332
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
331
333
  taskItemCheckboxStyles,
332
334
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -368,6 +370,11 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
368
370
  // merge alignMultipleWrappedImageInLayoutStyles with layoutBaseStyles when clean up platform_editor_fix_media_in_renderer
369
371
  fg('platform_editor_fix_media_in_renderer') && alignMultipleWrappedImageInLayoutStyles, editorExperiment('platform_synced_block', true) &&
370
372
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
373
+ syncBlockStylesBase, editorExperiment('platform_synced_block', true) &&
374
+ // Apply sync block delta styles conditionally based on useStandardNodeWidth (negative margins or not)
375
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
376
+ !useStandardNodeWidth &&
377
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
371
378
  syncBlockStyles,
372
379
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
373
380
  editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) &&
@@ -21,4 +21,12 @@ export var codeMarkStyles = css({
21
21
  overflowWrap: 'break-word',
22
22
  whiteSpace: 'pre-wrap'
23
23
  }
24
+ });
25
+
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
27
+ export var codeMarkStylesA11yFix = css({
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
29
+ '.code': {
30
+ overflow: 'unset'
31
+ }
24
32
  });
@@ -1,8 +1,11 @@
1
1
  /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
2
2
  import { css } from '@emotion/react';
3
3
  import { akEditorFullPageDefaultFontSize, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
4
+ /**
5
+ * Base expand styles, always applied.
6
+ */
4
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
5
- export var expandStyles = css({
8
+ export var expandStylesBase = css({
6
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
7
10
  '.ak-editor-expand__icon > div': {
8
11
  display: 'flex'
@@ -76,11 +79,6 @@ export var expandStyles = css({
76
79
  }
77
80
  },
78
81
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
79
- '.ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
80
- marginLeft: "var(--ds-space-negative-150, -12px)",
81
- marginRight: "var(--ds-space-negative-150, -12px)"
82
- },
83
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
84
82
  '.ak-editor-expand__content': {
85
83
  // sharedExpandStyles.contentStyles({ expanded: false, focused: false })(),
86
84
  paddingTop: "var(--ds-space-0, 0px)",
@@ -89,8 +87,8 @@ export var expandStyles = css({
89
87
  marginLeft: "var(--ds-space-050, 4px)",
90
88
  display: 'flow-root',
91
89
  /* The follow rules inside @supports block are added as a part of ED-8893
92
- The fix is targeting mobile bridge on iOS 12 or below,
93
- 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 */
94
92
  '@supports not (display: flow-root)': {
95
93
  width: '100%',
96
94
  boxSizing: 'border-box'
@@ -238,6 +236,16 @@ export var expandStyles = css({
238
236
  }
239
237
  });
240
238
 
239
+ // Export the default styles with negative margins (original behavior)
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
241
+ export var expandStyles = css({
242
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
243
+ '.ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
244
+ marginLeft: "var(--ds-space-negative-150, -12px)",
245
+ marginRight: "var(--ds-space-negative-150, -12px)"
246
+ }
247
+ });
248
+
241
249
  /**
242
250
  * This function gets the dynamic styles that scale the expand title font size based on the base font size.
243
251
  * If the base font size is not the default font size, we want the expand title font size to match the base font size.