[Editor] Support dragging & dropping images on a pdf (bug 1900907)

src/display/editor/tools.js

@@ -600,6 +600,10 @@ class AnnotationEditorUIManager {
 
   #boundCut = this.cut.bind(this);
 
+  #boundDragOver = this.dragOver.bind(this);
+
+  #boundDrop = this.drop.bind(this);
+
   #boundPaste = this.paste.bind(this);
 
   #boundKeydown = this.keydown.bind(this);
@@ -790,6 +794,7 @@ class AnnotationEditorUIManager {
     this._eventBus._on("scalechanging", this.#boundOnScaleChanging);
     this._eventBus._on("rotationchanging", this.#boundOnRotationChanging);
     this.#addSelectionListener();
+    this.#addDragAndDropListeners();
     this.#addKeyboardManager();
     this.#annotationStorage = pdfDocument.annotationStorage;
     this.#filterFactory = pdfDocument.filterFactory;
@@ -815,6 +820,7 @@ class AnnotationEditorUIManager {
   }
 
   destroy() {
+    this.#removeDragAndDropListeners();
     this.#removeKeyboardManager();
     this.#removeFocusManager();
     this._eventBus._off("editingaction", this.#boundOnEditingAction);
@@ -1183,6 +1189,16 @@ class AnnotationEditorUIManager {
     document.removeEventListener("paste", this.#boundPaste);
   }
 
+  #addDragAndDropListeners() {
+    document.addEventListener("dragover", this.#boundDragOver);
+    document.addEventListener("drop", this.#boundDrop);
+  }
+
+  #removeDragAndDropListeners() {
+    document.removeEventListener("dragover", this.#boundDragOver);
+    document.removeEventListener("drop", this.#boundDrop);
+  }
+
   addEditListeners() {
     this.#addKeyboardManager();
     this.#addCopyPasteListeners();
@@ -1193,6 +1209,34 @@ class AnnotationEditorUIManager {
     this.#removeCopyPasteListeners();
   }
 
+  dragOver(event) {
+    for (const { type } of event.dataTransfer.items) {
+      for (const editorType of this.#editorTypes) {
+        if (editorType.isHandlingMimeForPasting(type)) {
+          event.dataTransfer.dropEffect = "copy";
+          event.preventDefault();
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Drop callback.
+   * @param {DragEvent} event
+   */
+  drop(event) {
+    for (const item of event.dataTransfer.items) {
+      for (const editorType of this.#editorTypes) {
+        if (editorType.isHandlingMimeForPasting(item.type)) {
+          editorType.paste(item, this.currentLayer);
+          event.preventDefault();
+          return;
+        }
+      }
+    }
+  }
+
   /**
    * Copy callback.
    * @param {ClipboardEvent} event