@atlaskit/renderer 126.0.0 → 126.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 126.1.0
+
+### Minor Changes
+
+- [`7386aea2dbc51`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7386aea2dbc51) -
+  [ux] EDITOR-4611 - Inline Bodied Extension: Implement inlined bodied extension style
+
+## 126.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 126.0.0
 
 ### Major Changes

package/dist/cjs/consts.js

@@ -11,6 +11,7 @@ var clPrefix = 'ak-renderer-';
 var RendererCssClassName = exports.RendererCssClassName = {
   DOCUMENT: "".concat(clPrefix, "document"),
   EXTENSION: "".concat(clPrefix, "extension"),
+  EXTENSION_AS_INLINE: "".concat(clPrefix, "extension-as-inline"),
   EXTENSION_CENTER_ALIGN: "".concat(clPrefix, "extension-center-align"),
   EXTENSION_OVERFLOW_CONTAINER: "".concat(clPrefix, "extension-overflow-container"),
   NUMBER_COLUMN: "".concat(clPrefix, "table-number-column"),

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

@@ -27,7 +27,8 @@ var BodiedExtension = function BodiedExtension(props) {
     extensionType = props.extensionType,
     parameters = props.parameters,
     extensionViewportSizes = props.extensionViewportSizes,
-    localId = props.localId;
+    localId = props.localId,
+    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = _react.default.Children.toArray(children)
@@ -58,15 +59,16 @@ var BodiedExtension = function BodiedExtension(props) {
   , (0, _extends2.default)({}, props, {
     type: "bodiedExtension"
   }), function (_ref) {
-    var result = _ref.result;
+    var node = _ref.node,
+      result = _ref.result;
     try {
       if (result && /*#__PURE__*/_react.default.isValidElement(result)) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
-    } catch (e) {
+    } catch (_unused) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
@@ -74,7 +76,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };
 var _default = exports.default = BodiedExtension;

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

@@ -53,6 +53,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   var extensionViewportSizes = arguments.length > 5 ? arguments[5] : undefined;
   var nodeHeight = arguments.length > 6 ? arguments[6] : undefined;
   var localId = arguments.length > 7 ? arguments[7] : undefined;
+  var shouldDisplayExtensionAsInline = arguments.length > 8 ? arguments[8] : undefined;
+  var node = arguments.length > 9 ? arguments[9] : undefined;
   var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -68,17 +70,20 @@ 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);
+  var inlineClassName = isInline ? _consts.RendererCssClassName.EXTENSION_AS_INLINE : '';
   if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     return (0, _react.jsx)("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        width: isInline ? undefined : isTopLevel ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        width: isTopLevel ? (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
+        (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: extensionHeight && "".concat(extensionHeight, "px")
+        minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
       },
       "data-layout": layout,
       "data-local-id": localId,
@@ -98,12 +103,12 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
+        width: isInline ? undefined : isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: "".concat(extensionHeight, "px")
+        minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
       "data-layout": layout,
       "data-local-id": localId
@@ -143,7 +148,7 @@ var Extension = function Extension(props) {
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
           tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
-        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
+        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
@@ -156,7 +161,7 @@ var Extension = function Extension(props) {
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
       tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
-    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
+    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined);
   });
 };
 var _default = exports.default = (0, _ui.overflowShadow)(Extension, {

package/dist/cjs/ui/ExtensionRenderer.js

@@ -122,11 +122,12 @@ function ExtensionRenderer(props) {
           });
         }
       }
-    } catch (e) {
+    } catch (_unused) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
     return children({
+      node: node,
       result: result
     });
   }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);

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

