@atlaskit/editor-common 120.10.3 → 120.10.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 120.10.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.
+
 ## 120.10.3
 
 ### Patch Changes

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -37,8 +37,11 @@ var _excluded = ["url"];
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates) {
-  var activeFrameSelector = (0, _fg.fg)('platform_editor_nested_mbe_frames') ? "[data-multibodiedextension-frames-id='".concat(frameId, "'] > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(").concat(activeChildIndex + 1, ")") : ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
+var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
+  if ((0, _fg.fg)('platform_editor_nested_mbe_frames')) {
+    return _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer;
+  }
+  var activeFrameSelector = ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
 
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, activeFrameSelector, (0, _react2.css)(
@@ -47,10 +50,21 @@ var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activ
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)));
 };
+var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
+  if (!(0, _fg.fg)('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+  var activeFrameSelector = "& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
+  return (0, _react2.css)((0, _defineProperty2.default)({}, activeFrameSelector, (0, _react2.css)(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)));
+};
 
 // Renders a visual placeholder when the active frame contains a single empty paragraph.
-var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, frameId, placeholderText) {
-  var activeFramePlaceholderSelector = (0, _fg.fg)('platform_editor_nested_mbe_frames') ? "& [data-multibodiedextension-frames-id='".concat(frameId, "'] > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(").concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before") : "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before");
+var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, placeholderText) {
+  var activeFramePlaceholderSelector = "& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before");
   return (0, _react2.css)((0, _defineProperty2.default)({}, activeFramePlaceholderSelector, {
     color: "var(--ds-text-subtlest, #6B6E76)",
     // JSON.stringify produces a quoted and escaped CSS string.
@@ -75,14 +89,19 @@ var hoverStylesOld = (0, _react2.css)({
   }
 });
 var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
-  var articleRef = _ref.articleRef,
-    frameId = _ref.frameId;
+  var activeChildIndex = _ref.activeChildIndex,
+    articleRef = _ref.articleRef,
+    emptyFramePlaceholderText = _ref.emptyFramePlaceholderText,
+    shouldShowEmptyFramePlaceholder = _ref.shouldShowEmptyFramePlaceholder,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   return (0, _react2.jsx)("article", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getFramesActiveFrameStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--frames",
     "data-multibodiedextension-frames": true,
-    "data-multibodiedextension-frames-id": frameId,
     ref: articleRef
   });
 };
@@ -212,10 +231,6 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activeChildIndex = _useState4[0],
     setActiveChildIndex = _useState4[1];
