Merge pull request udecode#4592 from DND-IT/hide-drop-line-on-cancel-drag

Author: zbeyens

.changeset/khaki-insects-remain.md

@@ -0,0 +1,5 @@
+---
+'@platejs/dnd': patch
+---
+
+Hide drop line when user leaves document or drops (also besides editor)

packages/dnd/src/DndPlugin.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import type { Path, PluginConfig } from 'platejs';
 import type { DropTargetMonitor } from 'react-dnd';
@@ -67,9 +67,6 @@ export const DndPlugin = createTPlatePlugin<DndConfig>({
       editor.setOption(plugin, '_isOver', true);
     },
     onDrop: ({ getOptions, setOption }) => {
-      setOption('_isOver', false);
-      setOption('dropTarget', undefined);
-
       return getOptions().isDragging;
     },
     onFocus: ({ editor, plugin }) => {
@@ -88,6 +85,43 @@ export const DndPlugin = createTPlatePlugin<DndConfig>({
     isDragging: false,
     multiplePreviewRef: null,
   },
+  useHooks: ({ setOption }) => {
+    const handleDocumentDragLeave = useCallback(
+      (e: DragEvent) => {
+        // This event fires for every element that receives a drag leave event. If `clientX` and `clientY` are both 0,
+        // it means the drag has left the viewport. Needed, if the drag did not start inside the editor, but for example
+        // by dragging a file from the filesystem
+        if (!e.clientX && !e.clientY) {
+          setOption('dropTarget', undefined);
+        }
+      },
+      [setOption]
+    );
+
+    // We listen for the drop event on the document and not only inside the editor, because we want to
+    // remove the dropTarget, and therefore hide the drop line, also when the drop happened outside of
+    // the editor. Needed, if the drag did not start inside the editor, but for example by dragging a
+    // file from the filesystem
+    const handleDocumentDrop = useCallback(() => {
+      setOption('_isOver', false);
+      setOption('dropTarget', undefined);
+    }, [setOption]);
+
+    useEffect(() => {
+      document.addEventListener('dragleave', handleDocumentDragLeave, true);
+      document.addEventListener('drop', handleDocumentDrop, true);
+
+      return () => {
+        document.removeEventListener(
+          'dragleave',
+          handleDocumentDragLeave,
+          true
+        );
+
+        document.removeEventListener('drop', handleDocumentDrop, true);
+      };
+    }, [handleDocumentDragLeave, handleDocumentDrop]);
+  },
 }).extend(({ getOptions }) => ({
   render: {
     afterEditable: getOptions().enableScroller