Re-write suggestions

src/app/components/Chat.svelte

@@ -175,7 +175,8 @@
         <div class="card2 col-2 m-auto max-w-md items-center text-center">
           <p class="row-2 text-lg text-error">
             <Icon icon="danger" />
-            {missingInboxes.length} {missingInboxes.length > 1 ? 'inboxes are' : 'inbox is'} not configured.
+            {missingInboxes.length}
+            {missingInboxes.length > 1 ? "inboxes are" : "inbox is"} not configured.
           </p>
           <p>
             In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please make

src/app/components/ProfileMultiSelect.svelte

@@ -3,7 +3,7 @@
   import {type Instance} from "tippy.js"
   import {append, remove, uniq} from "@welshman/lib"
   import {profileSearch} from "@welshman/app"
-  import {Suggestions} from "@welshman/editor"
+  import Suggestions from "@lib/components/Suggestions.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"

src/app/editor/ProfileSuggestion.svelte

@@ -10,9 +10,8 @@
   import WotScore from "@lib/components/WotScore.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
 
-  const {value} = $props()
+  const {pubkey} = $props()
 
-  const pubkey = value
   const profileDisplay = deriveProfileDisplay(pubkey)
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)

src/app/editor/index.ts

@@ -1,11 +1,12 @@
 import {asClassComponent} from "svelte/legacy"
+import {mount} from "svelte"
 import type {Writable} from "svelte/store"
-import {derived} from "svelte/store"
+import {get} from "svelte/store"
 import {Editor, SvelteNodeViewRenderer} from "svelte-tiptap"
 import {ctx} from "@welshman/lib"
 import type {StampedEvent} from "@welshman/util"
 import {signer, profileSearch} from "@welshman/app"
-import {MentionSuggestion, WelshmanExtension} from "@welshman/editor"
+import {MentionSuggestion, WelshmanExtension} from "@lib/editor"
 import {getSetting, userSettingValues} from "@app/state"
 import ProfileSuggestion from "./ProfileSuggestion.svelte"
 import EditMention from "./EditMention.svelte"
@@ -82,9 +83,15 @@ export const makeEditor = ({
                 return [
                   MentionSuggestion({
                     editor: (this as any).editor,
-                    search: derived(profileSearch, s => s.searchValues),
+                    search: (term: string) => get(profileSearch).searchValues(term),
                     getRelays: (pubkey: string) => ctx.app.router.FromPubkeys([pubkey]).getUrls(),
-                    component: asClassComponent(ProfileSuggestion),
+                    createSuggestion: (pubkey: string) => {
+                      const target = document.createElement("div")
+
+                      mount(ProfileSuggestion, {target, props: {pubkey}})
+
+                      return target
+                    },
                   }),
                 ]
               },