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,22 +25,51 @@ export default function FilePlugin(): JSX.Element | null {
       throw new Error('FilePlugin: FileNode not registered on editor')
     }
 
-    return editor.registerCommand<string>(
+    const uploadFilesList = (files: FileList) => {
-      INSERT_FILE_COMMAND,
+      Array.from(files).forEach(async (file) => {
-      (payload) => {
+        try {
-        const fileNode = $createFileNode(payload)
+          const uploadedFiles = await filesController.uploadNewFile(file)
-        $insertNodes([fileNode])
+          if (uploadedFiles) {
-        if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) {
+            uploadedFiles.forEach((uploadedFile) => {
-          $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd()
+              editor.dispatchCommand(INSERT_FILE_COMMAND, uploadedFile.uuid)
+            })
+          }
+        } catch (error) {
+          console.error(error)
         }
-        const newLineNode = $createParagraphNode()
+      })
-        $insertNodes([newLineNode])
+    }
 
-        return true
+    return mergeRegister(
-      },
+      editor.registerCommand<string>(
-      COMMAND_PRIORITY_EDITOR,
+        INSERT_FILE_COMMAND,
+        (payload) => {
+          const fileNode = $createFileNode(payload)
+          $insertNodes([fileNode])
+          if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) {
+            $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd()
+          }
+          const newLineNode = $createParagraphNode()
+          $insertNodes([newLineNode])
+
+          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) => {