@atlaskit/renderer 126.8.10 → 126.8.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 126.8.11
+
+### Patch Changes
+
+- [`4ba962abdce44`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ba962abdce44) -
+  EDITOR-4667 - Inline Bodied Extension: Remove important from existing extension width style
+- Updated dependencies
+
 ## 126.8.10
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -37,7 +37,7 @@ var headingAnchorLinkMessages = exports.headingAnchorLinkMessages = (0, _reactIn
   copyAriaLabel: {
     id: 'fabric.editor.headingLink.copyAriaLabel',
     defaultMessage: 'Copy',
-    description: 'copy aria label for link icon'
+    description: 'Aria label for the copy link button displayed next to a heading. Used by screen readers to describe the button that copies the heading anchor link to the clipboard.'
   }
 });
 var tableCellMessages = exports.tableCellMessages = (0, _reactIntlNext.defineMessages)({

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

@@ -65,7 +65,8 @@ var BodiedExtension = function BodiedExtension(props) {
       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
+          isTopLevel: path.length < 1,
+          rendererAppearance: props.rendererAppearance
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -75,7 +76,8 @@ var BodiedExtension = function BodiedExtension(props) {
 
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
-      isTopLevel: path.length < 1
+      isTopLevel: path.length < 1,
+      rendererAppearance: props.rendererAppearance
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -61,8 +61,12 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   // by default, we assume the extension is at top level, (direct child of doc node)
   var _ref = options || {},
     _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
+    rendererAppearance = _ref.rendererAppearance;
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
    * To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
    * for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
@@ -80,9 +84,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
-        width: isInline ? undefined : isTopLevel ?
+        width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
+        (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
       },
@@ -106,8 +110,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isInline ? undefined : isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
+        (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
@@ -149,7 +154,8 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
-          tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+          tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -162,7 +168,8 @@ var Extension = function Extension(props) {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
-      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };

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

@@ -49,17 +49,22 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
+    rendererAppearance = _ref3.rendererAppearance,
     children = _ref3.children;
   var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
+      width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+      (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -71,18 +76,22 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
 var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
   var path = _ref4.path,
     layout = _ref4.layout,
+    rendererAppearance = _ref4.rendererAppearance,
     children = _ref4.children;
   var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      width: isTopLevel ?
+      width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      (0, _breakout.calcBreakoutWidthCss)(layout) : '100%'
+      (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -103,7 +112,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     extensionKey = props.extensionKey,
     content = props.content,
     marks = props.marks,
-    localId = props.localId;
+    localId = props.localId,
+    rendererAppearance = props.rendererAppearance;
   var _useState = (0, _react2.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeChildIndex = _useState2[0],
@@ -166,7 +176,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       "data-node-type": "multiBodiedExtension"
     }, (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
       layout: layout,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent()));
   }
   return (0, _react.jsx)("section", {
@@ -181,7 +192,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     return (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent());
   }));
 };

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

@@ -275,11 +275,29 @@ var rendererFullPageStylesWithReducedPadding = (0, _react.css)((0, _defineProper
 }, "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
   '--ak-renderer--full-page-gutter': "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
 }));
+var oldRendererFullWidthStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+    width: '100% !important'
+  }
+});
 var rendererFullWidthStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px"),
   margin: "0 auto",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
+    width: '100% !important'
+  }
+});
+var oldRendererMaxWidthStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
     width: '100% !important'
   }
@@ -289,7 +307,7 @@ var rendererMaxWidthStyles = (0, _react.css)({
   maxWidth: "".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px"),
   margin: "0 auto",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
     width: '100% !important'
   }
 });
@@ -777,7 +795,7 @@ var extensionStyle = (0, _react.css)({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
-var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+var oldExtensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
   display: 'inline-block'
 }), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE), {
   display: 'inline-block',
@@ -792,6 +810,19 @@ var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _
 }), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
   display: 'inline-block'
 }));
+var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+  display: 'inline-block'
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE), {
+  display: 'inline-block',
+  width: 'auto',
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+  display: 'inline-block'
+}));
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 var inlineExtensionRendererMarginFix = (0, _react.css)({
@@ -1901,13 +1932,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (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))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+      css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (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))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
       // 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, (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) && extensionAsInlineStyle, (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && 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), (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && 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, _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 && ((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) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles],
       "data-testid": testId

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

@@ -71,7 +71,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 = "126.8.9";
+var packageVersion = "126.8.10";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/messages.js

