@atlaskit/editor-plugin-block-menu 10.0.0 → 10.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 10.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.1.0
+
+### Minor Changes
+
+- [`06e26bd93de31`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06e26bd93de31) -
+  [ux] Close the block menu when its positioning containers resize.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.0.0
 
 ### Patch Changes

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

@@ -22,6 +22,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -79,10 +80,48 @@ var isSelectionWithinCodeBlock = function isSelectionWithinCodeBlock(state) {
     $to = _state$selection.$to;
   return $from.sameParent($to) && $from.parent.type === state.schema.nodes.codeBlock;
 };
-var BlockMenuContent = function BlockMenuContent(_ref2) {
+var useCloseBlockMenuOnResize = function useCloseBlockMenuOnResize(_ref2) {
+  var isEnabled = _ref2.isEnabled,
+    mountTo = _ref2.mountTo,
+    boundariesElement = _ref2.boundariesElement,
+    scrollableElement = _ref2.scrollableElement,
+    closeMenu = _ref2.closeMenu;
+  (0, _react.useEffect)(function () {
+    if (!isEnabled || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    var observedElements = Array.from(new Set([mountTo, boundariesElement, scrollableElement].filter(function (element) {
+      return Boolean(element);
+    })));
+    if (observedElements.length === 0) {
+      return;
+    }
+    var pendingInitialResizeElements = new Set(observedElements);
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var hasResizeAfterInitialObservation = entries.some(function (_ref3) {
+        var target = _ref3.target;
+        if (target instanceof HTMLElement && pendingInitialResizeElements.has(target)) {
+          pendingInitialResizeElements.delete(target);
+          return false;
+        }
+        return true;
+      });
+      if (hasResizeAfterInitialObservation) {
+        closeMenu();
+      }
+    });
+    observedElements.forEach(function (element) {
+      return resizeObserver.observe(element);
+    });
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [boundariesElement, closeMenu, isEnabled, mountTo, scrollableElement]);
+};
+var BlockMenuContent = function BlockMenuContent(_ref4) {
   var _api$blockMenu;
-  var api = _ref2.api,
-    setRef = _ref2.setRef;
+  var api = _ref4.api,
+    setRef = _ref4.setRef;
   var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
   var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
   var ref = function ref(el) {
@@ -116,13 +155,13 @@ var BlockMenuContent = function BlockMenuContent(_ref2) {
     allRegisteredComponents: blockMenuComponents || []
   })));
 };
-var BlockMenu = function BlockMenu(_ref3) {
-  var _editorView$dom, _ref4, _api$analytics2;
-  var editorView = _ref3.editorView,
-    api = _ref3.api,
-    mountTo = _ref3.mountTo,
-    boundariesElement = _ref3.boundariesElement,
-    scrollableElement = _ref3.scrollableElement;
+var BlockMenu = function BlockMenu(_ref5) {
+  var _editorView$dom, _ref7, _api$analytics2;
+  var editorView = _ref5.editorView,
+    api = _ref5.api,
+    mountTo = _ref5.mountTo,
+    boundariesElement = _ref5.boundariesElement,
+    scrollableElement = _ref5.scrollableElement;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
       var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
@@ -141,6 +180,30 @@ var BlockMenu = function BlockMenu(_ref3) {
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
+  var shouldCloseBlockMenuOnResize = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_jira_patch_4');
+  var closeMenu = _react.default.useCallback(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+      var _api$blockControls, _api$userIntent2;
+      var tr = _ref6.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      onDropdownOpenChanged(false);
+      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api, currentUserIntent, onDropdownOpenChanged]);
+  useCloseBlockMenuOnResize({
+    isEnabled: Boolean(isMenuOpen && shouldCloseBlockMenuOnResize),
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    closeMenu: closeMenu
+  });
   var prevIsMenuOpenRef = (0, _react.useRef)(false);
   var popupRef = (0, _react.useRef)(undefined);
   var _React$useState = _react.default.useState(0),
@@ -155,13 +218,13 @@ var BlockMenu = function BlockMenu(_ref3) {
     }
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen]);
-  var hasFocus = (_ref4 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  var hasFocus = (_ref7 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // 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
   popupRef.current.contains(document.activeElement) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  popupRef.current === document.activeElement)) !== null && _ref4 !== void 0 ? _ref4 : false;
