Add per-url aliases

src/app/editor/MentionNodeView.ts

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

src/app/editor/ProfileSuggestion.svelte

@@ -5,15 +5,20 @@
     deriveUserWotScore,
     deriveHandleForPubkey,
     displayHandle,
-    deriveProfileDisplay,
   } from "@welshman/app"
   import WotScore from "@lib/components/WotScore.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import {deriveAliasDisplay} from "@app/state"
 
-  const {value} = $props()
+  type Props = {
+    value: string
+    url?: string
+  }
+
+  const {value, url}: Props = $props()
 
   const pubkey = value
-  const profileDisplay = deriveProfileDisplay(pubkey)
+  const profileDisplay = deriveAliasDisplay(pubkey)
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)
 
@@ -22,7 +27,7 @@
 
 <div class="flex max-w-full gap-3">
   <div class="py-1">
-    <ProfileCircle {pubkey} />
+    <ProfileCircle {pubkey} {url} />
   </div>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">

src/app/editor/index.ts

@@ -5,7 +5,7 @@ import type {StampedEvent} from "@welshman/util"
 import {Router, signer, profileSearch} from "@welshman/app"
 import {Editor, MentionSuggestion, WelshmanExtension} from "@welshman/editor"
 import {getSetting, userSettingValues} from "@app/state"
-import {MentionNodeView} from "./MentionNodeView"
+import {makeMentionNodeView} from "./MentionNodeView"
 import ProfileSuggestion from "./ProfileSuggestion.svelte"
 
 export const getUploadType = () => getSetting<"nip96" | "blossom">("upload_type")
@@ -30,6 +30,7 @@ export const makeEditor = ({
   charCount,
   content = "",
   placeholder = "",
+  url,
   submit,
   uploading,
   wordCount,
@@ -39,6 +40,7 @@ export const makeEditor = ({
   charCount?: Writable<number>
   content?: string
   placeholder?: string
+  url?: string
   submit: () => void
   uploading?: Writable<boolean>
   wordCount?: Writable<number>
@@ -76,7 +78,7 @@ export const makeEditor = ({
           },
           nprofile: {
             extend: {
-              addNodeView: () => MentionNodeView,
+              addNodeView: () => makeMentionNodeView(url),
               addProseMirrorPlugins() {
                 return [
                   MentionSuggestion({
@@ -86,7 +88,7 @@ export const makeEditor = ({
                     createSuggestion: (value: string) => {
                       const target = document.createElement("div")
 
-                      mount(ProfileSuggestion, {target, props: {value}})
+                      mount(ProfileSuggestion, {target, props: {value, url}})
 
                       return target
                     },