@blocknote/core 0.33.0 → 0.34.0

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -30,19 +30,14 @@ export type SideMenuState<
   block: Block<BSchema, I, S>;
 };
 
-const PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP = 0.1;
+const DISTANCE_TO_CONSIDER_EDITOR_BOUNDS = 250;
 
 function getBlockFromCoords(
   view: EditorView,
   coords: { left: number; top: number },
-  sideMenuDetection: "viewport" | "editor",
   adjustForColumns = true,
 ) {
-  const elements = view.root.elementsFromPoint(
-    // bit hacky - offset x position to right to account for the width of sidemenu itself
-    coords.left + (sideMenuDetection === "editor" ? 50 : 0),
-    coords.top,
-  );
+  const elements = view.root.elementsFromPoint(coords.left, coords.top);
 
   for (const element of elements) {
     if (!view.dom.contains(element)) {
@@ -55,10 +50,10 @@ function getBlockFromCoords(
         return getBlockFromCoords(
           view,
           {
+            // TODO can we do better than this?
             left: coords.left + 50, // bit hacky, but if we're inside a column, offset x position to right to account for the width of sidemenu itself
             top: coords.top,
           },
-          sideMenuDetection,
           false,
         );
       }
@@ -74,7 +69,6 @@ function getBlockFromMousePos(
     y: number;
   },
   view: EditorView,
-  sideMenuDetection: "viewport" | "editor",
 ): { node: HTMLElement; id: string } | undefined {
   // Editor itself may have padding or other styling which affects
   // size/position, so we get the boundingRect of the first child (i.e. the
@@ -88,47 +82,42 @@ function getBlockFromMousePos(
     view.dom.firstChild as HTMLElement
   ).getBoundingClientRect();
 
-  // this.horizontalPosAnchor = editorBoundingBox.x;
-
   // Gets block at mouse cursor's position.
   const coords = {
-    left: mousePos.x,
+    // Clamps the x position to the editor's bounding box.
+    left: Math.min(
+      Math.max(editorBoundingBox.left + 10, mousePos.x),
+      editorBoundingBox.right - 10,
+    ),
     top: mousePos.y,
   };
 
-  const mouseLeftOfEditor = coords.left < editorBoundingBox.left;
-  const mouseRightOfEditor = coords.left > editorBoundingBox.right;
+  const referenceBlock = getBlockFromCoords(view, coords);
 
-  // Clamps the x position to the editor's bounding box.
-  if (sideMenuDetection === "viewport") {
-    if (mouseLeftOfEditor) {
-      coords.left = editorBoundingBox.left + 10;
-    }
-
-    if (mouseRightOfEditor) {
-      coords.left = editorBoundingBox.right - 10;
-    }
+  if (!referenceBlock) {
+    // could not find the reference block
+    return undefined;
   }
 
-  let block = getBlockFromCoords(view, coords, sideMenuDetection);
-
-  if (!mouseRightOfEditor && block) {
-    // note: this case is not necessary when we're on the right side of the editor
-
-    /* Now, because blocks can be nested
-    | BlockA        |
-    x | BlockB     y|
-
-    hovering over position x (the "margin of block B") will return block A instead of block B.
-    to fix this, we get the block from the right side of block A (position y, which will fall in BlockB correctly)
-    */
-
-    const rect = block.node.getBoundingClientRect();
-    coords.left = rect.right - 10;
-    block = getBlockFromCoords(view, coords, "viewport", false);
-  }
-
-  return block;
+  /**
+   * Because blocks may be nested, we need to check the right edge of the parent block:
+   * ```
+   * | BlockA        |
+   * x | BlockB     y|
+   * ```
+   * Hovering at position x (left edge of BlockB) would return BlockA.
+   * Instead, we check at position y (right edge of BlockA) to correctly identify BlockB.
+   */
+  const referenceBlocksBoundingBox =
+    referenceBlock.node.getBoundingClientRect();
+  return getBlockFromCoords(
+    view,
+    {
+      left: referenceBlocksBoundingBox.right - 10,
+      top: mousePos.y,
+    },
+    false,
+  );
 }
 
 /**
@@ -153,7 +142,6 @@ export class SideMenuView<
 
   constructor(
     private readonly editor: BlockNoteEditor<BSchema, I, S>,
-    private readonly sideMenuDetection: "viewport" | "editor",
     private readonly pmView: EditorView,
     emitUpdate: (state: SideMenuState<BSchema, I, S>) => void,
   ) {
@@ -215,11 +203,23 @@ export class SideMenuView<
       return;
     }
 
-    const block = getBlockFromMousePos(
-      this.mousePos,
-      this.pmView,
-      this.sideMenuDetection,
-    );
+    const closestEditor = this.findClosestEditorElement({
+      clientX: this.mousePos.x,
+      clientY: this.mousePos.y,
+    });
+
+    if (
+      closestEditor?.element !== this.pmView.dom ||
+      closestEditor.distance > DISTANCE_TO_CONSIDER_EDITOR_BOUNDS
+    ) {
+      if (this.state?.show) {
+        this.state.show = false;
+        this.updateState(this.state);
+      }
+      return;
+    }
+
+    const block = getBlockFromMousePos(this.mousePos, this.pmView);
 
     // Closes the menu if the mouse cursor is beyond the editor vertically.
     if (!block || !this.editor.isEditable) {
@@ -279,95 +279,6 @@ export class SideMenuView<
     }
   };
 
-  onDrop = (event: DragEvent) => {
-    // Content from outside a BlockNote editor is being dropped - just let
-    // ProseMirror's default behaviour handle it.
-    if (this.pmView.dragging === null) {
-      return;
-    }
-
-    this.editor._tiptapEditor.commands.blur();
-
-    // Finds the BlockNote editor element that the drop event occurred in (if
-    // any).
-    const parentEditorElement =
-      event.target instanceof Node
-        ? (event.target instanceof HTMLElement
-            ? event.target
-            : event.target.parentElement
-          )?.closest(".bn-editor") || null
-        : null;
-
-    // Drop event occurred within an editor.
-    if (parentEditorElement) {
-      // When ProseMirror handles a drop event on the editor while
-      // `view.dragging` is set, it deletes the selected content. However, if
-      // a block from a different editor is being dropped, this causes some
-      // issues that the code below fixes:
-      if (!this.isDragOrigin && this.pmView.dom === parentEditorElement) {
-        // Because the editor selection is unrelated to the dragged content, we
-        // don't want PM to delete its content. Therefore, we collapse the
-        // selection.
-        this.pmView.dispatch(
-          this.pmView.state.tr.setSelection(
-            TextSelection.create(
-              this.pmView.state.tr.doc,
-              this.pmView.state.tr.selection.to,
-            ),
-          ),
-        );
-      } else if (this.isDragOrigin && this.pmView.dom !== parentEditorElement) {
-        // Because the editor from which the block originates doesn't get a drop
-        // event on it, PM doesn't delete its selected content. Therefore, we
-        // need to do so manually.
-        //
-        // Note: Deleting the selected content from the editor from which the
-        // block originates, may change its height. This can cause the position of
-        // the editor in which the block is being dropping to shift, before it
-        // can handle the drop event. That in turn can cause the drop to happen
-        // somewhere other than the user intended. To get around this, we delay
-        // deleting the selected content until all editors have had the chance to
-        // handle the event.
-        setTimeout(
-          () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()),
-          0,
-        );
-      }
-    }
-
-    if (
-      this.sideMenuDetection === "editor" ||
-      (event as any).synthetic ||
-      !event.dataTransfer?.types.includes("blocknote/html")
-    ) {
-      return;
-    }
-
-    const pos = this.pmView.posAtCoords({
-      left: event.clientX,
-      top: event.clientY,
-    });
-
-    if (!pos || pos.inside === -1) {
-      /**
-       * When `this.sideMenuSelection === "viewport"`, if the event is outside the
-       * editor contents, we dispatch a fake event, so that we can still drop the
-       * content when dragging / dropping to the side of the editor
-       */
-      const evt = this.createSyntheticEvent(event);
-      // console.log("dispatch fake drop");
-      this.pmView.dom.dispatchEvent(evt);
-    }
-  };
-
-  onDragEnd = () => {
-    // When the user starts dragging a block, `view.dragging` is set on all
-    // BlockNote editors. However, when the drag ends, only the editor that the
-    // drag originated in automatically clears `view.dragging`. Therefore, we
-    // have to manually clear it on all editors.
-    this.pmView.dragging = null;
-  };
-
   /**
    * If a block is being dragged, ProseMirror usually gets the context of what's
    * being dragged from `view.dragging`, which is automatically set when a
@@ -393,7 +304,8 @@ export class SideMenuView<
     }
 
     if (this.pmView.dragging) {
-      throw new Error("New drag was started while an existing drag is ongoing");
+      // already dragging, so no-op
+      return;
     }
 
     const element = document.createElement("div");
@@ -411,29 +323,240 @@ export class SideMenuView<
   };
 
   /**
-   * If the event is outside the editor contents,
-   * we dispatch a fake event, so that we can still drop the content
-   * when dragging / dropping to the side of the editor
+   * Finds the closest editor visually to the given coordinates
+   */
+  private findClosestEditorElement = (coords: {
+    clientX: number;
+    clientY: number;
+  }) => {
+    // Get all editor elements in the document
+    const editors = Array.from(this.pmView.root.querySelectorAll(".bn-editor"));
+
+    if (editors.length === 0) {
+      return null;
+    }
+
+    // Find the editor with the smallest distance to the coordinates
+    let closestEditor = editors[0];
+    let minDistance = Number.MAX_VALUE;
+
+    editors.forEach((editor) => {
+      const rect = editor
+        .querySelector(".bn-block-group")!
+        .getBoundingClientRect();
+
+      const distanceX =
+        coords.clientX < rect.left
+          ? rect.left - coords.clientX
+          : coords.clientX > rect.right
+            ? coords.clientX - rect.right
+            : 0;
+
+      const distanceY =
+        coords.clientY < rect.top
+          ? rect.top - coords.clientY
+          : coords.clientY > rect.bottom
+            ? coords.clientY - rect.bottom
+            : 0;
+
+      const distance = Math.sqrt(
+        Math.pow(distanceX, 2) + Math.pow(distanceY, 2),
+      );
+
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestEditor = editor;
+      }
+    });
+
+    return {
+      element: closestEditor,
+      distance: minDistance,
+    };
+  };
+
+  /**
+   * This dragover event handler listens at the document level,
+   * and is trying to handle dragover events for all editors.
+   *
+   * It specifically is trying to handle the following cases:
+   *  - If the dragover event is within the bounds of any editor, then it does nothing
+   *  - If the dragover event is outside the bounds of any editor, but close enough (within DISTANCE_TO_CONSIDER_EDITOR_BOUNDS) to the closest editor,
+   *    then it dispatches a synthetic dragover event to the closest editor (which will trigger the drop-cursor to be shown on that editor)
+   *  - If the dragover event is outside the bounds of the current editor, then it will dispatch a synthetic dragleave event to the current editor
+   *    (which will trigger the drop-cursor to be removed from the current editor)
+   *
+   * The synthetic event is a necessary evil because we do not control prosemirror-dropcursor to be able to show the drop-cursor within the range we want
    */
   onDragOver = (event: DragEvent) => {
+    if ((event as any).synthetic) {
+      return;
+    }
+
+    const dragEventContext = this.getDragEventContext(event);
+
+    if (!dragEventContext || !dragEventContext.isDropPoint) {
+      // This is not a drag event that we are interested in
+      // so, we close the drop-cursor
+      this.closeDropCursor();
+      return;
+    }
+
+    if (
+      dragEventContext.isDropPoint &&
+      !dragEventContext.isDropWithinEditorBounds
+    ) {
+      // we are the drop point, but the drag over event is not within the bounds of this editor instance
+      // so, we need to dispatch an event that is in the bounds of this editor instance
+      this.dispatchSyntheticEvent(event);
+    }
+  };
+
+  /**
+   * Closes the drop-cursor for the current editor
+   */
+  private closeDropCursor = () => {
+    const evt = new Event("dragleave", { bubbles: false });
+    // It needs to be synthetic, so we don't accidentally think it is a real dragend event
+    (evt as any).synthetic = true;
+    // We dispatch the event to the current editor, so that the drop-cursor is removed for it
+    this.pmView.dom.dispatchEvent(evt);
+  };
+
+  /**
+   * It is surprisingly difficult to determine the information we need to know about a drag event
+   *
+   * This function is trying to determine the following:
+   *  - Whether the current editor instance is the drop point
+   *  - Whether the current editor instance is the drag origin
+   *  - Whether the drop event is within the bounds of the current editor instance
+   */
+  getDragEventContext = (event: DragEvent) => {
+    // We need to check if there is text content that is being dragged (select some text & just drag it)
+    const textContentIsBeingDragged =
+      !event.dataTransfer?.types.includes("blocknote/html") &&
+      Boolean(this.pmView.dragging);
+    // This is the side menu drag from this plugin
+    const sideMenuIsBeingDragged = Boolean(this.isDragOrigin);
+    // Tells us that the current editor instance has a drag ongoing (either text or side menu)
+    const isDragOrigin = textContentIsBeingDragged || sideMenuIsBeingDragged;
+
+    // Tells us which editor instance is the closest to the drag event (whether or not it is actually reasonably close)
+    const closestEditor = this.findClosestEditorElement(event);
+
+    // We arbitrarily decide how far is "too far" from the closest editor to be considered a drop point
     if (
-      this.sideMenuDetection === "editor" ||
-      (event as any).synthetic ||
-      !event.dataTransfer?.types.includes("blocknote/html")
+      !closestEditor ||
+      closestEditor.distance > DISTANCE_TO_CONSIDER_EDITOR_BOUNDS
     ) {
+      // we are too far from the closest editor, or no editor was found
+      return undefined;
+    }
+
+    // We check if the closest editor is the same as the current editor instance (which is the drop point)
+    const isDropPoint = closestEditor.element === this.pmView.dom;
+    // We check if the current editor instance is the same as the editor instance that the drag event is happening within
+    const isDropWithinEditorBounds =
+      isDropPoint && closestEditor.distance === 0;
+
+    // We never want to handle drop events that are not related to us
+    if (!isDropPoint && !isDragOrigin) {
+      // we are not the drop point or drag origin, so not relevant to us
+      return undefined;
+    }
+
+    return {
+      isDropPoint,
+      isDropWithinEditorBounds,
+      isDragOrigin,
+    };
+  };
+
+  /**
+   * The drop event handler listens at the document level,
+   * and handles drop events for all editors.
+   *
+   * It specifically handles the following cases:
+   *  - If we are both the drag origin and drop point:
+   *    - Let normal drop handling take over
+   *  - If we are the drop point but not the drag origin:
+   *    - Collapse selection to prevent PM from deleting unrelated content
+   *    - If drop event is outside our editor bounds, dispatch synthetic drop event to our editor
+   *  - If we are the drag origin but not the drop point:
+   *    - Delete the dragged content from our editor after a delay
+   */
+  onDrop = (event: DragEvent) => {
+    if ((event as any).synthetic) {
       return;
     }
 
-    const pos = this.pmView.posAtCoords({
-      left: event.clientX,
-      top: event.clientY,
-    });
+    const context = this.getDragEventContext(event);
+    if (!context) {
+      this.closeDropCursor();
+      // This is not a drag event that we are interested in
+      return;
+    }
+    const { isDropPoint, isDropWithinEditorBounds, isDragOrigin } = context;
+
+    if (!isDropWithinEditorBounds) {
+      // Any time that the drop event is outside of the editor bounds (but still close to an editor instance)
+      // We dispatch a synthetic event that is in the bounds of the editor instance, to have the correct drop point
+      this.dispatchSyntheticEvent(event);
+    }
+
+    if (isDropPoint && isDragOrigin) {
+      // The current instance is both the drop point and the drag origin
+      // no-op, normal drop handling will take over
+      return;
+    }
+
+    if (isDropPoint) {
+      // The current instance is the drop point, but not the drag origin
+
+      // Because the editor selection is unrelated to the dragged content, we
+      // don't want PM to delete its content. Therefore, we collapse the
+      // selection.
+      this.pmView.dispatch(
+        this.pmView.state.tr.setSelection(
+          TextSelection.create(
+            this.pmView.state.tr.doc,
+            this.pmView.state.tr.selection.anchor,
+          ),
+        ),
+      );
+      return;
+    } else if (isDragOrigin) {
+      // The current instance is the drag origin, but not the drop point
+      // our content got dropped somewhere else
+
+      // Because the editor from which the block originates doesn't get a drop
+      // event on it, PM doesn't delete its selected content. Therefore, we
+      // need to do so manually.
+      //
+      // Note: Deleting the selected content from the editor from which the
+      // block originates, may change its height. This can cause the position of
+      // the editor in which the block is being dropping to shift, before it
+      // can handle the drop event. That in turn can cause the drop to happen
+      // somewhere other than the user intended. To get around this, we delay
+      // deleting the selected content until all editors have had the chance to
+      // handle the event.
+      setTimeout(
+        () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()),
+        0,
+      );
+      return;
+    }
+  };
 