+  popupRef.current === document.activeElement)) !== null && _ref7 !== void 0 ? _ref7 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag
@@ -178,7 +241,7 @@ var BlockMenu = function BlockMenu(_ref3) {
     return null;
   }
   var handleKeyDown = function handleKeyDown(event) {
-    var _api$core, _api$blockControls;
+    var _api$core, _api$blockControls2;
     // When the editor view has focus, the keydown will be handled by the
     // selection preservation plugin – exit early to avoid double handling
     // Also exit if selection is within a code block to avoid double handling when code block got focus when the node after it is deleted
@@ -201,7 +264,7 @@ var BlockMenu = function BlockMenu(_ref3) {
     } else if (isRedo) {
       (0, _prosemirrorHistory.redo)(editorView.state, editorView.dispatch);
     }
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.handleKeyDownWithPreservedSelection(event));
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.handleKeyDownWithPreservedSelection(event));
   };
   var handleClickOutside = function handleClickOutside(e) {
     // check if the clicked element was another drag handle, if so don't close the menu
@@ -210,22 +273,6 @@ var BlockMenu = function BlockMenu(_ref3) {
     }
     closeMenu();
   };
-  var closeMenu = function closeMenu() {
-    api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
-      var _api$blockControls2, _api$userIntent2;
-      var tr = _ref5.tr;
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
-      onDropdownOpenChanged(false);
-      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
-        tr: tr
-      });
-      return tr;
-    });
-  };
   if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;

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

@@ -13,6 +13,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -71,6 +72,42 @@ const isSelectionWithinCodeBlock = state => {
   } = state.selection;
   return $from.sameParent($to) && $from.parent.type === state.schema.nodes.codeBlock;
 };
+const useCloseBlockMenuOnResize = ({
+  isEnabled,
+  mountTo,
+  boundariesElement,
+  scrollableElement,
+  closeMenu
+}) => {
+  useEffect(() => {
+    if (!isEnabled || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const observedElements = Array.from(new Set([mountTo, boundariesElement, scrollableElement].filter(element => Boolean(element))));
+    if (observedElements.length === 0) {
+      return;
+    }
+    const pendingInitialResizeElements = new Set(observedElements);
+    const resizeObserver = new ResizeObserver(entries => {
+      const hasResizeAfterInitialObservation = entries.some(({
+        target
+      }) => {
+        if (target instanceof HTMLElement && pendingInitialResizeElements.has(target)) {
+          pendingInitialResizeElements.delete(target);
+          return false;
+        }
+        return true;
+      });
+      if (hasResizeAfterInitialObservation) {
+        closeMenu();
+      }
+    });
+    observedElements.forEach(element => resizeObserver.observe(element));
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [boundariesElement, closeMenu, isEnabled, mountTo, scrollableElement]);
+};
 const BlockMenuContent = ({
   api,
   setRef
@@ -135,6 +172,31 @@ const BlockMenu = ({
     onDropdownOpenChanged
   } = useBlockMenu();
   const targetHandleRef = 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 shouldCloseBlockMenuOnResize = fg('platform_editor_block_menu_jira_patch_4');
+  const closeMenu = React.useCallback(() => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$userIntent2;
+      api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      onDropdownOpenChanged(false);
+      api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
+        tr
+      });
+      return tr;
+    });
+  }, [api, currentUserIntent, onDropdownOpenChanged]);
+  useCloseBlockMenuOnResize({
+    isEnabled: Boolean(isMenuOpen && shouldCloseBlockMenuOnResize),
+    mountTo,
+    boundariesElement,
+    scrollableElement,
+    closeMenu
+  });
   const prevIsMenuOpenRef = useRef(false);
   const popupRef = useRef(undefined);
   const [menuHeight, setMenuHeight] = React.useState(0);