@@ -31,7 +31,7 @@ export const headingAnchorLinkMessages = defineMessages({
   copyAriaLabel: {
     id: 'fabric.editor.headingLink.copyAriaLabel',
     defaultMessage: 'Copy',
-    description: 'copy aria label for link icon'
+    description: 'Aria label for the copy link button displayed next to a heading. Used by screen readers to describe the button that copies the heading anchor link to the clipboard.'
   }
 });
 export const tableCellMessages = defineMessages({

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

@@ -54,7 +54,8 @@ const BodiedExtension = props => {
       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
+          isTopLevel: path.length < 1,
+          rendererAppearance: props.rendererAppearance
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch {
@@ -64,7 +65,8 @@ const BodiedExtension = props => {
 
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
-      isTopLevel: path.length < 1
+      isTopLevel: path.length < 1,
+      rendererAppearance: props.rendererAppearance
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -41,9 +41,13 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
 
   // by default, we assume the extension is at top level, (direct child of doc node)
   const {
-    isTopLevel = true
+    isTopLevel = true,
+    rendererAppearance
   } = options || {};
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
    * To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
    * for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
@@ -61,9 +65,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       ,
       className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
       style: {
-        width: isInline ? undefined : isTopLevel ?
+        width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        calcBreakoutWidthCss(layout) : '100%',
+        calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : extensionHeight && `${extensionHeight}px`
       },
@@ -87,8 +91,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
     ,
     className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
+      width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: isInline ? undefined : isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+      calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       minHeight: isInline ? undefined : `${extensionHeight}px`
     },
@@ -130,7 +135,8 @@ const Extension = props => {
           isTopLevel: path.length < 1,
           handleRef,
           shadowClassNames,
-          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -143,7 +149,8 @@ const Extension = props => {
       isTopLevel: path.length < 1,
       handleRef,
       shadowClassNames,
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };

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

@@ -40,18 +40,23 @@ const MultiBodiedExtensionWrapperLegacy = ({
   width,
   path,
   layout,
+  rendererAppearance,
   children
 }) => {
   const isTopLevel = path.length < 1;
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
+      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -63,19 +68,23 @@ const MultiBodiedExtensionWrapperLegacy = ({
 const MultiBodiedExtensionWrapperNext = ({
   path,
   layout,
+  rendererAppearance,
   children
 }) => {
   const isTopLevel = path.length < 1;
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
-      width: isTopLevel ?
+      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : '100%'
+      calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -95,7 +104,8 @@ const MultiBodiedExtension = props => {
     extensionKey,
     content,
     marks,
-    localId
+    localId,
+    rendererAppearance
   } = props;
   const [activeChildIndex, setActiveChildIndex] = useState(0);
   const {
@@ -161,7 +171,8 @@ const MultiBodiedExtension = props => {
       "data-node-type": "multiBodiedExtension"
     }, jsx(MultiBodiedExtensionWrapperNext, {
       layout: layout,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent()));
   }
   return jsx("section", {
@@ -176,7 +187,8 @@ const MultiBodiedExtension = props => {
   }) => jsx(MultiBodiedExtensionWrapperLegacy, {
     layout: layout,
     width: width,
-    path: path
+    path: path,
+    rendererAppearance: rendererAppearance
   }, renderContent())));
 };
 export default MultiBodiedExtension;

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

@@ -370,11 +370,29 @@ const rendererFullPageStylesWithReducedPadding = css({
     '--ak-renderer--full-page-gutter': `${akEditorGutterPaddingReduced}px`
   }
 });
+const oldRendererFullWidthStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: `${akEditorFullWidthLayoutWidth}px`,
+  margin: `0 auto`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+    width: '100% !important'
+  }
+});
 const rendererFullWidthStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: `${akEditorFullWidthLayoutWidth}px`,
   margin: `0 auto`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
+    width: '100% !important'
+  }
+});
+const oldRendererMaxWidthStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: `${akEditorMaxWidthLayoutWidth}px`,
+  margin: `0 auto`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
     width: '100% !important'
   }
@@ -384,7 +402,7 @@ const rendererMaxWidthStyles = css({
   maxWidth: `${akEditorMaxWidthLayoutWidth}px`,
   margin: `0 auto`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
     width: '100% !important'
   }
 });
