fix: prevent delay when drop element outside of Editor frame (#634)

prevwong · May 13, 2024 · 4dcd6a2 · 4dcd6a2
1 parent 438f48f
commit 4dcd6a2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/many-toys-rescue.md b/.changeset/many-toys-rescue.md
@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+Prevent delay when drop element outside of Editor frame
diff --git a/packages/core/src/events/Positioner.ts b/packages/core/src/events/Positioner.ts
@@ -14,6 +14,12 @@ import {
 } from '../interfaces';
 import { getNodesFromSelector } from '../utils/getNodesFromSelector';
 
+// Hack: to trigger dragend event immediate
+// Otherwise we would have to wait until the native animation is completed before we can actually drop an block
+const documentDragoverEventHandler = (e: DragEvent) => {
+  e.preventDefault();
+};
+
 /**
  * Positioner is responsible for computing the drop Indicator during a sequence of drag-n-drop events
  */
@@ -51,10 +57,12 @@ export class Positioner {
 
     this.onScrollListener = this.onScroll.bind(this);
     window.addEventListener('scroll', this.onScrollListener, true);
+    window.addEventListener('dragover', documentDragoverEventHandler, false);
   }
 
   cleanup() {
     window.removeEventListener('scroll', this.onScrollListener, true);
+    window.removeEventListener('dragover', documentDragoverEventHandler, false);
   }
 
   private onScroll(e: Event) {