diff --git a/src/pages/Note/Hlexical/index.jsx b/src/pages/Note/Hlexical/index.jsx index 9d5fa1d..f4d8937 100644 --- a/src/pages/Note/Hlexical/index.jsx +++ b/src/pages/Note/Hlexical/index.jsx @@ -26,6 +26,7 @@ import {TabIndentationPlugin} from "@lexical/react/LexicalTabIndentationPlugin"; import UsefulNodes from "./nodes/UsefulNodes"; import ImagesPlugin from "./plugins/ImagesPlugin"; + import {HorizontalRulePlugin} from "@lexical/react/LexicalHorizontalRulePlugin" import InlineImagePlugin from "./plugins/InlineImagePlugin"; import {TablePlugin} from "@lexical/react/LexicalTablePlugin"; @@ -35,6 +36,7 @@ import TableOfContentsPlugin from "./plugins/TableOfContentsPlugin"; import ContextMenuPlugin from "./plugins/ContextMenuPlugin" import {Spin} from "antd"; import {useState} from "react"; +import DragDropPaste from "./plugins/DragDropPastePlugin"; function Placeholder() { return
记录一些灵感吧
; } @@ -108,7 +110,8 @@ export default function Hlexical(props) { {/* 画图 */} - + {/* 拖拽复制*/} + {/*文件操作导入文件*/} diff --git a/src/pages/Note/Hlexical/plugins/DragDropPastePlugin/index.jsx b/src/pages/Note/Hlexical/plugins/DragDropPastePlugin/index.jsx new file mode 100644 index 0000000..0f2f33f --- /dev/null +++ b/src/pages/Note/Hlexical/plugins/DragDropPastePlugin/index.jsx @@ -0,0 +1,43 @@ +import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; +import {DRAG_DROP_PASTE} from '@lexical/rich-text'; +import {isMimeType, mediaFileReader} from '@lexical/utils'; +import {COMMAND_PRIORITY_LOW} from 'lexical'; +import {useEffect} from 'react'; + +import {INSERT_IMAGE_COMMAND} from '../ImagesPlugin'; + +const ACCEPTABLE_IMAGE_TYPES = [ + 'image/', + 'image/heic', + 'image/heif', + 'image/gif', + 'image/webp', +]; + +export default function DragDropPaste() { + const [editor] = useLexicalComposerContext(); + useEffect(() => { + return editor.registerCommand( + DRAG_DROP_PASTE, + (files) => { + (async () => { + const filesResult = await mediaFileReader( + files, + [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x), + ); + for (const {file, result} of filesResult) { + if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) { + editor.dispatchCommand(INSERT_IMAGE_COMMAND, { + altText: file.name, + src: result, + }); + } + } + })(); + return true; + }, + COMMAND_PRIORITY_LOW, + ); + }, [editor]); + return null; +}