[backport cloud/1.42] App Mode dragAndDrop, text output, and scroll shadows (#10963)

Backport of #10122 to cloud/1.42.

Prerequisite for backporting #10364 (Show filename on previews).

## Conflict resolution

- `src/stores/queueStore.test.ts`: accepted PR version — text content is
now previewable (length 1, content assertion) instead of not previewable
(length 0, undefined).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10963-backport-cloud-1-42-App-Mode-dragAndDrop-text-output-and-scroll-shadows-33c6d73d3650816ca420cbc0eae96e3b)
by [Unito](https://www.unito.io)

src/composables/node/useNodeDragAndDrop.ts

@@ -11,6 +11,7 @@ interface DragAndDropOptions<T> {
 
 /**
  * Adds drag and drop file handling to a node
+ * Will also resolve 'text/uri-list' to a file before passing
  */
 export const useNodeDragAndDrop = <T>(
   node: LGraphNode,
@@ -21,27 +22,55 @@ export const useNodeDragAndDrop = <T>(
   const hasFiles = (items: DataTransferItemList) =>
     !!Array.from(items).find((f) => f.kind === 'file')
 
-  const filterFiles = (files: FileList) => Array.from(files).filter(fileFilter)
+  const filterFiles = (files: FileList | File[]) =>
+    Array.from(files).filter(fileFilter)
 
   const hasValidFiles = (files: FileList) => filterFiles(files).length > 0
 
   const isDraggingFiles = (e: DragEvent | undefined) => {
     if (!e?.dataTransfer?.items) return false
-    return onDragOver?.(e) ?? hasFiles(e.dataTransfer.items)
+    return (
+      onDragOver?.(e) ??
+      (hasFiles(e.dataTransfer.items) ||
+        e?.dataTransfer?.types?.includes('text/uri-list'))
+    )
   }
 
   const isDraggingValidFiles = (e: DragEvent | undefined) => {
-    if (!e?.dataTransfer?.files) return false
-    return hasValidFiles(e.dataTransfer.files)
+    if (e?.dataTransfer?.files?.length)
+      return hasValidFiles(e.dataTransfer.files)
+
+    return !!e?.dataTransfer?.getData('text/uri-list')
   }
 
   node.onDragOver = isDraggingFiles
 
-  node.onDragDrop = function (e: DragEvent) {
+  node.onDragDrop = async function (e: DragEvent) {
     if (!isDraggingValidFiles(e)) return false
 
     const files = filterFiles(e.dataTransfer!.files)
-    void onDrop(files)
+    if (files.length) {
+      await onDrop(files)
+      return true
+    }
+
+    const uri = URL.parse(e?.dataTransfer?.getData('text/uri-list') ?? '')
+    if (!uri || uri.origin !== location.origin) return false
+
+    try {
+      const resp = await fetch(uri)
+      const fileName = uri?.searchParams?.get('filename')
+      if (!fileName || !resp.ok) return false
+
+      const blob = await resp.blob()
+      const file = new File([blob], fileName, { type: blob.type })
+      const uriFiles = filterFiles([file])
+      if (!uriFiles.length) return false
+
+      await onDrop(uriFiles)
+    } catch {
+      return false
+    }
     return true
   }
 }