feat:添加拖拽图片

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 <div className="editor-placeholder">记录一些灵感吧</div>;
 }
@@ -108,7 +110,8 @@ export default function Hlexical(props) {
                     <ContextMenuPlugin/>
                     {/* 画图 */}
                     <ExcalidrawPlugin/>
-
+                    {/* 拖拽复制*/}
+                    <DragDropPaste />
                     <ImportFilePlugin filePath={props.filePath} setSpinningState={setSpinningState}/>
                     <SaveFilePlugin filePath={props.filePath}/>
                     {/*文件操作导入文件*/}

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;
+}