From d5ac82373b97e389528688ec6dbc7c72715cc360 Mon Sep 17 00:00:00 2001
From: Eric Meier <ericmeier@protonmail.com>
Date: Fri, 11 Feb 2022 05:00:17 +0100
Subject: [PATCH] fix isDraggingInternally reset logic (#4828)

---
 .changeset/dirty-bobcats-marry.md              |  5 +++++
 .../slate-react/src/components/editable.tsx    | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/dirty-bobcats-marry.md

diff --git a/.changeset/dirty-bobcats-marry.md b/.changeset/dirty-bobcats-marry.md
new file mode 100644
index 000000000..b20b6a8f9
--- /dev/null
+++ b/.changeset/dirty-bobcats-marry.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Reset isDraggingInternally onDragEnd and onDrop even if the event is handled by the editable handler
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index 98ef9502c..2662835c6 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -970,8 +970,6 @@ export const Editable = (props: EditableProps) => {
                       at: draggedRange,
                     })
                   }
-
-                  state.isDraggingInternally = false
                 }
 
                 ReactEditor.insertData(editor, data)
@@ -982,22 +980,26 @@ export const Editable = (props: EditableProps) => {
                   ReactEditor.focus(editor)
                 }
               }
+
+              state.isDraggingInternally = false
             },
             [readOnly, attributes.onDrop]
           )}
           onDragEnd={useCallback(
             (event: React.DragEvent<HTMLDivElement>) => {
-              // When dropping on a different droppable element than the current editor,
-              // `onDrop` is not called. So we need to clean up in `onDragEnd` instead.
-              // Note: `onDragEnd` is only called when `onDrop` is not called
               if (
                 !readOnly &&
                 state.isDraggingInternally &&
-                hasTarget(editor, event.target) &&
-                !isEventHandled(event, attributes.onDragEnd)
+                attributes.onDragEnd &&
+                hasTarget(editor, event.target)
               ) {
-                state.isDraggingInternally = false
+                attributes.onDragEnd(event)
               }
+
+              // When dropping on a different droppable element than the current editor,
+              // `onDrop` is not called. So we need to clean up in `onDragEnd` instead.
+              // Note: `onDragEnd` is only called when `onDrop` is not called
+              state.isDraggingInternally = false
             },
             [readOnly, attributes.onDragEnd]
           )}