@atlaskit/renderer 126.0.1 → 126.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 126.1.1
+
+### Patch Changes
+
+- [`7f41011a1b0ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f41011a1b0ff) -
+  EDITOR-1665 update sync block experience events to use general experience ids, keep existing error
+  events and add success events
+- Updated dependencies
+
+## 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

package/afm-jira/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",

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,9 +161,10 @@ 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, {
+var _default_1 = (0, _ui.overflowShadow)(Extension, {
   overflowSelector: ".".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
-});
+});
+var _default = exports.default = _default_1;

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

@@ -323,4 +323,5 @@ var InlineCard = function InlineCard(props) {
     })
   }))), CompetitorPromptComponent)));
 };
-var _default = exports.default = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
+var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
+var _default = exports.default = _default_1;

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

@@ -98,7 +98,10 @@ var shouldHeaderStick = exports.shouldHeaderStick = function shouldHeaderStick(s
 var shouldHeaderPinBottom = exports.shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
   return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
 };
-var addSortableColumn = exports.addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
+var addSortableColumn = exports.addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
   return _react.default.Children.map(rows, function (row, index) {
     if (index === 0) {
       return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
@@ -109,7 +112,9 @@ var addSortableColumn = exports.addSortableColumn = function addSortableColumn(r
     return row;
   });
 };
-var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
+var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
   if (!rows.length) {
     return false;
   }
@@ -155,7 +160,9 @@ var TableWrapper = function TableWrapper(_ref2) {
     "aria-label": formatMessage(_messages.tableMessages.tableScrollRegion)
   }, children);
 };
-var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
+var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
@@ -752,4 +759,5 @@ var TableWithWidth = function TableWithWidth(props) {
     });
   }
 };
-var _default = exports.default = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);
+var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);
+var _default = exports.default = _default_1;

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 = "0.0.0-development";
+var packageVersion = "126.1.0";
 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,9 +143,10 @@ 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, {
+const _default_1 = overflowShadow(Extension, {
   overflowSelector: `.${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
-});
+});
+export default _default_1;

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

@@ -307,4 +307,5 @@ const InlineCard = props => {
     })
   }))), CompetitorPromptComponent)));
 };
-export default withSmartCardStorage(InlineCard);
+const _default_1 = withSmartCardStorage(InlineCard);
+export default _default_1;

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

@@ -67,7 +67,10 @@ export const getRefTop = refElement => {
 };
 export const shouldHeaderStick = (scrollTop, tableTop, tableBottom, rowHeight) => tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
 export const shouldHeaderPinBottom = (scrollTop, tableBottom, rowHeight) => tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
-export const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
+export const addSortableColumn = (rows, tableOrderStatus, onSorting
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
   return React.Children.map(rows, (row, index) => {
     if (index === 0) {
       return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
@@ -78,7 +81,9 @@ export const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
     return row;
   });
 };
-export const isHeaderRowEnabled = rows => {
+export const isHeaderRowEnabled = (rows
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
   if (!rows.length) {
     return false;
   }
@@ -126,7 +131,9 @@ const TableWrapper = ({
     "aria-label": formatMessage(tableMessages.tableScrollRegion)
   }, children);
 };
-export const tableCanBeSticky = (node, children) => {
+export const tableCanBeSticky = (node, children
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
@@ -689,4 +696,5 @@ const TableWithWidth = props => {
     });
   }
 };
-export default withSmartCardStorage(TableWithWidth);
+const _default_1 = withSmartCardStorage(TableWithWidth);
+export default _default_1;

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 = "0.0.0-development";
+const packageVersion = "126.1.0";
 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,9 +153,10 @@ 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, {
+var _default_1 = overflowShadow(Extension, {
   overflowSelector: ".".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
-});
+});
+export default _default_1;

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

@@ -314,4 +314,5 @@ var InlineCard = function InlineCard(props) {
     })
   }))), CompetitorPromptComponent)));
 };
-export default withSmartCardStorage(InlineCard);
+var _default_1 = withSmartCardStorage(InlineCard);
+export default _default_1;