Small fixes/performance improvements

src/app/editor/EditMention.svelte

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

src/app/editor/ProfileSuggestion.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
+  import {
+    userFollows,
+    deriveUserWotScore,
+    deriveHandleForPubkey,
+    displayHandle,
+    deriveProfileDisplay,
+  } from "@welshman/app"
+  import WotScore from "@lib/components/WotScore.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+
+  export let value
+
+  const pubkey = value
+  const profileDisplay = deriveProfileDisplay(pubkey)
+  const handle = deriveHandleForPubkey(pubkey)
+  const score = deriveUserWotScore(pubkey)
+
+  $: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
+</script>
+
+<div class="flex max-w-full gap-3">
+  <div class="py-1">
+    <ProfileCircle {pubkey} />
+  </div>
+  <div class="flex min-w-0 flex-col">
+    <div class="flex items-center gap-2">
+      <div class="text-bold overflow-hidden text-ellipsis text-base">
+        {$profileDisplay}
+      </div>
+      <WotScore score={$score} active={following} />
+    </div>
+    <div class="overflow-hidden text-ellipsis text-sm opacity-75">
+      {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
+    </div>
+  </div>
+</div>

src/app/editor/index.ts

@@ -0,0 +1,102 @@
+import type {Writable} from "svelte/store"
+import {derived} from "svelte/store"
+import {createEditor, 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 {getSetting, userSettingValues} from "@app/state"
+import ProfileSuggestion from "./ProfileSuggestion.svelte"
+import EditMention from "./EditMention.svelte"
+
+export const getUploadType = () => getSetting<"nip96" | "blossom">("upload_type")
+
+export const getUploadUrl = () => {
+  const {upload_type, nip96_urls, blossom_urls} = userSettingValues.get()
+
+  return upload_type === "nip96"
+    ? nip96_urls[0] || "https://nostr.build"
+    : blossom_urls[0] || "https://cdn.satellite.earth"
+}
+
+export const signWithAssert = async (template: StampedEvent) => {
+  const event = await signer.get().sign(template)
+
+  return event!
+}
+
+export const getEditor = ({
+  aggressive = false,
+  autofocus = false,
+  charCount,
+  content = "",
+  element,
+  placeholder = "",
+  submit,
+  uploading,
+  wordCount,
+}: {
+  aggressive?: boolean
+  autofocus?: boolean
+  charCount?: Writable<number>
+  content?: string
+  element: HTMLElement
+  placeholder?: string
+  submit: () => void
+  uploading?: Writable<boolean>
+  wordCount?: Writable<number>
+}) =>
+  createEditor({
+    element,
+    content,
+    autofocus,
+    extensions: [
+      WelshmanExtension.configure({
+        submit,
+        sign: signWithAssert,
+        defaultUploadType: getUploadType(),
+        defaultUploadUrl: getUploadUrl(),
+        extensions: {
+          placeholder: {
+            config: {
+              placeholder,
+            },
+          },
+          breakOrSubmit: {
+            config: {
+              aggressive,
+            },
+          },
+          fileUpload: {
+            config: {
+              onDrop() {
+                uploading?.set(true)
+              },
+              onComplete() {
+                uploading?.set(false)
+              },
+            },
+          },
+          nprofile: {
+            extend: {
+              addNodeView: () => SvelteNodeViewRenderer(EditMention),
+              addProseMirrorPlugins() {
+                return [
+                  MentionSuggestion({
+                    editor: (this as any).editor,
+                    search: derived(profileSearch, s => s.searchValues),
+                    getRelays: (pubkey: string) => ctx.app.router.FromPubkeys([pubkey]).getUrls(),
+                    component: ProfileSuggestion,
+                  }),
+                ]
+              },
+            },
+          },
+        },
+      }),
+    ],
+    onUpdate({editor}) {
+      wordCount?.set(editor.storage.wordCount.words)
+      charCount?.set(editor.storage.wordCount.chars)
+    },
+  })