From 4dcd6a202b1740035967856b04f612f834030b6c Mon Sep 17 00:00:00 2001
From: Prev Wong <prevwong@gmail.com>
Date: Mon, 13 May 2024 18:00:56 +0800
Subject: [PATCH] fix: prevent delay when drop element outside of Editor frame
 (#634)

---
 .changeset/many-toys-rescue.md         | 5 +++++
 packages/core/src/events/Positioner.ts | 8 ++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 .changeset/many-toys-rescue.md

diff --git a/.changeset/many-toys-rescue.md b/.changeset/many-toys-rescue.md
new file mode 100644
index 000000000..9c25935f1
--- /dev/null
+++ 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
index 223a48749..6c83a1e04 100644
--- 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) {