Add hyperlink creation feature

frontend/src/components/editor/Editor.tsx

@@ -15,6 +15,7 @@ import { selectSetting } from "../../store/settingSlice";
 import { selectWorkspace } from "../../store/workspaceSlice";
 import { imageUploader } from "../../utils/imageUploader";
 import { intelligencePivot } from "../../utils/intelligence/intelligencePivot";
+import { urlHyperlinkInserter } from "../../utils/urlHyperlinkInserter";
 import { yorkieCodeMirror } from "../../utils/yorkie";
 import ToolBar from "./ToolBar";
 
@@ -78,6 +79,7 @@ function Editor() {
 				...(settingStore.fileUpload.enable
 					? [imageUploader(handleUploadImage, editorStore.doc)]
 					: []),
+				urlHyperlinkInserter(editorStore.doc),
 			],
 		});
 

frontend/src/utils/urlHyperlinkInserter.ts

@@ -0,0 +1,43 @@
+import { EditorView } from "codemirror";
+import { CodePairDocType } from "../store/editorSlice";
+
+const isValidUrl = (url: string) => {
+	// eslint-disable-next-line no-useless-escape
+	const urlRegex = /^(https?|ftp):\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$/i;
+	return urlRegex.test(url);
+};
+
+const insertLinkToEditor = (url: string, view: EditorView, doc: CodePairDocType) => {
+	const { from, to } = view.state.selection.main;
+	const selectedText = view.state.sliceDoc(from, to);
+	const insert = `[${selectedText}](${url})`;
+
+	doc.update((root, presence) => {
+		root.content.edit(from, to, insert);
+		presence.set({
+			selection: root.content.indexRangeToPosRange([
+				from + insert.length,
+				from + insert.length,
+			]),
+		});
+	});
+
+	view.dispatch({
+		changes: { from, to, insert },
+		selection: {
+			anchor: from + insert.length,
+		},
+	});
+};
+
+export const urlHyperlinkInserter = (doc: CodePairDocType) => {
+	return EditorView.domEventHandlers({
+		paste(event, view) {
+			const url = event.clipboardData?.getData("text/plain");
+			if (!url || !isValidUrl(url)) return;
+
+			insertLinkToEditor(url, view, doc);
+			event.preventDefault();
+		},
+	});
+};