@blocknote/core 0.47.0 → 0.47.2

package/src/editor/Block.css

@@ -42,6 +42,12 @@ BASIC STYLES
 
 .bn-inline-content {
   width: 100%;
+  /* Ensure pre-wrap even when a parent node view wrapper (e.g. tiptap's
+     NodeViewWrapper) resets white-space to "normal". Without this, browsers
+     normalize trailing spaces to NBSP on input, which causes ProseMirror to
+     compute a replacement instead of a pure insertion and breaks the
+     suggestion-menu trigger detection (issue #2531). */
+  white-space: pre-wrap;
 }
 
 /*

package/src/editor/BlockNoteEditor.ts

@@ -5,7 +5,7 @@ import {
   getSchema,
   Editor as TiptapEditor,
 } from "@tiptap/core";
-import { type Command, type Plugin, type Transaction } from "@tiptap/pm/state";
+import { type Command, type Transaction } from "@tiptap/pm/state";
 import { Node, Schema } from "prosemirror-model";
 import type { BlocksChanged } from "../api/getBlocksChangedByTransaction.js";
 import { blockToNode } from "../api/nodeConversions/blockToNode.js";
@@ -18,7 +18,10 @@ import {
   PartialBlock,
 } from "../blocks/index.js";
 import type { CollaborationOptions } from "../extensions/Collaboration/Collaboration.js";
-import { BlockChangeExtension } from "../extensions/index.js";
+import {
+  BlockChangeExtension,
+  DropCursorOptions,
+} from "../extensions/index.js";
 import { UniqueID } from "../extensions/tiptap-extensions/UniqueID/UniqueID.js";
 import type { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
@@ -118,19 +121,11 @@ export interface BlockNoteEditorOptions<
   domAttributes?: Partial<BlockNoteDOMAttributes>;
 
   /**
-   * A replacement indicator to use when dragging and dropping blocks. Uses the [ProseMirror drop cursor](https://github.com/ProseMirror/prosemirror-dropcursor), or a modified version when [Column Blocks](https://www.blocknotejs.org/docs/document-structure#column-blocks) are enabled.
-   * @remarks `() => Plugin`
+   * Options for configuring the drop cursor behavior when dragging and dropping blocks.
+   * Allows customization of cursor appearance and drop position computation through hooks.
+   * @remarks `DropCursorOptions`
    */
-  dropCursor?: (opts: {
-    editor: BlockNoteEditor<
-      NoInfer<BSchema>,
-      NoInfer<ISchema>,
-      NoInfer<SSchema>
-    >;
-    color?: string | false;
-    width?: number;
-    class?: string;
-  }) => Plugin;
+  dropCursor?: DropCursorOptions;
 
   /**
    * The content that should be in the editor when it's created, represented as an array of {@link PartialBlock} objects.

package/src/editor/managers/ExtensionManager/symbol.ts

@@ -3,4 +3,3 @@
  * This allows us to retrieve the original factory for comparison and other operations.
  */
 export const originalFactorySymbol = Symbol("originalFactory");
-

package/src/editor/managers/SelectionManager.ts

