@atlaskit/editor-plugin-block-menu 20.0.3 → 20.0.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 20.0.5
+
+### Patch Changes
+
+- [`2fbdbadc1a47c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fbdbadc1a47c) -
+  Convert direct container headings and nested list paragraphs to Normal or Small text while
+  preserving other nested content under platform_editor_block_menu_small_text.
+- Updated dependencies
+
+## 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

package/dist/cjs/editor-commands/transform-node-utils/TRANSFORMATION_MATRIX.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TRANSFORMATION_MATRIX_PANEL_C1 = exports.TRANSFORMATION_MATRIX = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _applyTargetTextTypeStep = require("./steps/applyTargetTextTypeStep");
 var _convertEachNodeStep = require("./steps/convertEachNodeStep");
 var _decisionListToListStep = require("./steps/decisionListToListStep");
@@ -24,6 +25,19 @@ var _wrapMixedContentStep = require("./steps/wrapMixedContentStep");
 var _wrapStep = require("./steps/wrapStep");
 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 applyTargetHeadingToParagraphStep = function applyTargetHeadingToParagraphStep(nodes, context) {
+  if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_menu_small_text')) {
+    return nodes;
+  }
+  return nodes.map(function (node) {
+    var _applyTargetTextTypeS;
+    if (node.type.name !== 'heading') {
+      return node;
+    }
+    return (_applyTargetTextTypeS = (0, _applyTargetTextTypeStep.applyTargetTextTypeStep)([node], context).at(0)) !== null && _applyTargetTextTypeS !== void 0 ? _applyTargetTextTypeS : node;
+  });
+};
+
 /**
  * Creates the transformation matrix for all node type pairs.
  * When includePanelC1 is true (platform_editor_nest_table_in_panel experiment on),
@@ -71,7 +85,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
       expand: [_unwrapStep.unwrapStep, _wrapStep.wrapStep],
       nestedExpand: [_unwrapStep.unwrapStep, _wrapStep.wrapStep],
       layoutSection: [_unwrapStep.unwrapStep, _wrapMixedContentStep.wrapMixedContentStep],
-      paragraph: [_unwrapStep.unwrapStep]
+      paragraph: [_unwrapStep.unwrapStep, applyTargetHeadingToParagraphStep]
     },
     panel_c1: includePanelC1 ? {
       blockquote: [_unwrapStep.unwrapStep, _wrapMixedContentStep.wrapMixedContentStep],
@@ -79,7 +93,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
       expand: [_unwrapStep.unwrapStep, _wrapStep.wrapStep],
       nestedExpand: [_unwrapStep.unwrapStep, _wrapStep.wrapStep],
       layoutSection: [_unwrapStep.unwrapStep, _wrapMixedContentStep.wrapMixedContentStep],
-      paragraph: [_unwrapStep.unwrapStep]
+      paragraph: [_unwrapStep.unwrapStep, applyTargetHeadingToParagraphStep]
     } : {},
     expand: _objectSpread(_objectSpread({
       panel: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep]
@@ -89,7 +103,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
       blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
       layoutSection: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
       nestedExpand: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
-      paragraph: [_unwrapExpandStep.unwrapExpandStep]
+      paragraph: [_unwrapExpandStep.unwrapExpandStep, applyTargetHeadingToParagraphStep]
     }),
     nestedExpand: _objectSpread(_objectSpread({
       panel: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep]
@@ -98,7 +112,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
     } : {}), {}, {
       blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
       layoutSection: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
-      paragraph: [_unwrapExpandStep.unwrapExpandStep]
+      paragraph: [_unwrapExpandStep.unwrapExpandStep, applyTargetHeadingToParagraphStep]
     }),
     blockquote: _objectSpread(_objectSpread({
       expand: [_wrapStep.wrapStep],
@@ -108,7 +122,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
     }, includePanelC1 ? {
       panel_c1: [_unwrapStep.unwrapStep, _wrapStep.wrapStep]
     } : {}), {}, {
-      paragraph: [_unwrapStep.unwrapStep],
+      paragraph: [_unwrapStep.unwrapStep, applyTargetHeadingToParagraphStep],
       decisionList: [_unwrapStep.unwrapStep, _wrapBlockquoteToDecisionListStep.wrapBlockquoteToDecisionListStep]
     }),
     layoutSection: _objectSpread(_objectSpread({
@@ -119,7 +133,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
     }, includePanelC1 ? {
       panel_c1: [_unwrapLayoutStep.unwrapLayoutStep, _wrapMixedContentStep.wrapMixedContentStep]
     } : {}), {}, {
-      paragraph: [_unwrapLayoutStep.unwrapLayoutStep]
+      paragraph: [_unwrapLayoutStep.unwrapLayoutStep, applyTargetHeadingToParagraphStep]
     }),
     codeBlock: _objectSpread(_objectSpread({
       blockquote: [_wrapStep.wrapStep],

package/dist/cjs/editor-commands/transform-node-utils/transform.js

@@ -13,7 +13,14 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils = require("../transform-node-utils/utils");
 var _TRANSFORMATION_MATRIX = require("./TRANSFORMATION_MATRIX");
 var _types = require("./types");
+var LIST_NODE_TYPE_NAMES = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'listItem', 'taskItem', 'blockTaskItem', 'decisionItem']);
+var shouldRecurseThroughListNode = function shouldRecurseThroughListNode(node) {
+  return LIST_NODE_TYPE_NAMES.has(node.type.name);
+};
 var _applyTargetNodeMarks = function applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema) {
+  var shouldRecurseIntoChildren = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : function () {
+    return true;
+  };
   var nextNode = node;
   if (node.type === targetNodeType) {
     var marksAfterRemovals = (marksToRemove !== null && marksToRemove !== void 0 ? marksToRemove : []).reduce(function (currentMarks, name) {
@@ -29,12 +36,12 @@ var _applyTargetNodeMarks = function applyTargetNodeMarks(node, targetNodeType,
     }, marksAfterRemovals);
     nextNode = node.mark(marks);
   }
-  if (nextNode.childCount === 0) {
+  if (!shouldRecurseIntoChildren(nextNode) || nextNode.childCount === 0) {
     return nextNode;
   }
   var children = [];
   nextNode.forEach(function (child) {
-    return children.push(_applyTargetNodeMarks(child, targetNodeType, marksToAdd, marksToRemove, schema));
+    return children.push(_applyTargetNodeMarks(child, targetNodeType, marksToAdd, marksToRemove, schema, shouldRecurseIntoChildren));
   });
   return nextNode.copy(_model.Fragment.fromArray(children));
 };
@@ -112,12 +119,13 @@ var convertNodesToTargetType = exports.convertNodesToTargetType = function conve
     }, sourceNodes);
     return upgradePanelNodesToPanelC1(_resultNodes, parentNode, schema);
   }
+  var shouldLimitTargetNodeMarkRecursion = targetNodeTypeName === 'paragraph' && ['multi', 'panel', 'panel_c1', 'expand', 'nestedExpand', 'blockquote', 'layoutSection'].includes(selectedNodeTypeName);
   var resultNodes = (_steps$reduce = steps === null || steps === void 0 ? void 0 : steps.reduce(function (nodes, step) {
     return step(nodes, context);
   }, sourceNodes)) !== null && _steps$reduce !== void 0 ? _steps$reduce : sourceNodes;
   var upgradedNodes = steps !== null && steps !== void 0 && steps.length ? upgradePanelNodesToPanelC1(resultNodes, parentNode, schema) : resultNodes;
   return upgradedNodes.map(function (node) {
-    return _applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema);
+    return _applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema, shouldLimitTargetNodeMarkRecursion ? shouldRecurseThroughListNode : undefined);
   });
 };
 var isTransformDisabledBasedOnStepsConfig = exports.isTransformDisabledBasedOnStepsConfig = function isTransformDisabledBasedOnStepsConfig(selectedNodeType, targetNodeType) {

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/editor-commands/transform-node-utils/TRANSFORMATION_MATRIX.js

@@ -1,3 +1,4 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { applyTargetTextTypeStep } from './steps/applyTargetTextTypeStep';
 import { convertEachNodeStep } from './steps/convertEachNodeStep';
 import { decisionListToListStep } from './steps/decisionListToListStep';
@@ -14,6 +15,19 @@ import { wrapBlockquoteToDecisionListStep } from './steps/wrapBlockquoteToDecisi
 import { wrapIntoListStep } from './steps/wrapIntoListStep';
 import { wrapMixedContentStep } from './steps/wrapMixedContentStep';
 import { wrapStep } from './steps/wrapStep';
+const applyTargetHeadingToParagraphStep = (nodes, context) => {
+  if (!isExperimentEnabled('platform_editor_block_menu_small_text')) {
+    return nodes;
+  }
+  return nodes.map(node => {
+    var _applyTargetTextTypeS;
+    if (node.type.name !== 'heading') {
+      return node;
+    }
+    return (_applyTargetTextTypeS = applyTargetTextTypeStep([node], context).at(0)) !== null && _applyTargetTextTypeS !== void 0 ? _applyTargetTextTypeS : node;
+  });
+};
+
 /**
  * Creates the transformation matrix for all node type pairs.
  * When includePanelC1 is true (platform_editor_nest_table_in_panel experiment on),
@@ -60,7 +74,7 @@ const createTransformationMatrix = includePanelC1 => ({
     expand: [unwrapStep, wrapStep],
     nestedExpand: [unwrapStep, wrapStep],
     layoutSection: [unwrapStep, wrapMixedContentStep],
-    paragraph: [unwrapStep]
+    paragraph: [unwrapStep, applyTargetHeadingToParagraphStep]
   },
   panel_c1: includePanelC1 ? {
     blockquote: [unwrapStep, wrapMixedContentStep],
@@ -68,7 +82,7 @@ const createTransformationMatrix = includePanelC1 => ({
     expand: [unwrapStep, wrapStep],
     nestedExpand: [unwrapStep, wrapStep],
     layoutSection: [unwrapStep, wrapMixedContentStep],
-    paragraph: [unwrapStep]
+    paragraph: [unwrapStep, applyTargetHeadingToParagraphStep]
   } : {},
   expand: {
     panel: [unwrapExpandStep, wrapMixedContentStep],
@@ -78,7 +92,7 @@ const createTransformationMatrix = includePanelC1 => ({
     blockquote: [unwrapExpandStep, wrapMixedContentStep],
     layoutSection: [unwrapExpandStep, wrapMixedContentStep],
     nestedExpand: [unwrapExpandStep, wrapStep],
-    paragraph: [unwrapExpandStep]
+    paragraph: [unwrapExpandStep, applyTargetHeadingToParagraphStep]
   },
   nestedExpand: {
     panel: [unwrapExpandStep, wrapMixedContentStep],
@@ -87,7 +101,7 @@ const createTransformationMatrix = includePanelC1 => ({
     } : {}),
     blockquote: [unwrapExpandStep, wrapMixedContentStep],
     layoutSection: [unwrapExpandStep, wrapMixedContentStep],
-    paragraph: [unwrapExpandStep]
+    paragraph: [unwrapExpandStep, applyTargetHeadingToParagraphStep]
   },
   blockquote: {
     expand: [wrapStep],
@@ -97,7 +111,7 @@ const createTransformationMatrix = includePanelC1 => ({
     ...(includePanelC1 ? {
       panel_c1: [unwrapStep, wrapStep]
     } : {}),
-    paragraph: [unwrapStep],
+    paragraph: [unwrapStep, applyTargetHeadingToParagraphStep],
     decisionList: [unwrapStep, wrapBlockquoteToDecisionListStep]
   },
   layoutSection: {
@@ -108,7 +122,7 @@ const createTransformationMatrix = includePanelC1 => ({
     ...(includePanelC1 ? {
       panel_c1: [unwrapLayoutStep, wrapMixedContentStep]
     } : {}),
-    paragraph: [unwrapLayoutStep]
+    paragraph: [unwrapLayoutStep, applyTargetHeadingToParagraphStep]
   },
   codeBlock: {
     blockquote: [wrapStep],

package/dist/es2019/editor-commands/transform-node-utils/transform.js

@@ -5,7 +5,9 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getTargetNodeTypeNameInContext } from '../transform-node-utils/utils';
 import { TRANSFORMATION_MATRIX, TRANSFORMATION_MATRIX_PANEL_C1 } from './TRANSFORMATION_MATRIX';
 import { getNodeName, toNodeTypeValue } from './types';
-const applyTargetNodeMarks = (node, targetNodeType, marksToAdd, marksToRemove, schema) => {
+const LIST_NODE_TYPE_NAMES = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'listItem', 'taskItem', 'blockTaskItem', 'decisionItem']);
+const shouldRecurseThroughListNode = node => LIST_NODE_TYPE_NAMES.has(node.type.name);
+const applyTargetNodeMarks = (node, targetNodeType, marksToAdd, marksToRemove, schema, shouldRecurseIntoChildren = () => true) => {
   let nextNode = node;
   if (node.type === targetNodeType) {
     const marksAfterRemovals = (marksToRemove !== null && marksToRemove !== void 0 ? marksToRemove : []).reduce((currentMarks, name) => {
@@ -18,11 +20,11 @@ const applyTargetNodeMarks = (node, targetNodeType, marksToAdd, marksToRemove, s
     }, marksAfterRemovals);
     nextNode = node.mark(marks);
   }
-  if (nextNode.childCount === 0) {
+  if (!shouldRecurseIntoChildren(nextNode) || nextNode.childCount === 0) {
     return nextNode;
   }
   const children = [];
-  nextNode.forEach(child => children.push(applyTargetNodeMarks(child, targetNodeType, marksToAdd, marksToRemove, schema)));
+  nextNode.forEach(child => children.push(applyTargetNodeMarks(child, targetNodeType, marksToAdd, marksToRemove, schema, shouldRecurseIntoChildren)));
   return nextNode.copy(Fragment.fromArray(children));
 };
 
@@ -98,9 +100,10 @@ export const convertNodesToTargetType = ({
     const resultNodes = steps.reduce((nodes, step) => step(nodes, context), sourceNodes);
     return upgradePanelNodesToPanelC1(resultNodes, parentNode, schema);
   }
+  const shouldLimitTargetNodeMarkRecursion = targetNodeTypeName === 'paragraph' && ['multi', 'panel', 'panel_c1', 'expand', 'nestedExpand', 'blockquote', 'layoutSection'].includes(selectedNodeTypeName);
   const resultNodes = (_steps$reduce = steps === null || steps === void 0 ? void 0 : steps.reduce((nodes, step) => step(nodes, context), sourceNodes)) !== null && _steps$reduce !== void 0 ? _steps$reduce : sourceNodes;
   const upgradedNodes = steps !== null && steps !== void 0 && steps.length ? upgradePanelNodesToPanelC1(resultNodes, parentNode, schema) : resultNodes;
-  return upgradedNodes.map(node => applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema));
+  return upgradedNodes.map(node => applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema, shouldLimitTargetNodeMarkRecursion ? shouldRecurseThroughListNode : undefined));
 };
 export const isTransformDisabledBasedOnStepsConfig = (selectedNodeType, targetNodeType) => {
   const steps = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? TRANSFORMATION_MATRIX_PANEL_C1[selectedNodeType][targetNodeType] : TRANSFORMATION_MATRIX[selectedNodeType][targetNodeType];

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/editor-commands/transform-node-utils/TRANSFORMATION_MATRIX.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { applyTargetTextTypeStep } from './steps/applyTargetTextTypeStep';
 import { convertEachNodeStep } from './steps/convertEachNodeStep';
 import { decisionListToListStep } from './steps/decisionListToListStep';
@@ -17,6 +18,19 @@ import { wrapBlockquoteToDecisionListStep } from './steps/wrapBlockquoteToDecisi
 import { wrapIntoListStep } from './steps/wrapIntoListStep';
 import { wrapMixedContentStep } from './steps/wrapMixedContentStep';
 import { wrapStep } from './steps/wrapStep';
+var applyTargetHeadingToParagraphStep = function applyTargetHeadingToParagraphStep(nodes, context) {
+  if (!isExperimentEnabled('platform_editor_block_menu_small_text')) {
+    return nodes;
+  }
+  return nodes.map(function (node) {
+    var _applyTargetTextTypeS;
+    if (node.type.name !== 'heading') {
+      return node;
+    }
+    return (_applyTargetTextTypeS = applyTargetTextTypeStep([node], context).at(0)) !== null && _applyTargetTextTypeS !== void 0 ? _applyTargetTextTypeS : node;
+  });
+};
+
 /**
  * Creates the transformation matrix for all node type pairs.
  * When includePanelC1 is true (platform_editor_nest_table_in_panel experiment on),
@@ -64,7 +78,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
       expand: [unwrapStep, wrapStep],
       nestedExpand: [unwrapStep, wrapStep],
       layoutSection: [unwrapStep, wrapMixedContentStep],
-      paragraph: [unwrapStep]
+      paragraph: [unwrapStep, applyTargetHeadingToParagraphStep]
     },
     panel_c1: includePanelC1 ? {
       blockquote: [unwrapStep, wrapMixedContentStep],
@@ -72,7 +86,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
       expand: [unwrapStep, wrapStep],
       nestedExpand: [unwrapStep, wrapStep],
       layoutSection: [unwrapStep, wrapMixedContentStep],
-      paragraph: [unwrapStep]
+      paragraph: [unwrapStep, applyTargetHeadingToParagraphStep]
     } : {},
     expand: _objectSpread(_objectSpread({
       panel: [unwrapExpandStep, wrapMixedContentStep]
@@ -82,7 +96,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
       blockquote: [unwrapExpandStep, wrapMixedContentStep],
       layoutSection: [unwrapExpandStep, wrapMixedContentStep],
       nestedExpand: [unwrapExpandStep, wrapStep],
-      paragraph: [unwrapExpandStep]
+      paragraph: [unwrapExpandStep, applyTargetHeadingToParagraphStep]
     }),
     nestedExpand: _objectSpread(_objectSpread({
       panel: [unwrapExpandStep, wrapMixedContentStep]
@@ -91,7 +105,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
     } : {}), {}, {
       blockquote: [unwrapExpandStep, wrapMixedContentStep],
       layoutSection: [unwrapExpandStep, wrapMixedContentStep],
-      paragraph: [unwrapExpandStep]
+      paragraph: [unwrapExpandStep, applyTargetHeadingToParagraphStep]
     }),
     blockquote: _objectSpread(_objectSpread({
       expand: [wrapStep],
@@ -101,7 +115,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
     }, includePanelC1 ? {
       panel_c1: [unwrapStep, wrapStep]
     } : {}), {}, {
-      paragraph: [unwrapStep],
+      paragraph: [unwrapStep, applyTargetHeadingToParagraphStep],
       decisionList: [unwrapStep, wrapBlockquoteToDecisionListStep]
     }),
     layoutSection: _objectSpread(_objectSpread({
@@ -112,7 +126,7 @@ var createTransformationMatrix = function createTransformationMatrix(includePane
     }, includePanelC1 ? {
       panel_c1: [unwrapLayoutStep, wrapMixedContentStep]
     } : {}), {}, {
-      paragraph: [unwrapLayoutStep]
+      paragraph: [unwrapLayoutStep, applyTargetHeadingToParagraphStep]
     }),
     codeBlock: _objectSpread(_objectSpread({
       blockquote: [wrapStep],

package/dist/esm/editor-commands/transform-node-utils/transform.js

@@ -6,7 +6,14 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getTargetNodeTypeNameInContext } from '../transform-node-utils/utils';
 import { TRANSFORMATION_MATRIX, TRANSFORMATION_MATRIX_PANEL_C1 } from './TRANSFORMATION_MATRIX';
 import { getNodeName, toNodeTypeValue } from './types';
+var LIST_NODE_TYPE_NAMES = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'listItem', 'taskItem', 'blockTaskItem', 'decisionItem']);
+var shouldRecurseThroughListNode = function shouldRecurseThroughListNode(node) {
+  return LIST_NODE_TYPE_NAMES.has(node.type.name);
+};
 var _applyTargetNodeMarks = function applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema) {
+  var shouldRecurseIntoChildren = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : function () {
+    return true;
+  };
   var nextNode = node;
   if (node.type === targetNodeType) {
     var marksAfterRemovals = (marksToRemove !== null && marksToRemove !== void 0 ? marksToRemove : []).reduce(function (currentMarks, name) {
@@ -22,12 +29,12 @@ var _applyTargetNodeMarks = function applyTargetNodeMarks(node, targetNodeType,
     }, marksAfterRemovals);
     nextNode = node.mark(marks);
   }
-  if (nextNode.childCount === 0) {
+  if (!shouldRecurseIntoChildren(nextNode) || nextNode.childCount === 0) {
     return nextNode;
   }
   var children = [];
   nextNode.forEach(function (child) {
-    return children.push(_applyTargetNodeMarks(child, targetNodeType, marksToAdd, marksToRemove, schema));
+    return children.push(_applyTargetNodeMarks(child, targetNodeType, marksToAdd, marksToRemove, schema, shouldRecurseIntoChildren));
   });
   return nextNode.copy(Fragment.fromArray(children));
 };
@@ -105,12 +112,13 @@ export var convertNodesToTargetType = function convertNodesToTargetType(_ref3) {
     }, sourceNodes);
     return upgradePanelNodesToPanelC1(_resultNodes, parentNode, schema);
   }
+  var shouldLimitTargetNodeMarkRecursion = targetNodeTypeName === 'paragraph' && ['multi', 'panel', 'panel_c1', 'expand', 'nestedExpand', 'blockquote', 'layoutSection'].includes(selectedNodeTypeName);
   var resultNodes = (_steps$reduce = steps === null || steps === void 0 ? void 0 : steps.reduce(function (nodes, step) {
     return step(nodes, context);
   }, sourceNodes)) !== null && _steps$reduce !== void 0 ? _steps$reduce : sourceNodes;
   var upgradedNodes = steps !== null && steps !== void 0 && steps.length ? upgradePanelNodesToPanelC1(resultNodes, parentNode, schema) : resultNodes;
   return upgradedNodes.map(function (node) {
-    return _applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema);
+    return _applyTargetNodeMarks(node, targetNodeType, marksToAdd, marksToRemove, schema, shouldLimitTargetNodeMarkRecursion ? shouldRecurseThroughListNode : undefined);
   });
 };
 export var isTransformDisabledBasedOnStepsConfig = function isTransformDisabledBasedOnStepsConfig(selectedNodeType, targetNodeType) {

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.3",
+	"version": "20.0.5",
 	"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": "^208.0.0",
+		"@atlaskit/tmp-editor-statsig": "^209.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.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},