@@ -169,7 +231,7 @@ const BlockMenu = ({
     return null;
   }
   const handleKeyDown = event => {
-    var _api$core, _api$blockControls, _api$blockControls$co;
+    var _api$core, _api$blockControls2, _api$blockControls2$c;
     // When the editor view has focus, the keydown will be handled by the
     // selection preservation plugin – exit early to avoid double handling
     // Also exit if selection is within a code block to avoid double handling when code block got focus when the node after it is deleted
@@ -192,7 +254,7 @@ const BlockMenu = ({
     } else if (isRedo) {
       redo(editorView.state, editorView.dispatch);
     }
-    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.handleKeyDownWithPreservedSelection(event));
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.handleKeyDownWithPreservedSelection(event));
   };
   const handleClickOutside = e => {
     // check if the clicked element was another drag handle, if so don't close the menu
@@ -201,23 +263,6 @@ const BlockMenu = ({
     }
     closeMenu();
   };
-  const closeMenu = () => {
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
-      tr
-    }) => {
-      var _api$blockControls2, _api$userIntent2;
-      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr
-      });
-      onDropdownOpenChanged(false);
-      api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
-        tr
-      });
-      return tr;
-    });
-  };
   if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;

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

@@ -14,6 +14,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -70,10 +71,48 @@ var isSelectionWithinCodeBlock = function isSelectionWithinCodeBlock(state) {
     $to = _state$selection.$to;
   return $from.sameParent($to) && $from.parent.type === state.schema.nodes.codeBlock;
 };
-var BlockMenuContent = function BlockMenuContent(_ref2) {
+var useCloseBlockMenuOnResize = function useCloseBlockMenuOnResize(_ref2) {
+  var isEnabled = _ref2.isEnabled,
+    mountTo = _ref2.mountTo,
+    boundariesElement = _ref2.boundariesElement,
+    scrollableElement = _ref2.scrollableElement,
+    closeMenu = _ref2.closeMenu;
+  useEffect(function () {
+    if (!isEnabled || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    var observedElements = Array.from(new Set([mountTo, boundariesElement, scrollableElement].filter(function (element) {
+      return Boolean(element);
+    })));
+    if (observedElements.length === 0) {
+      return;
+    }
+    var pendingInitialResizeElements = new Set(observedElements);
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var hasResizeAfterInitialObservation = entries.some(function (_ref3) {
+        var target = _ref3.target;
+        if (target instanceof HTMLElement && pendingInitialResizeElements.has(target)) {
+          pendingInitialResizeElements.delete(target);
+          return false;
+        }
+        return true;
+      });
+      if (hasResizeAfterInitialObservation) {
+        closeMenu();
+      }
+    });
+    observedElements.forEach(function (element) {
+      return resizeObserver.observe(element);
+    });
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [boundariesElement, closeMenu, isEnabled, mountTo, scrollableElement]);
+};
+var BlockMenuContent = function BlockMenuContent(_ref4) {
   var _api$blockMenu;
-  var api = _ref2.api,
-    setRef = _ref2.setRef;
+  var api = _ref4.api,
+    setRef = _ref4.setRef;
   var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
   var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
   var ref = function ref(el) {
@@ -107,13 +146,13 @@ var BlockMenuContent = function BlockMenuContent(_ref2) {
     allRegisteredComponents: blockMenuComponents || []
   })));
 };
