feat: add URL paste handler (#2768)

* feat: Add URL paste handler

* Check if text highlighted for URL pasting

web/src/components/MemoEditor/handlers.tsx

@@ -15,20 +15,7 @@ export const handleEditorKeydownWithMarkdownShortcuts = (event: React.KeyboardEv
   }
 };
 
-const styleHighlightedText = (editor: EditorRefActions, delimiter: string) => {
+export const hyperlinkHighlightedText = (editor: EditorRefActions, url?: string) => {
-  const cursorPosition = editor.getCursorPosition();
-  const selectedContent = editor.getSelectedContent();
-  if (selectedContent.startsWith(delimiter) && selectedContent.endsWith(delimiter)) {
-    editor.insertText(selectedContent.slice(delimiter.length, -delimiter.length));
-    const newContentLength = selectedContent.length - delimiter.length * 2;
-    editor.setCursorPosition(cursorPosition, cursorPosition + newContentLength);
-  } else {
-    editor.insertText(`${delimiter}${selectedContent}${delimiter}`);
-    editor.setCursorPosition(cursorPosition + delimiter.length, cursorPosition + delimiter.length + selectedContent.length);
-  }
-};
-
-const hyperlinkHighlightedText = (editor: EditorRefActions, url?: string) => {
   const cursorPosition = editor.getCursorPosition();
   const selectedContent = editor.getSelectedContent();
   const blankURL = "url";
@@ -41,3 +28,16 @@ const hyperlinkHighlightedText = (editor: EditorRefActions, url?: string) => {
     editor.setCursorPosition(newCursorStart, newCursorStart + url.length);
   }
 };
+
+const styleHighlightedText = (editor: EditorRefActions, delimiter: string) => {
+  const cursorPosition = editor.getCursorPosition();
+  const selectedContent = editor.getSelectedContent();
+  if (selectedContent.startsWith(delimiter) && selectedContent.endsWith(delimiter)) {
+    editor.insertText(selectedContent.slice(delimiter.length, -delimiter.length));
+    const newContentLength = selectedContent.length - delimiter.length * 2;
+    editor.setCursorPosition(cursorPosition, cursorPosition + newContentLength);
+  } else {
+    editor.insertText(`${delimiter}${selectedContent}${delimiter}`);
+    editor.setCursorPosition(cursorPosition + delimiter.length, cursorPosition + delimiter.length + selectedContent.length);
+  }
+};

web/src/components/MemoEditor/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import { memoServiceClient } from "@/grpcweb";
 import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
+import { isValidUrl } from "@/helpers/utils";
 import { useGlobalStore, useResourceStore } from "@/store/module";
 import { useMemoStore, useUserStore } from "@/store/v1";
 import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
@@ -23,7 +24,7 @@ import TagSelector from "./ActionButton/TagSelector";
 import Editor, { EditorRefActions } from "./Editor";
 import RelationListView from "./RelationListView";
 import ResourceListView from "./ResourceListView";
-import { handleEditorKeydownWithMarkdownShortcuts } from "./handlers";
+import { handleEditorKeydownWithMarkdownShortcuts, hyperlinkHighlightedText } from "./handlers";
 
 interface Props {
   className?: string;
@@ -242,6 +243,13 @@ const MemoEditor = (props: Props) => {
     if (event.clipboardData && event.clipboardData.files.length > 0) {
       event.preventDefault();
       await uploadMultiFiles(event.clipboardData.files);
+    } else if (
+      editorRef.current != null &&
+      editorRef.current.getSelectedContent().length != 0 &&
+      isValidUrl(event.clipboardData.getData("Text"))
+    ) {
+      event.preventDefault();
+      hyperlinkHighlightedText(editorRef.current, event.clipboardData.getData("Text"));
     }
   };