@atlaskit/editor-core 221.5.12 → 221.6.0

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-compiled.js

@@ -47,6 +47,12 @@ const GRID_GUTTER = 12;
 const blockNodesVerticalMargin = '0.75rem';
 const fontSize14px = `${14 / 16}rem`;
 const scaledBlockNodesVerticalMargin = '0.75em';
+// Block spacing hook (gated by expValEquals('platform_editor_extension_block_spacing')).
+// When the experiment is on, these variants re-declare the block margins to read from the
+// `--ak-editor-extension-block-spacing` CSS custom property, falling back to the original values.
+// When the experiment is off, none of these are applied and behaviour is identical to before.
+const blockNodesVerticalMarginVar = 'var(--ak-editor-extension-block-spacing, 0.75rem)';
+const scaledBlockNodesVerticalMarginVar = 'var(--ak-editor-extension-block-spacing, 0.75em)';
 
 // emoji constants — values inlined from packages/elements/emoji/src/util/constants.ts
 // If you need to update these values, please also update packages/elements/emoji/src/util/constants.ts
@@ -204,6 +210,8 @@ const editorContentStyles = {
   baseStyles: "_t7ab1vi7 _anrdukw8 _n6a11fwx _uw641q08 _fo6014dc _1gvnmqba _j03f1qop _qmjbxjz2 _zy25uj17 _pg931osq _121i1r31 _dcmgglyw _nv9v1o36 _19rk1uph _u8en3mia _3iqe18il _988v1osq _pi27grho _10zo1osq _1j8i1xb4",
   baseStylesMaxContainerWidthFixes: "_19rk1l99",
   blockMarksStyles: "_1244idpf _1qkxidpf _1e6iidpf _dvqjidpf _etngidpf _1jl2idpf _1je9idpf _1db9idpf _15i0idpf _16d4idpf _17liidpf _pxvridpf _1v4iidpf _s8m8idpf _16fuidpf _1543idpf _4offidpf _ttnbidpf _ujemidpf _1171idpf _mzasidpf _r8oxidpf _1pycidpf _6shmidpf _1bd0idpf _54e7idpf _1tenidpf _jzq1idpf _czpfidpf _1oraidpf _1kg4idpf _ksblidpf _1af7idpf _72x4idpf _zlwmidpf _7m6lidpf _1x2sidpf _3q5uidpf _11ukidpf _n65sidpf _1nn0idpf _1hwxidpf _j2goidpf _rfl4idpf _qhe2idpf _h4bbidpf _rjmvidpf _183yidpf _fk2nidpf _3429idpf _j543idpf _1op6idpf _mcklidpf _1uf8idpf _110lidpf _17agidpf _d9tridpf _f5slidpf _b9adidpf _1859idpf _1hrzidpf _1du2idpf _gdx6idpf _1av3idpf _1uj7idpf _s6y9idpf _ocz2idpf _129midpf _kj6kidpf _1uv9idpf _1tieidpf _ri4ridpf _tw0uidpf _15epidpf _12uhidpf _12i1idpf _vm1cidpf _jj6didpf _3d3tidpf _1xdsidpf",
+  blockSpacingVarStyles: "_poq41jih _shdd1jih _6st21jih _1j9eidpf _s5gz1jih _naf31jih _1de7idpf _1lezidpf _11ac1jih _lr831jih _jywy1jih _1ed81jih _14lv1jih _sls21jih _517s1jih _19jp1jih _1wbo1jih _6w10idpf _4cgxidpf _o96gidpf _1vtlidpf _zan7idpf _1jsnidpf _txhx1jih _dqv91jih _tkh81jih _ot961jih _1lzd1jih _ozar1jih _vmpy1jih _nre41jih _p4bhidpf _xirxidpf _borcidpf _uuikidpf _1jh6idpf _1qrtidpf _tz7vidpf _1wv1idpf",
+  blockSpacingVarScaledStyles: "_poq4h70n",
   blockquoteDangerStyles: "_10d41gly _13641bqt",
   blockquoteSelectedNodeStyles: "_13521dy8 _vee2q98m _vmcm1kdv _10ue1j28 _1fn81j28 _11781j28 _1o6w1j28",
   blocktypeStyles: "_6st2oqnp _g09oidpf _19vkidpf _17vdidpf _1gtxusvi _1htf1kw7 _a3pn1osq _lqso1o8l _19v7idpf _oql5idpf _1w3ipxbi _1sz21dm9 _1nehnqa1 _95mn1l7x _1ezqidpf _s6l1pxbi _1j9eidpf _ymd7b3bt _1cbmglyw _ew481ule _104r17hw _1mzi17hw _15l01ule _12lj1ule _q4ju1ule _yqzd1ule _1ohls05q _13dhs0v8 _1qup44jv _mhqkq19t _fziqs05q _12sp1aa5 _ab5gidpf _10u5idpf _f850idpf",
@@ -356,6 +364,7 @@ const editorContentStyles = {
   tableCommentEditorStyles: "_s9qz1mok _1quk1aqn _1tb2idpf _8vyeidpf _1igzolhs _ux48glyw _giavsm61 _axu71ibz",
   tableContainerStyles: "_18ml1osq _9e5g1wug _uwd31osq _12wgusvi _nnhzewfl _1gbz1osq _10va1osq _lkzl1n9t _1mca1wug",
   tableContentModeStyles: "_1lxan7od _11a2n7od _19iin7od _1vpzn7od _l6b9n7od _9v33vi1l _poet1ris _9loxvi1l _1dsv1wug _r83tvi1l _cbmx261p",
+  tableContentModeNestedTableStyles: "_pgryglyw _15spidpf _kze5vi1l _130mvi1l _9loxvi1l _ubzd1g3s _1ysk1g3s _u8ab1g3s _162evi1l _1dcuglyw _1uciidpf _1g73261p _g6ebvi1l _pru7vi1l _h2quglyw _p73zglyw _8wilewfl _1tdlewfl",
   tableEmptyRowStyles: "_1rgmmh6f _u0mgmh6f",
   tableRoundedCornerStyles: "_1c5kpb1k _qqx7pb1k _10n4pb1k _ddbmpb1k _hnwypb1k _vg21pb1k _iew5pb1k _b4v9pb1k",
   tableLayoutFixes: "_1f5xidpf _28dsidpf _f30jidpf _jr291hrf",
@@ -432,6 +441,9 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
     })
   };
   const browser = getBrowserInfo();