-var BlockMenu = function BlockMenu(_ref3) {
-  var _editorView$dom, _ref4, _api$analytics2;
-  var editorView = _ref3.editorView,
-    api = _ref3.api,
-    mountTo = _ref3.mountTo,
-    boundariesElement = _ref3.boundariesElement,
-    scrollableElement = _ref3.scrollableElement;
+var BlockMenu = function BlockMenu(_ref5) {
+  var _editorView$dom, _ref7, _api$analytics2;
+  var editorView = _ref5.editorView,
+    api = _ref5.api,
+    mountTo = _ref5.mountTo,
+    boundariesElement = _ref5.boundariesElement,
+    scrollableElement = _ref5.scrollableElement;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], function (states) {
       var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
@@ -132,6 +171,30 @@ var BlockMenu = function BlockMenu(_ref3) {
   var _useBlockMenu = useBlockMenu(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var shouldCloseBlockMenuOnResize = fg('platform_editor_block_menu_jira_patch_4');
+  var closeMenu = React.useCallback(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+      var _api$blockControls, _api$userIntent2;
+      var tr = _ref6.tr;
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      onDropdownOpenChanged(false);
+      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
+        tr: tr
+      });
+      return tr;
+    });
+  }, [api, currentUserIntent, onDropdownOpenChanged]);
+  useCloseBlockMenuOnResize({
+    isEnabled: Boolean(isMenuOpen && shouldCloseBlockMenuOnResize),
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    closeMenu: closeMenu
+  });
   var prevIsMenuOpenRef = useRef(false);
   var popupRef = useRef(undefined);
   var _React$useState = React.useState(0),
@@ -146,13 +209,13 @@ var BlockMenu = function BlockMenu(_ref3) {
     }
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen]);
-  var hasFocus = (_ref4 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  var hasFocus = (_ref7 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // 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
   popupRef.current.contains(document.activeElement) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  popupRef.current === document.activeElement)) !== null && _ref4 !== void 0 ? _ref4 : false;
+  popupRef.current === document.activeElement)) !== null && _ref7 !== void 0 ? _ref7 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag
@@ -169,7 +232,7 @@ var BlockMenu = function BlockMenu(_ref3) {
     return null;
   }
   var handleKeyDown = function handleKeyDown(event) {
-    var _api$core, _api$blockControls;
+    var _api$core, _api$blockControls2;
     // When the editor view has focus, the keydown will be handled by the
     // selection preservation plugin – exit early to avoid double handling
     // Also exit if selection is within a code block to avoid double handling when code block got focus when the node after it is deleted
@@ -192,7 +255,7 @@ var BlockMenu = function BlockMenu(_ref3) {
     } else if (isRedo) {
       redo(editorView.state, editorView.dispatch);
     }
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.handleKeyDownWithPreservedSelection(event));
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.handleKeyDownWithPreservedSelection(event));
   };
   var handleClickOutside = function handleClickOutside(e) {
     // check if the clicked element was another drag handle, if so don't close the menu
@@ -201,22 +264,6 @@ var BlockMenu = function BlockMenu(_ref3) {
     }
     closeMenu();
   };
-  var closeMenu = function closeMenu() {
-    api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
-      var _api$blockControls2, _api$userIntent2;
-      var tr = _ref5.tr;
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
-      onDropdownOpenChanged(false);
-      api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
-        tr: tr
-      });
-      return tr;
-    });
-  };
   if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "10.0.0",
+	"version": "10.1.1",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,19 +38,19 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-tables": "^2.10.0",
-		"@atlaskit/editor-toolbar": "^1.9.0",
+		"@atlaskit/editor-toolbar": "^1.10.0",
 		"@atlaskit/flag": "^17.12.0",
-		"@atlaskit/icon": "^35.3.0",
+		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^88.0.0",
+		"@atlaskit/tmp-editor-statsig": "^89.0.0",
 		"@atlaskit/tokens": "^13.1.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.0.0",
+		"@atlaskit/editor-common": "^115.2.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -100,6 +100,9 @@
 		"platform_editor_block_menu_jira_patch_3": {
 			"type": "boolean"
 		},
+		"platform_editor_block_menu_jira_patch_4": {
+			"type": "boolean"
+		},
 		"cc_blocks_changeboarding": {
 			"type": "boolean"
 		},