@atlaskit/renderer 137.1.2 → 137.1.3

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/renderer
 
+## 137.1.3
+
+### Patch Changes
+
+- [`28054f27e1549`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28054f27e1549) -
+  Support inline-bodied Forge macros in view mode, behind `platform_forge_inline_bodied_macro`.
+
+  A macro with a rich body must declare `layout: bodied`, and `layout` is a single enum, so it
+  cannot also express "inline". Such a macro now declares display intent separately with
+  `outputType: inline`. The stored node remains a block `bodiedExtension` — only its presentation
+  changes, and only in view mode; the editor still shows a block.
+
+  `@atlassian/forge-ui-types`: adds `properties.outputType?: 'inline' | 'block'`.
+
+  `@atlassian/xen-editor-provider`: when a macro declares `layout: bodied` + `outputType: inline`,
+  the output type is seeded into `guestParams` at insert so the renderer's inline treatment applies
+  from the first render with no config edit, and it is re-applied as a default when a config panel
+  saves (config saves replace `guestParams` wholesale). The Forge app container is laid out inline
+  for these macros in view mode, Custom UI excluded.
+
+  `@atlaskit/renderer`: native Forge inline extensions are marked with `data-forge-inline` and their
+  nested body renderer's top-level paragraphs are collapsed inline, so the app's own block spacing
+  does not push the surrounding sentence away. Nested inline-bodied Forge macros are left as blocks,
+  because the pass that marks the sibling textblocks around an inline extension only resolves
+  positions correctly at the top level.
+
+  With the gate disabled every code path above evaluates to today's behaviour.
+
+- Updated dependencies
+
 ## 137.1.2
 
 ### Patch Changes

package/dist/cjs/react/nodes/extension.js

