feat: Paste files in Super notes to upload and embed them (#2060)

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts

@@ -3,9 +3,16 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 
 import { useEffect } from 'react'
 import { FileNode } from './Nodes/FileNode'
-import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR } from 'lexical'
+import {
+  $createParagraphNode,
+  $insertNodes,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_NORMAL,
+  PASTE_COMMAND,
+} from 'lexical'
 import { $createFileNode } from './Nodes/FileUtils'
-import { $wrapNodeInElement } from '@lexical/utils'
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils'
 import { useFilesController } from '@/Controllers/FilesControllerProvider'
 import { FilesControllerEvent } from '@/Controllers/FilesController'
 
@@ -18,7 +25,23 @@ export default function FilePlugin(): JSX.Element | null {
       throw new Error('FilePlugin: FileNode not registered on editor')
     }
 
-    return editor.registerCommand<string>(
+    const uploadFilesList = (files: FileList) => {
+      Array.from(files).forEach(async (file) => {
+        try {
+          const uploadedFiles = await filesController.uploadNewFile(file)
+          if (uploadedFiles) {
+            uploadedFiles.forEach((uploadedFile) => {
+              editor.dispatchCommand(INSERT_FILE_COMMAND, uploadedFile.uuid)
+            })
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      })
+    }
+
+    return mergeRegister(
+      editor.registerCommand<string>(
         INSERT_FILE_COMMAND,
         (payload) => {
           const fileNode = $createFileNode(payload)
@@ -32,8 +55,21 @@ export default function FilePlugin(): JSX.Element | null {
           return true
         },
         COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        PASTE_COMMAND,
+        (payload) => {
+          const files = payload instanceof InputEvent ? payload.dataTransfer?.files : null
+          if (files?.length) {
+            uploadFilesList(files)
+            return true
+          }
+          return false
+        },
+        COMMAND_PRIORITY_NORMAL,
+      ),
     )
-  }, [editor])
+  }, [editor, filesController])
 
   useEffect(() => {
     const disposer = filesController.addEventObserver((event, data) => {