diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts index a5ea6863e..042a9ec09 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts +++ b/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( - INSERT_FILE_COMMAND, - (payload) => { - const fileNode = $createFileNode(payload) - $insertNodes([fileNode]) - if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) { - $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd() + 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) } - const newLineNode = $createParagraphNode() - $insertNodes([newLineNode]) + }) + } - return true - }, - COMMAND_PRIORITY_EDITOR, + return mergeRegister( + editor.registerCommand( + 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) => {