Move editor stuff to its own module

src/app/components/GroupNote.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import twColors from "tailwindcss/colors"
+  import type {Readable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {readable, derived} from "svelte/store"
   import {hash, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
@@ -20,6 +23,7 @@
   import {repository} from "@app/base"
   import type {PublishStatusData} from "@app/state"
   import {deriveProfile, deriveProfileDisplay, deriveEvent, publishStatusData} from "@app/state"
+  import {getChatViewOptions} from "@app/editor"
 
   export let event: TrustedEvent
   export let showPubkey: boolean
@@ -66,6 +70,8 @@
   const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
     $ps.find(({status}) => statuses.includes(status))
 
+  let editor: Readable<Editor>
+
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey)
   $: parentProfileDisplay = deriveProfileDisplay(parentPubkey)
@@ -73,6 +79,11 @@
   $: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
   $: failure =
     !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
+
+  onMount(() => {
+    editor = createEditor(getChatViewOptions(event.content))
+    console.log($editor)
+  })
 </script>
 
 <div in:fly class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300">
@@ -104,7 +115,7 @@
         </div>
       {/if}
       <p class="text-sm">
-        {event.content}
+        <EditorContent editor={$editor} />
         {#if isPending}
           <span class="flex-inline ml-1 gap-1">
             <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />