@atlaskit/renderer 149.0.8 → 150.0.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 150.0.1
+
+### Patch Changes
+
+- [`d7ab3eac474b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d7ab3eac474b5) -
+  Revert cleanup of experiment `platform_editor_remove_important_in_render_ext` to restore previous
+  extension width and centering behaviour for non full-page appearances. The experiment is now
+  evaluated via `@atlaskit/platform-feature-experiments`.
+
+## 150.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 149.0.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 149.0.8
 
 ### Patch Changes

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

@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _enums = require("@atlaskit/editor-common/analytics/types/enums");
 var _OverflowShadow = _interopRequireDefault(require("@atlaskit/editor-common/OverflowShadow"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _consts = require("../../consts");
 var _context = require("../../ui/annotations/context");
@@ -104,7 +105,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
 
   // we should only use custom layout for full-page appearance
-  var canUseCustomLayout = rendererAppearance === 'full-page';
+  var canUseCustomLayout = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
   var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
@@ -166,9 +167,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
     ,
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
     style: {
-      width: !isInline && isCustomLayout ?
+      width: isInline ? undefined : ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      (0, _breakout.calcBreakoutWidthCss)(layout) : undefined,
+      (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? undefined : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       minHeight: isInline ? undefined : extensionMinHeight
     },

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
 var _consts = require("../../consts");
 var _breakout = require("../utils/breakout");
@@ -62,7 +63,7 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
     children = _ref3.children;
   var isTopLevel = path.length < 1;
   // we should only use custom layout for full-page appearance
-  var canUseCustomLayout = rendererAppearance === 'full-page';
+  var canUseCustomLayout = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
   var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
@@ -71,9 +72,9 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
     // 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: isCustomLayout ?
+      width: ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      (0, _breakout.calcBreakoutWidthCss)(layout) : undefined
+      (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer",

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

@@ -327,6 +327,15 @@ var rendererFullPageStylesWithReducedPadding = (0, _react.css)((0, _defineProper
 }, "@media (max-width: ".concat(_constants.akEditorFullPageNarrowBreakout, "px)"), {
   '--ak-renderer--full-page-gutter': "".concat(_constants.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(_constants.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(_constants.akEditorFullWidthLayoutWidth, "px"),
@@ -336,6 +345,15 @@ var rendererFullWidthStyles = (0, _react.css)({
     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(_constants.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'
+  }
+});
 var rendererMaxWidthStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(_constants.akEditorMaxWidthLayoutWidth, "px"),
@@ -839,6 +857,21 @@ var extensionStyle = (0, _react.css)({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
+var oldExtensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts2.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+  display: 'inline-block'
+}), ".".concat(_consts2.RendererCssClassName.DOCUMENT, " .").concat(_consts2.RendererCssClassName.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
+}), ".".concat(_consts2.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts2.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(_consts2.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts2.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
+  display: 'inline-block'
+}));
 var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts2.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
   display: 'inline-block'
 }), ".".concat(_consts2.RendererCssClassName.DOCUMENT, " .").concat(_consts2.RendererCssClassName.EXTENSION_AS_INLINE), {
@@ -2301,13 +2334,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
       '--ak-renderer-editor-font-small-text': _editorUgcTokenNames.editorUGCTokensRefreshed['editor.font.body.small']
     },
-    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, (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, _table2.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
+    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, (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, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !(0, _table2.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    extensionAsInlineStyle, (0, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
+    (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, (0, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

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

@@ -10,6 +10,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'reac
 import { jsx, css } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics/types/enums';
 import overflowShadow from '@atlaskit/editor-common/OverflowShadow';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { RendererCssClassName } from '../../consts';
 import { ProvidersContext } from '../../ui/annotations/context';
@@ -82,7 +83,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
   } = options || {};
 
   // we should only use custom layout for full-page appearance
-  const canUseCustomLayout = rendererAppearance === 'full-page';
+  const canUseCustomLayout = isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererAppearance === 'full-page' : true;
   const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
   const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
@@ -144,9 +145,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
     ,
     className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
-      width: !isInline && isCustomLayout ?
+      width: isInline ? undefined : (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : undefined,
+      calcBreakoutWidthCss(layout) : isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? undefined : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       minHeight: isInline ? undefined : extensionMinHeight
     },

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

@@ -8,6 +8,7 @@
 
 import React, { useContext, useState } from 'react';
 import { jsx, css } from '@emotion/react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidthCss } from '../utils/breakout';
@@ -59,7 +60,7 @@ const MultiBodiedExtensionWrapperNext = ({
 }) => {
   const isTopLevel = path.length < 1;
   // we should only use custom layout for full-page appearance
-  const canUseCustomLayout = rendererAppearance === 'full-page';
+  const canUseCustomLayout = isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererAppearance === 'full-page' : true;
   const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
   const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
@@ -68,9 +69,9 @@ const MultiBodiedExtensionWrapperNext = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
-      width: isCustomLayout ?
+      width: (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : undefined
+      calcBreakoutWidthCss(layout) : isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer",

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

@@ -425,6 +425,15 @@ 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`,
@@ -434,6 +443,15 @@ const rendererFullWidthStyles = css({
     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'
+  }
+});
 const rendererMaxWidthStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: `${akEditorMaxWidthLayoutWidth}px`,
