[lexical-rich-text][lexical-plain-text] Spec hardening: call event.preventDefault() in dragover for HTML5 DnD compliance

packages/lexical-plain-text/src/index.ts

@@ -23,7 +23,7 @@ import {
   $moveCharacter,
   $shouldOverrideDefaultCharacterSelection,
 } from '@lexical/selection';
-import {mergeRegister, objectKlassEquals} from '@lexical/utils';
+import {eventFiles, mergeRegister, objectKlassEquals} from '@lexical/utils';
 import {
   $getSelection,
   $isRangeSelection,
@@ -38,6 +38,7 @@ import {
   DELETE_CHARACTER_COMMAND,
   DELETE_LINE_COMMAND,
   DELETE_WORD_COMMAND,
+  DRAGOVER_COMMAND,
   DRAGSTART_COMMAND,
   DROP_COMMAND,
   INSERT_LINE_BREAK_COMMAND,
@@ -411,6 +412,20 @@ export function registerPlainText(editor: LexicalEditor): () => void {
       event => $handlePlainTextDrop(event, editor),
       COMMAND_PRIORITY_EDITOR,
     ),
+    editor.registerCommand<DragEvent>(
+      DRAGOVER_COMMAND,
+      event => {
+        const [isFileTransfer] = eventFiles(event);
+        if (isFileTransfer) {
+          return false;
+        }
+        // contenteditable is not a native drop target; preventDefault() is
+        // required on dragover to allow the drop event to fire in Firefox.
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    ),
     editor.registerCommand<DragEvent>(
       DRAGSTART_COMMAND,
       event => {

packages/lexical-playground/__tests__/e2e/TextDragDrop.spec.mjs

@@ -53,6 +53,19 @@ async function dragSelectionToOffset(page, sourceText, clientTextOffset) {
           dataTransfer,
         }),
       );
+      const dragoverEvent = new DragEvent('dragover', {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY,
+        dataTransfer,
+      });
+      editable.dispatchEvent(dragoverEvent);
+      if (!dragoverEvent.defaultPrevented) {
+        throw new Error(
+          'dragover was not prevented; drop will not fire in Firefox',
+        );
+      }
       editable.dispatchEvent(
         new DragEvent('drop', {
           bubbles: true,

packages/lexical-rich-text/src/index.ts

@@ -20,7 +20,6 @@ import type {
   NodeKey,
   NodeSelection,
   ParagraphNode,
-  PasteCommandType,
   RangeSelection,
   SerializedElementNode,
   Spread,
@@ -47,6 +46,7 @@ import {
   $getNearestBlockElementAncestorOrThrow,
   $handleIndentAndOutdent,
   addClassNamesToElement,
+  eventFiles,
   isHTMLElement,
   mergeRegister,
   objectKlassEquals,
@@ -513,29 +513,7 @@ async function onCutForRichText(
   );
 }
 
-// Clipboard may contain files that we aren't allowed to read. While the event is arguably useless,
-// in certain occasions, we want to know whether it was a file transfer, as opposed to text. We
-// control this with the first boolean flag.
-export function eventFiles(
-  event: DragEvent | PasteCommandType,
-): [boolean, File[], boolean] {
-  let dataTransfer: null | DataTransfer = null;
-  if (objectKlassEquals(event, DragEvent)) {
-    dataTransfer = event.dataTransfer;
-  } else if (objectKlassEquals(event, ClipboardEvent)) {
-    dataTransfer = event.clipboardData;
-  }
-
-  if (dataTransfer === null) {
-    return [false, [], false];
-  }
-
-  const types = dataTransfer.types;
-  const hasFiles = types.includes('Files');
-  const hasContent =
-    types.includes('text/html') || types.includes('text/plain');
-  return [hasFiles, Array.from(dataTransfer.files), hasContent];
-}
+export {eventFiles} from '@lexical/utils';
 
 function $isTargetWithinDecorator(target: HTMLElement): boolean {
   const node = $getNearestNodeFromDOMNode(target);
@@ -1245,17 +1223,9 @@ export function registerRichText(
         if (isFileTransfer && !$isRangeSelection(selection)) {
           return false;
         }
-        const x = event.clientX;
-        const y = event.clientY;
-        const eventRange = caretFromPoint(x, y);
-        if (eventRange !== null) {
-          const node = $getNearestNodeFromDOMNode(eventRange.node);
-          if ($isDecoratorNode(node)) {
-            // Show browser caret as the user is dragging the media across the screen. Won't work
-            // for DecoratorNode nor it's relevant.
-            event.preventDefault();
-          }
-        }
+        // contenteditable is not a native drop target; preventDefault() is
+        // required on dragover to allow the drop event to fire in Firefox.
+        event.preventDefault();
         return true;
       },
       COMMAND_PRIORITY_EDITOR,

packages/lexical-utils/src/index.ts

@@ -63,6 +63,7 @@ import {
   makeStepwiseIterator,
   type NodeCaret,
   type NodeKey,
+  type PasteCommandType,
   PointCaret,
   type RangeSelection,
   type SiblingCaret,
@@ -691,6 +692,30 @@ export function objectKlassEquals<T>(
     : false;
 }
 
+// Clipboard may contain files that we aren't allowed to read. While the event is arguably useless,
+// in certain occasions, we want to know whether it was a file transfer, as opposed to text. We
+// control this with the first boolean flag.
+export function eventFiles(
+  event: DragEvent | PasteCommandType,
+): [boolean, File[], boolean] {
+  let dataTransfer: null | DataTransfer = null;
+  if (objectKlassEquals(event, DragEvent)) {
+    dataTransfer = event.dataTransfer;
+  } else if (objectKlassEquals(event, ClipboardEvent)) {
+    dataTransfer = event.clipboardData;
+  }
+
+  if (dataTransfer === null) {
+    return [false, [], false];
+  }
+
+  const types = dataTransfer.types;
+  const hasFiles = types.includes('Files');
+  const hasContent =
+    types.includes('text/html') || types.includes('text/plain');
+  return [hasFiles, Array.from(dataTransfer.files), hasContent];
+}
+
 /**
  * @deprecated Use Array filter or flatMap
  *