Replace svelte components with node views

src/app/editor/EditMention.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type {NodeViewProps} from "@tiptap/core"
-  import {NodeViewWrapper} from "svelte-tiptap"
-  import {deriveProfileDisplay} from "@welshman/app"
-
-  interface Props {
-    node: NodeViewProps["node"]
-    selected: NodeViewProps["selected"]
-  }
-
-  const {node, selected}: Props = $props()
-
-  const display = deriveProfileDisplay(node.attrs.pubkey)
-</script>
-
-<NodeViewWrapper as="span">
-  <button class="tiptap-object {selected ? 'tiptap-active' : ''}">
-    @{$display}
-  </button>
-</NodeViewWrapper>

src/app/editor/MentionNodeView.ts

@@ -0,0 +1,26 @@
+import type {NodeViewProps} from '@tiptap/core'
+import {deriveProfileDisplay} from "@welshman/app"
+
+export const MentionNodeView = ({node}: NodeViewProps) => {
+  const dom = document.createElement('span')
+  const display = deriveProfileDisplay(node.attrs.pubkey)
+
+  dom.classList.add('tiptap-object')
+
+  const unsubDisplay = display.subscribe($display => {
+    dom.textContent = '@' + $display
+  })
+
+  return {
+    dom,
+    destroy: () => {
+      unsubDisplay()
+    },
+    selectNode() {
+      dom.classList.add('tiptap-active')
+    },
+    deselectNode() {
+      dom.classList.remove('tiptap-active')
+    },
+  }
+}

src/app/editor/index.ts

@@ -1,15 +1,14 @@
-import {asClassComponent} from "svelte/legacy"
 import {mount} from "svelte"
 import type {Writable} from "svelte/store"
 import {get} from "svelte/store"
-import {Editor, SvelteNodeViewRenderer} from "svelte-tiptap"
+import {Editor} from "@tiptap/core"
 import {ctx} from "@welshman/lib"
 import type {StampedEvent} from "@welshman/util"
 import {signer, profileSearch} from "@welshman/app"
 import {MentionSuggestion, WelshmanExtension} from "@lib/editor"
 import {getSetting, userSettingValues} from "@app/state"
+import {MentionNodeView} from "./MentionNodeView"
 import ProfileSuggestion from "./ProfileSuggestion.svelte"
-import EditMention from "./EditMention.svelte"
 
 export const getUploadType = () => getSetting<"nip96" | "blossom">("upload_type")
 
@@ -78,7 +77,7 @@ export const makeEditor = ({
           },
           nprofile: {
             extend: {
-              addNodeView: () => SvelteNodeViewRenderer(asClassComponent(EditMention)),
+              addNodeView: () => MentionNodeView,
               addProseMirrorPlugins() {
                 return [
                   MentionSuggestion({