@@ -992,6 +1010,26 @@ const extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
+const oldExtensionAsInlineStyle = css({
+  [`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
+    display: 'inline-block'
+  },
+  [`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.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
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`]: {
+    display: 'inline-block',
+    overflowX: 'visible',
+    containerType: 'normal'
+  },
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_INNER_WRAPPER}`]: {
+    display: 'inline-block'
+  }
+});
 const extensionAsInlineStyle = css({
   [`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
     display: 'inline-block'
@@ -2932,13 +2970,13 @@ export const RendererStyleContainer = props => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
       '--ak-renderer-editor-font-small-text': editorUGCTokensRefreshed['editor.font.body.small']
     },
-    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
+    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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' && (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // 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, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    extensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
+    isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

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

@@ -15,6 +15,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'reac
 import { jsx, css } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics/types/enums';
 import overflowShadow from '@atlaskit/editor-common/OverflowShadow';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { RendererCssClassName } from '../../consts';
 import { ProvidersContext } from '../../ui/annotations/context';
@@ -97,7 +98,7 @@ export var renderExtension = function renderExtension(content, layout) {
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
 
   // we should only use custom layout for full-page appearance
-  var canUseCustomLayout = rendererAppearance === 'full-page';
+  var canUseCustomLayout = isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
   var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
@@ -159,9 +160,9 @@ export var renderExtension = function renderExtension(content, layout) {
     ,
     className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
     style: {
-      width: !isInline && isCustomLayout ?
+      width: isInline ? undefined : (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : undefined,
+      calcBreakoutWidthCss(layout) : isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? undefined : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       minHeight: isInline ? undefined : extensionMinHeight
     },

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

@@ -11,6 +11,7 @@ var _templateObject;
 
 import React, { useContext, useState } from 'react';
 import { jsx, css } from '@emotion/react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidthCss } from '../utils/breakout';
@@ -55,7 +56,7 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
     children = _ref3.children;
   var isTopLevel = path.length < 1;
   // we should only use custom layout for full-page appearance
-  var canUseCustomLayout = rendererAppearance === 'full-page';
+  var canUseCustomLayout = isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
   var centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
@@ -64,9 +65,9 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      width: isCustomLayout ?
+      width: (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : undefined
+      calcBreakoutWidthCss(layout) : isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer",

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

@@ -320,6 +320,15 @@ 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"),
@@ -329,6 +338,15 @@ var rendererFullWidthStyles = css({
     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'
+  }
+});
 var rendererMaxWidthStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(akEditorMaxWidthLayoutWidth, "px"),
@@ -832,6 +850,21 @@ var extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
+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',
+  // 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
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_INNER_WRAPPER), {
+  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), {
@@ -2294,13 +2327,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
       '--ak-renderer-editor-font-small-text': editorUGCTokensRefreshed['editor.font.body.small']
     },
-    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
+    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, 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' && (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // 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, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    extensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
+    isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "149.0.8",
+	"version": "150.0.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -73,8 +73,8 @@
 		"@atlaskit/status": "^5.13.0",
 		"@atlaskit/task-decision": "^21.12.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^234.0.0",
-		"@atlaskit/tokens": "^20.4.0",
+		"@atlaskit/tmp-editor-statsig": "^235.0.0",
+		"@atlaskit/tokens": "^20.5.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -88,7 +88,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^130.5.0",
+		"@atlaskit/editor-common": "^131.0.0",
 		"@atlaskit/link-provider": "^6.0.0",
 		"@atlaskit/media-core": "^39.0.0",
 		"react": "^18.2.0 || ^19.2.0",
@@ -100,7 +100,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^6.2.0",
 		"@atlaskit/checkbox": "^19.3.0",
-		"@atlaskit/editor-plugin-media": "^28.1.0",
+		"@atlaskit/editor-plugin-media": "^29.0.0",
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/inline-edit": "^16.4.0",
 		"@atlaskit/json-ld-types": "^2.0.0",