Fix missing compose input, handle parents differently

src/app/components/ChannelCompose.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
+  import {EditorContent} from "svelte-tiptap"
   import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {getEditor} from "@app/editor"
+  import {makeEditor} from "@app/editor"
 
   export let onSubmit: any
   export let content = ""
-  export let editor: ReturnType<typeof getEditor> | undefined = undefined
+
+  export const focus = () => $editor.chain().focus().run()
 
   const uploading = writable(false)
 
-  let element: HTMLElement
-
   const uploadFiles = () => $editor!.chain().selectFiles().run()
 
   const submit = () => {
@@ -29,9 +29,9 @@
     $editor!.chain().clearContent().run()
   }
 
-  onMount(() => {
-    editor = getEditor({autofocus: !isMobile, element, submit, uploading, aggressive: true})
+  const editor = makeEditor({autofocus: !isMobile, submit, uploading, aggressive: true})
 
+  onMount(() => {
     $editor!.chain().setContent(content).run()
   })
 </script>
@@ -51,7 +51,7 @@
     {/if}
   </Button>
   <div class="chat-editor flex-grow overflow-hidden">
-    <div bind:this={element} />
+    <EditorContent editor={$editor} />
   </div>
   <Button
     data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"

src/app/components/ChannelComposeParent.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import {displayProfileByPubkey} from "@welshman/app"
+  import {slide} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Content from "@app/components/Content.svelte"
+
+  export let event: TrustedEvent
+  export let clear: () => void
+</script>
+
+<div
+  class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 pr-8 text-xs"
+  transition:slide>
+  <p class="text-primary">Replying to @{displayProfileByPubkey(event.pubkey)}</p>
+  {#key event.id}
+    <Content {event} minLength={100} maxLength={300} expandMode="disabled" />
+  {/key}
+  <Button class="absolute right-2 top-2 cursor-pointer" on:click={clear}>
+    <Icon icon="close-circle" />
+  </Button>
+</div>

src/app/components/Chat.svelte

@@ -10,19 +10,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
-  import type {Readable} from "svelte/store"
-  import type {Editor} from "svelte-tiptap"
-  import {nip19} from "nostr-tools"
-  import {int, nthNe, MINUTE, sortBy, remove, ctx} from "@welshman/lib"
+  import {int, nthNe, MINUTE, sortBy, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE, INBOX_RELAYS} from "@welshman/util"
-  import {
-    pubkey,
-    formatTimestampAsDate,
-    inboxRelaySelectionsByPubkey,
-    load,
-    tagPubkey,
-  } from "@welshman/app"
+  import {pubkey, formatTimestampAsDate, inboxRelaySelectionsByPubkey, load} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -36,9 +27,10 @@
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
+  import ChatComposeParent from "@app/components/ChannelComposeParent.svelte"
   import {userSettingValues, deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
-  import {sendWrapped} from "@app/commands"
+  import {sendWrapped, prependParent} from "@app/commands"
 
   export let id
 
@@ -57,28 +49,31 @@
     pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
 
   const replyTo = (event: TrustedEvent) => {
-    const relays = ctx.app.router.Event(event).getUrls()
-    const bech32 = nip19.neventEncode({...event, relays})
-
-    $editor.commands.insertNEvent({bech32})
-    $editor.commands.insertContent("\n")
-    $editor.commands.focus()
+    parent = event
+    compose.focus()
   }
 
-  const onSubmit = async ({content, ...params}: EventContent) => {
-    // Remove p tags since they result in forking the conversation
-    const tags = [...params.tags.filter(nthNe(0, "p")), ...remove($pubkey!, pubkeys).map(tagPubkey)]
+  const clearParent = () => {
+    parent = undefined
+  }
 
+  const onSubmit = async ({content, tags}: EventContent) => {
     await sendWrapped({
       pubkeys,
-      template: createEvent(DIRECT_MESSAGE, {content, tags}),
+      template: createEvent(
+        DIRECT_MESSAGE,
+        prependParent(parent, {content, tags: tags.filter(nthNe(0, "p"))}),
+      ),
       delay: $userSettingValues.send_delay,
     })
+
+    clearParent()
   }
 
   let loading = true
-  let editor: Readable<Editor>
+  let parent: TrustedEvent | undefined
   let elements: Element[] = []
+  let compose: ChatCompose
 
   $: {
     elements = []
@@ -200,5 +195,8 @@
       <slot name="info" />
     </p>
   </div>
-  <ChatCompose bind:editor {onSubmit} />
+  {#if parent}
+    <ChatComposeParent event={parent} clear={clearParent} />
+  {/if}
+  <ChatCompose bind:this={compose} {onSubmit} />
 </div>

src/app/components/Content.svelte

@@ -93,7 +93,7 @@
         mediaLength: hideMedia ? 20 : 200,
       })
 
-  $: hasEllipsis = shortContent.find(isEllipsis)
+  $: hasEllipsis = shortContent.some(isEllipsis)
   $: expandInline = hasEllipsis && expandMode === "inline"
   $: expandBlock = hasEllipsis && expandMode === "block"
 </script>

src/app/components/EventCreate.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {EditorContent} from "svelte-tiptap"
   import {writable} from "svelte/store"
   import {randomId} from "@welshman/lib"
   import {createEvent, EVENT_TIME} from "@welshman/util"
@@ -11,7 +11,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import {PROTECTED} from "@app/state"
-  import {getEditor} from "@app/editor"
+  import {makeEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
   export let url
@@ -54,16 +54,12 @@
     history.back()
   }
 
-  let element: HTMLElement
-  let editor: ReturnType<typeof getEditor>
+  const editor = makeEditor({submit, uploading})
+
   let title = ""
   let location = ""
   let start: Date
   let end: Date
-
-  onMount(() => {
-    editor = getEditor({submit, element, uploading})
-  })
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={submit}>
@@ -83,7 +79,7 @@
       slot="input"
       class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
       <div class="input-editor flex-grow overflow-hidden">
-        <div bind:this={element} />
+        <EditorContent editor={$editor} />
       </div>
       <Button
         data-tip="Add an image"

src/app/components/ThreadCreate.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {onMount} from "svelte"
   import {writable} from "svelte/store"
+  import {EditorContent} from "svelte-tiptap"
   import {createEvent, THREAD} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {isMobile} from "@lib/html"
@@ -11,7 +11,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/toast"
   import {GENERAL, tagRoom, PROTECTED} from "@app/state"
-  import {getEditor} from "@app/editor"
+  import {makeEditor} from "@app/editor"
 
   export let url
 
@@ -53,13 +53,9 @@
     history.back()
   }
 
-  let title: string
-  let element: HTMLElement
-  let editor: ReturnType<typeof getEditor>
+  const editor = makeEditor({submit, uploading, placeholder: "What's on your mind?"})
 
-  onMount(() => {
-    editor = getEditor({submit, element, uploading, placeholder: "What's on your mind?"})
-  })
+  let title: string
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={submit}>
@@ -83,7 +79,7 @@
     <Field>
       <p slot="label">Message*</p>
       <div slot="input" class="note-editor flex-grow overflow-hidden">
-        <div bind:this={element} />
+        <EditorContent editor={$editor} />
       </div>
     </Field>
     <Button

src/app/components/ThreadReply.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {onMount} from "svelte"
   import {writable} from "svelte/store"
+  import {EditorContent} from "svelte-tiptap"
   import {isMobile} from "@lib/html"
   import {fly, slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -8,7 +8,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {publishComment} from "@app/commands"
   import {tagRoom, GENERAL, PROTECTED} from "@app/state"
-  import {getEditor} from "@app/editor"
+  import {makeEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
   export let url
@@ -34,12 +34,7 @@
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
 
-  let editor: ReturnType<typeof getEditor>
-  let element: HTMLElement
-
-  onMount(() => {
-    editor = getEditor({element, submit, uploading, autofocus: !isMobile})
-  })
+  const editor = makeEditor({submit, uploading, autofocus: !isMobile})
 </script>
 
 <form
@@ -49,7 +44,7 @@
   class="card2 sticky bottom-2 z-feature mx-2 mt-4 bg-neutral">
   <div class="relative">
     <div class="note-editor flex-grow overflow-hidden">
-      <div bind:this={element} />
+      <EditorContent editor={$editor} />
     </div>
     <Button
       data-tip="Add an image"