@@ -26,6 +26,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
+/**
+ * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
+ * imported: the renderer must not depend on a Forge package, and this is a stored parameter name,
+ * so it is part of the document contract rather than that package's API.
+ */
+var FORGE_INLINE_BODIED_PARAM = 'atlassianForgeInlineBodied';
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -73,6 +80,7 @@ var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_re
   return null;
 };
 var renderExtension = exports.renderExtension = function renderExtension(content, layout) {
+  var _node$parameters;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
   var extensionId = arguments.length > 4 ? arguments[4] : undefined;
@@ -105,8 +113,36 @@ var renderExtension = exports.renderExtension = function renderExtension(content
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
-  var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
+  /**
+   * Scoped to nodes inserted by an app declaring `outputType: inline`, which is what writes
+   * `atlassianForgeInlineBodied`. The output-type marker alone would also match migrated Connect
+   * content — it carries the same marker, and after an upgrade plus a storage round trip in the
+   * same shape — so keying on it would change how existing content renders. The renderer only
+   * ever sees the stored node, never the manifest, so a parameter this code writes is the only
+   * available signal.
+   *
+   * Evaluated once and shared with `isNativeForgeInline` below, so the gate is read a single time
+   * per render, and the cheap checks stay in front of it so anything ineligible short-circuits
+   * without firing an exposure it can never act on.
+   */
+  var isForgeInlineBodiedEnabled = Boolean((node === null || node === void 0 ? void 0 : node.extensionType) === FORGE_EXTENSION_TYPE && (node === null || node === void 0 ? void 0 : node.content) && (node === null || node === void 0 || (_node$parameters = node.parameters) === null || _node$parameters === void 0 || (_node$parameters = _node$parameters.guestParams) === null || _node$parameters === void 0 ? void 0 : _node$parameters[FORGE_INLINE_BODIED_PARAM]) === 'true' && (0, _fg.fg)('platform_forge_inline_bodied_macro'));
+  /**
+   * The pass that marks the sibling textblocks around an inline extension resolves their
+   * positions without a depth term, so it only ever matches at the top level. Inlining a nested
+   * container without joining its neighbours leaves a shrink-wrapped box alone on its own line,
+   * which is worse than leaving it a block — so keep nested inline-bodied Forge macros as
+   * blocks until the sibling marking works at depth.
+   */
+  var isNestedForgeInlineBodied = !isTopLevel && isForgeInlineBodiedEnabled;
+  var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && !isNestedForgeInlineBodied;
   var inlineClassName = isInline ? _consts.RendererCssClassName.EXTENSION_AS_INLINE : '';
+  /**
+   * A native Forge macro does not have its body rendered by the product — the body ADF is
+   * sent to the app over the bridge and the app renders it with its own nested renderer.
+   * The inline styling above stops at the outer wrapper, so mark these nodes to let the
+   * nested document's block spacing be collapsed too.
+   */
+  var isNativeForgeInline = Boolean(isInline && isForgeInlineBodiedEnabled);
   var asInlineAnalytics = isInline && fireAnalyticsEvent && node ? (0, _react.jsx)(FireExtensionAsInlineAnalytics, {
     fireAnalyticsEvent: fireAnalyticsEvent,
     node: node
@@ -128,7 +164,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
       "data-node-type": "extension",
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, (0, _react.jsx)("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -158,7 +195,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       },
       "data-layout": layout,
       "data-local-id": localId,
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, (0, _react.jsx)("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/cjs/ui/Renderer/RendererStyleContainer.js

@@ -867,6 +867,20 @@ var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _
 }), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
+var forgeInlineBodiedSpacingStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline]"), {
+  marginBottom: 0,
+  verticalAlign: 'baseline',
+  maxWidth: '100%'
+}), [".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-forge-inline] + [data-as-inline=\"on\"]"), ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]:has(+ [data-forge-inline])")].join(', '), {
+  display: 'inline'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] *"), {
+  maxWidth: '100%'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  overflowX: 'auto'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(_consts.RendererCssClassName.DOCUMENT, " > p"), {
+  display: 'inline',
+  margin: 0
+}));
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 var inlineExtensionRendererMarginFix = (0, _react.css)({
@@ -2293,7 +2307,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
+    (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
     (0, _fg.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

package/dist/cjs/ui/Renderer/index.js

@@ -74,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "137.1.1";
+var packageVersion = "137.1.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/extension.js

@@ -16,6 +16,13 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calcBreakoutWidthCss } from '../utils/breakout';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+const FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
+/**
+ * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
+ * imported: the renderer must not depend on a Forge package, and this is a stored parameter name,
+ * so it is part of the document contract rather than that package's API.
+ */
+const FORGE_INLINE_BODIED_PARAM = 'atlassianForgeInlineBodied';
 const viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 const macroHeights = {
@@ -62,6 +69,7 @@ const FireExtensionAsInlineAnalytics = ({
   return null;
 };
 export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes, nodeHeight, localId, shouldDisplayExtensionAsInline, node, isInsideOfInlineExtension) => {
+  var _node$parameters, _node$parameters$gues;
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -84,8 +92,36 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
    */
   const viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   const extensionHeight = nodeHeight || viewportSize;
-  const isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
+  /**
+   * Scoped to nodes inserted by an app declaring `outputType: inline`, which is what writes
+   * `atlassianForgeInlineBodied`. The output-type marker alone would also match migrated Connect
+   * content — it carries the same marker, and after an upgrade plus a storage round trip in the
+   * same shape — so keying on it would change how existing content renders. The renderer only
+   * ever sees the stored node, never the manifest, so a parameter this code writes is the only
+   * available signal.
+   *
+   * Evaluated once and shared with `isNativeForgeInline` below, so the gate is read a single time
+   * per render, and the cheap checks stay in front of it so anything ineligible short-circuits
+   * without firing an exposure it can never act on.
+   */
+  const isForgeInlineBodiedEnabled = Boolean((node === null || node === void 0 ? void 0 : node.extensionType) === FORGE_EXTENSION_TYPE && (node === null || node === void 0 ? void 0 : node.content) && (node === null || node === void 0 ? void 0 : (_node$parameters = node.parameters) === null || _node$parameters === void 0 ? void 0 : (_node$parameters$gues = _node$parameters.guestParams) === null || _node$parameters$gues === void 0 ? void 0 : _node$parameters$gues[FORGE_INLINE_BODIED_PARAM]) === 'true' && fg('platform_forge_inline_bodied_macro'));
+  /**
+   * The pass that marks the sibling textblocks around an inline extension resolves their
+   * positions without a depth term, so it only ever matches at the top level. Inlining a nested
+   * container without joining its neighbours leaves a shrink-wrapped box alone on its own line,
+   * which is worse than leaving it a block — so keep nested inline-bodied Forge macros as
+   * blocks until the sibling marking works at depth.
+   */
+  const isNestedForgeInlineBodied = !isTopLevel && isForgeInlineBodiedEnabled;
+  const isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && !isNestedForgeInlineBodied;
   const inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
+  /**
+   * A native Forge macro does not have its body rendered by the product — the body ADF is
+   * sent to the app over the bridge and the app renders it with its own nested renderer.
+   * The inline styling above stops at the outer wrapper, so mark these nodes to let the
+   * nested document's block spacing be collapsed too.
+   */
+  const isNativeForgeInline = Boolean(isInline && isForgeInlineBodiedEnabled);
   const asInlineAnalytics = isInline && fireAnalyticsEvent && node ? jsx(FireExtensionAsInlineAnalytics, {
     fireAnalyticsEvent: fireAnalyticsEvent,
     node: node
@@ -107,7 +143,8 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
       "data-node-type": "extension",
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -138,7 +175,8 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       },
       "data-layout": layout,
       "data-local-id": localId,
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -1027,6 +1027,26 @@ const extensionAsInlineStyle = css({
     display: 'inline-block'
   }
 });
+const forgeInlineBodiedSpacingStyle = css({
+  [`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.EXTENSION_AS_INLINE}[data-forge-inline]`]: {
+    marginBottom: 0,
+    verticalAlign: 'baseline',
+    maxWidth: '100%'
+  },
+  [[`.${RendererCssClassName.DOCUMENT} [data-forge-inline] + [data-as-inline="on"]`, `.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]:has(+ [data-forge-inline])`].join(', ')]: {
+    display: 'inline'
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE}[data-forge-inline] *`]: {
+    maxWidth: '100%'
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE}[data-forge-inline] .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`]: {
+    overflowX: 'auto'
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE}[data-forge-inline] .${RendererCssClassName.DOCUMENT} > p`]: {
+    display: 'inline',
+    margin: 0
+  }
+});
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 const inlineExtensionRendererMarginFix = css({
@@ -2915,7 +2935,7 @@ export const RendererStyleContainer = props => {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
+    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
     fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

package/dist/es2019/ui/Renderer/index.js

@@ -60,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "137.1.1";
+const packageVersion = "137.1.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/extension.js

@@ -16,6 +16,13 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calcBreakoutWidthCss } from '../utils/breakout';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+var FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
+/**
+ * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
+ * imported: the renderer must not depend on a Forge package, and this is a stored parameter name,
+ * so it is part of the document contract rather than that package's API.
+ */
+var FORGE_INLINE_BODIED_PARAM = 'atlassianForgeInlineBodied';
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -63,6 +70,7 @@ var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_re
   return null;
 };
 export var renderExtension = function renderExtension(content, layout) {
+  var _node$parameters;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
   var extensionId = arguments.length > 4 ? arguments[4] : undefined;
@@ -95,8 +103,36 @@ export var renderExtension = function renderExtension(content, layout) {
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
-  var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
+  /**
+   * Scoped to nodes inserted by an app declaring `outputType: inline`, which is what writes
+   * `atlassianForgeInlineBodied`. The output-type marker alone would also match migrated Connect
+   * content — it carries the same marker, and after an upgrade plus a storage round trip in the
+   * same shape — so keying on it would change how existing content renders. The renderer only
+   * ever sees the stored node, never the manifest, so a parameter this code writes is the only
+   * available signal.
+   *
+   * Evaluated once and shared with `isNativeForgeInline` below, so the gate is read a single time
+   * per render, and the cheap checks stay in front of it so anything ineligible short-circuits
+   * without firing an exposure it can never act on.
+   */
+  var isForgeInlineBodiedEnabled = Boolean((node === null || node === void 0 ? void 0 : node.extensionType) === FORGE_EXTENSION_TYPE && (node === null || node === void 0 ? void 0 : node.content) && (node === null || node === void 0 || (_node$parameters = node.parameters) === null || _node$parameters === void 0 || (_node$parameters = _node$parameters.guestParams) === null || _node$parameters === void 0 ? void 0 : _node$parameters[FORGE_INLINE_BODIED_PARAM]) === 'true' && fg('platform_forge_inline_bodied_macro'));
+  /**
+   * The pass that marks the sibling textblocks around an inline extension resolves their
+   * positions without a depth term, so it only ever matches at the top level. Inlining a nested
+   * container without joining its neighbours leaves a shrink-wrapped box alone on its own line,
+   * which is worse than leaving it a block — so keep nested inline-bodied Forge macros as
+   * blocks until the sibling marking works at depth.
+   */
+  var isNestedForgeInlineBodied = !isTopLevel && isForgeInlineBodiedEnabled;
+  var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && !isNestedForgeInlineBodied;
   var inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
+  /**
+   * A native Forge macro does not have its body rendered by the product — the body ADF is
+   * sent to the app over the bridge and the app renders it with its own nested renderer.
+   * The inline styling above stops at the outer wrapper, so mark these nodes to let the
+   * nested document's block spacing be collapsed too.
+   */
+  var isNativeForgeInline = Boolean(isInline && isForgeInlineBodiedEnabled);
   var asInlineAnalytics = isInline && fireAnalyticsEvent && node ? jsx(FireExtensionAsInlineAnalytics, {
     fireAnalyticsEvent: fireAnalyticsEvent,
     node: node
@@ -118,7 +154,8 @@ export var renderExtension = function renderExtension(content, layout) {
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
       "data-node-type": "extension",
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -148,7 +185,8 @@ export var renderExtension = function renderExtension(content, layout) {
       },
       "data-layout": layout,
       "data-local-id": localId,
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -860,6 +860,20 @@ var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty
 }), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
+var forgeInlineBodiedSpacingStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline]"), {
+  marginBottom: 0,
+  verticalAlign: 'baseline',
+  maxWidth: '100%'
+}), [".".concat(RendererCssClassName.DOCUMENT, " [data-forge-inline] + [data-as-inline=\"on\"]"), ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]:has(+ [data-forge-inline])")].join(', '), {
+  display: 'inline'
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] *"), {
+  maxWidth: '100%'
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  overflowX: 'auto'
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(RendererCssClassName.DOCUMENT, " > p"), {
+  display: 'inline',
+  margin: 0
+}));
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 var inlineExtensionRendererMarginFix = css({
@@ -2286,7 +2300,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
+    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
     fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

package/dist/esm/ui/Renderer/index.js

@@ -65,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "137.1.1";
+var packageVersion = "137.1.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "137.1.2",
+	"version": "137.1.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.200.0",
 		"@atlaskit/analytics-listeners": "^11.1.0",
 		"@atlaskit/analytics-namespaced-context": "^8.1.0",
-		"@atlaskit/analytics-next": "^12.3.0",
+		"@atlaskit/analytics-next": "^12.4.0",
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/button": "^25.2.0",
 		"@atlaskit/code": "^19.1.0",
@@ -275,6 +275,10 @@
 		"platform_editor_embed_height_only_fallback": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_forge_inline_bodied_macro": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	}
 }