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

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

Additional Notes

Thanks to @roNn23 for pointing out this fix