fix: Moving an image to empty space results in endless upload (#3799)

* fix: Error dragging images below doc, types

* fix: Handle html/text content dropped into padding

* refactor, docs

shared/editor/nodes/Image.tsx

@@ -11,8 +11,11 @@ import {
 import * as React from "react";
 import ImageZoom from "react-medium-image-zoom";
 import styled from "styled-components";
-import { supportedImageMimeTypes } from "../../utils/files";
-import getDataTransferFiles from "../../utils/getDataTransferFiles";
+import {
+  getDataTransferFiles,
+  supportedImageMimeTypes,
+  getEventFiles,
+} from "../../utils/files";
 import insertFiles, { Options } from "../commands/insertFiles";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import uploadPlaceholderPlugin from "../lib/uploadPlaceholder";
@@ -74,9 +77,7 @@ const uploadPlugin = (options: Options) =>
           }
 
           // filter to only include image files
-          const files = getDataTransferFiles(event).filter(
-            (dt: any) => dt.kind !== "string"
-          );
+          const files = getDataTransferFiles(event);
           if (files.length === 0) {
             return false;
           }
@@ -413,8 +414,8 @@ export default class Image extends Node {
         const inputElement = document.createElement("input");
         inputElement.type = "file";
         inputElement.accept = supportedImageMimeTypes.join(", ");
-        inputElement.onchange = (event: Event) => {
-          const files = getDataTransferFiles(event);
+        inputElement.onchange = (event) => {
+          const files = getEventFiles(event);
           insertFiles(view, event, state.selection.from, files, {
             uploadFile,
             onFileUploadStart,

shared/utils/files.ts

@@ -4,7 +4,7 @@
  * @param bytes filesize in bytes
  * @returns Human readable filesize as a string
  */
-export const bytesToHumanReadable = (bytes: number) => {
+export function bytesToHumanReadable(bytes: number) {
   const out = ("0".repeat((bytes.toString().length * 2) % 3) + bytes).match(
     /.{3}/g
   );
@@ -18,7 +18,71 @@ export const bytesToHumanReadable = (bytes: number) => {
   return `${Number(out[0])}${f === "00" ? "" : `.${f}`} ${
     "  kMGTPEZY"[out.length]
   }B`;
-};
+}
+
+/**
+ * Get an array of File objects from a drag event
+ *
+ * @param event The react or native drag event
+ * @returns An array of Files
+ */
+export function getDataTransferFiles(
+  event: React.DragEvent<HTMLElement> | DragEvent
+): File[] {
+  const dt = event.dataTransfer;
+
+  if (dt) {
+    if ("files" in dt && dt.files.length) {
+      return dt.files ? Array.prototype.slice.call(dt.files) : [];
+    }
+
+    if ("items" in dt && dt.items.length) {
+      return dt.items
+        ? Array.prototype.slice
+            .call(dt.items)
+            .filter((dt: DataTransferItem) => dt.kind !== "string")
+            .map((dt: DataTransferItem) => dt.getAsFile())
+            .filter(Boolean)
+        : [];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Get an array of DataTransferItems from a drag event
+ *
+ * @param event The react or native drag event
+ * @returns An array of DataTransferItems
+ */
+export function getDataTransferItems(
+  event: React.DragEvent<HTMLElement> | DragEvent
+): DataTransferItem[] {
+  const dt = event.dataTransfer;
+
+  if (dt) {
+    if ("items" in dt && dt.items.length) {
+      return dt.items ? Array.prototype.slice.call(dt.items) : [];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Get an array of Files from an input event
+ *
+ * @param event The react or native input event
+ * @returns An array of Files
+ */
+export function getEventFiles(
+  event: React.ChangeEvent<HTMLInputElement> | Event
+): File[] {
+  return event.target && "files" in event.target
+    ? Array.prototype.slice.call(event.target.files)
+    : [];
+}
 
 /**
  * An array of image mimetypes commonly supported by modern browsers

shared/utils/getDataTransferFiles.ts

@@ -1,28 +0,0 @@
-export default function getDataTransferFiles(
-  event:
-    | Event
-    | React.FormEvent<HTMLInputElement>
-    | React.DragEvent<HTMLElement>
-): File[] {
-  let dataTransferItemsList!: FileList | DataTransferItemList;
-
-  if ("dataTransfer" in event) {
-    const dt = event.dataTransfer;
-
-    if (dt.files && dt.files.length) {
-      dataTransferItemsList = dt.files;
-    } else if (dt.items && dt.items.length) {
-      // During the drag even the dataTransfer.files is null
-      // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      dataTransferItemsList = dt.items;
-    }
-  } else if (event.target && "files" in event.target) {
-    // @ts-expect-error fallback
-    dataTransferItemsList = event.target.files;
-  }
-
-  // Convert from DataTransferItemsList to the native Array
-  return dataTransferItemsList
-    ? Array.prototype.slice.call(dataTransferItemsList)
-    : [];
-}