fix(core): keep the editor focused dropping & moving blocks

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,4 +1,4 @@
-import { Plugin, PluginKey } from "prosemirror-state";
+import { Plugin, PluginKey, Selection } from "prosemirror-state";
 import { dropPoint } from "prosemirror-transform";
 import { Decoration, DecorationSet, type EditorView } from "prosemirror-view";
 import {
@@ -72,6 +72,9 @@ export const DropCursorExtension = createExtension<
   let element: HTMLElement | null = null;
   let timeout = -1;
   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,
@@ -160,6 +163,10 @@ export const DropCursorExtension = createExtension<
   const onDragStart = (event: Event) => {
     const e = event as DragEvent;
     dragSourceElement = e.target instanceof Element ? e.target : null;
+    // A drop from another document ends the drag there, without a `dragend`
+    // in this one.
+    blocksDropped = false;
+    clearTimeout(focusTimeout);
   };
 
   const onDragOver = (event: Event) => {
@@ -267,15 +274,50 @@ export const DropCursorExtension = createExtension<
     }
   };
 
-  const onDrop = () => {
+  const onDrop = (event: Event) => {
     scheduleRemoval(20);
+    // Only block drags carry `blocknote/html`, not text drags.
+    blocksDropped =
+      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 = () => {
     scheduleRemoval(20);
     dragSourceElement = null;
   };
 
+  /**
+   * Leaves the editor ready for the keyboard after blocks were dropped in it.
+   * Listens on the root, as `dragend` fires on the drag source, e.g. the side
+   * menu's handle, which is outside the editor.
+   */
+  function onRootDragEnd() {
+    clearTimeout(focusTimeout);
+    if (!blocksDropped) {
+      return;
+    }
+    blocksDropped = false;
+    const view = editor.prosemirrorView;
+    // Firefox shows no text cursor after a drop until the editor is focused
+    // again (#2128).
+    view.dom.blur();
+    // A text cursor at the end of the dropped blocks, so the keyboard works on
+    // the editor right away, e.g. to undo the drop (#3165). The drop leaves the
+    // blocks selected, which would show the formatting toolbar.
+    view.dispatch(
+      view.state.tr.setSelection(Selection.near(view.state.selection.$to, -1)),
+    );
+    view.focus();
+  }
+
   // Drops the blocks where the cursor shows them: as the first children of
   // the block it goes into. Other drops are ProseMirror's.
   const dropIntoChildrenPlugin = new Plugin<DropInto | undefined>({
@@ -344,6 +386,8 @@ export const DropCursorExtension = createExtension<
           } else {
             editor.updateBlock(target, { children: draggedBlocks });
           }
+          // Custom drops must also leave the cursor at the dropped blocks.
+          editor.setTextCursorPosition(draggedBlocks.at(-1), "end");
         });
         return true;
       },
@@ -359,6 +403,10 @@ export const DropCursorExtension = createExtension<
         capture: true,
         signal,
       });
+      root.addEventListener("dragend", onRootDragEnd, {
+        capture: true,
+        signal,
+      });
 
       // Handle drag events on the editor
       dom.addEventListener("dragover", onDragOver, { signal });
@@ -369,6 +417,7 @@ export const DropCursorExtension = createExtension<
       // Clean up on unmount
       signal.addEventListener("abort", () => {
         clearTimeout(timeout);
+        clearTimeout(focusTimeout);
         setCursor(null);
       });
     },

packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts

@@ -1,10 +1,11 @@
-import { Selection, TextSelection } from "prosemirror-state";
+import { NodeSelection, Selection, TextSelection } from "prosemirror-state";
 
 import {
   createExtension,
   createStore,
 } from "../../editor/BlockNoteExtension.js";
 import { isTouchDevice } from "../../util/browser.js";
+import { MultipleNodeSelection } from "../SideMenu/MultipleNodeSelection.js";
 
 export const FormattingToolbarExtension = createExtension(({ editor }) => {
   const store = createStore(false);
@@ -17,6 +18,16 @@ export const FormattingToolbarExtension = createExtension(({ editor }) => {
         return false;
       }
 
+      // Don't show if whole blocks are selected. A block drag selects the
+      // dragged blocks, and undoing the drop selects them again.
+      if (
+        tr.selection instanceof MultipleNodeSelection ||
+        (tr.selection instanceof NodeSelection &&
+          tr.selection.node.type.isInGroup("bnBlock"))
+      ) {
+        return false;
+      }
+
       // Don't show if the selection is a text selection but contains no text.
       if (
         tr.selection instanceof TextSelection &&

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);
+  });
+});