Fix missing compose input, handle parents differently

src/app/commands.ts

@@ -1,3 +1,4 @@
+import * as nip19 from "nostr-tools/nip19"
 import {get} from "svelte/store"
 import {ctx, sample, uniq, sleep, chunk, equals} from "@welshman/lib"
 import {
@@ -27,8 +28,9 @@ import {
   getRelayTags,
   isShareableRelayUrl,
   getRelayTagValues,
+  toNostrURI,
 } from "@welshman/util"
-import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
+import type {TrustedEvent, EventContent, EventTemplate, List} from "@welshman/util"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
 import {PublishStatus, AuthStatus, SocketStatus} from "@welshman/net"
 import {Nip59, makeSecret, stamp, Nip46Broker} from "@welshman/signer"
@@ -56,6 +58,7 @@ import {
   clearStorage,
   dropSession,
   tagEventForComment,
+  tagEventForQuote,
 } from "@welshman/app"
 import type {Thunk} from "@welshman/app"
 import {
@@ -96,6 +99,22 @@ export const getThunkError = async (thunk: Thunk) => {
   }
 }
 
+export const prependParent = (parent: TrustedEvent | undefined, {content, tags}: EventContent) => {
+  if (parent) {
+    const nevent = nip19.neventEncode({
+      id: parent.id,
+      kind: parent.kind,
+      author: parent.pubkey,
+      relays: ctx.app.router.Event(parent).limit(3).getUrls(),
+    })
+
+    tags = [...tags, tagEventForQuote(parent)]
+    content = toNostrURI(nevent) + "\n\n" + content
+  }
+
+  return {content, tags}
+}
+
 // Log in
 
 export const loginWithNip46 = async ({

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"

src/app/editor/index.ts

@@ -25,12 +25,11 @@ export const signWithAssert = async (template: StampedEvent) => {
   return event!
 }
 
-export const getEditor = ({
+export const makeEditor = ({
   aggressive = false,
   autofocus = false,
   charCount,
   content = "",
-  element,
   placeholder = "",
   submit,
   uploading,
@@ -40,14 +39,12 @@ export const getEditor = ({
   autofocus?: boolean
   charCount?: Writable<number>
   content?: string
-  element: HTMLElement
   placeholder?: string
   submit: () => void
   uploading?: Writable<boolean>
   wordCount?: Writable<number>
 }) =>
   createEditor({
-    element,
     content,
     autofocus,
     extensions: [

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -1,31 +1,22 @@
 <script lang="ts">
-  import * as nip19 from "nostr-tools/nip19"
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import type {Readable} from "svelte/store"
-  import {now, ctx} from "@welshman/lib"
+  import {now} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {createEvent, toNostrURI, MESSAGE, DELETE, REACTION} from "@welshman/util"
-  import {
-    displayProfileByPubkey,
-    formatTimestampAsDate,
-    tagEventForQuote,
-    publishThunk,
-    deriveRelay,
-    repository,
-  } from "@welshman/app"
+  import {createEvent, MESSAGE, DELETE, REACTION} from "@welshman/util"
+  import {formatTimestampAsDate, publishThunk, deriveRelay, repository} from "@welshman/app"
   import {slide, fade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import type {getEditor} from "@app/editor"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
-  import Content from "@app/components/Content.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
+  import ChannelComposeParent from "@app/components/ChannelComposeParent.svelte"
   import {
     userSettingValues,
     decodeRelay,
@@ -36,7 +27,13 @@
     getEventsForUrl,
   } from "@app/state"
   import {setChecked} from "@app/notifications"
-  import {nip29, addRoomMembership, removeRoomMembership, getThunkError} from "@app/commands"
+  import {
+    nip29,
+    addRoomMembership,
+    removeRoomMembership,
+    prependParent,
+    getThunkError,
+  } from "@app/commands"
   import {PROTECTED, hasNip29} from "@app/state"
   import {makeFeed} from "@app/requests"
   import {popKey} from "@app/implicit"
@@ -72,6 +69,7 @@
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
+    compose.focus()
   }
 
   const clearParent = () => {
@@ -82,23 +80,13 @@
     tags.push(tagRoom(room, url))
     tags.push(PROTECTED)
 
-    if (parent) {
-      const nevent = nip19.neventEncode({
-        id: parent.id,
-        kind: parent.kind,
-        author: parent.pubkey,
-        relays: ctx.app.router.Event(parent).limit(3).getUrls(),
-      })
-
-      tags.push(tagEventForQuote(parent))
-      content = toNostrURI(nevent) + "\n\n" + content
-    }
-
     publishThunk({
       relays: [url],
-      event: createEvent(MESSAGE, {content, tags}),
+      event: createEvent(MESSAGE, prependParent(parent, {content, tags})),
       delay: $userSettingValues.send_delay,
     })
+
+    clearParent()
   }
 
   const scrollToBottom = () => element.scrollTo({top: 0, behavior: "smooth"})
@@ -107,9 +95,9 @@
   let loading = true
   let element: HTMLElement
   let showScrollButton = false
-  let editor: ReturnType<typeof getEditor>
   let cleanup: () => void
   let events: Readable<TrustedEvent[]>
+  let compose: ChannelCompose
   let elements: any[] = []
 
   $: {
@@ -223,17 +211,9 @@
   </div>
   <div>
     {#if parent}
-      <div
-        class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 text-xs"
-        transition:slide>
-        <p class="text-primary">Replying to @{displayProfileByPubkey(parent.pubkey)}</p>
-        <Content event={parent} minLength={30} maxLength={200} />
-        <Button class="absolute right-2 top-2 cursor-pointer" on:click={clearParent}>
-          <Icon icon="close-circle" />
-        </Button>
-      </div>
+      <ChannelComposeParent event={parent} clear={clearParent} />
     {/if}
-    <ChannelCompose bind:editor {content} {onSubmit} />
+    <ChannelCompose bind:this={compose} {content} {onSubmit} />
   </div>
 </div>