+
+  // Evaluate the block-spacing experiment once per render.
+  const isBlockSpacingEnabled = expValEquals('platform_editor_extension_block_spacing', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax([editorContentStyles.baseStyles, editorContentStyles.maxModeReizeFixStyles, editorContentStyles.baseStylesMaxContainerWidthFixes, fg('platform_editor_controls_increase_full_page_gutter') && editorExperiment('platform_editor_controls', 'variant1') ? editorContentStyles.editorLargeGutterPuddingBaseStylesEditorControls : editorContentStyles.editorLargeGutterPuddingBaseStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true, {
@@ -445,7 +457,7 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
     }) && editorContentStyles.textSelectedNodeStyles, fg('platform_editor_typography_ugc') ? editorContentStyles.blocktypeStyles_fg_platform_editor_typography_ugc : editorContentStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.codeMarkStyles, expValEquals('platform_editor_a11y_scrollable_region', 'isEnabled', true) && editorContentStyles.codeMarkStylesA11yFix, editorContentStyles.textColorStyles, editorContentStyles.backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && editorContentStyles.highlightLinksUnsetStyles, editorContentStyles.textHighlightPaddingStyles, editorContentStyles.listsStyles, expValEqualsNoExposure('platform_editor_flexible_list_schema', 'isEnabled', true) && editorContentStyles.listItemHiddenMarkerStyles, editorContentStyles.diffListStyles, contentMode === 'compact' && isDense && editorContentStyles.listsDenseStyles, isFullPage && editorContentStyles.listsStylesMarginLayoutShiftFix, editorContentStyles.ruleStyles, editorContentStyles.smartCardDiffStyles, expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? editorContentStyles.showDiffDeletedNodeStylesNew : editorContentStyles.showDiffDeletedNodeStyles, editorContentStyles.mediaStyles, contentMode === 'compact' && editorContentStyles.mediaCaptionStyles, fg('platform_editor_fix_media_in_renderer') && editorContentStyles.firstWrappedMediaStyles, editorContentStyles.telepointerStyle, /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */
     editorContentStyles.telepointerColorAndCommonStyle, editorContentStyles.gapCursorStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.gapCursorStylesVisibilityFix, editorContentStyles.panelStyles, editorContentStyles.nestedPanelBorderStylesMixin, fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.panelStylesMixin, editorContentStyles.mentionsStyles, editorContentStyles.tasksAndDecisionsStyles, contentMode === 'compact' && isDense && editorContentStyles.tasksAndDecisionsDenseStyles, editorContentStyles.gridStyles, editorContentStyles.blockMarksStyles, editorContentStyles.dateStyles, editorContentStyles.extensionStyles, contentMode === 'compact' && editorContentStyles.extensionStylesDense, expValEquals('platform_editor_bodiedextension_layoutshift_fix', 'isEnabled', true) && editorContentStyles.bodiedExtensionLayoutShiftFix, editorContentStyles.extensionDiffStyles, editorContentStyles.expandStylesBase, !useStandardNodeWidth && editorContentStyles.expandStyles, contentMode === 'compact' && isDense && editorContentStyles.expandDenseStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes : editorContentStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless && editorContentStyles.expandStylesMixin_chromeless_expand_fix, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.findReplaceStylesNewWithA11Y : editorContentStyles.findReplaceStyles, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesNewWithCodeblockColorContrastFix, !expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesWithCodeblockColorContrastFix, editorExperiment('platform_synced_block', true) && editorContentStyles.findReplaceStylesWithRefSyncBlock, editorContentStyles.textHighlightStyle, editorContentStyles.decisionStyles, expValEqualsNoExposure('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true) ? editorContentStyles.taskItemStylesWithBlockTaskItem : editorContentStyles.taskItemStyles, editorContentStyles.taskItemCheckboxStyles, editorContentStyles.decisionIconWithVisualRefresh, editorContentStyles.statusStyles, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? editorContentStyles.statusStylesTeam26 : fg('platform-component-visual-refresh') ? expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh : expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh, colorMode === 'dark' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && editorContentStyles.statusStylesTeam26DarkMode, editorContentStyles.annotationStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorExperiment('platform_editor_block_menu', true) ? editorContentStyles.smartCardStylesWithSearchMatchAndBlockMenuDangerStyles : editorContentStyles.smartCardStylesWithSearchMatch : editorContentStyles.smartCardStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorContentStyles.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') || editorExperiment('platform_editor_preview_panel_linking_exp', true)) && editorContentStyles.editorControlsSmartCardStyles, editorContentStyles.embedCardStyles, editorContentStyles.unsupportedStyles, editorContentStyles.resizerStyles, expValEqualsNoExposure('cc-maui-experiment', 'isEnabled', true) && expValEquals('databases-native-embeds-v2', 'isEnabled', true) && editorContentStyles.resizerBottomHandleStyles, editorContentStyles.layoutBaseStyles, expValEquals('platform_editor_table_excerpts_fix', 'isEnabled', true) && editorContentStyles.layoutBaseStylesWithTableExcerptsFix, fg('platform_editor_fix_media_in_renderer') && editorContentStyles.alignMultipleWrappedImageInLayoutStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockStylesBase, editorExperiment('platform_synced_block', true) &&
     // Apply sync block delta styles conditionally based on useStandardNodeWidth (negative margins or not)
-    !useStandardNodeWidth && editorContentStyles.syncBlockStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockFirstNodeStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_14') && editorContentStyles.syncBlockTextSelectionStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutBaseStylesAdvanced, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSectionStylesAdvanced : editorContentStyles.layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutColumnStylesAdvanced : editorContentStyles.layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnResizeStyles, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSelectedStylesAdvanced : editorContentStyles.layoutSelectedStylesNotAdvanced, editorExperiment('platform_synced_block', true) && editorContentStyles.layoutSelectedStylesAdvancedFix, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutColumnResponsiveStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveBaseStyles, editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync, !editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFG, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.layoutColumnMartinTopFixesNew : editorContentStyles.layoutColumnMartinTopFixesOld, editorContentStyles.smartLinksInLivePagesStyles, editorContentStyles.linkingVisualRefreshV1Styles, editorContentStyles.dateVanillaStyles, fg('platform_editor_typography_ugc') ? contentMode === 'compact' ? editorContentStyles.paragraphStylesWithScaledMargin : editorContentStyles.paragraphStylesUGCRefreshed : contentMode === 'compact' ? editorContentStyles.paragraphStylesOldWithScaledMargin : editorContentStyles.paragraphStylesOld, editorContentStyles.linkStyles, browser.safari && editorContentStyles.listsStylesSafariFix, editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesSyncedBlock, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticResizerStyles, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) && editorContentStyles.pragmaticResizerStylesPanelAndRule, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesCodeBlockSyncedBlockPatch, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && !editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesCodeBlockLegacy, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticResizerStylesForTooltip, editorExperiment('platform_editor_preview_panel_responsiveness', true) && (editorExperiment('advanced_layouts', true) || expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true)) && editorContentStyles.pragmaticResizerStylesWithReducedEditorGutter, editorContentStyles.aiPanelBaseStyles, isFirefox && editorContentStyles.aiPanelBaseFirefoxStyles, colorMode === 'dark' && editorContentStyles.aiPanelDarkStyles, colorMode === 'dark' && isFirefox && editorContentStyles.aiPanelDarkFirefoxStyles, viewMode === 'view' && editorContentStyles.layoutStylesForView, viewMode === 'view' && editorExperiment('advanced_layouts', true) && editorContentStyles.layoutSelectedStylesForViewAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', false) && editorContentStyles.layoutSelectedStylesForViewNotAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveStylesForView, isComment && editorContentStyles.commentEditorStyles, isComment && editorContentStyles.tableCommentEditorStyles, isFullPage && editorContentStyles.fullPageEditorStyles, isFullPage && editorContentStyles.scrollbarStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.firstCodeBlockWithNoMargin : editorContentStyles.firstCodeBlockWithNoMarginOld, editorContentStyles.firstBlockNodeStyles, editorContentStyles.mentionNodeStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.mentionsSelectionStylesWithSearchMatch : editorContentStyles.mentionsSelectionStyles, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? editorContentStyles.scaledEmojiStyles : editorContentStyles.emojiStyles, contentMode === 'compact' && isDense && expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) && editorContentStyles.scaledEmojiDenseStyles, contentMode === 'compact' && isDense && !expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) && editorContentStyles.emojiDenseStyles, editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? editorContentStyles.tableLayoutFixesWithFontSize : editorContentStyles.tableLayoutFixes, editorContentStyles.tableContainerStyles, editorContentStyles.tableSharedStyle, (browser.gecko || browser.ie || browser.mac && browser.chrome) && editorContentStyles.tableSharedStyleBackgroundClipFix, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? editorContentStyles.tableSharedStyle_with_platform_editor_table_q4_loveability : editorContentStyles.tableSharedStyle_without_platform_editor_table_q4_loveability, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && editorContentStyles.tableSharedStyle_with_platform_editor_table_menu_updates, fg('platform_editor_bordered_panel_nested_in_table') && editorContentStyles.tableSharedStyle_with_platform_editor_bordered_panel_nested_in_table, editorContentStyles.tableEmptyRowStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && fg('platform_editor_table_q4_patch_1') && editorContentStyles.tableRoundedCornerStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, className || undefined]),
+    !useStandardNodeWidth && editorContentStyles.syncBlockStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockFirstNodeStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_14') && editorContentStyles.syncBlockTextSelectionStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutBaseStylesAdvanced, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSectionStylesAdvanced : editorContentStyles.layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutColumnStylesAdvanced : editorContentStyles.layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnResizeStyles, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSelectedStylesAdvanced : editorContentStyles.layoutSelectedStylesNotAdvanced, editorExperiment('platform_synced_block', true) && editorContentStyles.layoutSelectedStylesAdvancedFix, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutColumnResponsiveStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveBaseStyles, editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync, !editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFG, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.layoutColumnMartinTopFixesNew : editorContentStyles.layoutColumnMartinTopFixesOld, editorContentStyles.smartLinksInLivePagesStyles, editorContentStyles.linkingVisualRefreshV1Styles, editorContentStyles.dateVanillaStyles, fg('platform_editor_typography_ugc') ? contentMode === 'compact' ? editorContentStyles.paragraphStylesWithScaledMargin : editorContentStyles.paragraphStylesUGCRefreshed : contentMode === 'compact' ? editorContentStyles.paragraphStylesOldWithScaledMargin : editorContentStyles.paragraphStylesOld, editorContentStyles.linkStyles, browser.safari && editorContentStyles.listsStylesSafariFix, editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesSyncedBlock, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticResizerStyles, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) && editorContentStyles.pragmaticResizerStylesPanelAndRule, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesCodeBlockSyncedBlockPatch, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && !editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesCodeBlockLegacy, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticResizerStylesForTooltip, editorExperiment('platform_editor_preview_panel_responsiveness', true) && (editorExperiment('advanced_layouts', true) || expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true)) && editorContentStyles.pragmaticResizerStylesWithReducedEditorGutter, editorContentStyles.aiPanelBaseStyles, isFirefox && editorContentStyles.aiPanelBaseFirefoxStyles, colorMode === 'dark' && editorContentStyles.aiPanelDarkStyles, colorMode === 'dark' && isFirefox && editorContentStyles.aiPanelDarkFirefoxStyles, viewMode === 'view' && editorContentStyles.layoutStylesForView, viewMode === 'view' && editorExperiment('advanced_layouts', true) && editorContentStyles.layoutSelectedStylesForViewAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', false) && editorContentStyles.layoutSelectedStylesForViewNotAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveStylesForView, isComment && editorContentStyles.commentEditorStyles, isComment && editorContentStyles.tableCommentEditorStyles, isFullPage && editorContentStyles.fullPageEditorStyles, isFullPage && editorContentStyles.scrollbarStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.firstCodeBlockWithNoMargin : editorContentStyles.firstCodeBlockWithNoMarginOld, editorContentStyles.firstBlockNodeStyles, editorContentStyles.mentionNodeStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.mentionsSelectionStylesWithSearchMatch : editorContentStyles.mentionsSelectionStyles, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? editorContentStyles.scaledEmojiStyles : editorContentStyles.emojiStyles, contentMode === 'compact' && isDense && expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) && editorContentStyles.scaledEmojiDenseStyles, contentMode === 'compact' && isDense && !expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) && editorContentStyles.emojiDenseStyles, editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? editorContentStyles.tableLayoutFixesWithFontSize : editorContentStyles.tableLayoutFixes, editorContentStyles.tableContainerStyles, editorContentStyles.tableSharedStyle, (browser.gecko || browser.ie || browser.mac && browser.chrome) && editorContentStyles.tableSharedStyleBackgroundClipFix, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? editorContentStyles.tableSharedStyle_with_platform_editor_table_q4_loveability : editorContentStyles.tableSharedStyle_without_platform_editor_table_q4_loveability, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && editorContentStyles.tableSharedStyle_with_platform_editor_table_menu_updates, fg('platform_editor_bordered_panel_nested_in_table') && editorContentStyles.tableSharedStyle_with_platform_editor_bordered_panel_nested_in_table, editorContentStyles.tableEmptyRowStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && fg('platform_editor_table_q4_patch_1') && editorContentStyles.tableRoundedCornerStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && fg('platform_editor_table_nested_renderer_fix') && editorContentStyles.tableContentModeNestedTableStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, isBlockSpacingEnabled && editorContentStyles.blockSpacingVarStyles, isBlockSpacingEnabled && isDense && editorContentStyles.blockSpacingVarScaledStyles, className || undefined]),
     ref: ref,
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container"

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-emotion.js

