Get link extension working better

src/app/components/ThreadCard.svelte

@@ -16,7 +16,7 @@
   let editor: Readable<Editor>
 
   onMount(() => {
-    editor = createEditor(getViewOptions(root.content))
+    editor = createEditor(getViewOptions(root))
   })
 </script>
 

src/lib/editor/LinkExtension.ts

@@ -1,14 +1,11 @@
-import {Node, nodePasteRule, type PasteRuleMatch} from "@tiptap/core"
+import {last} from '@welshman/lib'
+import {Node, InputRule, nodePasteRule, type PasteRuleMatch} from "@tiptap/core"
 import type {Node as ProsemirrorNode} from "@tiptap/pm/model"
 import type {MarkdownSerializerState} from "prosemirror-markdown"
+import {createPasteRuleMatch, createInputRuleMatch} from './util'
 
 export const LINK_REGEX =
-  /^([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s\)\(]*/gi
+  /([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s\)\(]*/gi
-
-export const createPasteRuleMatch = <T extends Record<string, unknown>>(
-  match: RegExpMatchArray,
-  data: T,
-): PasteRuleMatch => ({index: match.index!, replaceWith: match[2], text: match[0], match, data})
 
 export interface LinkAttributes {
   url: string
@@ -65,6 +62,42 @@ export const LinkExtension = Node.create({
         },
     }
   },
+  addInputRules() {
+    return [
+      new InputRule({
+        find: text => {
+          const match = last(Array.from(text.matchAll(LINK_REGEX)))
+
+          if (match && text.length === match.index + match[0].length + 1) {
+            return {
+              index: match.index!,
+              text: match[0],
+              data: {
+                url: match[0],
+              },
+            }
+          }
+
+          return null
+        },
+        handler: ({state, range, match}) => {
+          const {tr} = state
+
+          if (match[0]) {
+            try {
+              tr.insert(range.from - 1, this.type.create(match.data))
+                .delete(tr.mapping.map(range.from - 1), tr.mapping.map(range.to))
+                .insert(tr.mapping.map(range.to), this.editor.schema.text(last(Array.from(match.input!))))
+            } catch (e) {
+              // If the node was already linkified, the above code breaks for whatever reason
+            }
+          }
+
+          tr.scrollIntoView()
+        },
+      }),
+    ]
+  },
   addPasteRules() {
     return [
       nodePasteRule({

src/lib/editor/index.ts

@@ -78,8 +78,7 @@ export const getEditorOptions = ({
   loading,
   getPubkeyHints,
   submitOnEnter,
-}: EditorOptions) => {
+}: EditorOptions) => ({
-  return {
   content: "",
   autofocus: true,
   extensions: [
@@ -138,8 +137,11 @@ export const getEditorOptions = ({
       },
     }),
   ],
+  onTransaction() {
+    // @ts-ignore
+    console.log(this.getJSON())
   }
-}
+})
 
 type ViewOptions = {
   content: string

src/lib/editor/util.ts

@@ -1,4 +1,4 @@
-import type {JSONContent, PasteRuleMatch} from "@tiptap/core"
+import type {JSONContent, PasteRuleMatch, InputRuleMatch} from "@tiptap/core"
 import {Editor} from "@tiptap/core"
 import {choice} from "@welshman/lib"
 
@@ -8,10 +8,15 @@ export const asInline = (extend: Record<string, any>) => ({
   ...extend,
 })
 
+export const createInputRuleMatch = <T extends Record<string, unknown>>(
+  match: RegExpMatchArray,
+  data: T,
+): InputRuleMatch => ({index: match.index!, text: match[0], match, data})
+
 export const createPasteRuleMatch = <T extends Record<string, unknown>>(
   match: RegExpMatchArray,
   data: T,
-): PasteRuleMatch => ({index: match.index!, replaceWith: match[2], text: match[0], match, data})
+): PasteRuleMatch => ({index: match.index!, text: match[0], match, data})
 
 export const findNodes = (type: string, json: JSONContent) => {
   const results: JSONContent[] = []