@@ -48,7 +48,9 @@ export class SelectionManager<
    * only the part of the block that is included in the selection.
    */
   public getSelectionCutBlocks(expandToWords = false) {
-    return this.editor.transact((tr) => getSelectionCutBlocks(tr, expandToWords));
+    return this.editor.transact((tr) =>
+      getSelectionCutBlocks(tr, expandToWords),
+    );
   }
 
   /**

package/src/extensions/Collaboration/YCursorPlugin.ts

@@ -97,7 +97,9 @@ export const YCursorExtension = createExtension(
                 const cursor = recentlyUpdatedCursors.get(clientID);
 
                 if (cursor) {
-                  cursor.element.setAttribute("data-active", "");
+                  setTimeout(() => {
+                    cursor.element.setAttribute("data-active", "");
+                  }, 10);
 
                   if (cursor.hideTimeout) {
                     clearTimeout(cursor.hideTimeout);

package/src/extensions/DropCursor/DropCursor.ts

@@ -1,26 +1,263 @@
-import { dropCursor } from "prosemirror-dropcursor";
+import { dropPoint } from "prosemirror-transform";
+import type { EditorView } from "prosemirror-view";
 import {
-  createExtension,
-  ExtensionOptions,
-} from "../../editor/BlockNoteExtension.js";
-import { BlockNoteEditorOptions } from "../../editor/BlockNoteEditor.js";
-
-export const DropCursorExtension = createExtension(
-  ({
-    editor,
-    options,
-  }: ExtensionOptions<
-    Pick<BlockNoteEditorOptions<any, any, any>, "dropCursor">
-  >) => {
-    return {
-      key: "dropCursor",
-      prosemirrorPlugins: [
-        (options.dropCursor ?? dropCursor)({
-          width: 5,
-          color: "#ddeeff",
-          editor: editor,
-        }),
-      ],
-    } as const;
-  },
-);
+  applyOrientationClasses,
+  getBlockDropRect,
+  getInlineDropRect,
+  getParentOffsets,
+  hasExclusionClassname,
+  type DropCursorPosition,
+} from "./utils.js";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
+
+export const DRAG_EXCLUSION_CLASSNAME = "bn-drag-exclude";
+
+/**
+ * Context passed to the computeDropPosition hook.
+ */
+export interface ComputeDropPositionContext {
+  editor: BlockNoteEditor<any, any, any>;
+  event: DragEvent;
+  view: EditorView;
+  defaultPosition: DropCursorPosition | null;
+}
+
+/**
+ * Hooks for customizing drop cursor behavior.
+ */
+export interface DropCursorHooks {
+  /**
+   * Compute cursor position and orientation.
+   * Return null to prevent dropping (no cursor shown).
+   */
+  computeDropPosition?: (
+    context: ComputeDropPositionContext,
+  ) => DropCursorPosition | null;
+}
+
+/**
+ * Options for the DropCursor extension.
+ */
+export interface DropCursorOptions {
+  width?: number; // Cursor width in pixels (default: 5)
+  color?: string | false; // Cursor color (default: "#ddeeff")
+  exclude?: string; // CSS class for exclusion (default: "bn-drag-exclude")
+  hooks?: DropCursorHooks; // Optional behavior hooks
+}
+
+/**
+ * Drop cursor visualization based on prosemirror-dropcursor:
+ * https://github.com/ProseMirror/prosemirror-dropcursor/blob/master/src/dropcursor.ts
+ *
+ * Refactored to use BlockNote extension pattern with mount callback and AbortSignal
+ * for lifecycle management instead of ProseMirror PluginView.
+ */
+export const DropCursorExtension = createExtension<
+  any,
+  {
+    dropCursor?: DropCursorOptions;
+  }
+>(({ editor, options }) => {
+  // State
+  let cursorPos: DropCursorPosition | null = null;
+  let element: HTMLElement | null = null;
+  let timeout = -1;
+  let dragSourceElement: Element | null = null;
+
+  const config = {
+    width: options.dropCursor?.width ?? 5,
+    color: options.dropCursor?.color ?? "#ddeeff",
+    exclude: options.dropCursor?.exclude ?? DRAG_EXCLUSION_CLASSNAME,
+    hooks: options.dropCursor?.hooks,
+  } as const;
+
+  // Helper functions
+  const setCursor = (pos: DropCursorPosition | null) => {
+    if (
+      pos?.pos === cursorPos?.pos &&
+      pos?.orientation === cursorPos?.orientation
+    ) {
+      return;
+    }
+    cursorPos = pos;
+
+    if (pos == null) {
+      if (element && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      element = null;
+    } else {
+      updateOverlay();
+    }
+  };
+
+  const updateOverlay = () => {
+    if (!cursorPos) {
+      return;
+    }
+
+    const view = editor.prosemirrorView;
+    const editorDOM = view.dom;
+    const editorRect = editorDOM.getBoundingClientRect();
+    const scaleX = editorRect.width / editorDOM.offsetWidth;
+    const scaleY = editorRect.height / editorDOM.offsetHeight;
+
+    const blockRect = getBlockDropRect(
+      view,
+      cursorPos,
+      config.width,
+      scaleX,
+      scaleY,
+    );
+    const rect =
+      blockRect ?? getInlineDropRect(view, cursorPos, config.width, scaleX);
+
+    const parent = view.dom.offsetParent as HTMLElement;
+    if (!element) {
+      element = parent.appendChild(document.createElement("div"));
+      element.style.cssText =
+        "position: absolute; z-index: 50; pointer-events: none;";
+      if (config.color) {
+        element.style.backgroundColor = config.color;
+      }
+    }
+
+    applyOrientationClasses(element, cursorPos.orientation);
+
+    const { parentLeft, parentTop } = getParentOffsets(parent);
+
+    element.style.left = (rect.left - parentLeft) / scaleX + "px";
+    element.style.top = (rect.top - parentTop) / scaleY + "px";
+    element.style.width = (rect.right - rect.left) / scaleX + "px";
+    element.style.height = (rect.bottom - rect.top) / scaleY + "px";
+  };
+
+  const scheduleRemoval = (ms: number) => {
+    clearTimeout(timeout);
+    timeout = window.setTimeout(() => setCursor(null), ms);
+  };
+
+  // Event handlers
+  const onDragStart = (event: Event) => {
+    const e = event as DragEvent;
+    dragSourceElement = e.target instanceof Element ? e.target : null;
+  };
+
+  const onDragOver = (event: Event) => {
+    const e = event as DragEvent;
+
+    // Check if drag source has exclusion classname
+    if (
+      dragSourceElement &&
+      hasExclusionClassname(dragSourceElement, config.exclude)
+    ) {
+      return;
+    }
+
+    // Check if drop target has exclusion classname
+    if (
+      e.target instanceof Element &&
+      hasExclusionClassname(e.target, config.exclude)
+    ) {
+      return;
+    }
+
+    const view = editor.prosemirrorView;
+    if (!view.editable) {
+      return;
+    }
+
+    const pos = view.posAtCoords({
+      left: e.clientX,
+      top: e.clientY,
+    });
+
+    const node = pos && pos.inside >= 0 && view.state.doc.nodeAt(pos.inside);
+    const disableDropCursor = node && (node.type.spec as any).disableDropCursor;
+    const disabled =
+      typeof disableDropCursor === "function"
+        ? disableDropCursor(view, pos, e)
+        : disableDropCursor;
+
+    if (pos && !disabled) {
+      let target = pos.pos;
+      if (view.dragging && view.dragging.slice) {
+        const point = dropPoint(view.state.doc, target, view.dragging.slice);
+        if (point != null) {
+          target = point;
+        }
+      }
+
+      // Compute default position
+      const $pos = view.state.doc.resolve(target);
+      const isBlock = !$pos.parent.inlineContent;
+      const defaultPosition: DropCursorPosition = {
+        pos: target,
+        orientation: isBlock ? "block-horizontal" : "inline",
+      };
+
+      // Allow hook to override position
+      let finalPosition = defaultPosition;
+      if (config.hooks?.computeDropPosition) {
+        const hookResult = config.hooks.computeDropPosition({
+          editor,
+          event: e,
+          view,
+          defaultPosition,
+        });
+        if (hookResult === null) {
+          // Hook returned null - don't show cursor
+          setCursor(null);
+          return;
+        }
+        finalPosition = hookResult;
+      }
+
+      setCursor(finalPosition);
+      scheduleRemoval(5000);
+    }
+  };
+
+  const onDragLeave = (event: Event) => {
+    const e = event as DragEvent;
+    if (
+      !(e.relatedTarget instanceof Node) ||
+      !editor.prosemirrorView.dom.contains(e.relatedTarget)
+    ) {
+      setCursor(null);
+    }
+  };
+
+  const onDrop = () => {
+    scheduleRemoval(20);
+  };
+
+  const onDragEnd = () => {
+    scheduleRemoval(20);
+    dragSourceElement = null;
+  };
+
+  return {
+    key: "dropCursor",
+    mount({ signal, dom, root }) {
+      // Track drag source at document level
+      root.addEventListener("dragstart", onDragStart, {
+        capture: true,
+        signal,
+      });
+
+      // Handle drag events on the editor
+      dom.addEventListener("dragover", onDragOver, { signal });
+      dom.addEventListener("dragleave", onDragLeave, { signal });
+      dom.addEventListener("drop", onDrop, { signal });
+      dom.addEventListener("dragend", onDragEnd, { signal });
+
+      // Clean up on unmount
+      signal.addEventListener("abort", () => {
+        clearTimeout(timeout);
+        setCursor(null);
+      });
+    },
+  } as const;
+});

package/src/extensions/DropCursor/utils.ts

@@ -0,0 +1,195 @@
+import type { EditorView } from "prosemirror-view";
+
+/**
+ * The orientation of the drop cursor.
+ */
+export type DropCursorOrientation =
+  | "inline" // Vertical line within text
+  | "block-horizontal" // Horizontal line between blocks
+  | "block-vertical-left" // Vertical line on left edge of block
+  | "block-vertical-right"; // Vertical line on right edge of block
+
+/**
+ * The position and orientation of the drop cursor.
+ */
+export type DropCursorPosition = {
+  pos: number; // Document position
+  orientation: DropCursorOrientation;
+};
+/**
+ * Bounding rectangle in viewport coordinates (e.g. from getBoundingClientRect).
+ */
+export type Rect = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
+
+/**
+ * Returns true if the element or any ancestor has the given CSS class.
+ * Used to skip drop cursor for elements marked with the exclusion class (e.g. drag handles).
+ */
+export function hasExclusionClassname(
+  element: Element | null,
+  exclude: string,
+): boolean {
+  if (!element || !exclude) {
+    return false;
+  }
+  return !!element.closest(`.${exclude}`);
+}
+
+/**
+ * Computes the viewport rect for a block-level drop cursor (horizontal line between blocks
+ * or vertical line on left/right edge). Returns null for inline positions or when no DOM node exists.
+ */
+export function getBlockDropRect(
+  view: EditorView,
+  cursorPos: DropCursorPosition,
+  width: number,
+  scaleX: number,
+  scaleY: number,
+): Rect | null {
+  const $pos = view.state.doc.resolve(cursorPos.pos);
+  const isBlock = !$pos.parent.inlineContent;
+
+  if (!isBlock || cursorPos.orientation === "inline") {
+    return null;
+  }
+
+  const before = $pos.nodeBefore;
+
+  const after = $pos.nodeAfter;
+
+  if (!before && !after) {
+    return null;
+  }
+
+  const isVertical =
+    cursorPos.orientation === "block-vertical-left" ||
+    cursorPos.orientation === "block-vertical-right";
+  // For vertical cursors, position is at the node position, for horizontal cursors, position is at the node before position
+  const nodePos = isVertical
+    ? cursorPos.pos
+    : cursorPos.pos - (before ? before.nodeSize : 0);
+
+  const node = view.nodeDOM(nodePos) as HTMLElement | null;
+  if (!node) {
+    return null;
+  }
+
+  const nodeRect = node.getBoundingClientRect();
+
+  if (isVertical) {
+    const halfWidth = (width / 2) * scaleX;
+    const left =
+      cursorPos.orientation === "block-vertical-left"
+        ? nodeRect.left
+        : nodeRect.right;
+
+    return {
+      left: left - halfWidth,
+      right: left + halfWidth,
+      top: nodeRect.top,
+      bottom: nodeRect.bottom,
+    };
+  }
+
+  let top = before ? nodeRect.bottom : nodeRect.top;
+  if (before && after) {
+    top =
+      (top +
+        (view.nodeDOM(cursorPos.pos) as HTMLElement).getBoundingClientRect()
+          .top) /
+      2;
+  }
+  const halfHeight = (width / 2) * scaleY;
+
+  return {
+    left: nodeRect.left,
+    right: nodeRect.right,
+    top: top - halfHeight,
+    bottom: top + halfHeight,
+  };
+}
+
+/**
+ * Computes the viewport rect for an inline drop cursor (vertical line within text).
+ */
+export function getInlineDropRect(
+  view: EditorView,
+  cursorPos: DropCursorPosition,
+  width: number,
+  scaleX: number,
+): Rect {
+  const coords = view.coordsAtPos(cursorPos.pos);
+  const halfWidth = (width / 2) * scaleX;
+
+  return {
+    left: coords.left - halfWidth,
+    right: coords.left + halfWidth,
+    top: coords.top,
+    bottom: coords.bottom,
+  };
+}
+
+/**
+ * Applies orientation-specific CSS classes to the drop cursor element so it can be
+ * styled correctly (e.g. horizontal vs vertical line, inline vs block).
+ */
+export function applyOrientationClasses(
+  el: HTMLElement,
+  orientation: DropCursorOrientation,
+) {
+  el.classList.toggle(
+    "prosemirror-dropcursor-inline",
+    orientation === "inline",
+  );
+  el.classList.toggle(
+    "prosemirror-dropcursor-block-horizontal",
+    orientation === "block-horizontal",
+  );
+  el.classList.toggle(
+    "prosemirror-dropcursor-block-vertical-left",
+    orientation === "block-vertical-left",
+  );
+  el.classList.toggle(
+    "prosemirror-dropcursor-block-vertical-right",
+    orientation === "block-vertical-right",
+  );
+  el.classList.toggle(
+    "prosemirror-dropcursor-block",
+    orientation === "block-horizontal",
+  );
+  el.classList.toggle(
+    "prosemirror-dropcursor-vertical",
+    orientation === "block-vertical-left" ||
+      orientation === "block-vertical-right",
+  );
+}
+
+/**
+ * Returns the offset of the parent element for converting viewport coordinates to
+ * parent-relative coordinates. Handles document.body and static positioning.
+ */
+export function getParentOffsets(parent: HTMLElement | null) {
+  if (
+    !parent ||
+    (parent === document.body && getComputedStyle(parent).position === "static")
+  ) {
+    return {
+      parentLeft: -window.pageXOffset,
+      parentTop: -window.pageYOffset,
+    };
+  }
+
+  const parentRect = parent.getBoundingClientRect();
+  const parentScaleX = parentRect.width / parent.offsetWidth;
+  const parentScaleY = parentRect.height / parent.offsetHeight;
+
+  return {
+    parentLeft: parentRect.left - parent.scrollLeft * parentScaleX,
+    parentTop: parentRect.top - parent.scrollTop * parentScaleY,
+  };
+}