fix(core): preserve visible block selections and drag-end compatibility

Author: nperez0111

docs/content/docs/getting-started/vanilla-js.mdx

@@ -75,6 +75,6 @@ const unsubscribe = extension.store.subscribe(() => {
 });
 ```
 
-Let's look at how you could add the [Side Menu](/docs/react/components/side-menu) to your editor. The example below mounts a plain editor and builds a custom Side Menu from scratch, using the extension's store to position it and its `blockDragStart` method to handle dragging:
+Let's look at how you could add the [Side Menu](/docs/react/components/side-menu) to your editor. The example below mounts a plain editor and builds a custom Side Menu from scratch, using the extension's store to position it and its `blockDragStart`/`blockDragEnd` methods to handle dragging:
 
 <Example name="vanilla-js/vanilla-custom-side-menu" />

examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx

@@ -114,6 +114,7 @@ function MUIDragHandleButton(props: SideMenuProps) {
         draggable={"true"}
         onClick={onClick}
         onDragStart={(e) => sideMenu.blockDragStart(e, block)}
+        onDragEnd={sideMenu.blockDragEnd}
       >
         <DragIndicator
           sx={{

examples/vanilla-js/vanilla-custom-side-menu/src/App.tsx

@@ -97,6 +97,7 @@ function initEditor(rootElement: HTMLElement) {
           sideMenu.blockDragStart(evt, block);
         }
       });
+      dragBtn.addEventListener("dragend", () => sideMenu.blockDragEnd());
       dragBtn.draggable = true;
       element.style.display = "none";
       element.appendChild(dragBtn);

packages/core/src/extensions/DropCursor/DropCursor.browser.test.ts

@@ -0,0 +1,50 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import "../../editor/editor.css";
+
+const cleanup: (() => void)[] = [];
+
+afterEach(() => {
+  cleanup
+    .splice(0)
+    .reverse()
+    .forEach((dispose) => dispose());
+});
+
+describe("focus after a drop from another root", () => {
+  it("finishes a drop in a shadow root without a local dragend", async () => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    cleanup.push(() => host.remove());
+    const root = host.attachShadow({ mode: "open" });
+    const container = document.createElement("div");
+    root.appendChild(container);
+    const editor = BlockNoteEditor.create({
+      initialContent: [{ type: "paragraph", content: "Target" }],
+    });
+    editor.mount(container);
+    cleanup.push(() => editor._tiptapEditor.destroy());
+
+    const view = editor.prosemirrorView;
+    const rect = view.dom.getBoundingClientRect();
+    const dataTransfer = new DataTransfer();
+    dataTransfer.setData("text/html", "<p>Incoming</p>");
+    dataTransfer.setData("blocknote/html", "<p>Incoming</p>");
+    // A drag from a different document/root delivers drop here, but its
+    // dragend fires at the source and never reaches this root.
+    view.dom.dispatchEvent(
+      new DragEvent("drop", {
+        bubbles: true,
+        cancelable: true,
+        clientX: rect.left + 5,
+        clientY: rect.top + rect.height / 2,
+        dataTransfer,
+      }),
+    );
+
+    expect(view.state.doc.textContent).toContain("Incoming");
+    await expect.poll(() => view.state.selection.empty).toBe(true);
+    expect(root.activeElement).toBe(view.dom);
+  });
+});

packages/core/src/extensions/DropCursor/DropCursor.ts

@@ -1,8 +1,3 @@
-// Handles drops into one editor. It shows the drop cursor: the line that shows
-// where the dragged content will go. It inserts blocks that go into a block,
-// e.g. a toggle (ProseMirror inserts all other drops). After a block drop, it
-// focuses the editor, with a text cursor at the end of the dropped blocks.
-
 import { Plugin, PluginKey, Selection } from "prosemirror-state";
 import { dropPoint } from "prosemirror-transform";
 import { Decoration, DecorationSet, type EditorView } from "prosemirror-view";
@@ -79,6 +74,7 @@ export const DropCursorExtension = createExtension<
   let dragSourceElement: Element | null = null;
   // Set when blocks are dropped in this editor, until the drag ends.
   let blocksDropped = false;
+  let focusTimeout: ReturnType<typeof setTimeout> | undefined;
 
   const config = {
     width: options.dropCursor?.width ?? 5,
@@ -170,6 +166,7 @@ export const DropCursorExtension = createExtension<
     // A drop from another document ends the drag there, without a `dragend`
     // in this one.
     blocksDropped = false;
+    clearTimeout(focusTimeout);
   };
 
   const onDragOver = (event: Event) => {
@@ -284,6 +281,12 @@ export const DropCursorExtension = createExtension<
       editor.prosemirrorView.editable &&
       ((event as DragEvent).dataTransfer?.types.includes("blocknote/html") ??
         false);
+    // A drop from another document or shadow root has no local dragend.
+    // Finish it after drop handlers run, unless dragend already did so.
+    clearTimeout(focusTimeout);
+    if (blocksDropped) {
+      focusTimeout = setTimeout(onRootDragEnd, 0);
+    }
   };
 
   const onDragEnd = () => {
@@ -297,6 +300,7 @@ export const DropCursorExtension = createExtension<
    * menu's handle, which is outside the editor.
    */
   function onRootDragEnd() {
+    clearTimeout(focusTimeout);
     if (!blocksDropped) {
       return;
     }
@@ -382,8 +386,7 @@ export const DropCursorExtension = createExtension<
           } else {
             editor.updateBlock(target, { children: draggedBlocks });
           }
-          // The selection on the dropped blocks, as ProseMirror's drop leaves
-          // it. `onRootDragEnd` then focuses the editor.
+          // Custom drops must also leave the cursor at the dropped blocks.
           editor.setTextCursorPosition(draggedBlocks.at(-1), "end");
         });
         return true;
@@ -414,6 +417,7 @@ export const DropCursorExtension = createExtension<
       // Clean up on unmount
       signal.addEventListener("abort", () => {
         clearTimeout(timeout);
+        clearTimeout(focusTimeout);
         setCursor(null);
       });
     },

packages/core/src/extensions/DropCursor/dropIntoChildren.ts

@@ -1,7 +1,3 @@
-// Finds out if a block drag goes into the children of a block with
-// `meta.dropsIntoChildren`, e.g. a toggle. `DropCursor.ts` uses this to show the
-// cursor and to drop the blocks.
-
 import type { EditorView } from "prosemirror-view";
 
 import { fragmentToBlocks } from "../../api/nodeConversions/fragmentToBlocks.js";

packages/core/src/extensions/SideMenu/MultipleNodeSelection.test.ts

@@ -0,0 +1,127 @@
+// @vitest-environment node
+import { history, redo, undo } from "@tiptap/pm/history";
+import { Schema } from "prosemirror-model";
+import { EditorState, Selection, TextSelection } from "prosemirror-state";
+import { describe, expect, it } from "vite-plus/test";
+
+import { MultipleNodeSelection } from "./MultipleNodeSelection.js";
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: "paragraph+" },
+    paragraph: { content: "text*" },
+    text: {},
+  },
+});
+
+function paragraph(text: string) {
+  return schema.nodes.paragraph.create(null, schema.text(text));
+}
+
+const doc = schema.nodes.doc.create(null, [
+  paragraph("A"),
+  paragraph("B"),
+  paragraph("C"),
+]);
+
+describe("MultipleNodeSelection bookmarks", () => {
+  it("round-trips a block selection through editor-state JSON", () => {
+    const selection = MultipleNodeSelection.create(doc, 0, 3);
+    const state = EditorState.create({ doc, selection });
+    const restored = EditorState.fromJSON({ schema }, state.toJSON());
+
+    expect(restored.selection.eq(selection)).toBe(true);
+  });
+
+  it.each([1, 2])("restores a selection of %i blocks", (count) => {
+    const selection = MultipleNodeSelection.create(doc, 0, count * 3);
+    const restored = selection.getBookmark().resolve(doc);
+
+    expect(restored).toBeInstanceOf(MultipleNodeSelection);
+    expect(restored.eq(selection)).toBe(true);
+  });
+
+  it("maps a selection past inserted blocks", () => {
+    const selection = MultipleNodeSelection.create(doc, 3, 6);
+    const tr = EditorState.create({ doc }).tr.insert(0, paragraph("X"));
+    const restored = selection.getBookmark().map(tr.mapping).resolve(tr.doc);
+
+    expect(restored).toBeInstanceOf(MultipleNodeSelection);
+    expect(restored.eq(MultipleNodeSelection.create(tr.doc, 6, 9))).toBe(true);
+  });
+
+  it("maps edits inside the selected blocks", () => {
+    const selection = MultipleNodeSelection.create(doc, 0, 6);
+    const tr = EditorState.create({ doc }).tr.insertText("more", 2);
+    const restored = selection.getBookmark().map(tr.mapping).resolve(tr.doc);
+
+    expect(restored).toBeInstanceOf(MultipleNodeSelection);
+    expect(restored.eq(MultipleNodeSelection.create(tr.doc, 0, 10))).toBe(true);
+  });
+
+  it.each([3, 6])("excludes blocks inserted at boundary %i", (pos) => {
+    const selection = MultipleNodeSelection.create(doc, 3, 6);
+    const tr = EditorState.create({ doc }).tr.insert(pos, paragraph("X"));
+    const restored = selection.getBookmark().map(tr.mapping).resolve(tr.doc);
+    const from = pos === 3 ? 6 : 3;
+
+    expect(restored).toBeInstanceOf(MultipleNodeSelection);
+    expect(
+      restored.eq(MultipleNodeSelection.create(tr.doc, from, from + 3)),
+    ).toBe(true);
+  });
+
+  it.each([3, 6])("keeps the live selection stable at boundary %i", (pos) => {
+    const selection = MultipleNodeSelection.create(doc, 3, 6);
+    const tr = EditorState.create({ doc }).tr.insert(pos, paragraph("X"));
+    const mapped = selection.map(tr.doc, tr.mapping);
+    const from = pos === 3 ? 6 : 3;
+
+    expect(
+      mapped.eq(MultipleNodeSelection.create(tr.doc, from, from + 3)),
+    ).toBe(true);
+  });
+
+  it("falls back to a cursor when the selected blocks are deleted", () => {
+    const selection = MultipleNodeSelection.create(doc, 0, 6);
+    const tr = EditorState.create({ doc }).tr.delete(0, 6);
+    const restored = selection.getBookmark().map(tr.mapping).resolve(tr.doc);
+
+    expect(restored).toBeInstanceOf(TextSelection);
+    expect(restored.empty).toBe(true);
+    expect(restored.eq(Selection.near(tr.doc.resolve(0)))).toBe(true);
+  });
+
+  it("falls back when joining blocks removes a selection boundary", () => {
+    const selection = MultipleNodeSelection.create(doc, 0, 3);
+    const tr = EditorState.create({ doc }).tr.join(3);
+    const restored = selection.getBookmark().map(tr.mapping).resolve(tr.doc);
+
+    expect(restored).toBeInstanceOf(TextSelection);
+    expect(restored.empty).toBe(true);
+  });
+
+  it.each([1, 2])("preserves %i selected blocks through undo/redo", (count) => {
+    const selection = MultipleNodeSelection.create(doc, 0, count * 3);
+    let state = EditorState.create({ doc, selection, plugins: [history()] });
+    const content = selection.content().content;
+    const tr = state.tr.delete(selection.from, selection.to);
+    tr.insert(tr.doc.content.size, content);
+    tr.setSelection(Selection.near(tr.doc.resolve(tr.doc.content.size)));
+    state = state.apply(tr);
+    const movedDoc = state.doc;
+
+    function dispatch(transaction: typeof tr) {
+      state = state.apply(transaction);
+    }
+
+    expect(undo(state, dispatch)).toBe(true);
+    expect(state.doc.eq(doc)).toBe(true);
+    expect(state.selection).toBeInstanceOf(MultipleNodeSelection);
+    expect(state.selection.eq(selection)).toBe(true);
+    expect(redo(state, dispatch)).toBe(true);
+    expect(state.doc.eq(movedDoc)).toBe(true);
+    expect(undo(state, dispatch)).toBe(true);
+    expect(state.selection.eq(selection)).toBe(true);
+  });
+});

packages/core/src/extensions/SideMenu/MultipleNodeSelection.ts

@@ -1,10 +1,10 @@
 import { Fragment, Node, ResolvedPos, Slice } from "prosemirror-model";
-import { Selection } from "prosemirror-state";
+import { Selection, SelectionBookmark } from "prosemirror-state";
 import { Mappable } from "prosemirror-transform";
 
 /**
- * This class represents an editor selection which spans multiple nodes/blocks. It's currently only used to allow users
- * to drag multiple blocks at the same time. Expects the selection anchor and head to be between nodes, i.e. just before
+ * This class represents an editor selection which spans one or more whole nodes/blocks. It's used for block drags
+ * and their restored history selections. Expects the selection anchor and head to be between nodes, i.e. just before
  * the first target node and just after the last, and that anchor and head are at the same nesting level.
  *
  * Partially based on ProseMirror's NodeSelection implementation:
@@ -37,6 +37,13 @@ export class MultipleNodeSelection extends Selection {
     return new MultipleNodeSelection(doc.resolve(from), doc.resolve(to));
   }
 
+  static fromJSON(doc: Node, json: { anchor: number; head: number }) {
+    if (typeof json.anchor !== "number" || typeof json.head !== "number") {
+      throw new RangeError("Invalid input for MultipleNodeSelection.fromJSON");
+    }
+    return MultipleNodeSelection.create(doc, json.anchor, json.head);
+  }
+
   content(): Slice {
     return new Slice(Fragment.from(this.nodes), 0, 0);
   }
@@ -64,25 +71,57 @@ export class MultipleNodeSelection extends Selection {
   }
 
   map(doc: Node, mapping: Mappable): Selection {
-    const fromResult = mapping.mapResult(this.from);
-    const toResult = mapping.mapResult(this.to);
+    return this.getBookmark().map(mapping).resolve(doc);
+  }
+
+  getBookmark(): SelectionBookmark {
+    return new MultipleNodeBookmark(this.from, this.to);
+  }
+
+  toJSON() {
+    return { type: "multiple-node", anchor: this.anchor, head: this.head };
+  }
+}
 
-    if (toResult.deleted) {
-      return Selection.near(doc.resolve(fromResult.pos));
+class MultipleNodeBookmark implements SelectionBookmark {
+  constructor(
+    private readonly from: number,
+    private readonly to: number,
+  ) {}
+
+  map(mapping: Mappable): SelectionBookmark {
+    const from = mapping.mapResult(this.from, 1);
+    // A collapsed bookmark is a fallback cursor, not a range to expand.
+    if (this.from === this.to) {
+      return new MultipleNodeBookmark(from.pos, from.pos);
     }
+    const to = mapping.mapResult(this.to, -1);
 
-    if (fromResult.deleted) {
-      return Selection.near(doc.resolve(toResult.pos));
+    if (to.deleted) {
+      return new MultipleNodeBookmark(from.pos, from.pos);
+    }
+    if (from.deleted) {
+      return new MultipleNodeBookmark(to.pos, to.pos);
     }
 
-    return new MultipleNodeSelection(
-      doc.resolve(fromResult.pos),
-      doc.resolve(toResult.pos),
-    );
+    return new MultipleNodeBookmark(from.pos, to.pos);
   }
 
-  toJSON(): any {
-    return { type: "multiple-node", anchor: this.anchor, head: this.head };
+  resolve(doc: Node): Selection {
+    const $from = doc.resolve(this.from);
+    const $to = doc.resolve(this.to);
+    // Structural edits can leave positions inside blocks or in different parents.
+    // Only restore the block selection when both ends are still node boundaries.
+    if (
+      this.from < this.to &&
+      $from.sameParent($to) &&
+      $from.textOffset === 0 &&
+      $to.textOffset === 0
+    ) {
+      return new MultipleNodeSelection($from, $to);
+    }
+
+    return Selection.near($from);
   }
 }