feat: paste to insert image or files

Author: lyonbot

web/src/components/MemoEditor/handlers.ts

@@ -1,3 +1,5 @@
+import { Resource } from "@/types/proto/api/v1/resource_service";
+import { getResourceUrl } from "@/utils/resource";
 import { EditorRefActions } from "./Editor";
 
 export const handleEditorKeydownWithMarkdownShortcuts = (event: React.KeyboardEvent, editorRef: EditorRefActions) => {
@@ -50,3 +52,32 @@ const styleHighlightedText = (editor: EditorRefActions, delimiter: string) => {
     editor.setCursorPosition(cursorPosition + delimiter.length, cursorPosition + delimiter.length + selectedContent.length);
   }
 };
+
+export function insertResourceText(editor: EditorRefActions, resources: Resource[], placeholder: string) {
+  let text = editor.getContent();
+  const pos = text.indexOf(placeholder);
+  if (pos === -1) return;
+
+  const insertingParts: string[] = [];
+  for (const res of resources) {
+    const isImage = String(res.type).startsWith("image/");
+    const title = res.filename;
+    const url = getResourceUrl(res);
+
+    let part = `[${title}](${url})`;
+    if (isImage) part = `!${part}`;
+
+    insertingParts.push(part);
+  }
+  const inserting = insertingParts.join(" ");
+
+  // compute new cursorPos
+  let cursorPos = editor.getCursorPosition();
+  if (cursorPos >= pos + placeholder.length) cursorPos += inserting.length - placeholder.length;
+  else if (cursorPos > pos) cursorPos = pos + inserting.length;
+
+  text = text.slice(0, pos) + inserting + text.slice(pos + placeholder.length);
+
+  editor.setContent(text);
+  editor.setCursorPosition(cursorPos);
+}

web/src/components/MemoEditor/index.tsx

@@ -29,7 +29,7 @@ import UploadResourceButton from "./ActionButton/UploadResourceButton";
 import Editor, { EditorRefActions } from "./Editor";
 import RelationListView from "./RelationListView";
 import ResourceListView from "./ResourceListView";
-import { handleEditorKeydownWithMarkdownShortcuts, hyperlinkHighlightedText } from "./handlers";
+import { handleEditorKeydownWithMarkdownShortcuts, hyperlinkHighlightedText, insertResourceText } from "./handlers";
 import { MemoEditorContext } from "./types";
 import "react-datepicker/dist/react-datepicker.css";
 
@@ -233,7 +233,7 @@ const MemoEditor = observer((props: Props) => {
     }
   };
 
-  const uploadMultiFiles = async (files: FileList) => {
+  const uploadMultiFiles = async (files: FileList): Promise<Resource[]> => {
     const uploadedResourceList: Resource[] = [];
     for (const file of files) {
       const resource = await handleUploadResource(file);
@@ -256,6 +256,7 @@ const MemoEditor = observer((props: Props) => {
         resourceList: [...prevState.resourceList, ...uploadedResourceList],
       }));
     }
+    return uploadedResourceList;
   };
 
   const handleDropEvent = async (event: React.DragEvent) => {
@@ -294,7 +295,20 @@ const MemoEditor = observer((props: Props) => {
   const handlePasteEvent = async (event: React.ClipboardEvent) => {
     if (event.clipboardData && event.clipboardData.files.length > 0) {
       event.preventDefault();
-      await uploadMultiFiles(event.clipboardData.files);
+
+      const editor = editorRef.current;
+      let placeholder = "";
+
+      if (editor) {
+        placeholder = `<resource_${Date.now()}>`;
+        editor.insertText(placeholder);
+      }
+
+      const resources = await uploadMultiFiles(event.clipboardData.files);
+
+      if (editor) {
+        insertResourceText(editor, resources, placeholder);
+      }
     } else if (
       editorRef.current != null &&
       editorRef.current.getSelectedContent().length != 0 &&