@@ -924,7 +942,7 @@ const extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
-const extensionAsInlineStyle = css({
+const oldExtensionAsInlineStyle = css({
   [`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
     display: 'inline-block'
   },
@@ -944,6 +962,24 @@ const extensionAsInlineStyle = css({
     display: 'inline-block'
   }
 });
+const extensionAsInlineStyle = css({
+  [`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
+    display: 'inline-block'
+  },
+  [`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.EXTENSION_AS_INLINE}`]: {
+    display: 'inline-block',
+    width: 'auto',
+    marginTop: 0
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`]: {
+    display: 'inline-block',
+    overflowX: 'visible',
+    containerType: 'normal'
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} div, .${RendererCssClassName.EXTENSION_AS_INLINE} p`]: {
+    display: 'inline-block'
+  }
+});
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 const inlineExtensionRendererMarginFix = css({
@@ -2421,13 +2457,13 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+      css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
       // 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, 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) && extensionAsInlineStyle, expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && 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), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && 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, 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 && (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) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles],
       "data-testid": testId

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

@@ -57,7 +57,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 = "126.8.9";
+const packageVersion = "126.8.10";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/messages.js

@@ -31,7 +31,7 @@ export var headingAnchorLinkMessages = defineMessages({
   copyAriaLabel: {
     id: 'fabric.editor.headingLink.copyAriaLabel',
     defaultMessage: 'Copy',
-    description: 'copy aria label for link icon'
+    description: 'Aria label for the copy link button displayed next to a heading. Used by screen readers to describe the button that copies the heading anchor link to the clipboard.'
   }
 });
 export var tableCellMessages = defineMessages({

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

@@ -56,7 +56,8 @@ var BodiedExtension = function BodiedExtension(props) {
       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
+          isTopLevel: path.length < 1,
+          rendererAppearance: props.rendererAppearance
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -66,7 +67,8 @@ var BodiedExtension = function BodiedExtension(props) {
 
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
-      isTopLevel: path.length < 1
+      isTopLevel: path.length < 1,
+      rendererAppearance: props.rendererAppearance
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -53,8 +53,12 @@ export var renderExtension = function renderExtension(content, layout) {
   // by default, we assume the extension is at top level, (direct child of doc node)
   var _ref = options || {},
     _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
+    rendererAppearance = _ref.rendererAppearance;
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
    * To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
    * for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
@@ -72,9 +76,9 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
-        width: isInline ? undefined : isTopLevel ?
+        width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        calcBreakoutWidthCss(layout) : '100%',
+        calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
       },
@@ -98,8 +102,9 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isInline ? undefined : isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+        calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
@@ -141,7 +146,8 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
-          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -154,7 +160,8 @@ var Extension = function Extension(props) {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };

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

@@ -41,17 +41,22 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
+    rendererAppearance = _ref3.rendererAppearance,
     children = _ref3.children;
   var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
+      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -63,18 +68,22 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
 var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
   var path = _ref4.path,
     layout = _ref4.layout,
+    rendererAppearance = _ref4.rendererAppearance,
     children = _ref4.children;
   var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      width: isTopLevel ?
+      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : '100%'
+      calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -95,7 +104,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     extensionKey = props.extensionKey,
     content = props.content,
     marks = props.marks,
-    localId = props.localId;
+    localId = props.localId,
+    rendererAppearance = props.rendererAppearance;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     activeChildIndex = _useState2[0],
@@ -158,7 +168,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       "data-node-type": "multiBodiedExtension"
     }, jsx(MultiBodiedExtensionWrapperNext, {
       layout: layout,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent()));
   }
   return jsx("section", {
@@ -173,7 +184,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     return jsx(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent());
   }));
 };

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

@@ -268,11 +268,29 @@ var rendererFullPageStylesWithReducedPadding = css(_defineProperty({
 }, "@media (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
   '--ak-renderer--full-page-gutter': "".concat(akEditorGutterPaddingReduced, "px")
 }));
+var oldRendererFullWidthStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+    width: '100% !important'
+  }
+});
 var rendererFullWidthStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px"),
   margin: "0 auto",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
+    width: '100% !important'
+  }
+});
+var oldRendererMaxWidthStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(akEditorMaxWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
     width: '100% !important'
   }
@@ -282,7 +300,7 @@ var rendererMaxWidthStyles = css({
   maxWidth: "".concat(akEditorMaxWidthLayoutWidth, "px"),
   margin: "0 auto",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
     width: '100% !important'
   }
 });
@@ -770,7 +788,7 @@ var extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
-var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+var oldExtensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
   display: 'inline-block'
 }), ".".concat(RendererCssClassName.DOCUMENT, " .").concat(RendererCssClassName.EXTENSION_AS_INLINE), {
   display: 'inline-block',
@@ -785,6 +803,19 @@ var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty
 }), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
   display: 'inline-block'
 }));
