@atlaskit/renderer 137.2.2 → 137.2.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 137.2.4
+
+### Patch Changes
+
+- [`38efae8b5d945`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38efae8b5d945) -
+  Scope MultiBodiedExtension active frame styles to the owning frames article to avoid showing
+  nested inactive tab bodies.
+- Updated dependencies
+
+## 137.2.3
+
+### Patch Changes
+
+- [`9b0887c8cbac4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b0887c8cbac4) -
+  Clean up feature gate `platform_editor_fix_media_in_renderer`
+- Updated dependencies
+
 ## 137.2.2
 
 ### Patch Changes

package/dist/cjs/react/nodes/layoutColumn-compiled.js

@@ -16,7 +16,6 @@ require("./layoutColumn-compiled.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
 var clearNextSiblingMarginTopStyle = null;
@@ -38,7 +37,7 @@ var LayoutSectionCompiled = exports.LayoutSectionCompiled = function LayoutSecti
     style: {
       flexBasis: "".concat(props.width, "%")
     },
-    className: (0, _runtime.ax)([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", (0, _fg.fg)('platform_editor_fix_media_in_renderer') && "_1tihidpf _12kpidpf"])
+    className: (0, _runtime.ax)([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
   }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
   }), props.children));

package/dist/cjs/react/nodes/layoutColumn-emotion.js

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
  * @jsxRuntime classic
@@ -70,7 +69,7 @@ var LayoutSectionEmotion = exports.LayoutSectionEmotion = function LayoutSection
     },
     css: [
     // Keep separate: Compiled crashes on ternary/object lookup here.
-    (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, (0, _fg.fg)('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle]
+    (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
   }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
     css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
   }), props.children));

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

@@ -39,12 +39,30 @@ var containerStyles = (0, _react.css)({
     marginTop: 0
   }
 });
+var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex) {
+  if (!(0, _fg.fg)('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // Apply the active-frame rule on the frames article itself so nested MBEs
+  // only target their own direct frames.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& > [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+};
+var getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex) {
+  if ((0, _fg.fg)('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+};
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children,
-    frameId = _ref.frameId;
+  var activeChildIndex = _ref.activeChildIndex,
+    children = _ref.children;
   return (0, _react.jsx)("article", {
-    "data-testid": "multiBodiedExtension--frames",
-    "data-multibodiedextension-frames-id": frameId
+    css: getFramesActiveFrameStyles(activeChildIndex),
+    "data-testid": "multiBodiedExtension--frames"
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -53,11 +71,6 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-var getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex, frameId) {
-  return (0, _fg.fg)('platform_editor_nested_mbe_frames') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t&\n\t\t\t\t\t[data-multibodiedextension-frames-id='", "']\n\t\t\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), frameId, activeChildIndex + 1) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), activeChildIndex + 1);
-};
 var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
@@ -144,15 +157,11 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }),
     loading = _useMultiBodiedExtens.loading,
     extensionContext = _useMultiBodiedExtens.extensionContext;
-  // Used by the gated active-frame styles to scope selection to this MBE instance.
-  // Renderer frames are direct children of this article, so the id prevents a parent
-  // MBE selector from reaching into nested MBEs.
-  var frameId = _react2.default.useId();
   var actions = (0, _actions.useMultiBodiedExtensionActions)({
     updateActiveChild: setActiveChildIndex,
     children: children,
     childrenContainer: (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, {
-      frameId: frameId
+      activeChildIndex: activeChildIndex
     }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
@@ -188,13 +197,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         node: node,
         actions: actions
       })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, {
-        frameId: frameId
+        activeChildIndex: activeChildIndex
       }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
+  }, [activeChildIndex, loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
-  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
+  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
   if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var _isTopLevel = path.length < 1;
     var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);

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

@@ -2307,9 +2307,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
-    // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    (0, _fg.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -9,7 +9,6 @@ exports.calcLineLength = exports.breakoutInlineScriptContext = void 0;
 exports.createBreakoutInlineScript = createBreakoutInlineScript;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@atlaskit/editor-common/utils");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _style = require("./style");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /* eslint-disable jsdoc/require-jsdoc -- SSR inline script helpers */
@@ -52,7 +51,6 @@ function BreakoutSSRInlineScript(_ref) {
 }
 function createBreakoutInlineScript(id, shouldSkipScript) {
   var flags = {
-    platform_editor_fix_media_in_renderer: (0, _fg.fg)('platform_editor_fix_media_in_renderer'),
     platform_editor_renderer_extension_width_fix: (0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)
   };
   return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ", ").concat(JSON.stringify(flags), ");\n})(window);\n");
@@ -115,7 +113,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
           var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
           // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
-          isMediaSingleWithPixelWidth && flags['platform_editor_fix_media_in_renderer'] || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
+          isMediaSingleWithPixelWidth || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
             return;
           }
 

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

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

package/dist/es2019/react/nodes/layoutColumn-compiled.js

@@ -9,7 +9,6 @@ import "./layoutColumn-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
@@ -32,7 +31,7 @@ export const LayoutSectionCompiled = props => {
     style: {
       flexBasis: `${props.width}%`
     },
-    className: ax([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", fg('platform_editor_fix_media_in_renderer') && "_1tihidpf _12kpidpf"])
+    className: ax([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
   }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
     className: ax(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
   }), props.children));

package/dist/es2019/react/nodes/layoutColumn-emotion.js

@@ -13,7 +13,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
 import { css, jsx } from '@emotion/react';
 import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
@@ -72,7 +71,7 @@ export const LayoutSectionEmotion = props => {
     },
     css: [
     // Keep separate: Compiled crashes on ternary/object lookup here.
-    (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, fg('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle]
+    (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
   }, jsx(WidthProvider, null, jsx("div", {
     css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
   }), props.children));

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

@@ -28,13 +28,39 @@ const containerStyles = css({
     marginTop: 0
   }
 });
+const getFramesActiveFrameStyles = activeChildIndex => {
+  if (!fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // Apply the active-frame rule on the frames article itself so nested MBEs
+  // only target their own direct frames.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css`
+		& > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+			display: block;
+		}
+	`;
+};
+const getContainerActiveFrameStyles = activeChildIndex => {
+  if (fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css`
+		& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+			display: block;
+		}
+	`;
+};
 const MultiBodiedExtensionChildrenContainer = ({
-  children,
-  frameId
+  activeChildIndex,
+  children
 }) => {
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames",
-    "data-multibodiedextension-frames-id": frameId
+    css: getFramesActiveFrameStyles(activeChildIndex),
+    "data-testid": "multiBodiedExtension--frames"
   }, children);
 };
 const MultiBodiedExtensionNavigation = ({
@@ -44,23 +70,6 @@ const MultiBodiedExtensionNavigation = ({
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-const getContainerActiveFrameStyles = (activeChildIndex, frameId) => {
-  return fg('platform_editor_nested_mbe_frames') ?
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css`
-				&
-					[data-multibodiedextension-frames-id='${frameId}']
-					> [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-					display: block;
-				}
-			` :
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css`
-				& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-					display: block;
-				}
-			`;
-};
 const MultiBodiedExtensionWrapperLegacy = ({
   width,
   path,
@@ -148,15 +157,11 @@ const MultiBodiedExtension = props => {
     extensionType,
     extensionKey
   });
-  // Used by the gated active-frame styles to scope selection to this MBE instance.
-  // Renderer frames are direct children of this article, so the id prevents a parent
-  // MBE selector from reaching into nested MBEs.
-  const frameId = React.useId();
   const actions = useMultiBodiedExtensionActions({
     updateActiveChild: setActiveChildIndex,
     children,
     childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, {
-      frameId: frameId
+      activeChildIndex: activeChildIndex
     }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 ? void 0 : (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey,
@@ -192,13 +197,13 @@ const MultiBodiedExtension = props => {
         node: node,
         actions: actions
       })), jsx(MultiBodiedExtensionChildrenContainer, {
-        frameId: frameId
+        activeChildIndex: activeChildIndex
       }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
+  }, [activeChildIndex, loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
-  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
+  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     const isTopLevel = path.length < 1;
     const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);

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

@@ -2935,9 +2935,7 @@ export const RendererStyleContainer = props => {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
-    // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -1,7 +1,6 @@
 /* eslint-disable jsdoc/require-jsdoc -- SSR inline script helpers */
 import React from 'react';
 import { breakoutConsts } from '@atlaskit/editor-common/utils';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { FullPagePadding } from './style';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
@@ -43,7 +42,6 @@ export function BreakoutSSRInlineScript({
 }
 export function createBreakoutInlineScript(id, shouldSkipScript) {
   const flags = {
-    platform_editor_fix_media_in_renderer: fg('platform_editor_fix_media_in_renderer'),
     platform_editor_renderer_extension_width_fix: expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)
   };
   return `(function(window){
@@ -119,7 +117,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
           const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
           // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
-          isMediaSingleWithPixelWidth && flags['platform_editor_fix_media_in_renderer'] || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
+          isMediaSingleWithPixelWidth || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
             return;
           }
 

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

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

package/dist/esm/react/nodes/layoutColumn-compiled.js

@@ -9,7 +9,6 @@ import "./layoutColumn-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
@@ -32,7 +31,7 @@ export var LayoutSectionCompiled = function LayoutSectionCompiled(props) {
     style: {
       flexBasis: "".concat(props.width, "%")
     },
-    className: ax([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", fg('platform_editor_fix_media_in_renderer') && "_1tihidpf _12kpidpf"])
+    className: ax([(isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
   }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
     className: ax(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
   }), props.children));

package/dist/esm/react/nodes/layoutColumn-emotion.js

@@ -14,7 +14,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
 import { css, jsx } from '@emotion/react';
 import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
@@ -63,7 +62,7 @@ export var LayoutSectionEmotion = function LayoutSectionEmotion(props) {
     },
     css: [
     // Keep separate: Compiled crashes on ternary/object lookup here.
-    (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, fg('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle]
+    (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'middle' && verticalAlignMiddleStyles, (isLayoutColumnValignRenderingEnabled || isLayoutColumnMenuEnabled) && props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
   }, jsx(WidthProvider, null, jsx("div", {
     css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
   }), props.children));

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

@@ -31,12 +31,30 @@ var containerStyles = css({
     marginTop: 0
   }
 });
+var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex) {
+  if (!fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // Apply the active-frame rule on the frames article itself so nested MBEs
+  // only target their own direct frames.
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& > [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+};
+var getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex) {
+  if (fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+};
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children,
-    frameId = _ref.frameId;
+  var activeChildIndex = _ref.activeChildIndex,
+    children = _ref.children;
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames",
-    "data-multibodiedextension-frames-id": frameId
+    css: getFramesActiveFrameStyles(activeChildIndex),
+    "data-testid": "multiBodiedExtension--frames"
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -45,11 +63,6 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-var getContainerActiveFrameStyles = function getContainerActiveFrameStyles(activeChildIndex, frameId) {
-  return fg('platform_editor_nested_mbe_frames') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t&\n\t\t\t\t\t[data-multibodiedextension-frames-id='", "']\n\t\t\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), frameId, activeChildIndex + 1) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t"])), activeChildIndex + 1);
-};
 var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
@@ -136,15 +149,11 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }),
     loading = _useMultiBodiedExtens.loading,
     extensionContext = _useMultiBodiedExtens.extensionContext;
-  // Used by the gated active-frame styles to scope selection to this MBE instance.
-  // Renderer frames are direct children of this article, so the id prevents a parent
-  // MBE selector from reaching into nested MBEs.
-  var frameId = React.useId();
   var actions = useMultiBodiedExtensionActions({
     updateActiveChild: setActiveChildIndex,
     children: children,
     childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, {
-      frameId: frameId
+      activeChildIndex: activeChildIndex
     }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
@@ -180,13 +189,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         node: node,
         actions: actions
       })), jsx(MultiBodiedExtensionChildrenContainer, {
-        frameId: frameId
+        activeChildIndex: activeChildIndex
       }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
+  }, [activeChildIndex, loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
-  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
+  var containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex);
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var _isTopLevel = path.length < 1;
     var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);

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