-    if (!pos || (pos.inside === -1 && this.pmView.dom.firstChild)) {
-      const evt = this.createSyntheticEvent(event);
-      // console.log("dispatch fake dragover");
-      this.pmView.dom.dispatchEvent(evt);
+  onDragEnd = (event: DragEvent) => {
+    if ((event as any).synthetic) {
+      return;
     }
+    // When the user starts dragging a block, `view.dragging` is set on all
+    // BlockNote editors. However, when the drag ends, only the editor that the
+    // drag originated in automatically clears `view.dragging`. Therefore, we
+    // have to manually clear it on all editors.
+    this.pmView.dragging = null;
   };
 
   onKeyDown = (_event: KeyboardEvent) => {
@@ -488,60 +611,27 @@ export class SideMenuView<
     this.updateStateFromMousePos();
   };
 
-  private createSyntheticEvent(event: DragEvent) {
-    const evt = new Event(event.type, event) as any;
-    const editorBoundingBox = (
+  private dispatchSyntheticEvent(event: DragEvent) {
+    const evt = new Event(event.type as "dragover", event) as any;
+    const dropPointBoundingBox = (
       this.pmView.dom.firstChild as HTMLElement
     ).getBoundingClientRect();
     evt.clientX = event.clientX;
     evt.clientY = event.clientY;
-    if (
-      event.clientX < editorBoundingBox.left &&
-      event.clientX >
-        editorBoundingBox.left -
-          editorBoundingBox.width *
-            PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP
-    ) {
-      // when we're slightly left of the editor, we can drop to the side of the block
-      evt.clientX =
-        editorBoundingBox.left +
-        (editorBoundingBox.width *
-          PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP) /
-          2;
-    } else if (
-      event.clientX > editorBoundingBox.right &&
-      event.clientX <
-        editorBoundingBox.right +
-          editorBoundingBox.width *
-            PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP
-    ) {
-      // when we're slightly right of the editor, we can drop to the side of the block
-      evt.clientX =
-        editorBoundingBox.right -
-        (editorBoundingBox.width *
-          PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP) /
-          2;
-    } else if (
-      event.clientX < editorBoundingBox.left ||
-      event.clientX > editorBoundingBox.right
-    ) {
-      // when mouse is outside of the editor on x axis, drop it somewhere safe (but not to the side of a block)
-      evt.clientX =
-        editorBoundingBox.left +
-        PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP *
-          editorBoundingBox.width *
-          2; // put it somewhere in first block, but safe outside of the PERCENTAGE_OF_BLOCK_WIDTH_CONSIDERED_SIDE_DROP margin
-    }
 
+    evt.clientX = Math.min(
+      Math.max(event.clientX, dropPointBoundingBox.left),
+      dropPointBoundingBox.left + dropPointBoundingBox.width,
+    );
     evt.clientY = Math.min(
-      Math.max(event.clientY, editorBoundingBox.top),
-      editorBoundingBox.top + editorBoundingBox.height,
+      Math.max(event.clientY, dropPointBoundingBox.top),
+      dropPointBoundingBox.top + dropPointBoundingBox.height,
     );
 
     evt.dataTransfer = event.dataTransfer;
     evt.preventDefault = () => event.preventDefault();
     evt.synthetic = true; // prevent recursion
-    return evt;
+    this.pmView.dom.dispatchEvent(evt);
   }
 
   onScroll = () => {
@@ -549,6 +639,7 @@ export class SideMenuView<
       this.state.referencePos = this.hoveredBlock!.getBoundingClientRect();
       this.emitUpdate(this.state);
     }
+    this.updateStateFromMousePos();
   };
 
   // Needed in cases where the editor state updates without the mouse cursor
@@ -615,23 +706,15 @@ export class SideMenuProsemirrorPlugin<
 
   public view: SideMenuView<BSchema, I, S> | undefined;
 
-  constructor(
-    private readonly editor: BlockNoteEditor<BSchema, I, S>,
-    sideMenuDetection: "viewport" | "editor",
-  ) {
+  constructor(private readonly editor: BlockNoteEditor<BSchema, I, S>) {
     super();
     this.addProsemirrorPlugin(
       new Plugin({
         key: sideMenuPluginKey,
         view: (editorView) => {
-          this.view = new SideMenuView(
-            editor,
-            sideMenuDetection,
-            editorView,
-            (state) => {
-              this.emit("update", state);
-            },
-          );
+          this.view = new SideMenuView(editor, editorView, (state) => {
+            this.emit("update", state);
+          });
           return this.view;
         },
       }),

package/src/schema/inlineContent/types.ts

@@ -5,6 +5,7 @@ import { StyleSchema, Styles } from "../styles/types.js";
 export type CustomInlineContentConfig = {
   type: string;
   content: "styled" | "none"; // | "plain"
+  draggable?: boolean;
   readonly propSchema: PropSchema;
   // content: "inline" | "none" | "table";
 };
@@ -22,6 +23,13 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
         node: Node;
       };
 
+export type InlineContentSchemaWithInlineContent<
+  IType extends string,
+  C extends InlineContentConfig,
+> = {
+  [k in IType]: C;
+};
+
 // Container for both the config and implementation of InlineContent,
 // and the type of `implementation` is based on that of the config
 export type InlineContentSpec<T extends InlineContentConfig> = {