@@ -21,6 +21,7 @@ import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles, highlightLinksUnsetStyles, textHighlightPaddingStyles } from './styles/backgroundColorStyles';
 import { baseStyles, baseStylesMaxContainerWidthFixes, editorLargeGutterPuddingBaseStyles, editorLargeGutterPuddingBaseStylesEditorControls, editorLargeGutterPuddingReducedBaseStyles, maxModeReizeFixStyles } from './styles/baseStyles';
 import { blockMarksStyles } from './styles/blockMarksStyles';
+import { blockSpacingVarScaledStyles, blockSpacingVarStyles } from './styles/blockSpacingStyles';
 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';
 import { codeBlockStyles, codeBlockStylesWithEmUnits, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles, codeMarkStylesA11yFix } from './styles/codeMarkStyles';
@@ -58,7 +59,7 @@ import { shadowStyles } from './styles/shadowStyles';
 import { editorControlsSmartCardStyles, linkingVisualRefreshV1Styles, showDiffDeletedNodeStyles, showDiffDeletedNodeStylesNew, smartCardDiffStyles, smartCardStyles, smartCardStylesWithSearchMatch, smartCardStylesWithSearchMatchAndBlockMenuDangerStyles, smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, smartLinksInLivePagesStyles } from './styles/smartCardStyles';
 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';
 import { syncBlockStyles, syncBlockStylesBase, syncBlockFirstNodeStyles, syncBlockOverflowStyles, syncBlockTextSelectionStyles } from './styles/syncBlockStyles';
