Use nostr-editor's tag extension

src/app/components/GroupCompose.svelte

@@ -3,9 +3,9 @@
   import type {Readable} from "svelte/store"
   import {writable} from "svelte/store"
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
-  import {NProfileExtension, ImageExtension} from "nostr-editor"
+  import {NProfileExtension, TagExtension as TopicExtension, ImageExtension} from "nostr-editor"
   import {createEvent, CHAT_MESSAGE} from "@welshman/util"
-  import {TopicExtension, findNodes} from "@lib/tiptap"
+  import {findNodes} from "@lib/tiptap"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {publishThunk, makeThunk, userRelayUrlsByNom} from "@app/state"

src/app/components/GroupComposeTopic.svelte

@@ -11,8 +11,8 @@
 <NodeViewWrapper class="inline">
   <Link
     external
-    href="https://coracle.social/topics/{node.attrs.name.toLowerCase()}"
+    href="https://coracle.social/topics/{node.attrs.topic.toLowerCase()}"
     class={cx("link-content", {"link-content-selected": selected})}>
-    #{node.attrs.name}
+    #{node.attrs.topic}
   </Link>
 </NodeViewWrapper>

src/app/editor.ts

@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import type {Writable} from "svelte/store"
 import {nprofileEncode} from "nostr-tools/nip19"
 import {SvelteNodeViewRenderer} from "svelte-tiptap"
@@ -19,9 +20,10 @@ import {
   ImageExtension,
   VideoExtension,
   FileUploadExtension,
+  TagExtension as TopicExtension,
 } from "nostr-editor"
 import type {StampedEvent} from "@welshman/util"
-import {LinkExtension, TopicExtension, asInline, createSuggestions} from "@lib/tiptap"
+import {LinkExtension, asInline, createSuggestions} from "@lib/tiptap"
 import GroupComposeMention from "@app/components/GroupComposeMention.svelte"
 import GroupComposeTopic from "@app/components/GroupComposeTopic.svelte"
 import GroupComposeEvent from "@app/components/GroupComposeEvent.svelte"
@@ -113,6 +115,18 @@ export const getChatEditorOptions = ({uploading, sendMessage}: ChatComposeEditor
     ).configure({defaultUploadUrl: "https://nostr.build", defaultUploadType: "nip96"}),
     TopicExtension.extend({
       addNodeView: () => SvelteNodeViewRenderer(GroupComposeTopic),
+      renderHTML({mark, HTMLAttributes}) {
+        const attrs = {
+          ...mark.attrs,
+          ...HTMLAttributes,
+          target: '_blank',
+          rel: 'noopener noreferer',
+          href: `https://coracle.social/topics/${mark.attrs.tag.toLowerCase()}`,
+          class: "underline",
+        }
+
+        return ['a', attrs, 0]
+      },
       addProseMirrorPlugins() {
         return [
           createSuggestions({