-  // Used by the gated active-frame styles to scope selection to this MBE instance.
-  // Editor frames sit under ProseMirror's contentDOM wrapper, so the id anchors the
-  // selector at the owning MBE before it reaches that wrapper and its direct frames.
-  var frameId = _react.default.useId();
   // Adding to avoid aliasing `this` for the callbacks
   var updateActiveChild = _react.default.useCallback(function (index) {
     if (typeof index !== 'number') {
@@ -228,12 +243,19 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   var articleRef = _react.default.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
+  var shouldShowEmptyFramePlaceholder = (0, _isExperimentEnabled.isExperimentEnabled)('confluence_native_tabs_m15');
+  var emptyFramePlaceholderText = _react.default.useMemo(function () {
+    return JSON.stringify(formatMessage(_placeholderText.placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
+  }, [formatMessage]);
   var childrenContainer = _react.default.useMemo(function () {
     return (0, _react2.jsx)(MultiBodiedExtensionFrames, {
+      activeChildIndex: activeChildIndex,
       articleRef: articleRef,
-      frameId: frameId
+      emptyFramePlaceholderText: emptyFramePlaceholderText,
+      shouldShowEmptyFramePlaceholder: shouldShowEmptyFramePlaceholder,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     });
-  }, [articleRef, frameId]);
+  }, [activeChildIndex, articleRef, emptyFramePlaceholderText, shouldShowEmptyFramePlaceholder, showMacroInteractionDesignUpdates]);
   var actions = (0, _actionApi.useMultiBodiedExtensionActions)({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
@@ -266,10 +288,6 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     mbeWrapperStyles = breakoutStyles;
   }
   var shouldUseUpdatedChrome = (0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true);
-  var shouldShowEmptyFramePlaceholder = (0, _isExperimentEnabled.isExperimentEnabled)('confluence_native_tabs_m15');
-  var emptyFramePlaceholderText = _react.default.useMemo(function () {
-    return JSON.stringify(formatMessage(_placeholderText.placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
-  }, [formatMessage]);
   var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -345,7 +363,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: containerClassNames,
     css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, frameId, emptyFramePlaceholderText)
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates)
     /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "120.10.2";
+var packageVersion = "120.10.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "120.10.2";
+var packageVersion = "120.10.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -25,8 +25,11 @@ import { ExtensionFloatingLabel } from '../Extension/Lozenge/ExtensionFloatingLa
 import { shouldExtensionBreakout } from '../utils/should-extension-breakout';
 import { useMultiBodiedExtensionActions } from './action-api';
 import { mbeExtensionWrapperCSSStyles, mbeExtensionWrapperCSSStylesOld, overlayStyles, overlayStylesOld } from './styles';
-const getContainerCssExtendedStyles = (activeChildIndex, frameId, showMacroInteractionDesignUpdates) => {
-  const activeFrameSelector = fg('platform_editor_nested_mbe_frames') ? `[data-multibodiedextension-frames-id='${frameId}'] > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})` : `.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`;
+const getContainerCssExtendedStyles = (activeChildIndex, showMacroInteractionDesignUpdates) => {
+  if (fg('platform_editor_nested_mbe_frames')) {
+    return sharedMultiBodiedExtensionStyles.mbeExtensionContainer;
+  }
+  const activeFrameSelector = `.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`;
 
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
@@ -38,10 +41,24 @@ const getContainerCssExtendedStyles = (activeChildIndex, frameId, showMacroInter
     showMacroInteractionDesignUpdates && removeMarginsAndBorder)
   });
 };
+const getFramesActiveFrameStyles = (activeChildIndex, showMacroInteractionDesignUpdates) => {
+  if (!fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+  const activeFrameSelector = `& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`;
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    [activeFrameSelector]: css(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    sharedMultiBodiedExtensionStyles.extensionFrameContent,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    showMacroInteractionDesignUpdates && removeMarginsAndBorder)
+  });
+};
 
 // Renders a visual placeholder when the active frame contains a single empty paragraph.
-const getEmptyFramePlaceholderStyles = (activeChildIndex, frameId, placeholderText) => {
-  const activeFramePlaceholderSelector = fg('platform_editor_nested_mbe_frames') ? `& [data-multibodiedextension-frames-id='${frameId}'] > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before` : `& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before`;
+const getEmptyFramePlaceholderStyles = (activeChildIndex, placeholderText) => {
+  const activeFramePlaceholderSelector = `& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before`;
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     [activeFramePlaceholderSelector]: {
@@ -69,15 +86,20 @@ const hoverStylesOld = css({
   }
 });
 const MultiBodiedExtensionFrames = ({
+  activeChildIndex,
   articleRef,
-  frameId
+  emptyFramePlaceholderText,
+  shouldShowEmptyFramePlaceholder,
+  showMacroInteractionDesignUpdates
 }) => {
   return jsx("article", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getFramesActiveFrameStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--frames",
     "data-multibodiedextension-frames": true,
-    "data-multibodiedextension-frames-id": frameId,
     ref: articleRef
   });
 };
@@ -204,10 +226,6 @@ const MultiBodiedExtensionWithWidth = ({
     formatMessage
   } = useIntl();
   const [activeChildIndex, setActiveChildIndex] = useState(0);
-  // Used by the gated active-frame styles to scope selection to this MBE instance.
-  // Editor frames sit under ProseMirror's contentDOM wrapper, so the id anchors the
-  // selector at the owning MBE before it reaches that wrapper and its direct frames.
-  const frameId = React.useId();
   // Adding to avoid aliasing `this` for the callbacks
   const updateActiveChild = React.useCallback(index => {
     if (typeof index !== 'number') {
@@ -220,12 +238,17 @@ const MultiBodiedExtensionWithWidth = ({
   const articleRef = React.useCallback(node => {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
+  const shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
+  const emptyFramePlaceholderText = React.useMemo(() => JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText)), [formatMessage]);
   const childrenContainer = React.useMemo(() => {
     return jsx(MultiBodiedExtensionFrames, {
+      activeChildIndex: activeChildIndex,
       articleRef: articleRef,
-      frameId: frameId
+      emptyFramePlaceholderText: emptyFramePlaceholderText,
+      shouldShowEmptyFramePlaceholder: shouldShowEmptyFramePlaceholder,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     });
-  }, [articleRef, frameId]);
+  }, [activeChildIndex, articleRef, emptyFramePlaceholderText, shouldShowEmptyFramePlaceholder, showMacroInteractionDesignUpdates]);
   const actions = useMultiBodiedExtensionActions({
     updateActiveChild,
     editorView,
@@ -259,8 +282,6 @@ const MultiBodiedExtensionWithWidth = ({
     mbeWrapperStyles = breakoutStyles;
   }
   const shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
-  const shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
-  const emptyFramePlaceholderText = React.useMemo(() => JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText)), [formatMessage]);
   const isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   const isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   const shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -332,7 +353,7 @@ const MultiBodiedExtensionWithWidth = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: containerClassNames,
     css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, frameId, emptyFramePlaceholderText)
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates)
     /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "120.10.2";
+const packageVersion = "120.10.3";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "120.10.2";
+const packageVersion = "120.10.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -30,8 +30,11 @@ import { ExtensionFloatingLabel } from '../Extension/Lozenge/ExtensionFloatingLa
 import { shouldExtensionBreakout } from '../utils/should-extension-breakout';
 import { useMultiBodiedExtensionActions } from './action-api';
 import { mbeExtensionWrapperCSSStyles, mbeExtensionWrapperCSSStylesOld, overlayStyles, overlayStylesOld } from './styles';
-var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates) {
-  var activeFrameSelector = fg('platform_editor_nested_mbe_frames') ? "[data-multibodiedextension-frames-id='".concat(frameId, "'] > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(").concat(activeChildIndex + 1, ")") : ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
+var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
+  if (fg('platform_editor_nested_mbe_frames')) {
+    return sharedMultiBodiedExtensionStyles.mbeExtensionContainer;
+  }
+  var activeFrameSelector = ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
 
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, _defineProperty({}, activeFrameSelector, css(
@@ -40,10 +43,21 @@ var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activ
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   showMacroInteractionDesignUpdates && removeMarginsAndBorder)));
 };
+var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
+  if (!fg('platform_editor_nested_mbe_frames')) {
+    return undefined;
+  }
+  var activeFrameSelector = "& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
+  return css(_defineProperty({}, activeFrameSelector, css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  sharedMultiBodiedExtensionStyles.extensionFrameContent,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  showMacroInteractionDesignUpdates && removeMarginsAndBorder)));
+};
 
 // Renders a visual placeholder when the active frame contains a single empty paragraph.
-var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, frameId, placeholderText) {
-  var activeFramePlaceholderSelector = fg('platform_editor_nested_mbe_frames') ? "& [data-multibodiedextension-frames-id='".concat(frameId, "'] > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(").concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before") : "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before");
+var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, placeholderText) {
+  var activeFramePlaceholderSelector = "& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak:only-child)::before");
   return css(_defineProperty({}, activeFramePlaceholderSelector, {
     color: "var(--ds-text-subtlest, #6B6E76)",
     // JSON.stringify produces a quoted and escaped CSS string.
@@ -68,14 +82,19 @@ var hoverStylesOld = css({
   }
 });
 var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
-  var articleRef = _ref.articleRef,
-    frameId = _ref.frameId;
+  var activeChildIndex = _ref.activeChildIndex,
+    articleRef = _ref.articleRef,
+    emptyFramePlaceholderText = _ref.emptyFramePlaceholderText,
+    shouldShowEmptyFramePlaceholder = _ref.shouldShowEmptyFramePlaceholder,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   return jsx("article", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getFramesActiveFrameStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--frames",
     "data-multibodiedextension-frames": true,
-    "data-multibodiedextension-frames-id": frameId,
     ref: articleRef
   });
 };
@@ -205,10 +224,6 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     _useState4 = _slicedToArray(_useState3, 2),
     activeChildIndex = _useState4[0],
     setActiveChildIndex = _useState4[1];
-  // Used by the gated active-frame styles to scope selection to this MBE instance.
-  // Editor frames sit under ProseMirror's contentDOM wrapper, so the id anchors the
-  // selector at the owning MBE before it reaches that wrapper and its direct frames.
-  var frameId = React.useId();
   // Adding to avoid aliasing `this` for the callbacks
   var updateActiveChild = React.useCallback(function (index) {
     if (typeof index !== 'number') {
@@ -221,12 +236,19 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   var articleRef = React.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
+  var shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
+  var emptyFramePlaceholderText = React.useMemo(function () {
+    return JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
+  }, [formatMessage]);
   var childrenContainer = React.useMemo(function () {
     return jsx(MultiBodiedExtensionFrames, {
+      activeChildIndex: activeChildIndex,
       articleRef: articleRef,
-      frameId: frameId
+      emptyFramePlaceholderText: emptyFramePlaceholderText,
+      shouldShowEmptyFramePlaceholder: shouldShowEmptyFramePlaceholder,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     });
-  }, [articleRef, frameId]);
+  }, [activeChildIndex, articleRef, emptyFramePlaceholderText, shouldShowEmptyFramePlaceholder, showMacroInteractionDesignUpdates]);
   var actions = useMultiBodiedExtensionActions({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
@@ -259,10 +281,6 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     mbeWrapperStyles = breakoutStyles;
   }
   var shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
-  var shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
-  var emptyFramePlaceholderText = React.useMemo(function () {
-    return JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
-  }, [formatMessage]);
   var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -338,7 +356,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: containerClassNames,
     css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, frameId, emptyFramePlaceholderText)
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates)
     /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "120.10.2";
+var packageVersion = "120.10.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "120.10.2";
+var packageVersion = "120.10.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "120.10.3",
+	"version": "120.10.4",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"