-import { tableCommentEditorStyles, tableContainerStyles, tableEmptyRowStyles, tableLayoutFixes, tableRoundedCornerStyles, tableLayoutFixesWithFontSize, tableContentModeStyles } from './styles/tableStyles';
+import { tableCommentEditorStyles, tableContainerStyles, tableEmptyRowStyles, tableLayoutFixes, tableRoundedCornerStyles, tableLayoutFixesWithFontSize, tableContentModeStyles, tableContentModeNestedTableStyles } from './styles/tableStyles';
 import { decisionDangerStyles, decisionIconWithVisualRefresh, decisionStyles, getDenseTasksAndDecisionsStyles, taskItemCheckboxStyles, taskItemStyles, taskItemStylesWithBlockTaskItem, tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
 import { telepointerColorAndCommonStyle, telepointerStyle } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
@@ -145,6 +146,9 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
     })
   };
   const browser = getBrowserInfo();
+
+  // Evaluate the block-spacing experiment once per render.
+  const isBlockSpacingEnabled = expValEquals('platform_editor_extension_block_spacing', 'isEnabled', true);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className || undefined,
@@ -538,7 +542,9 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    tableContentModeStyles,
+    tableContentModeStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && fg('platform_editor_table_nested_renderer_fix') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    tableContentModeNestedTableStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     hyperLinkFloatingToolbarStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -566,7 +572,15 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     mediaDangerStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    nestedPanelDangerStyles]],
+    nestedPanelDangerStyles],
+    // Block spacing hook — opt-in via --ak-editor-extension-block-spacing.
+    // Applied last so the var-based margins override the base block margins by source
+    // order. Gated by an experiment so it can be disabled.
+    isBlockSpacingEnabled &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blockSpacingVarStyles, isBlockSpacingEnabled && contentMode === 'compact' &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blockSpacingVarScaledStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/ui/EditorContentContainer/styles/blockSpacingStyles.js

