From 35f80a4ed4e3d993888768685b5257abd5898185 Mon Sep 17 00:00:00 2001
From: shixiaohua <shi_xiaohua@qq.com>
Date: Tue, 2 Apr 2024 15:32:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Note/Hlexical/index.jsx             |  5 ++-
 .../plugins/DragDropPastePlugin/index.jsx     | 43 +++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Note/Hlexical/plugins/DragDropPastePlugin/index.jsx

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 <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}/>
                     {/*文件操作导入文件*/}
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;
+}