+var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+  display: 'inline-block'
+}), ".".concat(RendererCssClassName.DOCUMENT, " .").concat(RendererCssClassName.EXTENSION_AS_INLINE), {
+  display: 'inline-block',
+  width: 'auto',
+  marginTop: 0
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+  display: 'inline-block'
+}));
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 var inlineExtensionRendererMarginFix = css({
@@ -1894,13 +1925,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+      css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
       // 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, 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) && extensionAsInlineStyle, expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && 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), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && 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, 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 && (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) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles],
       "data-testid": testId

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

@@ -62,7 +62,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 = "126.8.9";
+var packageVersion = "126.8.10";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -5,6 +5,7 @@ import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { RendererAppearance } from '../../ui/Renderer/types';
 interface Props {
     content?: any;
     extensionHandlers?: ExtensionHandlers;
@@ -18,6 +19,7 @@ interface Props {
     parameters?: any;
     path?: PMNode[];
     providers: ProviderFactory;
+    rendererAppearance?: RendererAppearance;
     rendererContext: RendererContext;
     serializer: Serializer<any>;
     shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;

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

@@ -9,6 +9,7 @@ import { type ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OverflowShadowProps, OverflowShadowState, ShadowObserver } from '@atlaskit/editor-common/ui';
+import type { RendererAppearance } from '../../ui/Renderer/types';
 interface Props {
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
@@ -22,6 +23,7 @@ interface Props {
     parameters?: any;
     path?: PMNode[];
     providers: ProviderFactory;
+    rendererAppearance?: RendererAppearance;
     rendererContext: RendererContext;
     shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;
     text?: string;
@@ -31,8 +33,9 @@ type AllOrNone<T> = T | {
 };
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
+    rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;
-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>, isInsideOfInlineExtension?: boolean) => React.JSX.Element;
+export declare const renderExtension: (content: any, layout: ExtensionLayout, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string, shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean, node?: ExtensionParams<Parameters>, isInsideOfInlineExtension?: boolean) => React.JSX.Element;
 declare const _default_1: {
     new (props: Props & OverflowShadowProps): {
         calcOverflowDiff: () => number;

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

@@ -11,6 +11,7 @@ import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { RendererAppearance } from '../../ui/Renderer/types';
 type Props = React.PropsWithChildren<{
     content?: any;
     extensionHandlers?: ExtensionHandlers;
@@ -23,6 +24,7 @@ type Props = React.PropsWithChildren<{
     parameters?: any;
     path?: PMNode[];
     providers: ProviderFactory;
+    rendererAppearance?: RendererAppearance;
     rendererContext: RendererContext;
     serializer: Serializer<any>;
 }>;

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

@@ -5,6 +5,7 @@ import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { RendererAppearance } from '../../ui/Renderer/types';
 interface Props {
     content?: any;
     extensionHandlers?: ExtensionHandlers;
@@ -18,6 +19,7 @@ interface Props {
     parameters?: any;
     path?: PMNode[];
     providers: ProviderFactory;
+    rendererAppearance?: RendererAppearance;
     rendererContext: RendererContext;
     serializer: Serializer<any>;
     shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;

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

@@ -9,6 +9,7 @@ import { type ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OverflowShadowProps, OverflowShadowState, ShadowObserver } from '@atlaskit/editor-common/ui';
+import type { RendererAppearance } from '../../ui/Renderer/types';
 interface Props {
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
@@ -22,6 +23,7 @@ interface Props {
     parameters?: any;
     path?: PMNode[];
     providers: ProviderFactory;
+    rendererAppearance?: RendererAppearance;
     rendererContext: RendererContext;
     shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean;
     text?: string;
@@ -31,8 +33,9 @@ type AllOrNone<T> = T | {
 };
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
+    rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;
-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>, isInsideOfInlineExtension?: boolean) => React.JSX.Element;
+export declare const renderExtension: (content: any, layout: ExtensionLayout, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string, shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean, node?: ExtensionParams<Parameters>, isInsideOfInlineExtension?: boolean) => React.JSX.Element;
 declare const _default_1: {
     new (props: Props & OverflowShadowProps): {
         calcOverflowDiff: () => number;

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

@@ -11,6 +11,7 @@ import type { Serializer } from '../../serializer';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { RendererAppearance } from '../../ui/Renderer/types';
 type Props = React.PropsWithChildren<{
     content?: any;
     extensionHandlers?: ExtensionHandlers;
@@ -23,6 +24,7 @@ type Props = React.PropsWithChildren<{
     parameters?: any;
     path?: PMNode[];
     providers: ProviderFactory;
+    rendererAppearance?: RendererAppearance;
     rendererContext: RendererContext;
     serializer: Serializer<any>;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.8.10",
+	"version": "126.8.11",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^25.2.0",
+		"@atlaskit/tmp-editor-statsig": "^25.4.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.13.0",
+		"@atlaskit/editor-common": "^111.14.0",
 		"@atlaskit/link-provider": "^4.2.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -86,7 +86,7 @@
 		"@atlaskit/link-test-helpers": "^9.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
-		"@atlaskit/media-test-helpers": "^39.0.0",
+		"@atlaskit/media-test-helpers": "^40.0.0",
 		"@atlaskit/mention": "^24.4.0",
 		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",