@@ -0,0 +1,114 @@
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled,
+	@atlaskit/ui-styling-standard/no-exported-styles,
+	@atlaskit/ui-styling-standard/no-nested-selectors,
+	@atlaskit/ui-styling-standard/no-unsafe-values,
+	@atlaskit/ui-styling-standard/no-unsafe-selectors,
+	@atlaskit/ui-styling-standard/no-imported-style-values */
+import { css } from '@emotion/react';
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+
+/**
+ * Emotion mirror of the block-spacing styles in EditorContentContainer-compiled.tsx.
+ *
+ * Re-declares the block-element vertical margins so they read from the
+ * --ak-editor-extension-block-spacing CSS custom property (falling back to the original
+ * 0.75rem). This is applied LAST in the Emotion container's css array, and only when
+ * the platform_editor_extension_block_spacing experiment is enabled, so it overrides
+ * the base block margins by source order without affecting the experiment-off behaviour.
+ *
+ * Keep this in sync with the block-spacing styles in EditorContentContainer-compiled.tsx.
+ */
+export const blockSpacingVarStyles = css({
+  '.ProseMirror': {
+    // paragraphs
+    p: {
+      marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+    },
+    // SSR reset rule (mirrors listsStyles `& > style:first-child + p`) so the first
+    // paragraph after an SSR style tag also honours the spacing var.
+    '& > style:first-child + p': {
+      marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+    },
+    // blockquotes — base also zeroes the first blockquote's top margin.
+    '& blockquote': {
+      marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)',
+      '&:first-child': {
+        marginTop: 0
+      }
+    },
+    // code blocks
+    [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`]: {
+      marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+    },
+    li: {
+      '> .code-block': {
+        marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+      },
+      '> .code-block:first-child, > .ProseMirror-gapcursor:first-child + .code-block': {
+        marginTop: 0
+      },
+      '> div:last-of-type.code-block, > pre:last-of-type.code-block': {
+        marginBottom: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+      }
+    },
+    // smart cards (block card) — base sets top margin only.
+    '.blockCardView-content-wrap': {
+      marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+    },
+    // extension wrappers — mirrors the base extensionStyles margin rules exactly so that
+    // experiment-on reproduces all of the base first/last margin resets.
+    '.extensionView-content-wrap, .multiBodiedExtensionView-content-wrap, .bodiedExtensionView-content-wrap': {
+      marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)',
+      marginBottom: 'var(--ak-editor-extension-block-spacing, 0.75rem)',
+      '&:first-of-type': {
+        marginTop: 0
+      },
+      '&:last-of-type': {
+        marginBottom: 0
+      }
+    },
+    "[data-mark-type='fragment']": {
+      '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+        marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)',
+        marginBottom: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+      },
+      "& > [data-mark-type='dataConsumer']": {
+        '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+          marginTop: 'var(--ak-editor-extension-block-spacing, 0.75rem)',
+          marginBottom: 'var(--ak-editor-extension-block-spacing, 0.75rem)'
+        }
+      },
+      '&:first-child': {
+        '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+          marginTop: 0
+        },
+        "& > [data-mark-type='dataConsumer']": {
+          '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+            marginTop: 0
+          }
+        }
+      },
+      '&:nth-last-of-type(-n + 2):not(:first-of-type)': {
+        '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+          marginBottom: 0
+        },
+        "& > [data-mark-type='dataConsumer']": {
+          '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+            marginBottom: 0
+          }
+        }
+      }
+    }
+  }
+});
+
+/**
+ * Scaled (em-based) variant of the block-spacing styles for dense/scaled paragraph contexts.
+ * Keep this in sync with the scaled block-spacing styles in EditorContentContainer-compiled.tsx.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
+export const blockSpacingVarScaledStyles = css({
+  '.ProseMirror p': {
+    marginTop: 'var(--ak-editor-extension-block-spacing, 0.75em)'
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/tableStyles.js

@@ -155,6 +155,52 @@ export const tableContentModeStyles = css({
     width: 'unset !important'
   }
 });
+
+/**
+ * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
+ * If you need to make changes here, also update the corresponding style in
+ * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
+ * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
+export const tableContentModeNestedTableStyles = css({
+  // Reset the base `margin-right: -1px` (ED-16212) that clips content-mode tables by 1px.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror .pm-table-wrapper table[data-initial-width-mode="content"]': {
+    maxWidth: 'none',
+    marginRight: 0
+  },
+  // Let the resizer/wrapper chain grow to content width before the max-width cap.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.resizer-item:has(table[data-initial-width-mode="content"]), .pm-table-container:has(> .pm-table-wrapper > table[data-initial-width-mode="content"]), .pm-table-wrapper:has(> table[data-initial-width-mode="content"])': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'max-content !important',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    maxWidth: 'var(--ak-editor-table-max-width) !important'
+  },
+  // Nested content-mode table: size to content, reset base max-width and margin.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror table[data-initial-width-mode="content"] > tbody > tr > :is(th, td) .pm-table-container > .pm-table-wrapper > table': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'max-content !important',
+    maxWidth: 'none',
+    marginRight: 0
+  },
+  // Stop nested table col widths from constraining parent table measurement.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror table[data-initial-width-mode="content"] > tbody > tr > :is(th, td) .pm-table-container > .pm-table-wrapper > table > colgroup > col': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'unset !important'
+  },
+  // Let the nested table container/wrapper grow to content width before the cap.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror table[data-initial-width-mode="content"] > tbody > tr > :is(th, td) .pm-table-container, .ProseMirror table[data-initial-width-mode="content"] > tbody > tr > :is(th, td) .pm-table-container > .pm-table-wrapper': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'max-content !important',
+    maxWidth: 'none',
+    overflowX: 'visible'
+  }
+});
 /**
  * SSR-safe rounded corners for the outermost table cells.
  *

package/dist/es2019/version-wrapper.js

@@ -1,3 +1,3 @@
 export const name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const version = "221.5.11";
+export const version = "221.5.13";