@@ -24,7 +24,12 @@ export type SideMenuState<
   I extends InlineContentSchema,
   S extends StyleSchema,
 > = UiElementPosition & {
-  // The block that the side menu is attached to.
+  /**
+   * The block that the side menu is attached to. While the menu is hidden
+   * (`show` is `false`), the block it was last attached to, so it can animate
+   * out next to it. The store's state is `undefined` until the menu first
+   * shows.
+   */
   block: Block<BSchema, I, S>;
 };
 
@@ -150,6 +155,7 @@ export const SideMenuExtension = createExtension(
       // removes the drag image) would never fire. The drop's document change
       // otherwise re-resolves the block at the pointer's pre-drag position.
       if (menuFrozen || isDragOrigin) {
+        // Frozen or dragging: keep the menu as it is.
         return;
       }
       if (target && menuElement?.contains(target)) {
@@ -159,25 +165,26 @@ export const SideMenuExtension = createExtension(
         // anywhere but onto its block follows the pointer at once.
         clearIntent();
         lastOnActive = point;
+        // On the menu: keep the menu as it is.
         return;
       }
 
       if (!editor.isEditable) {
         clearIntent();
         hideMenu();
+        // Read-only editor: hide the menu.
         return;
       }
 
       const resolution = resolveHoveredBlock(
         editor.prosemirrorView,
         target,
         point,
-        {
-          isWithinEditorUI: editor.isWithinEditor,
-          hoverMargin,
-        },
+        editor.isWithinEditor,
+        hoverMargin,
       );
       if (resolution.kind === "editorUI") {
+        // On other UI of the editor (e.g. a toolbar): keep the menu as it is.
         return;
       }
 
@@ -186,6 +193,7 @@ export const SideMenuExtension = createExtension(
       if (resolution.kind === "block" && resolution.block.id === active) {
         clearIntent();
         lastOnActive = point;
+        // On the block of the menu: keep the menu as it is.
         return;
       }
 
@@ -195,10 +203,13 @@ export const SideMenuExtension = createExtension(
           // Restarts the timeout, so it measures how long the pointer rests.
           clearIntent();
           intent = { exit, timer: setTimeout(releaseIntent, INTENT_TIMEOUT) };
+          // On the way to the menu: keep the menu on its block for now.
           return;
         }
       }
 
+      // Not on the way to the menu: show the menu for the block under the
+      // pointer, or hide it if there is no block.
       clearIntent();
       if (resolution.kind === "block") {
         lastOnActive = point;
 
@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+
+import { getBlockElement, getDirectChildBlocks } from "./blockDOM.js";
+
+let root: HTMLElement | undefined;
+
+afterEach(() => {
+  root?.remove();
+  root = undefined;
+});
+
+/** Attaches the markup to the document and returns a lookup by `data-id`. */
+function mount(html: string) {
+  root = document.createElement("div");
+  root.innerHTML = html;
+  document.body.append(root);
+  return (id: string) =>
+    root!.querySelector(
+      `[data-id="${id}"]:not([data-node-type="blockOuter"])`,
+    )!;
+}
+
+// A column list with one block per column, the way BlockNote renders it: each
+// regular block is a `blockContainer` wrapped in `blockOuter` chrome.
+const columns = `
+  <div class="bn-editor">
+    <div data-node-type="columnList" data-id="list">
+      <div data-node-type="column" data-id="col-a">
+        <div data-node-type="blockOuter" data-id="a">
+          <div data-node-type="blockContainer" data-id="a"><span>A</span></div>
+        </div>
+      </div>
+      <div data-node-type="column" data-id="col-b">
+        <div data-node-type="blockOuter" data-id="b">
+          <div data-node-type="blockContainer" data-id="b">B</div>
+        </div>
+      </div>
+    </div>
+  </div>`;
+
+// A block that embeds another editor, with a block of its own.
+const nestedEditor = `
+  <div class="bn-editor">
+    <div data-node-type="blockOuter" data-id="outer">
+      <div data-node-type="blockContainer" data-id="outer">
+        <div class="bn-editor" data-test="inner">
+          <div data-node-type="blockOuter" data-id="inner">
+            <div data-node-type="blockContainer" data-id="inner">inner</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`;
+
+describe("getDirectChildBlocks", () => {
+  it("returns direct child blocks, skipping nested grandchildren", () => {
+    const byId = mount(columns);
+    // The blocks inside each column must not come back as the list's own
+    // children.
+    expect(getDirectChildBlocks(byId("list"))).toEqual([
+      byId("col-a"),
+      byId("col-b"),
+    ]);
+  });
+
+  it("sees through blockOuter wrappers to the blockContainer child", () => {
+    const byId = mount(columns);
+    expect(getDirectChildBlocks(byId("col-a"))).toEqual([byId("a")]);
+  });
+
+  it("skips the blocks of an editor nested in the block", () => {
+    const byId = mount(nestedEditor);
+    expect(getDirectChildBlocks(byId("outer"))).toEqual([]);
+  });
+});
+
+describe("getBlockElement", () => {
+  it("returns the block an element is in", () => {
+    const byId = mount(columns);
+    const editor = root!.querySelector<HTMLElement>(".bn-editor")!;
+    const text = byId("a").querySelector("span")!;
+    expect(getBlockElement(text, { dom: editor })).toBe(byId("a"));
+    expect(getBlockElement(byId("col-a"), { dom: editor })).toBe(byId("col-a"));
+  });
+
+  it("returns nothing for the editor element itself", () => {
+    mount(columns);
+    const editor = root!.querySelector<HTMLElement>(".bn-editor")!;
+    expect(getBlockElement(editor, { dom: editor })).toBeUndefined();
+  });
+
+  it("leaves the blocks of a nested editor to that editor", () => {
+    const byId = mount(nestedEditor);
+    const outer = root!.querySelector<HTMLElement>(".bn-editor")!;
+    const inner = root!.querySelector<HTMLElement>('[data-test="inner"]')!;
+    expect(getBlockElement(byId("inner"), { dom: outer })).toBeUndefined();
+    expect(getBlockElement(byId("inner"), { dom: inner })).toBe(byId("inner"));
+    // The inner editor's own padding is in the outer block, which belongs to
+    // the outer editor.
+    expect(getBlockElement(inner, { dom: inner })).toBeUndefined();
+  });
+});
@@ -0,0 +1,50 @@
+import type { EditorView } from "prosemirror-view";
+
+// FIXME: this file finds blocks through their rendered DOM (selectors,
+// `closest`). Resolving through ProseMirror instead would drop the selectors:
+// `view.posAtDOM` for the block an element is in, the document for a block's
+// children, and `view.nodeDOM` for their boxes. Check `posAtDOM` inside node
+// views and nested editors first. The same applies to
+// `getDraggableBlockFromElement`.
+
+// UniqueID and the block renderers put data-id on every block root.
+// Ordinary blocks also copy it to blockOuter, which is only rendering chrome.
+export const BLOCK_SELECTOR =
+  '[data-node-type][data-id]:not([data-node-type="blockOuter"])';
+
+/**
+ * Returns the root element of the block of this editor that the element is
+ * in, if there is one.
+ */
+export function getBlockElement(
+  element: Element,
+  view: Pick<EditorView, "dom">,
+): Element | undefined {
+  // Embedded editors own their blocks, even though their DOM is inside ours.
+  if (element.closest(".bn-editor") !== view.dom) {
+    return undefined;
+  }
+  const block = element.closest(BLOCK_SELECTOR);
+  return block && block !== view.dom && view.dom.contains(block)
+    ? block
+    : undefined;
+}
+
+/**
+ * Returns the child blocks of a block element: its nested blocks, or the
+ * children of a container. The blocks of an editor nested in the block are
+ * not its children: they belong to that editor.
+ */
+export function getDirectChildBlocks(container: Element): Element[] {
+  const editor = container.closest(".bn-editor");
+  const children: Element[] = [];
+  for (const child of container.querySelectorAll(BLOCK_SELECTOR)) {
+    if (
+      child.parentElement?.closest(BLOCK_SELECTOR) === container &&
+      child.closest(".bn-editor") === editor
+    ) {
+      children.push(child);
+    }
+  }
+  return children;
+}
@@ -15,19 +15,29 @@ function isSynthetic(event: Event): boolean {
  * Finds the editor that a drag event is about, and the distance from the
  * event to the blocks of that editor. If the event target is in an editor,
  * that editor is the only candidate: where editors overlap, it is the editor
- * on top. Otherwise, it is the editor closest to the event.
+ * on top. Otherwise, the candidates are the editors within `dropMargin` of the
+ * event, and it is the one closest to the event.
  *
- * Distances count to the blocks, not to the editor element (as `dropMargin`
- * does): the drop lands at the nearest block position, so with uneven editor
- * padding, the editor whose blocks are nearest is the right pick. A drop
- * outside the blocks, even in the editor's padding, is moved onto them.
+ * `dropMargin` counts from the editor element, like `hoverMargin`. The
+ * distance that picks the closest editor counts to its blocks: the drop lands
+ * at the nearest block position, so with uneven editor padding, the editor
+ * whose blocks are nearest is the right pick. A drop outside the blocks, even
+ * in the editor's padding, is moved onto them.
  */
-function findDropEditor(view: EditorView, event: DragEvent) {
+function findDropEditor(
+  view: EditorView,
+  event: DragEvent,
+  dropMargin: number,
+) {
+  const point = { x: event.clientX, y: event.clientY };
   const target =
     event.target instanceof Element ? event.target.closest(".bn-editor") : null;
   const editors = target
     ? [target]
-    : Array.from(view.root.querySelectorAll(".bn-editor"));
+    : Array.from(view.root.querySelectorAll(".bn-editor")).filter(
+        (editor) =>
+          distanceToRect(point, editor.getBoundingClientRect()) <= dropMargin,
+      );
   const coords = event;
 
   if (editors.length === 0) {
@@ -148,17 +158,9 @@ export function registerBlockDropHandlers(
     // Tells us that the current editor instance has a drag ongoing (either text or side menu)
     const isOrigin = textContentIsBeingDragged || sideMenuIsBeingDragged;
 
-    // Tells us which editor instance is the closest to the drag event (whether or not it is actually reasonably close)
-    const closestEditor = findDropEditor(view, event);
-
-    // `dropMargin` counts from the editor element's box, like `hoverMargin`.
-    if (
-      !closestEditor ||
-      distanceToRect(
-        { x: event.clientX, y: event.clientY },
-        closestEditor.element.getBoundingClientRect(),
-      ) > dropMargin
-    ) {
+    // The editor the drag event is about, if any is within `dropMargin`
+    const closestEditor = findDropEditor(view, event, dropMargin);
+    if (!closestEditor) {
       return undefined;
     }
 
 
@@ -1,9 +1,6 @@
 import { afterEach, describe, expect, it } from "vite-plus/test";
 
-import {
-  getNestedBlockAtCursor,
-  getDirectChildBlocks,
-} from "./blockGeometry.js";
+import { getNestedBlockAtCursor } from "./blockGeometry.js";
 
 // Exercise container hit testing with real layout, including nested columns.
 
@@ -79,24 +76,6 @@ function buildVerticalContainer() {
   return { callout, first, second };
 }
 
-describe("getDirectChildBlocks", () => {
-  it("returns direct child blocks, skipping nested grandchildren", () => {
-    const { columnList, columnA, columnB } = buildColumnList();
-
-    // The blocks inside each column must not come back as the list's own
-    // children. The `closest` check stops the walk one level down.
-    expect(getDirectChildBlocks(columnList)).toEqual([columnA, columnB]);
-  });
-
-  it("sees through blockOuter wrappers to the blockContainer child", () => {
-    const { columnA, childA } = buildColumnList();
-
-    // The column's own direct child is the wrapped blockContainer, not the
-    // blockOuter chrome (which isn't a block in the selector's sense).
-    expect(getDirectChildBlocks(columnA)).toEqual([childA.blockContainer]);
-  });
-});
-
 describe("getNestedBlockAtCursor", () => {
   it("keeps a regular block as the probe target", () => {
     const { childA } = buildColumnList();
 
@@ -1,23 +1,4 @@
-import { BLOCK_SELECTOR } from "../blockDOM.js";
-
-/**
- * Returns the child blocks of a block element: its nested blocks, or the
- * children of a container. The blocks of an editor nested in the block are
- * not its children: they belong to that editor.
- */
-export function getDirectChildBlocks(container: Element): Element[] {
-  const editor = container.closest(".bn-editor");
-  const children: Element[] = [];
-  for (const child of container.querySelectorAll(BLOCK_SELECTOR)) {
-    if (
-      child.parentElement?.closest(BLOCK_SELECTOR) === container &&
-      child.closest(".bn-editor") === editor
-    ) {
-      children.push(child);
-    }
-  }
-  return children;
-}
+import { BLOCK_SELECTOR, getDirectChildBlocks } from "./blockDOM.js";
 
 export type BlockRect = {
   top: number;
@@ -45,7 +26,14 @@ export function rectIndexAtCursor(
   return verticalMatch;
 }
 
-// Descend through child blocks, including regular blocks with padded frames.
+/**
+ * Returns the deepest block at the height of the pointer, from a block that
+ * contains it: the block itself, or one of its descendants at that height.
+ * The children of a block are below its own content (nested blocks) or fill
+ * it (a container), so the pointer on the block's own content stays on the
+ * block. The pointer in the indentation of nested blocks, or in the padding
+ * of a container beside a child, goes to the child at that height.
+ */
 export function getNestedBlockAtCursor(
   element: Element,
   mousePos: { x: number; y: number },
 
@@ -8,7 +8,6 @@ import { fragmentToBlocks } from "../../api/nodeConversions/fragmentToBlocks.js"
 import { getNodeById } from "../../api/nodeUtil.js";
 import { Block } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
 import {
   BlockSchema,
   InlineContentSchema,
@@ -18,15 +17,6 @@ import { MultipleNodeSelection } from "./MultipleNodeSelection.js";
 
 let dragImageElement: Element | undefined;
 
-export type SideMenuState<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> = UiElementPosition & {
-  // The block that the side menu is attached to.
-  block: Block<BSchema, I, S>;
-};
-
 function blockPositionsFromSelection(selection: Selection, doc: Node) {
   // Absolute positions just before the first block spanned by the selection, and just after the last block. Having the
   // selection start and end just before and just after the target blocks ensures no whitespace/line breaks are left