From 1b696fa50440bf5ff6f0a3a92ba9c2a775e374d6 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 25 Jan 2023 16:45:23 +0530
Subject: [PATCH] feat: Links in Super notes will get auto-linked when they're
 pasted or typed

---
 .../FloatingLinkEditorPlugin/index.tsx        |  3 +--
 .../Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx | 26 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/blocks-editor/src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx b/packages/blocks-editor/src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx
index faeda9355..882422667 100644
--- a/packages/blocks-editor/src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/packages/blocks-editor/src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx
@@ -209,8 +209,7 @@ function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       const linkParent = $findMatchingParent(node, $isLinkNode)
       const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode)
 
-      // We don't want this menu to open for auto links.
-      if (linkParent != null && autoLinkParent == null) {
+      if (linkParent != null || autoLinkParent != null) {
         setIsLink(true)
       } else {
         setIsLink(false)
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx
index 2773567dc..431d01fe4 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx
@@ -1,9 +1,29 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { AutoLinkPlugin as LexicalAutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin'
 import { COMMAND_PRIORITY_EDITOR, KEY_MODIFIER_COMMAND, $getSelection } from 'lexical'
 import { useEffect } from 'react'
 import { TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { mergeRegister } from '@lexical/utils'
 
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/
+
+const MATCHERS = [
+  (text: string) => {
+    const match = URL_MATCHER.exec(text)
+    if (match === null) {
+      return null
+    }
+    const fullMatch = match[0]
+    return {
+      index: match.index,
+      length: fullMatch.length,
+      text: fullMatch,
+      url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
+    }
+  },
+]
+
 export default function AutoLinkPlugin(): JSX.Element | null {
   const [editor] = useLexicalComposerContext()
 
@@ -27,5 +47,9 @@ export default function AutoLinkPlugin(): JSX.Element | null {
     )
   }, [editor])
 
-  return null
+  return (
+    <>
+      <LexicalAutoLinkPlugin matchers={MATCHERS} />
+    </>
+  )
 }