Move editor stuff to its own module

src/app/components/GroupCompose.svelte

@@ -1,63 +1,24 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Readable} from "svelte/store"
-  import {nprofileEncode} from "nostr-tools/nip19"
-  import {createEditor, type Editor, EditorContent, SvelteNodeViewRenderer} from "svelte-tiptap"
-  import Code from "@tiptap/extension-code"
-  import CodeBlock from "@tiptap/extension-code-block"
-  import Document from "@tiptap/extension-document"
-  import Dropcursor from "@tiptap/extension-dropcursor"
-  import Gapcursor from "@tiptap/extension-gapcursor"
-  import History from "@tiptap/extension-history"
-  import Paragraph from "@tiptap/extension-paragraph"
-  import Text from "@tiptap/extension-text"
-  import HardBreakExtension from "@tiptap/extension-hard-break"
-  import {
-    Bolt11Extension,
-    NProfileExtension,
-    NEventExtension,
-    NAddrExtension,
-    ImageExtension,
-    VideoExtension,
-    FileUploadExtension,
-  } from "nostr-editor"
-  import type {StampedEvent} from "@welshman/util"
+  import {writable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {NProfileExtension, ImageExtension} from "nostr-editor"
   import {createEvent, CHAT_MESSAGE} from "@welshman/util"
-  import {LinkExtension, TopicExtension, createSuggestions, findNodes} from "@lib/tiptap"
+  import {TopicExtension, findNodes} from "@lib/tiptap"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import GroupComposeMention from "@app/components/GroupComposeMention.svelte"
-  import GroupComposeTopic from "@app/components/GroupComposeTopic.svelte"
-  import GroupComposeEvent from "@app/components/GroupComposeEvent.svelte"
-  import GroupComposeImage from "@app/components/GroupComposeImage.svelte"
-  import GroupComposeBolt11 from "@app/components/GroupComposeBolt11.svelte"
-  import GroupComposeVideo from "@app/components/GroupComposeVideo.svelte"
-  import GroupComposeLink from "@app/components/GroupComposeLink.svelte"
-  import GroupComposeSuggestions from "@app/components/GroupComposeSuggestions.svelte"
-  import GroupComposeTopicSuggestion from "@app/components/GroupComposeTopicSuggestion.svelte"
-  import GroupComposeProfileSuggestion from "@app/components/GroupComposeProfileSuggestion.svelte"
-  import {signer} from "@app/base"
-  import {
-    searchProfiles,
-    publishThunk,
-    makeThunk,
-    searchTopics,
-    userRelayUrlsByNom,
-  } from "@app/state"
-  import {getPubkeyHints, makeMention, makeIMeta} from "@app/commands"
+  import {publishThunk, makeThunk, userRelayUrlsByNom} from "@app/state"
+  import {makeMention, makeIMeta} from "@app/commands"
+  import {getChatEditorOptions, addFile} from "@app/editor"
 
   export let nom
 
+  const uploading = writable(false)
+
   let editor: Readable<Editor>
-  let uploading = false
 
-  const asInline = (extend: Record<string, any>) => ({inline: true, group: "inline", ...extend})
-
-  const addFile = () => $editor.chain().selectFiles().run()
-
-  const uploadFiles = () => $editor.chain().uploadFiles().run()
-
-  const sendMessage = async () => {
+  const sendMessage = () => {
     const json = $editor.getJSON()
     const relays = $userRelayUrlsByNom.get(nom)
     const event = createEvent(CHAT_MESSAGE, {
@@ -80,120 +41,22 @@
   }
 
   onMount(() => {
-    editor = createEditor({
-      autofocus: true,
-      extensions: [
-        Code,
-        CodeBlock,
-        Document,
-        Dropcursor,
-        Gapcursor,
-        History,
-        Paragraph,
-        Text,
-        HardBreakExtension.extend({
-          addKeyboardShortcuts() {
-            return {
-              "Shift-Enter": () => this.editor.commands.setHardBreak(),
-              "Mod-Enter": () => this.editor.commands.setHardBreak(),
-              Enter: () => {
-                if (this.editor.getText().trim()) {
-                  uploadFiles()
-
-                  return true
-                }
-
-                return false
-              },
-            }
-          },
-        }),
-        LinkExtension.extend({
-          addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
-        }),
-        Bolt11Extension.extend(
-          asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)}),
-        ),
-        NProfileExtension.extend({
-          addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
-          addProseMirrorPlugins() {
-            return [
-              createSuggestions({
-                char: "@",
-                name: "nprofile",
-                editor: this.editor,
-                search: searchProfiles,
-                select: (pubkey: string, props: any) => {
-                  const relays = getPubkeyHints(pubkey)
-                  const nprofile = nprofileEncode({pubkey, relays})
-
-                  return props.command({pubkey, nprofile, relays})
-                },
-                suggestionComponent: GroupComposeProfileSuggestion,
-                suggestionsComponent: GroupComposeSuggestions,
-              }),
-            ]
-          },
-        }),
-        NEventExtension.extend(
-          asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeEvent)}),
-        ),
-        NAddrExtension.extend(
-          asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeEvent)}),
-        ),
-        ImageExtension.extend(
-          asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeImage)}),
-        ).configure({defaultUploadUrl: "https://nostr.build", defaultUploadType: "nip96"}),
-        VideoExtension.extend(
-          asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeVideo)}),
-        ).configure({defaultUploadUrl: "https://nostr.build", defaultUploadType: "nip96"}),
-        TopicExtension.extend({
-          addNodeView: () => SvelteNodeViewRenderer(GroupComposeTopic),
-          addProseMirrorPlugins() {
-            return [
-              createSuggestions({
-                char: "#",
-                name: "topic",
-                editor: this.editor,
-                search: searchTopics,
-                select: (name: string, props: any) => props.command({name}),
-                allowCreate: true,
-                suggestionComponent: GroupComposeTopicSuggestion,
-                suggestionsComponent: GroupComposeSuggestions,
-              }),
-            ]
-          },
-        }),
-        FileUploadExtension.configure({
-          immediateUpload: false,
-          sign: (event: StampedEvent) => {
-            uploading = true
-
-            return $signer!.sign(event)
-          },
-          onComplete: () => {
-            uploading = false
-            sendMessage()
-          },
-        }),
-      ],
-      content: "",
-    })
+    editor = createEditor(getChatEditorOptions({uploading, sendMessage}))
   })
 </script>
 
 <div
   class="shadow-top-xl relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100 p-2">
   <Button
-    on:click={addFile}
+    on:click={() => addFile($editor)}
     class="center h-10 w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200">
-    {#if uploading}
+    {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
       <Icon icon="gallery-send" />
     {/if}
   </Button>
-  <div class="flex-grow">
+  <div class="flex-grow overflow-hidden">
     <EditorContent editor={$editor} />
   </div>
 </div>

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" />