@@ -2300,9 +2300,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
-    // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -1,7 +1,6 @@
 /* eslint-disable jsdoc/require-jsdoc -- SSR inline script helpers */
 import React from 'react';
 import { breakoutConsts } from '@atlaskit/editor-common/utils';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { FullPagePadding } from './style';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
@@ -42,7 +41,6 @@ export function BreakoutSSRInlineScript(_ref) {
 }
 export function createBreakoutInlineScript(id, shouldSkipScript) {
   var flags = {
-    platform_editor_fix_media_in_renderer: fg('platform_editor_fix_media_in_renderer'),
     platform_editor_renderer_extension_width_fix: expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)
   };
   return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ", ").concat(JSON.stringify(flags), ");\n})(window);\n");
@@ -105,7 +103,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
           var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
           // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
-          isMediaSingleWithPixelWidth && flags['platform_editor_fix_media_in_renderer'] || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
+          isMediaSingleWithPixelWidth || isExtension && flags['platform_editor_renderer_extension_width_fix']) {
             return;
           }
 

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "137.2.2",
+	"version": "137.2.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
 		"@atlaskit/status": "^5.9.0",
 		"@atlaskit/task-decision": "^21.9.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^170.0.0",
+		"@atlaskit/tmp-editor-statsig": "^171.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -177,9 +177,6 @@
 		"platform_editor_nested_mbe_frames": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_media_in_renderer": {
-			"type": "boolean"
-		},
 		"platform_editor_content_mode_button_mvp": {
 			"type": "boolean"
 		},