@@ -740,6 +740,23 @@ var extensionStyle = (0, _react.css)({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
+var extensionAsInlineStyle = (0, _react.css)({
+  '.ak-renderer-document .ak-renderer-extension-as-inline': {
+    display: 'inline-block',
+    // use !important here because the current width has !important applied to it and it's not working when used in React style prop
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'auto !important',
+    marginTop: 0
+  },
+  '.ak-renderer-extension-as-inline .ak-renderer-extension-overflow-container': {
+    display: 'inline-block',
+    overflowX: 'visible',
+    containerType: 'normal'
+  },
+  '.ak-renderer-extension-as-inline div, .ak-renderer-extension-as-inline p': {
+    display: 'inline-block'
+  }
+});
 var shadowSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "& .".concat(_ui.shadowClassNames.RIGHT_SHADOW, "::before, .").concat(_ui.shadowClassNames.RIGHT_SHADOW, "::after, .").concat(_ui.shadowClassNames.LEFT_SHADOW, "::before, .").concat(_ui.shadowClassNames.LEFT_SHADOW, "::after"), {
   display: 'none',
   position: 'absolute',
@@ -1687,7 +1704,9 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
+      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles,
+      // this should be placed after baseOtherStyles
+      (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
       (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, 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) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
       "data-testid": testId

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

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

package/dist/es2019/consts.js

@@ -5,6 +5,7 @@ const clPrefix = 'ak-renderer-';
 export const RendererCssClassName = {
   DOCUMENT: `${clPrefix}document`,
   EXTENSION: `${clPrefix}extension`,
+  EXTENSION_AS_INLINE: `${clPrefix}extension-as-inline`,
   EXTENSION_CENTER_ALIGN: `${clPrefix}extension-center-align`,
   EXTENSION_OVERFLOW_CONTAINER: `${clPrefix}extension-overflow-container`,
   NUMBER_COLUMN: `${clPrefix}table-number-column`,

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

@@ -17,7 +17,8 @@ const BodiedExtension = props => {
     extensionType,
     parameters,
     extensionViewportSizes,
-    localId
+    localId,
+    shouldDisplayExtensionAsInline
   } = props;
   const {
     createAnalyticsEvent
@@ -46,6 +47,7 @@ const BodiedExtension = props => {
   , _extends({}, props, {
     type: "bodiedExtension"
   }), ({
+    node,
     result
   }) => {
     try {
@@ -53,9 +55,9 @@ const BodiedExtension = props => {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
-    } catch (e) {
+    } catch {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
@@ -63,7 +65,7 @@ const BodiedExtension = props => {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };
 export default BodiedExtension;

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

@@ -36,7 +36,7 @@ const getViewportSize = (extensionId, extensionViewportSizes) => {
 const containerStyle = css({
   containerType: 'inline-size'
 });
-export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes, nodeHeight, localId) => {
+export const renderExtension = (content, layout, options = {}, removeOverflow, extensionId, extensionViewportSizes, nodeHeight, localId, shouldDisplayExtensionAsInline, node) => {
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -52,17 +52,20 @@ 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);
+  const inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     return jsx("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
+      className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
       style: {
+        width: isInline ? undefined : isTopLevel ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
+        calcBreakoutWidthCss(layout) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: extensionHeight && `${extensionHeight}px`
+        minHeight: isInline ? undefined : extensionHeight && `${extensionHeight}px`
       },
       "data-layout": layout,
       "data-local-id": localId,
@@ -82,12 +85,12 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
     ref: options.handleRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
+    className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+      width: isInline ? undefined : isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      minHeight: `${extensionHeight}px`
+      minHeight: isInline ? undefined : `${extensionHeight}px`
     },
     "data-layout": layout,
     "data-local-id": localId
@@ -127,7 +130,7 @@ const Extension = props => {
           handleRef,
           shadowClassNames,
           tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
-        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
+        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
@@ -140,7 +143,7 @@ const Extension = props => {
       handleRef,
       shadowClassNames,
       tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
-    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
+    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined);
   });
 };
 export default overflowShadow(Extension, {

package/dist/es2019/ui/ExtensionRenderer.js

@@ -107,11 +107,12 @@ export default function ExtensionRenderer(props) {
           });
         }
       }
-    } catch (e) {
+    } catch {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
     return children({
+      node,
       result
     });
   }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);

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

@@ -849,6 +849,23 @@ const extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
+const extensionAsInlineStyle = css({
+  '.ak-renderer-document .ak-renderer-extension-as-inline': {
+    display: 'inline-block',
+    // use !important here because the current width has !important applied to it and it's not working when used in React style prop
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'auto !important',
+    marginTop: 0
+  },
+  '.ak-renderer-extension-as-inline .ak-renderer-extension-overflow-container': {
+    display: 'inline-block',
+    overflowX: 'visible',
+    containerType: 'normal'
+  },
+  '.ak-renderer-extension-as-inline div, .ak-renderer-extension-as-inline p': {
+    display: 'inline-block'
+  }
+});
 const shadowSharedStyle = css({
   // 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 -- Ignored via go/DSP-18766
   [`& .${shadowClassNames.RIGHT_SHADOW}::before, .${shadowClassNames.RIGHT_SHADOW}::after, .${shadowClassNames.LEFT_SHADOW}::before, .${shadowClassNames.LEFT_SHADOW}::after`]: {
@@ -2118,7 +2135,9 @@ export const RendererStyleContainer = props => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
+      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles,
+      // this should be placed after baseOtherStyles
+      expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
       fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, 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) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
       "data-testid": testId

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

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

package/dist/esm/consts.js

@@ -5,6 +5,7 @@ var clPrefix = 'ak-renderer-';
 export var RendererCssClassName = {
   DOCUMENT: "".concat(clPrefix, "document"),
   EXTENSION: "".concat(clPrefix, "extension"),
+  EXTENSION_AS_INLINE: "".concat(clPrefix, "extension-as-inline"),
   EXTENSION_CENTER_ALIGN: "".concat(clPrefix, "extension-center-align"),
   EXTENSION_OVERFLOW_CONTAINER: "".concat(clPrefix, "extension-overflow-container"),
   NUMBER_COLUMN: "".concat(clPrefix, "table-number-column"),

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

@@ -18,7 +18,8 @@ var BodiedExtension = function BodiedExtension(props) {
     extensionType = props.extensionType,
     parameters = props.parameters,
     extensionViewportSizes = props.extensionViewportSizes,
-    localId = props.localId;
+    localId = props.localId,
+    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = React.Children.toArray(children)
@@ -49,15 +50,16 @@ var BodiedExtension = function BodiedExtension(props) {
   , _extends({}, props, {
     type: "bodiedExtension"
   }), function (_ref) {
-    var result = _ref.result;
+    var node = _ref.node,
+      result = _ref.result;
     try {
       if (result && /*#__PURE__*/React.isValidElement(result)) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
-    } catch (e) {
+    } catch (_unused) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
@@ -65,7 +67,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };
 export default BodiedExtension;

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

@@ -45,6 +45,8 @@ export var renderExtension = function renderExtension(content, layout) {
   var extensionViewportSizes = arguments.length > 5 ? arguments[5] : undefined;
   var nodeHeight = arguments.length > 6 ? arguments[6] : undefined;
   var localId = arguments.length > 7 ? arguments[7] : undefined;
+  var shouldDisplayExtensionAsInline = arguments.length > 8 ? arguments[8] : undefined;
+  var node = arguments.length > 9 ? arguments[9] : undefined;
   var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
@@ -60,17 +62,20 @@ 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);
+  var inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     return jsx("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        width: isInline ? undefined : isTopLevel ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
+        calcBreakoutWidthCss(layout) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: extensionHeight && "".concat(extensionHeight, "px")
+        minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
       },
       "data-layout": layout,
       "data-local-id": localId,
@@ -90,12 +95,12 @@ export var renderExtension = function renderExtension(content, layout) {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+        width: isInline ? undefined : isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: "".concat(extensionHeight, "px")
+        minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
       "data-layout": layout,
       "data-local-id": localId
@@ -135,7 +140,7 @@ var Extension = function Extension(props) {
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
           tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
-        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
+        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
@@ -148,7 +153,7 @@ var Extension = function Extension(props) {
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
       tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
-    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
+    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined);
   });
 };
 export default overflowShadow(Extension, {

package/dist/esm/ui/ExtensionRenderer.js

@@ -113,11 +113,12 @@ export default function ExtensionRenderer(props) {
           });
         }
       }
-    } catch (e) {
+    } catch (_unused) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
     return children({
+      node: node,
       result: result
     });
   }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);

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

@@ -733,6 +733,23 @@ var extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
+var extensionAsInlineStyle = css({
+  '.ak-renderer-document .ak-renderer-extension-as-inline': {
+    display: 'inline-block',
+    // use !important here because the current width has !important applied to it and it's not working when used in React style prop
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'auto !important',
+    marginTop: 0
+  },
+  '.ak-renderer-extension-as-inline .ak-renderer-extension-overflow-container': {
+    display: 'inline-block',
+    overflowX: 'visible',
+    containerType: 'normal'
+  },
+  '.ak-renderer-extension-as-inline div, .ak-renderer-extension-as-inline p': {
+    display: 'inline-block'
+  }
+});
 var shadowSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::before, .").concat(shadowClassNames.RIGHT_SHADOW, "::after, .").concat(shadowClassNames.LEFT_SHADOW, "::before, .").concat(shadowClassNames.LEFT_SHADOW, "::after"), {
   display: 'none',
   position: 'absolute',
@@ -1680,7 +1697,9 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
+      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles,
+      // this should be placed after baseOtherStyles
+      expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
       fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, 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) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
       "data-testid": testId

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

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

package/dist/types/consts.d.ts

@@ -1,6 +1,7 @@
 export declare const RendererCssClassName: {
     DOCUMENT: string;
     EXTENSION: string;
+    EXTENSION_AS_INLINE: string;
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
     NUMBER_COLUMN: string;

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -3,7 +3,7 @@ import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirro
 import type { RendererContext, ExtensionViewportSize } from '../types';
 import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 interface Props {
     content?: any;
@@ -20,6 +20,7 @@ interface Props {
     providers: ProviderFactory;
     rendererContext: RendererContext;
     serializer: Serializer<any>;
+    shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;
     startPos: number;
 }
 declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => React.JSX.Element;

package/dist/types/react/nodes/extension.d.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import { type Mark as PMMark, type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type RendererContext, type ExtensionViewportSize } from '../types';
 import { type ExtensionLayout } from '@atlaskit/adf-schema';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 interface Props {
@@ -22,6 +22,7 @@ interface Props {
     path?: PMNode[];
     providers: ProviderFactory;
     rendererContext: RendererContext;
+    shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;
     text?: string;
 }
 type AllOrNone<T> = T | {
@@ -30,7 +31,7 @@ type AllOrNone<T> = T | {
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
 } & AllOrNone<OverflowShadowProps>;
-export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string) => React.JSX.Element;
+export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string, shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean, node?: ExtensionParams<Parameters>) => React.JSX.Element;
 declare const _default: {
     new (props: Props & OverflowShadowProps): {
         overflowContainer?: HTMLElement | null;

package/dist/types/ui/ExtensionRenderer.d.ts

@@ -6,12 +6,13 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import type { RendererContext } from '../react/types';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
-import type { ExtensionHandlers, MultiBodiedExtensionActions } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, MultiBodiedExtensionActions, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
 interface Props {
     actions?: MultiBodiedExtensionActions;
-    children: ({ result }: {
+    children: ({ node, result, }: {
+        node: ExtensionParams<Parameters>;
         result?: JSX.Element | null;
     }) => JSX.Element;
     content?: any;

package/dist/types-ts4.5/consts.d.ts

@@ -1,6 +1,7 @@
 export declare const RendererCssClassName: {
     DOCUMENT: string;
     EXTENSION: string;
+    EXTENSION_AS_INLINE: string;
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
     NUMBER_COLUMN: string;

package/dist/types-ts4.5/react/nodes/bodiedExtension.d.ts

@@ -3,7 +3,7 @@ import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirro
 import type { RendererContext, ExtensionViewportSize } from '../types';
 import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 interface Props {
     content?: any;
@@ -20,6 +20,7 @@ interface Props {
     providers: ProviderFactory;
     rendererContext: RendererContext;
     serializer: Serializer<any>;
+    shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;
     startPos: number;
 }
 declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => React.JSX.Element;

package/dist/types-ts4.5/react/nodes/extension.d.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import { type Mark as PMMark, type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type RendererContext, type ExtensionViewportSize } from '../types';
 import { type ExtensionLayout } from '@atlaskit/adf-schema';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 interface Props {
@@ -22,6 +22,7 @@ interface Props {
     path?: PMNode[];
     providers: ProviderFactory;
     rendererContext: RendererContext;
+    shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;
     text?: string;
 }
 type AllOrNone<T> = T | {
@@ -30,7 +31,7 @@ type AllOrNone<T> = T | {
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
 } & AllOrNone<OverflowShadowProps>;
-export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string) => React.JSX.Element;
+export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string, shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean, node?: ExtensionParams<Parameters>) => React.JSX.Element;
 declare const _default: {
     new (props: Props & OverflowShadowProps): {
         overflowContainer?: HTMLElement | null;

package/dist/types-ts4.5/ui/ExtensionRenderer.d.ts

@@ -6,12 +6,13 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import type { RendererContext } from '../react/types';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
-import type { ExtensionHandlers, MultiBodiedExtensionActions } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, MultiBodiedExtensionActions, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
 interface Props {
     actions?: MultiBodiedExtensionActions;
-    children: ({ result }: {
+    children: ({ node, result, }: {
+        node: ExtensionParams<Parameters>;
         result?: JSX.Element | null;
     }) => JSX.Element;
     content?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.0.0",
+	"version": "126.1.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,9 +24,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.5.0",
-		"@atlaskit/adf-utils": "^19.26.0",
+		"@atlaskit/adf-utils": "^19.27.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
-		"@atlaskit/analytics-listeners": "^9.2.0",
+		"@atlaskit/analytics-listeners": "^9.3.0",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/browser-apis": "^0.0.1",
@@ -43,7 +43,7 @@
 		"@atlaskit/link-datasource": "^4.32.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/linking-common": "^9.9.0",
-		"@atlaskit/media-card": "^79.13.0",
+		"@atlaskit/media-card": "^79.14.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
@@ -52,13 +52,13 @@
 		"@atlaskit/media-viewer": "^52.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/react-ufo": "^4.17.0",
+		"@atlaskit/react-ufo": "^5.0.0",
 		"@atlaskit/smart-card": "^43.20.0",
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.23.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.27.0",
+		"@atlaskit/tokens": "^10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",