@atlaskit/renderer 137.1.3 → 137.1.5

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

@@ -10,6 +10,7 @@ import React, { useContext, useState } from 'react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -28,10 +29,12 @@ const containerStyles = css({
   }
 });
 const MultiBodiedExtensionChildrenContainer = ({
-  children
+  children,
+  frameId
 }) => {
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames"
+    "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames-id": frameId
   }, children);
 };
 const MultiBodiedExtensionNavigation = ({
@@ -41,6 +44,23 @@ 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,
@@ -128,10 +148,16 @@ 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, null, children),
+    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, {
+      frameId: frameId
+    }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 ? void 0 : (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey,
     extensionType,
@@ -165,17 +191,14 @@ const MultiBodiedExtension = props => {
       return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
         node: node,
         actions: actions
-      })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+      })), jsx(MultiBodiedExtensionChildrenContainer, {
+        frameId: frameId
+      }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
 
   // make the frame visible
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  const containerActiveFrameStyles = css`
-		& [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
-			display: block;
-		}
-	`;
+  const containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
   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/react/utils/EditorMediaClientProvider.js

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const getMediaClientConfigForRenderer = provider => {
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  return provider.viewAndUploadMediaClientConfig && fg('platform_media_video_captions') && fg('platform_editor_video_caption_commit') ? provider.viewAndUploadMediaClientConfig : provider.viewMediaClientConfig;
+  return provider.viewAndUploadMediaClientConfig && fg('platform_media_video_captions') ? provider.viewAndUploadMediaClientConfig : provider.viewMediaClientConfig;
 };
 export const EditorMediaClientProvider = ({
   children,

package/dist/es2019/ui/Expand.js

@@ -4,7 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import React, { useCallback, useRef, Suspense, lazy } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -12,8 +12,9 @@ import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthPro
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { getExpandSearchText } from './utils/expand-search-text';
 import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl';
 import { MODE, PLATFORM } from '../analytics/events';
@@ -153,17 +154,6 @@ const clearNextSiblingMarginTopStyle = css({
     marginTop: '0 !important'
   }
 });
-
-// Lazy-loaded children component
-const LazyChildren = /*#__PURE__*/lazy(() => {
-  return Promise.resolve({
-    default: ({
-      children
-    }) => {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-    }
-  });
-});
 const Container = props => {
   return jsx("div", {
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused],
@@ -223,12 +213,19 @@ function Expand({
   localId,
   nestedHeaderIds,
   rendererContentMode,
-  loadBodyContent,
-  searchText
+  node
 }) {
-  const [expanded, setExpanded] = React.useState(false);
-  const [focused, setFocused] = React.useState(false);
-  const [hasLoadedChildren, setHasLoadedChildren] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [focused, setFocused] = useState(false);
+  /**
+   * PGXT-9021: latches on the first open so the body stays mounted once rendered, including after
+   * the expand is collapsed again. Remounting it would re-run every macro and Forge data fetch
+   * inside on each reopen, which is both slower and visibly reloads content the reader has already
+   * seen. The saving this gate exists for is at initial load, where the body has never been opened,
+   * so nothing is given up by keeping it after that. Never set on the server, so the server and the
+   * client's first render agree and hydration cannot desync.
+   */
+  const [hasBeenExpanded, setHasBeenExpanded] = useState(false);
   const isMobile = false;
   const label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
   const {
@@ -238,16 +235,12 @@ function Expand({
   const contentWrapperRef = useRef(null);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
-  const expandForBrowserFind = useCallback(() => {
-    setHasLoadedChildren(true);
+  // Both state updates happen in the same handler so they land in one render, rather than the
+  // latch reacting to `expanded` from an effect.
+  const openBody = useCallback(() => {
     setExpanded(true);
+    setHasBeenExpanded(true);
   }, []);
-  const shouldRenderLazyChildren = hasLoadedChildren || loadBodyContent;
-  // Only render the lightweight text placeholder when lazy load is ON and
-  // children haven't been loaded yet. When lazy load is OFF, children are
-  // always in the DOM — hidden="until-found" on the wrapper already makes
-  // them searchable by browser find, so no placeholder is needed.
-  const shouldRenderBrowserFindText = !shouldRenderLazyChildren && searchText && fg('hot-121622_lazy_load_expand_content') && expValEquals('platform_editor_close_expand_find', 'isEnabled', true);
 
   // Feature-detect hidden="until-found" support via the beforematch event.
   // Chrome 102+ and Firefox 130+ support it; Safari does not yet.
@@ -256,8 +249,8 @@ function Expand({
   // Initialised as false and set in useEffect to avoid SSR/client hydration mismatch —
   // useMemo would return true on the client's first render in supported browsers,
   // differing from the server snapshot which always produces false.
-  const [supportsHiddenUntilFound, setSupportsHiddenUntilFound] = React.useState(false);
-  React.useEffect(() => {
+  const [supportsHiddenUntilFound, setSupportsHiddenUntilFound] = useState(false);
+  useEffect(() => {
     const doc = getDocument();
     setSupportsHiddenUntilFound(doc !== null && doc !== void 0 && doc.body ? 'onbeforematch' in doc.body : false);
   }, []);
@@ -273,13 +266,13 @@ function Expand({
   // In unsupported browsers (Safari), we skip this entirely and fall back to the normal
   // CSS hiding (visibility:hidden + height:0), which doesn't support find-in-page but
   // still works correctly for expand/collapse.
-  React.useEffect(() => {
+  useEffect(() => {
     const contentContainer = contentContainerRef.current;
     const contentWrapper = contentWrapperRef.current;
     if (!contentWrapper) {
       return;
     }
-    if (supportsHiddenUntilFound && expValEquals('platform_editor_close_expand_find', 'isEnabled', true) && !expanded) {
+    if (supportsHiddenUntilFound && isExperimentEnabled('platform_editor_close_expand_find') && !expanded) {
       contentWrapper.setAttribute('hidden', 'until-found');
       // Override the CSS visibility:hidden from contentContainerStyles — hidden="until-found"
       // now handles hiding via content-visibility:hidden, which allows browser find to index
@@ -293,31 +286,27 @@ function Expand({
       contentWrapper.style.visibility = '';
     }
   }, [expanded, supportsHiddenUntilFound]);
-  React.useEffect(() => {
-    if (!expValEquals('platform_editor_close_expand_find', 'isEnabled', true) || expanded) {
+  useEffect(() => {
+    if (!isExperimentEnabled('platform_editor_close_expand_find') || expanded) {
       return;
     }
     const contentWrapper = contentWrapperRef.current;
     const unbindWrapperBeforeMatch = contentWrapper && supportsHiddenUntilFound ? bind(contentWrapper, {
       type: 'beforematch',
-      listener: expandForBrowserFind
+      listener: openBody
     }) : undefined;
     return () => {
       unbindWrapperBeforeMatch === null || unbindWrapperBeforeMatch === void 0 ? void 0 : unbindWrapperBeforeMatch();
     };
-  }, [expandForBrowserFind, expanded, supportsHiddenUntilFound]);
-  let expandContent = children;
-  if (shouldRenderBrowserFindText) {
-    // Browser find path: keep a lightweight text mirror in the closed expand
-    // so Ctrl+F can index it without mounting the rich children tree.
-    expandContent = jsx("span", null, searchText);
-  } else if (!shouldRenderLazyChildren && fg('hot-121622_lazy_load_expand_content')) {
-    expandContent = null;
-  } else if (fg('hot-121622_lazy_load_expand_content')) {
-    expandContent = jsx(Suspense, {
-      fallback: jsx("div", null, intl.formatMessage(expandMessages.loading))
-    }, jsx(LazyChildren, null, children));
-  }
+  }, [expanded, openBody, supportsHiddenUntilFound]);
+
+  // Until the expand is first opened, stand in a plain-text mirror of the body so
+  // hidden="until-found" keeps the content findable by browser find without mounting the real
+  // subtree. The beforematch listener above expands before the browser scrolls to its match.
+  // Computed lazily: a nested expand is not mounted until its ancestor opens, so its mirror is
+  // never built on initial load.
+  const searchText = useMemo(() => node && fg('hot-121622_lazy_load_expand_content') ? getExpandSearchText(node) : undefined, [node]);
+  const expandContent = searchText && !expanded && !hasBeenExpanded ? jsx("span", null, searchText) : children;
   return jsx(Container, {
     "data-testid": `expand-container-${nodeType}-${id}`,
     "data-node-type": nodeType,
@@ -327,15 +316,8 @@ function Expand({
     expanded: expanded,
     focused: focused
   }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
-    nestedHeaderIds: nestedHeaderIds
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onNestedHeaderIdMatch: () => {
-      if (!hasLoadedChildren) {
-        setHasLoadedChildren(true);
-      }
-      setExpanded(true);
-    }
+    nestedHeaderIds: nestedHeaderIds,
+    onNestedHeaderIdMatch: openBody
   }) : null, jsx(TitleContainer
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
@@ -343,12 +325,11 @@ function Expand({
       e.preventDefault();
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
-
-      // Mark children as loaded when expanding for the first time
-      if (!expanded && !hasLoadedChildren) {
-        setHasLoadedChildren(true);
+      if (expanded) {
+        setExpanded(false);
+      } else {
+        openBody();
       }
-      setExpanded(!expanded);
       e.persist();
       // @ts-ignore detail doesn't exist on type
       e.detail ? handleBlur() : handleFocus();
@@ -383,7 +364,7 @@ function Expand({
     id: id
   }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded,
-    enableBrowserFind: supportsHiddenUntilFound && expValEquals('platform_editor_close_expand_find', 'isEnabled', true),
+    enableBrowserFind: supportsHiddenUntilFound && isExperimentEnabled('platform_editor_close_expand_find'),
     contentRef: contentContainerRef
   }, jsx("div", {
     className: `${nodeType}-content-wrapper`,

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

package/dist/es2019/ui/utils/expand-search-text.js

@@ -0,0 +1,84 @@
+import { findChildrenByMark } from '@atlaskit/editor-prosemirror/utils';
+
+/**
+ * Minimal structural view of an ADF entity. `parameters.nestedContent` holds raw ADF JSON rather
+ * than ProseMirror nodes, so it cannot be walked with the model API.
+ */
+
+/** Separates text from adjacent blocks so phrases cannot fuse across block boundaries. */
+const BLOCK_SEPARATOR = ' ';
+const asText = value => typeof value === 'string' ? value : '';
+
+/**
+ * Extracts text from raw ADF JSON.
+ *
+ * Needed because some extensions stash a whole ADF subtree in `attrs.parameters.nestedContent`
+ * instead of in their node content — Confluence does this when it coerces nesting the schema
+ * cannot represent (an expand more than two collapsible layers deep, say). Such a node is a
+ * ProseMirror leaf, so the model walk cannot see the subtree even though it renders on the page
+ * via a nested renderer. Recurses, because nestedContent routinely holds further nested content.
+ */
+const adfEntityText = entity => {
+  var _entity$attrs, _entity$attrs$paramet, _entity$content;
+  if (!entity) {
+    return '';
+  }
+  const parts = [];
+  if (entity.type === 'text') {
+    parts.push(asText(entity.text));
+  }
+  const nestedContent = (_entity$attrs = entity.attrs) === null || _entity$attrs === void 0 ? void 0 : (_entity$attrs$paramet = _entity$attrs.parameters) === null || _entity$attrs$paramet === void 0 ? void 0 : _entity$attrs$paramet.nestedContent;
+  if (nestedContent) {
+    // Prefer the real subtree over `attrs.text`, which is only a placeholder label for it.
+    parts.push(adfEntityText(nestedContent));
+  } else {
+    var _entity$attrs2;
+    parts.push(asText((_entity$attrs2 = entity.attrs) === null || _entity$attrs2 === void 0 ? void 0 : _entity$attrs2.text));
+  }
+  (_entity$content = entity.content) === null || _entity$content === void 0 ? void 0 : _entity$content.forEach(child => parts.push(adfEntityText(child)));
+  return parts.filter(Boolean).join(BLOCK_SEPARATOR);
+};
+
+/**
+ * `textBetween` drops every non-text leaf unless the node spec declares `leafText`, and no ADF
+ * node does. Leaves carry their visible text in attrs, so recover it here.
+ */
+const leafText = leaf => {
+  var _leaf$attrs, _leaf$attrs$parameter, _leaf$attrs2;
+  const nestedContent = (_leaf$attrs = leaf.attrs) === null || _leaf$attrs === void 0 ? void 0 : (_leaf$attrs$parameter = _leaf$attrs.parameters) === null || _leaf$attrs$parameter === void 0 ? void 0 : _leaf$attrs$parameter.nestedContent;
+  if (nestedContent) {
+    return adfEntityText(nestedContent);
+  }
+  return asText((_leaf$attrs2 = leaf.attrs) === null || _leaf$attrs2 === void 0 ? void 0 : _leaf$attrs2.text);
+};
+const hasInlineComment = node => findChildrenByMark(node, node.type.schema.marks.annotation, true).some(annotation => annotation.node.marks.some(mark => mark.attrs.annotationType === 'inlineComment'));
+
+/** `null` is a cached "no mirror for this node", as distinct from `undefined` for a cache miss. */
+const searchTextCache = new WeakMap();
+
+/**
+ * Plain-text mirror of an expand's body, rendered in its place while collapsed so browser
+ * find-in-page can still reach the content.
+ *
+ * Cached on the node. ProseMirror nodes are immutable and `render-document` memoises
+ * `nodeFromJSON`, so the same node instance is reused across renders — including across the
+ * serializer rebuilds that invalidate the module-level `memoizeOne` caches.
+ *
+ * @returns the mirror text, or `undefined` if this expand must keep its body rendered.
+ */
+export const getExpandSearchText = node => {
+  var _cached;
+  let cached = searchTextCache.get(node);
+  if (cached === undefined) {
+    cached = hasInlineComment(node) ?
+    // Withhold the mirror, which makes Expand keep rendering `children`. Comment
+    // navigation walks the DOM to find the annotated node and scrolls it into view, so
+    // the annotation has to exist as a real element — a flat text mirror carries no
+    // annotation marks and cannot stand in for it. Without this, stepping through
+    // comments with the arrow keys silently fails to reach any comment inside a
+    // collapsed expand. Costs the lazy-load win for these expands, deliberately.
+    null : node.textBetween(0, node.content.size, BLOCK_SEPARATOR, leafText);
+    searchTextCache.set(node, cached);
+  }
+  return (_cached = cached) !== null && _cached !== void 0 ? _cached : undefined;
+};

package/dist/esm/react/index.js

@@ -16,7 +16,7 @@ import TextWrapperComponent from './nodes/text-wrapper';
 import { isNestedHeaderLinksEnabled } from './utils/links';
 import { getColumnWidths } from '@atlaskit/editor-common/utils';
 import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
-import { findChildrenByMark, findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getText } from '../utils';
@@ -729,25 +729,14 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function getExpandProps(node) {
       var _this7 = this;
       var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var loadBodyContent = false;
-      if (fg('hot-121622_lazy_load_expand_content')) {
-        var annotations = findChildrenByMark(node, node.type.schema.marks.annotation, true);
-        // Force rendering children if there are inline comments to support comments navigation
-        // which relies on the HTML node to be present.
-        loadBodyContent = annotations.some(function (annotation) {
-          return annotation.node.marks.some(function (mark) {
-            return mark.attrs.annotationType === 'inlineComment';
-          });
-        });
-      }
-
-      // Only compute searchText when the browser find experiment is enabled,
-      // to avoid unnecessary node.textContent string allocations per expand node.
-      var searchText = expValEquals('platform_editor_close_expand_find', 'isEnabled', true) ? node.textContent : undefined;
+      // Expand receives the node rather than a precomputed string so it can derive the collapsed
+      // text mirror only when it actually renders one — a nested expand is not mounted until its
+      // ancestor opens — and so that derivation can reach content the model walk cannot, such as
+      // the ADF stashed in a coerced extension's `parameters.nestedContent`. Expand owns the
+      // feature gate check.
       if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
         return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-          loadBodyContent: loadBodyContent,
-          searchText: searchText
+          node: node
         });
       }
       var nestedHeaderIds = findChildrenByType(node, node.type.schema.nodes.heading).map(function (_ref4) {
@@ -756,8 +745,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       });
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         nestedHeaderIds: nestedHeaderIds,
-        loadBodyContent: loadBodyContent,
-        searchText: searchText
+        node: node
       });
     }
 

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

@@ -1,6 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
  * @jsxRuntime classic
@@ -13,6 +13,7 @@ import React, { useContext, useState } from 'react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -31,9 +32,11 @@ var containerStyles = css({
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    frameId = _ref.frameId;
   return jsx("article", {
-    "data-testid": "multiBodiedExtension--frames"
+    "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames-id": frameId
   }, children);
 };
 var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
@@ -42,6 +45,11 @@ 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,
@@ -128,10 +136,16 @@ 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, null, children),
+    childrenContainer: jsx(MultiBodiedExtensionChildrenContainer, {
+      frameId: frameId
+    }, children),
     allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride,
     extensionKey: extensionKey,
     extensionType: extensionType,
@@ -165,13 +179,14 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
         node: node,
         actions: actions
-      })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
+      })), jsx(MultiBodiedExtensionChildrenContainer, {
+        frameId: frameId
+      }, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children, frameId]);
 
   // make the frame visible
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  var containerActiveFrameStyles = 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 containerActiveFrameStyles = getContainerActiveFrameStyles(activeChildIndex, frameId);
   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/react/utils/EditorMediaClientProvider.js

@@ -7,7 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var getMediaClientConfigForRenderer = function getMediaClientConfigForRenderer(provider) {
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  return provider.viewAndUploadMediaClientConfig && fg('platform_media_video_captions') && fg('platform_editor_video_caption_commit') ? provider.viewAndUploadMediaClientConfig : provider.viewMediaClientConfig;
+  return provider.viewAndUploadMediaClientConfig && fg('platform_media_video_captions') ? provider.viewAndUploadMediaClientConfig : provider.viewMediaClientConfig;
 };
 export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
   var children = _ref.children,