Formatting toolbar reappears over the drag handle menu when the editor was not focused (regression in 0.55.0) #3186

What's broken?

In 0.55.0, clicking a block's drag handle while the editor content does not have focus shows the formatting toolbar for the current selection again. The drag handle menu then opens with the toolbar still visible, and the toolbar paints on top of the menu and its submenus. With the default UI it covers part of the Colors submenu.

It happens with an image selected (a NodeSelection) and with selected text. It does not happen when the editor content still has focus at the moment the drag handle is clicked, so by hand it looks intermittent.

What did you expect to happen?

The formatting toolbar stays hidden while the drag handle menu is open, as it does in 0.54.2.

Steps to reproduce

1. Render the editor below: default UI, six paragraphs, then an image.
2. Click the image. The image toolbar shows.
3. Click the page outside the editor. The toolbar hides.
4. Hover a paragraph above the image and click its drag handle.
5. The image toolbar shows again and the block menu opens next to it. Open Colors. The toolbar covers part of the submenu.

The same happens when step 2 double-clicks a word instead. With 0.54.2 the toolbar stays hidden at step 5.

import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";
import { BlockNoteView } from "@blocknote/mantine";
import { useCreateBlockNote } from "@blocknote/react";

export default function App() {
  const editor = useCreateBlockNote({
    initialContent: [
      ...[1, 2, 3, 4, 5, 6].map((i) => ({
        type: "paragraph" as const,
        content: `Paragraph ${i} above the image.`,
      })),
      {
        type: "image" as const,
        props: {
          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        },
      },
      { type: "paragraph" as const, content: "Paragraph below the image." },
    ],
  });
  return <BlockNoteView editor={editor} theme="light" />;
}

BlockNote version

0.55.0 (@blocknote/core, @blocknote/react, @blocknote/mantine). Does not reproduce with 0.54.2.

Environment

Chrome 152, macOS 27.0.1, React 19.3, @mantine/core 9.7.1

Additional context

What we traced, in case it saves time:

• fix(core): Enter on Android and iOS, toolbar and side menu fixes on phones #3031 added an editor.onFocusChange(..., { includeEditorUI: true }) handler to FormattingToolbarExtension (packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts, lines 82 to 94 in 0.55.0). When focus moves from outside the editor into the editor's UI, the handler calls store.setState(shouldShow()). The ProseMirror selection survives the blur, so shouldShow() returns true.
• The drag handle counts as editor UI (isWithinEditor, feat(core,react): public focus API with editor-UI-aware tracking #3028), so the focus it takes on click fires that event with focused: true. The preventShowWhileMouseDown guard does not apply, because its pointerdown listener is on prosemirrorView.dom and the drag handle is outside it. The outside-press dismissal does not apply either, because the toolbar was still hidden when the pointer went down.
• When the editor content has focus before the click, focus moves from the content to the drag handle, both inside the editor, so no focus event fires. The toolbar closes on the outside press and stays closed. That is why the bug depends on where focus was.
• The overlap comes from the stacking. Menus opened from the side menu render inside the side menu's floating wrapper (zIndex: 20, SideMenuController.tsx line 142), and the formatting toolbar's wrapper has zIndex: 40 (DesktopFormattingToolbarController.tsx line 111). The menu's own z-index: 300 applies only inside the side menu's stacking context. The nesting is the same in 0.54.2, where the two were never visible at the same time.

A possible fix: when focus returns to the editor UI, show the toolbar again only if the content area has focus (editor.isFocused()). The pointerup handler in the same file already uses that condition.