@atlaskit/editor-common 120.2.0 → 120.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 120.3.1
+
+### Patch Changes
+
+- [`6f34a5002d9ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f34a5002d9ed) -
+  [ux] Fix nested multi-bodied extensions so a parent active tab does not force a nested extension's
+  first frame to render behind the `platform_editor_nested_mbe_frames` feature gate.
+
+## 120.3.0
+
+### Minor Changes
+
+- [`e62dacf4416fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e62dacf4416fd) -
+  Add the shared popup-anchor contract, registry-backed drag handle, and menu integrations behind
+  `platform_editor_block_control_migration`.
+
 ## 120.2.0
 
 ### Minor Changes

package/block-controls/surface-drag-handle-element/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/editor-common/block-controls/surface-drag-handle-element",
+  "main": "../../dist/cjs/block-controls/surface-drag-handle-element.js",
+  "module": "../../dist/esm/block-controls/surface-drag-handle-element.js",
+  "module:es2019": "../../dist/es2019/block-controls/surface-drag-handle-element.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/block-controls/surface-drag-handle-element.d.ts"
+}

package/dist/cjs/block-controls/surface-drag-handle-element.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.surfaceDragHandleElementStore = void 0;
+/**
+ * Publishes the drag handle rendered into the block controls UI control surface, so popup consumers
+ * outside Block Controls can anchor themselves to it without introducing a package cycle.
+ * Entries are keyed by editor view so editors on the same page cannot interfere with each other.
+ */
+
+var elementByView = new WeakMap();
+var listenersByView = new WeakMap();
+var surfaceDragHandleElementStore = exports.surfaceDragHandleElementStore = {
+  get: function get(view) {
+    var element = view && elementByView.get(view) || null;
+    return element !== null && element !== void 0 && element.isConnected ? element : null;
+  },
+  release: function release(view, element) {
+    if (!view || !element || elementByView.get(view) !== element) {
+      return;
+    }
+    surfaceDragHandleElementStore.set(view, null);
+  },
+  set: function set(view, element) {
+    var _elementByView$get, _listenersByView$get;
+    if (!view) {
+      return;
+    }
+    var current = (_elementByView$get = elementByView.get(view)) !== null && _elementByView$get !== void 0 ? _elementByView$get : null;
+    if (current === element) {
+      return;
+    }
+    if (element) {
+      elementByView.set(view, element);
+    } else {
+      elementByView.delete(view);
+    }
+    (_listenersByView$get = listenersByView.get(view)) === null || _listenersByView$get === void 0 || _listenersByView$get.forEach(function (listener) {
+      return listener();
+    });
+  },
+  subscribe: function subscribe(view, listener) {
+    var _listenersByView$get2;
+    if (!view) {
+      return function () {};
+    }
+    var listeners = (_listenersByView$get2 = listenersByView.get(view)) !== null && _listenersByView$get2 !== void 0 ? _listenersByView$get2 : new Set();
+    listeners.add(listener);
+    listenersByView.set(view, listeners);
+    return function () {
+      listeners.delete(listener);
+    };
+  }
+};

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

@@ -18,6 +18,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntl = require("react-intl");
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _hooks = require("../../hooks");
 var _placeholderText = require("../../messages/placeholder-text");
