fix: ignore drag & drop from unrelated events #1968

[nperez0111]

Summary

This implements a fix for #1968 to ignore drag & drop events for completely unrelated events on the page.

I tested with this:

diff --git i/examples/01-basic/12-multi-editor/src/App.tsx w/examples/01-basic/12-multi-editor/src/App.tsx
index bf891fecb..0f5bc1c30 100644
--- i/examples/01-basic/12-multi-editor/src/App.tsx
+++ w/examples/01-basic/12-multi-editor/src/App.tsx
@@ -18,7 +18,7 @@ function Editor(props: { initialContent?: PartialBlock[] }) {
 export default function App() {
   // Creates & renders two editors side by side.
   return (
-    <div style={{ display: "flex" }}>
+    <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
       <Editor
         initialContent={[
           {
@@ -49,6 +49,65 @@ export default function App() {
           },
         ]}
       />
+      {/* Non-BlockNote draggable & droppable area for testing relevance gate */}
+      <div
+        style={{
+          flex: 1,
+          border: "2px dashed #ccc",
+          borderRadius: "8px",
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px",
+        }}
+      >
+        <h3 style={{ margin: "0 0 10px 0" }}>Non-BlockNote Drag & Drop Area</h3>
+        <div
+          draggable
+          onDragStart={(e) => {
+            e.dataTransfer.setData("text/plain", "This is not a BlockNote drag");
+            e.dataTransfer.effectAllowed = "move";
+          }}
+          style={{
+            padding: "10px",
+            backgroundColor: "#e3f2fd",
+            borderRadius: "4px",
+            cursor: "grab",
+            border: "1px solid #90caf9",
+          }}
+        >
+          🎯 Drag me! (Not a BlockNote drag)
+        </div>
+        <div
+          onDragOver={(e) => {
+            e.preventDefault();
+            e.currentTarget.style.backgroundColor = "#fff3e0";
+          }}
+          onDragLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }}
+          onDrop={(e) => {
+            e.preventDefault();
+            e.currentTarget.style.backgroundColor = "transparent";
+            const data = e.dataTransfer.geata("text/plain");
+            alert(`Dropped: ${data || "Unknown data"}`);
+          }}
+          style={{
+            minHeight: "100px",
+            padding: "10px",
+            border: "2px dashed #ff9800",
+            borderRadius: "4px",
+            backgroundColor: "transparent",
+            transition: "background-color 0.2s",
+          }}
+        >
+          Drop zone (non-BlockNote)
+        </div>
+        <p style={{ fontSize: "12px", color: "#666", margin: "10px 0 0 0" }}>
+          This area should NOT trigger BlockNote's drag handlers when dragging
+          to/from BlockNote editors.
+        </p>
+      </div>
     </div>
   );
 }

Rationale

If an event is not from the current blocknote editor, or coming from another blocknote editor on the page, we should not be capturing that event.

Changes

Impact

It could have impact on drag & drop behavior, manual testing was done to make sure blocknote drag & drop worked as expected.

Testing

Manual testing, given the complexity of adding e2e tests for drag & drop behaviors

Screenshots/Video

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

Thanks to @roNn23 for pointing out this fix

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
blocknote	Ready	Preview	Jan 13, 2026 2:33pm
blocknote-website	Ready	Preview	Jan 13, 2026 2:33pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2346

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2346

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2346

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2346

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2346

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2346

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2346

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2346

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2346

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2346

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2346

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2346

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2346

commit: 65c8a4d

[roNn23]

@nperez0111 Hey Nick, sadly the fix is not fully working yet.

The issue is that closeDropCursor() gets called in onDragOver before the isBlockNoteDrag check in getDragEventContext can prevent it. The closeDropCursor() method dispatches a synchronous dragleave event which interferes with external drag-and-drop libraries (in my case @atlaskit/pragmatic-drag-and-drop).

The fix needs to also check for external drags at the start of onDragOver:

onDragOver = (event: DragEvent) => {
  if ((event as any).synthetic) {
    return;
  }
  
  // Add this check to prevent interference with external DnD
  if (!event.dataTransfer?.types.includes("blocknote/html")) {
    return;
  }

  const context = this.getDragEventContext(event);
  // ...
}

Maybe you have to add more checks.

Thanks a lot!

[nperez0111]

@roNn23 thanks for trying it out, I've just gone ahead & added the same check in the other handlers just to be sure. I think this should work better now. If not, I'll have to look into the pragmatic-drag-and-drop implementation to see what is conflicting exactly, which will take some time