@atlaskit/editor-plugin-block-menu 20.0.2 → 20.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 20.0.4
+
+### Patch Changes
+
+- [`981dd11bb4ed2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/981dd11bb4ed2) -
+  Add opt-in target visibility handling to editor popups, and use it to hide the Jira description
+  block menu while its originating node is outside the visible viewport. The popup reappears when
+  its target returns, preserving an open nested menu, behind the
+  `platform_editor_popup_target_visibility` experiment.
+- Updated dependencies
+
+## 20.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.0.2
 
 ### Patch Changes

package/dist/cjs/ui/block-menu-renderer/fallbacks.js

@@ -10,11 +10,14 @@ var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _blockMenuTargetVisibilityContext = require("../block-menu-target-visibility-context");
 var FallbackNestedMenu = function FallbackNestedMenu(_ref) {
   var children = _ref.children;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var targetVisible = (0, _blockMenuTargetVisibilityContext.useBlockMenuTargetVisibility)();
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    isPopupVisible: targetVisible,
     elemBefore: undefined,
     elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
       label: "",

package/dist/cjs/ui/block-menu-target-visibility-context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBlockMenuTargetVisibility = exports.BlockMenuTargetVisibilityProvider = void 0;
+var _react = require("react");
+var BlockMenuTargetVisibilityContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var BlockMenuTargetVisibilityProvider = exports.BlockMenuTargetVisibilityProvider = BlockMenuTargetVisibilityContext.Provider;
+var useBlockMenuTargetVisibility = exports.useBlockMenuTargetVisibility = function useBlockMenuTargetVisibility() {
+  return (0, _react.useContext)(BlockMenuTargetVisibilityContext);
+};

package/dist/cjs/ui/block-menu.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./block-menu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
@@ -30,7 +31,10 @@ var _redo = require("@atlaskit/prosemirror-history/redo");
 var _undo = require("@atlaskit/prosemirror-history/undo");
 var _blockMenuProvider = require("./block-menu-provider");
 var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
+var _blockMenuTargetVisibilityContext = require("./block-menu-target-visibility-context");
 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
   maxWidthStyles: "_p12fnklw",
@@ -180,17 +184,20 @@ var BlockMenu = function BlockMenu(_ref5) {
     mountTo = _ref5.mountTo,
     boundariesElement = _ref5.boundariesElement,
     scrollableElement = _ref5.scrollableElement;
+  var isPopupTargetVisibilityEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_popup_target_visibility');
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
-      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
+      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$userIntentSta, _states$blockControls5;
       return {
         menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
-        isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
-        isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
+        menuTriggerByNode: isPopupTargetVisibilityEnabled ? (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode : undefined,
+        isSelectedViaDragHandle: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isSelectedViaDragHandle,
+        isMenuOpen: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.isMenuOpen,
         currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
-        openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 || (_states$blockControls4 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.openedViaKeyboard
+        openedViaKeyboard: (_states$blockControls5 = states.blockControlsState) === null || _states$blockControls5 === void 0 || (_states$blockControls5 = _states$blockControls5.blockMenuOptions) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.openedViaKeyboard
       };
     }),
     menuTriggerBy = _useSharedPluginState.menuTriggerBy,
+    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode,
     isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
     isMenuOpen = _useSharedPluginState.isMenuOpen,
     currentUserIntent = _useSharedPluginState.currentUserIntent,
@@ -228,6 +235,8 @@ var BlockMenu = function BlockMenu(_ref5) {
     anchoredToRef.current = menuTriggerBy;
   }
   var targetHandleRef = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
+  var menuTargetNode = menuTriggerByNode && (editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(menuTriggerByNode.pos));
+  var visibilityTarget = menuTargetNode instanceof HTMLElement ? menuTargetNode : undefined;
   var closeMenu = _react.default.useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls, _api$userIntent2;
@@ -257,19 +266,71 @@ var BlockMenu = function BlockMenu(_ref5) {
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     menuHeight = _React$useState4[0],
     setMenuHeight = _React$useState4[1];
+  var _React$useState5 = _react.default.useState({
+      isVisible: undefined,
+      restoreFocusTo: null
+    }),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    targetVisibility = _React$useState6[0],
+    setTargetVisibility = _React$useState6[1];
+  var targetVisible = targetVisibility.isVisible,
+    restoreFocusTo = targetVisibility.restoreFocusTo;
+  // CSS visibility can move focus to the document body. Preserve the active menu item so the
+  // existing focus-loss guard does not close the menus during a temporary scroll transition.
+  var handleTargetVisibilityChanged = _react.default.useCallback(function (isVisible) {
+    var _popupRef$current;
+    if (isVisible) {
+      setTargetVisibility(function (current) {
+        return {
+          isVisible: true,
+          restoreFocusTo: current.isVisible === false ? current.restoreFocusTo : null
+        };
+      });
+      return;
+    }
+
+    // Capture focus before scheduling the state update so the updater stays pure.
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+    var activeElement = document.activeElement;
+    var isFocusInMenu = activeElement instanceof HTMLElement && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(activeElement)) || activeElement.closest(_styles.NESTED_DROPDOWN_MENU) !== null);
+    setTargetVisibility({
+      isVisible: false,
+      restoreFocusTo: isFocusInMenu ? activeElement : null
+    });
+  }, []);
+  _react.default.useLayoutEffect(function () {
+    if (!isPopupTargetVisibilityEnabled || !targetVisible || !restoreFocusTo) {
+      return;
+    }
+    var _restoreFocusTo$owner = restoreFocusTo.ownerDocument,
+      activeElement = _restoreFocusTo$owner.activeElement,
+      body = _restoreFocusTo$owner.body,
+      documentElement = _restoreFocusTo$owner.documentElement;
+    var focusWasLost = activeElement === null || activeElement === body || activeElement === documentElement;
+    if (restoreFocusTo.isConnected && focusWasLost) {
+      restoreFocusTo.focus({
+        preventScroll: true
+      });
+    }
+    setTargetVisibility(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        restoreFocusTo: null
+      });
+    });
+  }, [isPopupTargetVisibilityEnabled, restoreFocusTo, targetVisible]);
   var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
   _react.default.useLayoutEffect(function () {
-    var _popupRef$current;
+    var _popupRef$current2;
     if (!isMenuOpen) {
       return;
     }
     onDropdownOpenChanged(true);
-    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
+    setMenuHeight(((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen, onDropdownOpenChanged]);
 
   // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
   // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
-  var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || isPopupTargetVisibilityEnabled && (targetVisible === false || restoreFocusTo !== null) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
@@ -340,6 +401,10 @@ var BlockMenu = function BlockMenu(_ref5) {
   if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  var blockMenuContent = /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  });
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.BLOCK_MENU,
     dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
@@ -354,11 +419,14 @@ var BlockMenu = function BlockMenu(_ref5) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     target: targetHandleRef,
+    visibilityTarget: visibilityTarget,
     zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     fitWidth: DEFAULT_MENU_WIDTH,
     fitHeight: menuHeight,
     preventOverflow: true,
-    stick: true
+    stick: true,
+    hideWhenTargetOutOfView: isPopupTargetVisibilityEnabled,
+    onTargetVisibilityChanged: isPopupTargetVisibilityEnabled ? handleTargetVisibilityChanged : undefined
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
@@ -367,10 +435,9 @@ var BlockMenu = function BlockMenu(_ref5) {
     {
       initialFocus: undefined
     } : undefined
-  }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
-    api: api,
-    setRef: setRef
-  })));
+  }, isPopupTargetVisibilityEnabled ? /*#__PURE__*/_react.default.createElement(_blockMenuTargetVisibilityContext.BlockMenuTargetVisibilityProvider, {
+    value: targetVisible
+  }, blockMenuContent) : blockMenuContent));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-types

package/dist/cjs/ui/format-menu-nested.js

@@ -14,6 +14,7 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _blockMenuTargetVisibilityContext = require("./block-menu-target-visibility-context");
 var _consts = require("./consts");
 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 BLOCK_MENU_TRANSFORM_SPOTLIGHT_PORTAL_SELECTOR = '[data-test-id="block-menu-transform-spotlight-portal-container"]';
@@ -25,6 +26,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
     children = _ref.children;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var targetVisible = (0, _blockMenuTargetVisibilityContext.useBlockMenuTargetVisibility)();
   var formatMenuLabel = _messages.blockMenuMessages.changeFormat;
   var handleClick = (0, _react.useCallback)(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
@@ -43,6 +45,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
     });
   }, [api]);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    isPopupVisible: targetVisible,
     text: formatMessage(formatMenuLabel),
     elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
       label: "",

package/dist/es2019/ui/block-menu-renderer/fallbacks.js

@@ -3,13 +3,16 @@ import { useIntl } from 'react-intl';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { useBlockMenuTargetVisibility } from '../block-menu-target-visibility-context';
 const FallbackNestedMenu = ({
   children
 }) => {
   const {
     formatMessage
   } = useIntl();
+  const targetVisible = useBlockMenuTargetVisibility();
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    isPopupVisible: targetVisible,
     elemBefore: undefined,
     elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
       label: "",

package/dist/es2019/ui/block-menu-target-visibility-context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+const BlockMenuTargetVisibilityContext = /*#__PURE__*/createContext(undefined);
+export const BlockMenuTargetVisibilityProvider = BlockMenuTargetVisibilityContext.Provider;
+export const useBlockMenuTargetVisibility = () => useContext(BlockMenuTargetVisibilityContext);

package/dist/es2019/ui/block-menu.js

@@ -21,6 +21,7 @@ import { redo } from '@atlaskit/prosemirror-history/redo';
 import { undo } from '@atlaskit/prosemirror-history/undo';
 import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
+import { BlockMenuTargetVisibilityProvider } from './block-menu-target-visibility-context';
 const styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
   maxWidthStyles: "_p12fnklw",
@@ -168,20 +169,23 @@ const BlockMenu = ({
   scrollableElement
 }) => {
   var _openMenuHandleRef$cu, _editorView$dom, _ref2, _api$analytics2;
+  const isPopupTargetVisibilityEnabled = isExperimentEnabled('platform_editor_popup_target_visibility');
   const {
     menuTriggerBy,
+    menuTriggerByNode,
     isSelectedViaDragHandle,
     isMenuOpen,
     currentUserIntent,
     openedViaKeyboard
   } = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], states => {
-    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4, _states$blockControls5;
+    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$userIntentSta, _states$blockControls5, _states$blockControls6;
     return {
       menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
-      isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
-      isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
+      menuTriggerByNode: isPopupTargetVisibilityEnabled ? (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode : undefined,
+      isSelectedViaDragHandle: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isSelectedViaDragHandle,
+      isMenuOpen: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.isMenuOpen,
       currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
-      openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : (_states$blockControls5 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.openedViaKeyboard
+      openedViaKeyboard: (_states$blockControls5 = states.blockControlsState) === null || _states$blockControls5 === void 0 ? void 0 : (_states$blockControls6 = _states$blockControls5.blockMenuOptions) === null || _states$blockControls6 === void 0 ? void 0 : _states$blockControls6.openedViaKeyboard
     };
   });
   const {
@@ -213,6 +217,8 @@ const BlockMenu = ({
     anchoredToRef.current = menuTriggerBy;
   }
   const targetHandleRef = isExperimentEnabled('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  const menuTargetNode = menuTriggerByNode && (editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(menuTriggerByNode.pos));
+  const visibilityTarget = menuTargetNode instanceof HTMLElement ? menuTargetNode : undefined;
   const closeMenu = React.useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
@@ -240,19 +246,68 @@ const BlockMenu = ({
   const prevIsMenuOpenRef = useRef(false);
   const popupRef = useRef(undefined);
   const [menuHeight, setMenuHeight] = React.useState(0);
+  const [targetVisibility, setTargetVisibility] = React.useState({
+    isVisible: undefined,
+    restoreFocusTo: null
+  });
+  const {
+    isVisible: targetVisible,
+    restoreFocusTo
+  } = targetVisibility;
+  // CSS visibility can move focus to the document body. Preserve the active menu item so the
+  // existing focus-loss guard does not close the menus during a temporary scroll transition.
+  const handleTargetVisibilityChanged = React.useCallback(isVisible => {
+    var _popupRef$current;
+    if (isVisible) {
+      setTargetVisibility(current => ({
+        isVisible: true,
+        restoreFocusTo: current.isVisible === false ? current.restoreFocusTo : null
+      }));
+      return;
+    }
+
+    // Capture focus before scheduling the state update so the updater stays pure.
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+    const activeElement = document.activeElement;
+    const isFocusInMenu = activeElement instanceof HTMLElement && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(activeElement)) || activeElement.closest(NESTED_DROPDOWN_MENU) !== null);
+    setTargetVisibility({
+      isVisible: false,
+      restoreFocusTo: isFocusInMenu ? activeElement : null
+    });
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!isPopupTargetVisibilityEnabled || !targetVisible || !restoreFocusTo) {
+      return;
+    }
+    const {
+      activeElement,
+      body,
+      documentElement
+    } = restoreFocusTo.ownerDocument;
+    const focusWasLost = activeElement === null || activeElement === body || activeElement === documentElement;
+    if (restoreFocusTo.isConnected && focusWasLost) {
+      restoreFocusTo.focus({
+        preventScroll: true
+      });
+    }
+    setTargetVisibility(current => ({
+      ...current,
+      restoreFocusTo: null
+    }));
+  }, [isPopupTargetVisibilityEnabled, restoreFocusTo, targetVisible]);
   const targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
   React.useLayoutEffect(() => {
-    var _popupRef$current;
+    var _popupRef$current2;
     if (!isMenuOpen) {
       return;
     }
     onDropdownOpenChanged(true);
-    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
+    setMenuHeight(((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen, onDropdownOpenChanged]);
 
   // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
   // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
-  const hasFocus = (_ref2 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  const hasFocus = (_ref2 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || isPopupTargetVisibilityEnabled && (targetVisible === false || restoreFocusTo !== null) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
@@ -323,6 +378,10 @@ const BlockMenu = ({
   if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  const blockMenuContent = /*#__PURE__*/React.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  });
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.BLOCK_MENU,
     dispatchAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
@@ -337,11 +396,14 @@ const BlockMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     target: targetHandleRef,
+    visibilityTarget: visibilityTarget,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     fitWidth: DEFAULT_MENU_WIDTH,
     fitHeight: menuHeight,
     preventOverflow: true,
-    stick: true
+    stick: true,
+    hideWhenTargetOutOfView: isPopupTargetVisibilityEnabled,
+    onTargetVisibilityChanged: isPopupTargetVisibilityEnabled ? handleTargetVisibilityChanged : undefined
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
@@ -350,10 +412,9 @@ const BlockMenu = ({
     {
       initialFocus: undefined
     } : undefined
-  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-    api: api,
-    setRef: setRef
-  })));
+  }, isPopupTargetVisibilityEnabled ? /*#__PURE__*/React.createElement(BlockMenuTargetVisibilityProvider, {
+    value: targetVisible
+  }, blockMenuContent) : blockMenuContent));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-types

package/dist/es2019/ui/format-menu-nested.js

@@ -6,6 +6,7 @@ import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { useBlockMenuTargetVisibility } from './block-menu-target-visibility-context';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 const BLOCK_MENU_TRANSFORM_SPOTLIGHT_PORTAL_SELECTOR = '[data-test-id="block-menu-transform-spotlight-portal-container"]';
 const shouldIgnoreBlockMenuTransformSpotlightCloseEvent = event => event.target instanceof Element && event.target.closest(BLOCK_MENU_TRANSFORM_SPOTLIGHT_PORTAL_SELECTOR) !== null;
@@ -16,6 +17,7 @@ export const FormatMenuComponent = ({
   const {
     formatMessage
   } = useIntl();
+  const targetVisible = useBlockMenuTargetVisibility();
   const formatMenuLabel = blockMenuMessages.changeFormat;
   const handleClick = useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
@@ -35,6 +37,7 @@ export const FormatMenuComponent = ({
     });
   }, [api]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    isPopupVisible: targetVisible,
     text: formatMessage(formatMenuLabel),
     elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
       label: "",

package/dist/esm/ui/block-menu-renderer/fallbacks.js

@@ -3,11 +3,14 @@ import { useIntl } from 'react-intl';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { useBlockMenuTargetVisibility } from '../block-menu-target-visibility-context';
 var FallbackNestedMenu = function FallbackNestedMenu(_ref) {
   var children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var targetVisible = useBlockMenuTargetVisibility();
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    isPopupVisible: targetVisible,
     elemBefore: undefined,
     elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
       label: "",

package/dist/esm/ui/block-menu-target-visibility-context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+var BlockMenuTargetVisibilityContext = /*#__PURE__*/createContext(undefined);
+export var BlockMenuTargetVisibilityProvider = BlockMenuTargetVisibilityContext.Provider;
+export var useBlockMenuTargetVisibility = function useBlockMenuTargetVisibility() {
+  return useContext(BlockMenuTargetVisibilityContext);
+};

package/dist/esm/ui/block-menu.js

@@ -1,7 +1,10 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useContext, useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl';
 import { cx } from '@atlaskit/css';
@@ -22,6 +25,7 @@ import { redo } from '@atlaskit/prosemirror-history/redo';
 import { undo } from '@atlaskit/prosemirror-history/undo';
 import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
+import { BlockMenuTargetVisibilityProvider } from './block-menu-target-visibility-context';
 var styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs130s",
   maxWidthStyles: "_p12fnklw",
@@ -171,17 +175,20 @@ var BlockMenu = function BlockMenu(_ref5) {
     mountTo = _ref5.mountTo,
     boundariesElement = _ref5.boundariesElement,
     scrollableElement = _ref5.scrollableElement;
+  var isPopupTargetVisibilityEnabled = isExperimentEnabled('platform_editor_popup_target_visibility');
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], function (states) {
-      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
+      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$userIntentSta, _states$blockControls5;
       return {
         menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
-        isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
-        isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
+        menuTriggerByNode: isPopupTargetVisibilityEnabled ? (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode : undefined,
+        isSelectedViaDragHandle: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isSelectedViaDragHandle,
+        isMenuOpen: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.isMenuOpen,
         currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
-        openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 || (_states$blockControls4 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.openedViaKeyboard
+        openedViaKeyboard: (_states$blockControls5 = states.blockControlsState) === null || _states$blockControls5 === void 0 || (_states$blockControls5 = _states$blockControls5.blockMenuOptions) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.openedViaKeyboard
       };
     }),
     menuTriggerBy = _useSharedPluginState.menuTriggerBy,
+    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode,
     isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
     isMenuOpen = _useSharedPluginState.isMenuOpen,
     currentUserIntent = _useSharedPluginState.currentUserIntent,
@@ -219,6 +226,8 @@ var BlockMenu = function BlockMenu(_ref5) {
     anchoredToRef.current = menuTriggerBy;
   }
   var targetHandleRef = isExperimentEnabled('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var menuTargetNode = menuTriggerByNode && (editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(menuTriggerByNode.pos));
+  var visibilityTarget = menuTargetNode instanceof HTMLElement ? menuTargetNode : undefined;
   var closeMenu = React.useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls, _api$userIntent2;
@@ -248,19 +257,71 @@ var BlockMenu = function BlockMenu(_ref5) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     menuHeight = _React$useState4[0],
     setMenuHeight = _React$useState4[1];
+  var _React$useState5 = React.useState({
+      isVisible: undefined,
+      restoreFocusTo: null
+    }),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    targetVisibility = _React$useState6[0],
+    setTargetVisibility = _React$useState6[1];
+  var targetVisible = targetVisibility.isVisible,
+    restoreFocusTo = targetVisibility.restoreFocusTo;
+  // CSS visibility can move focus to the document body. Preserve the active menu item so the
+  // existing focus-loss guard does not close the menus during a temporary scroll transition.
+  var handleTargetVisibilityChanged = React.useCallback(function (isVisible) {
+    var _popupRef$current;
+    if (isVisible) {
+      setTargetVisibility(function (current) {
+        return {
+          isVisible: true,
+          restoreFocusTo: current.isVisible === false ? current.restoreFocusTo : null
+        };
+      });
+      return;
+    }
+
+    // Capture focus before scheduling the state update so the updater stays pure.
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+    var activeElement = document.activeElement;
+    var isFocusInMenu = activeElement instanceof HTMLElement && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(activeElement)) || activeElement.closest(NESTED_DROPDOWN_MENU) !== null);
+    setTargetVisibility({
+      isVisible: false,
+      restoreFocusTo: isFocusInMenu ? activeElement : null
+    });
+  }, []);
+  React.useLayoutEffect(function () {
+    if (!isPopupTargetVisibilityEnabled || !targetVisible || !restoreFocusTo) {
+      return;
+    }
+    var _restoreFocusTo$owner = restoreFocusTo.ownerDocument,
+      activeElement = _restoreFocusTo$owner.activeElement,
+      body = _restoreFocusTo$owner.body,
+      documentElement = _restoreFocusTo$owner.documentElement;
+    var focusWasLost = activeElement === null || activeElement === body || activeElement === documentElement;
+    if (restoreFocusTo.isConnected && focusWasLost) {
+      restoreFocusTo.focus({
+        preventScroll: true
+      });
+    }
+    setTargetVisibility(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        restoreFocusTo: null
+      });
+    });
+  }, [isPopupTargetVisibilityEnabled, restoreFocusTo, targetVisible]);
   var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
   React.useLayoutEffect(function () {
-    var _popupRef$current;
+    var _popupRef$current2;
     if (!isMenuOpen) {
       return;
     }
     onDropdownOpenChanged(true);
-    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
+    setMenuHeight(((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen, onDropdownOpenChanged]);
 
   // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
   // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
-  var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || isPopupTargetVisibilityEnabled && (targetVisible === false || restoreFocusTo !== null) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
@@ -331,6 +392,10 @@ var BlockMenu = function BlockMenu(_ref5) {
   if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  var blockMenuContent = /*#__PURE__*/React.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  });
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.BLOCK_MENU,
     dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
@@ -345,11 +410,14 @@ var BlockMenu = function BlockMenu(_ref5) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     target: targetHandleRef,
+    visibilityTarget: visibilityTarget,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     fitWidth: DEFAULT_MENU_WIDTH,
     fitHeight: menuHeight,
     preventOverflow: true,
-    stick: true
+    stick: true,
+    hideWhenTargetOutOfView: isPopupTargetVisibilityEnabled,
+    onTargetVisibilityChanged: isPopupTargetVisibilityEnabled ? handleTargetVisibilityChanged : undefined
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
@@ -358,10 +426,9 @@ var BlockMenu = function BlockMenu(_ref5) {
     {
       initialFocus: undefined
     } : undefined
-  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-    api: api,
-    setRef: setRef
-  })));
+  }, isPopupTargetVisibilityEnabled ? /*#__PURE__*/React.createElement(BlockMenuTargetVisibilityProvider, {
+    value: targetVisible
+  }, blockMenuContent) : blockMenuContent));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-types

package/dist/esm/ui/format-menu-nested.js

@@ -6,6 +6,7 @@ import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { useBlockMenuTargetVisibility } from './block-menu-target-visibility-context';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 var BLOCK_MENU_TRANSFORM_SPOTLIGHT_PORTAL_SELECTOR = '[data-test-id="block-menu-transform-spotlight-portal-container"]';
 var shouldIgnoreBlockMenuTransformSpotlightCloseEvent = function shouldIgnoreBlockMenuTransformSpotlightCloseEvent(event) {
@@ -16,6 +17,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
     children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var targetVisible = useBlockMenuTargetVisibility();
   var formatMenuLabel = blockMenuMessages.changeFormat;
   var handleClick = useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
@@ -34,6 +36,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
     });
   }, [api]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    isPopupVisible: targetVisible,
     text: formatMessage(formatMenuLabel),
     elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
       label: "",

package/dist/types/ui/block-menu-target-visibility-context.d.ts

@@ -0,0 +1,3 @@
+import { type Provider } from 'react';
+export declare const BlockMenuTargetVisibilityProvider: Provider<boolean | undefined>;
+export declare const useBlockMenuTargetVisibility: () => boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "20.0.2",
+	"version": "20.0.4",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,21 +35,21 @@
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
-		"@atlaskit/editor-toolbar": "^2.7.0",
+		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/flag": "^19.0.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
-		"@atlaskit/tmp-editor-statsig": "^207.0.0",
+		"@atlaskit/tmp-editor-statsig": "^208.0.0",
 		"@atlaskit/tokens": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^125.2.0",
+		"@atlaskit/editor-common": "^125.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},