@@ -36,24 +37,21 @@ 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, showMacroInteractionDesignUpdates) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, ".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
-    , ")"), (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)))
-  );
+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, ")");
+
+  // 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)(
+  // 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, placeholderText) {
-  return (0, _react2.css)((0, _defineProperty2.default)({}, "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
-  // 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
-  , ") > p:only-child:has(> .ProseMirror-trailingBreak):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before"), {
+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):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before") : "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before");
+  return (0, _react2.css)((0, _defineProperty2.default)({}, activeFramePlaceholderSelector, {
     color: "var(--ds-text-subtlest, #6B6E76)",
     // JSON.stringify produces a quoted and escaped CSS string.
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -77,12 +75,14 @@ var hoverStylesOld = (0, _react2.css)({
   }
 });
 var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
-  var articleRef = _ref.articleRef;
+  var articleRef = _ref.articleRef,
+    frameId = _ref.frameId;
   return (0, _react2.jsx)("article", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
     "data-multibodiedextension-frames": true,
+    "data-multibodiedextension-frames-id": frameId,
     ref: articleRef
   });
 };
@@ -212,6 +212,10 @@ 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') {
@@ -226,9 +230,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   }, [handleContentDOMRef]);
   var childrenContainer = _react.default.useMemo(function () {
     return (0, _react2.jsx)(MultiBodiedExtensionFrames, {
-      articleRef: articleRef
+      articleRef: articleRef,
+      frameId: frameId
     });
-  }, [articleRef]);
+  }, [articleRef, frameId]);
   var actions = (0, _actionApi.useMultiBodiedExtensionActions)({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
@@ -340,7 +345,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, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, frameId, emptyFramePlaceholderText)
     /* 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.1.0";
+var packageVersion = "120.3.0";
 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.1.0";
+var packageVersion = "120.3.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/block-controls/surface-drag-handle-element.js

@@ -0,0 +1,48 @@
+/**
+ * Publishes the drag handle rendered into the block controls UI control surface, so popup consumers
+ * outside Block Controls can anchor themselves to it without introducing a package cycle.
+ * Entries are keyed by editor view so editors on the same page cannot interfere with each other.
+ */
+
+const elementByView = new WeakMap();
+const listenersByView = new WeakMap();
+export const surfaceDragHandleElementStore = {
+  get: view => {
+    const element = view && elementByView.get(view) || null;
+    return element !== null && element !== void 0 && element.isConnected ? element : null;
+  },
+  release: (view, element) => {
+    if (!view || !element || elementByView.get(view) !== element) {
+      return;
+    }
+    surfaceDragHandleElementStore.set(view, null);
+  },
+  set: (view, element) => {
+    var _elementByView$get, _listenersByView$get;
+    if (!view) {
+      return;
+    }
+    const current = (_elementByView$get = elementByView.get(view)) !== null && _elementByView$get !== void 0 ? _elementByView$get : null;
+    if (current === element) {
+      return;
+    }
+    if (element) {
+      elementByView.set(view, element);
+    } else {
+      elementByView.delete(view);
+    }
+    (_listenersByView$get = listenersByView.get(view)) === null || _listenersByView$get === void 0 ? void 0 : _listenersByView$get.forEach(listener => listener());
+  },
+  subscribe: (view, listener) => {
+    var _listenersByView$get2;
+    if (!view) {
+      return () => {};
+    }
+    const listeners = (_listenersByView$get2 = listenersByView.get(view)) !== null && _listenersByView$get2 !== void 0 ? _listenersByView$get2 : new Set();
+    listeners.add(listener);
+    listenersByView.set(view, listeners);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+};

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

@@ -14,6 +14,7 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl';
 import EditorFileIcon from '@atlaskit/icon/core/file';
 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 { useSharedPluginStateWithSelector } from '../../hooks';
 import { placeholderTextMessages } from '../../messages/placeholder-text';
@@ -24,33 +25,35 @@ 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, showMacroInteractionDesignUpdates) =>
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  [`.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
-  })`]: css(
+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})`;
+
   // 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)
-});
+  return css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
+    // 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, placeholderText) => 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
-  [`& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1
-  // 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
-  }) > p:only-child:has(> .ProseMirror-trailingBreak):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before`]: {
-    color: "var(--ds-text-subtlest, #6B6E76)",
-    // JSON.stringify produces a quoted and escaped CSS string.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    content: placeholderText,
-    pointerEvents: 'none',
-    position: 'absolute'
-  }
-});
+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):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before` : `& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) > p:only-child:has(> .ProseMirror-trailingBreak):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::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]: {
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      // JSON.stringify produces a quoted and escaped CSS string.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      content: placeholderText,
+      pointerEvents: 'none',
+      position: 'absolute'
+    }
+  });
+};
 const imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -66,13 +69,15 @@ const hoverStylesOld = css({
   }
 });
 const MultiBodiedExtensionFrames = ({
-  articleRef
+  articleRef,
+  frameId
 }) => {
   return jsx("article", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
     "data-multibodiedextension-frames": true,
+    "data-multibodiedextension-frames-id": frameId,
     ref: articleRef
   });
 };
@@ -199,6 +204,10 @@ 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') {
@@ -213,9 +222,10 @@ const MultiBodiedExtensionWithWidth = ({
   }, [handleContentDOMRef]);
   const childrenContainer = React.useMemo(() => {
     return jsx(MultiBodiedExtensionFrames, {
-      articleRef: articleRef
+      articleRef: articleRef,
+      frameId: frameId
     });
-  }, [articleRef]);
+  }, [articleRef, frameId]);
   const actions = useMultiBodiedExtensionActions({
     updateActiveChild,
     editorView,
@@ -322,7 +332,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, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, frameId, emptyFramePlaceholderText)
     /* 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.1.0";
+const packageVersion = "120.3.0";
 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.1.0";
+const packageVersion = "120.3.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/block-controls/surface-drag-handle-element.js

@@ -0,0 +1,50 @@
+/**
+ * Publishes the drag handle rendered into the block controls UI control surface, so popup consumers
+ * outside Block Controls can anchor themselves to it without introducing a package cycle.
+ * Entries are keyed by editor view so editors on the same page cannot interfere with each other.
+ */
+
+var elementByView = new WeakMap();
+var listenersByView = new WeakMap();
+export var surfaceDragHandleElementStore = {
+  get: function get(view) {
+    var element = view && elementByView.get(view) || null;
+    return element !== null && element !== void 0 && element.isConnected ? element : null;
+  },
+  release: function release(view, element) {
+    if (!view || !element || elementByView.get(view) !== element) {
+      return;
+    }
+    surfaceDragHandleElementStore.set(view, null);
+  },
+  set: function set(view, element) {
+    var _elementByView$get, _listenersByView$get;
+    if (!view) {
+      return;
+    }
+    var current = (_elementByView$get = elementByView.get(view)) !== null && _elementByView$get !== void 0 ? _elementByView$get : null;
+    if (current === element) {
+      return;
+    }
+    if (element) {
+      elementByView.set(view, element);
+    } else {
+      elementByView.delete(view);
+    }
+    (_listenersByView$get = listenersByView.get(view)) === null || _listenersByView$get === void 0 || _listenersByView$get.forEach(function (listener) {
+      return listener();
+    });
+  },
+  subscribe: function subscribe(view, listener) {
+    var _listenersByView$get2;
+    if (!view) {
+      return function () {};
+    }
+    var listeners = (_listenersByView$get2 = listenersByView.get(view)) !== null && _listenersByView$get2 !== void 0 ? _listenersByView$get2 : new Set();
+    listeners.add(listener);
+    listenersByView.set(view, listeners);
+    return function () {
+      listeners.delete(listener);
+    };
+  }
+};

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

@@ -19,6 +19,7 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl';
 import EditorFileIcon from '@atlaskit/icon/core/file';
 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 { useSharedPluginStateWithSelector } from '../../hooks';
 import { placeholderTextMessages } from '../../messages/placeholder-text';
@@ -29,24 +30,21 @@ 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, showMacroInteractionDesignUpdates) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, _defineProperty({}, ".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
-    , ")"), 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)))
-  );
+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, ")");
+
+  // 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(
+  // 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, placeholderText) {
-  return css(_defineProperty({}, "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
-  // 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
-  , ") > p:only-child:has(> .ProseMirror-trailingBreak):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before"), {
+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):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before") : "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ") > p:only-child:has(> .ProseMirror-trailingBreak):not(:has(> :not(.ProseMirror-widget):not(.ProseMirror-separator):not(.ProseMirror-trailingBreak)))::before");
+  return css(_defineProperty({}, activeFramePlaceholderSelector, {
     color: "var(--ds-text-subtlest, #6B6E76)",
     // JSON.stringify produces a quoted and escaped CSS string.
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -70,12 +68,14 @@ var hoverStylesOld = css({
   }
 });
 var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
-  var articleRef = _ref.articleRef;
+  var articleRef = _ref.articleRef,
+    frameId = _ref.frameId;
   return jsx("article", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
     "data-multibodiedextension-frames": true,
+    "data-multibodiedextension-frames-id": frameId,
     ref: articleRef
   });
 };
@@ -205,6 +205,10 @@ 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') {
@@ -219,9 +223,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   }, [handleContentDOMRef]);
   var childrenContainer = React.useMemo(function () {
     return jsx(MultiBodiedExtensionFrames, {
-      articleRef: articleRef
+      articleRef: articleRef,
+      frameId: frameId
     });
-  }, [articleRef]);
+  }, [articleRef, frameId]);
   var actions = useMultiBodiedExtensionActions({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
@@ -333,7 +338,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, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    getContainerCssExtendedStyles(activeChildIndex, frameId, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, frameId, emptyFramePlaceholderText)
     /* 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.1.0";
+var packageVersion = "120.3.0";
 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.1.0";
+var packageVersion = "120.3.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/types/block-controls/surface-drag-handle-element.d.ts

@@ -0,0 +1,19 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Publishes the drag handle rendered into the block controls UI control surface, so popup consumers
+ * outside Block Controls can anchor themselves to it without introducing a package cycle.
+ * Entries are keyed by editor view so editors on the same page cannot interfere with each other.
+ */
+type Listener = () => void;
+type SurfaceDragHandleElementStore = {
+    /** Never returns an element that has left the document. */
+    get: (view: EditorView | undefined) => HTMLElement | null;
+    /** Clears only when the supplied element is still the current one. */
+    release: (view: EditorView | undefined, element: HTMLElement | null) => void;
+    /** Publishes the currently rendered surface drag handle. */
+    set: (view: EditorView | undefined, element: HTMLElement | null) => void;
+    /** Subscribes to handle replacement for one editor instance. */
+    subscribe: (view: EditorView | undefined, listener: Listener) => () => void;
+};
+export declare const surfaceDragHandleElementStore: SurfaceDragHandleElementStore;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "120.2.0",
+	"version": "120.3.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
 		"@atlaskit/afm-i18n-platform-editor-editor-common": "2.200.0",
 		"@atlaskit/analytics-listeners": "^11.1.0",
 		"@atlaskit/analytics-namespaced-context": "^8.1.0",
-		"@atlaskit/analytics-next": "^12.3.0",
+		"@atlaskit/analytics-next": "^12.4.0",
 		"@atlaskit/atlassian-context": "^1.1.0",
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/button": "^25.2.0",
@@ -60,7 +60,7 @@
 		"@atlaskit/media-client": "^37.5.0",
 		"@atlaskit/media-client-react": "^6.2.0",
 		"@atlaskit/media-common": "^14.5.0",
-		"@atlaskit/media-file-preview": "^1.2.0",
+		"@atlaskit/media-file-preview": "^1.3.0",
 		"@atlaskit/media-picker": "^72.3.0",
 		"@atlaskit/media-ui": "^30.13.0",
 		"@atlaskit/media-viewer": "^54.6.0",
@@ -173,6 +173,9 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
+		"platform_editor_nested_mbe_frames": {
+			"type": "boolean"
+		},
 		"platform_editor_adf_validator_stage0": {
 			"type": "boolean",
 			"referenceOnly": true