Small fixes/performance improvements

src/app/components/ChannelCompose.svelte

@@ -1,56 +1,54 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {createEditor, EditorContent} from "svelte-tiptap"
+  import {writable} from "svelte/store"
   import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {getEditorOptions, getEditorTags} from "@lib/editor"
-  import {getPubkeyHints} from "@app/commands"
+  import {getEditor} from "@app/editor"
 
   export let onSubmit: any
   export let content = ""
-  export let editor = createEditor(
-    getEditorOptions({
-      submit,
-      getPubkeyHints,
-      submitOnEnter: true,
-      autofocus: !isMobile,
-    }),
-  )
+  export let editor: ReturnType<typeof getEditor> | undefined = undefined
 
-  function submit() {
-    if ($loading) return
+  const uploading = writable(false)
+
+  let element: HTMLElement
+
+  const uploadFiles = () => $editor!.chain().selectFiles().run()
+
+  const submit = () => {
+    if ($uploading) return
 
     onSubmit({
-      content: $editor.getText({blockSeparator: "\n"}),
-      tags: getEditorTags($editor),
+      content: $editor!.getText({blockSeparator: "\n"}).trim(),
+      tags: $editor!.storage.welshman.getEditorTags(),
     })
 
-    $editor.chain().clearContent().run()
+    $editor!.chain().clearContent().run()
   }
 
-  $: loading = $editor?.storage.fileUpload.loading
-
   onMount(() => {
-    $editor.commands.setContent(content)
+    editor = getEditor({autofocus: !isMobile, aggressive: true, element, submit, uploading})
+
+    $editor!.chain().setContent(content).run()
   })
 </script>
 
 <form
   class="relative z-feature flex gap-2 p-2"
-  on:submit|preventDefault={$loading ? undefined : submit}>
+  on:submit|preventDefault={$uploading ? undefined : submit}>
   <Button
     data-tip="Add an image"
     class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
-    disabled={$loading}
-    on:click={$editor.commands.selectFiles}>
-    {#if $loading}
+    disabled={$uploading}
+    on:click={uploadFiles}>
+    {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
       <Icon icon="gallery-send" />
     {/if}
   </Button>
   <div class="chat-editor flex-grow overflow-hidden">
-    <EditorContent editor={$editor} />
+    <div bind:this={element} />
   </div>
 </form>

src/app/components/EventCreate.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import type {Readable} from "svelte/store"
-  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {writable} from "svelte/store"
   import {randomId} from "@welshman/lib"
-  import {createEvent, EVENT_DATE, EVENT_TIME} from "@welshman/util"
+  import {createEvent, EVENT_TIME} from "@welshman/util"
   import {publishThunk, dateToSeconds} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -12,16 +11,17 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import {PROTECTED} from "@app/state"
-  import {getPubkeyHints} from "@app/commands"
-  import {getEditorOptions, getEditorTags} from "@lib/editor"
+  import {getEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
   export let url
 
+  const uploading = writable(false)
+
   const back = () => history.back()
 
   const submit = () => {
-    if ($loading) return
+    if ($uploading) return
 
     if (!title) {
       return pushToast({
@@ -37,16 +37,15 @@
       })
     }
 
-    const kind = isAllDay ? EVENT_DATE : EVENT_TIME
-    const event = createEvent(kind, {
-      content: $editor.getText({blockSeparator: "\n"}),
+    const event = createEvent(EVENT_TIME, {
+      content: $editor.getText({blockSeparator: "\n"}).trim(),
       tags: [
         ["d", randomId()],
         ["title", title],
         ["location", location],
         ["start", dateToSeconds(start).toString()],
         ["end", dateToSeconds(end).toString()],
-        ...getEditorTags($editor),
+        ...$editor.storage.welshman.getEditorTags(),
         PROTECTED,
       ],
     })
@@ -55,17 +54,15 @@
     history.back()
   }
 
-  let editor: Readable<Editor>
-  const isAllDay = false
+  let element: HTMLElement
+  let editor: ReturnType<typeof getEditor>
   let title = ""
   let location = ""
   let start: Date
   let end: Date
 
-  $: loading = $editor?.storage.fileUpload.loading
-
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, getPubkeyHints}))
+    editor = getEditor({submit, element, uploading})
   })
 </script>
 
@@ -86,13 +83,13 @@
       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">
-        <EditorContent editor={$editor} />
+        <div bind:this={element} />
       </div>
       <Button
         data-tip="Add an image"
         class="center btn tooltip"
-        on:click={$editor.commands.selectFiles}>
-        {#if $loading}
+        on:click={() => $editor.chain().selectFiles().run()}>
+        {#if $uploading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}
           <Icon icon="gallery-send" />

src/app/components/ProfileMultiSelect.svelte

@@ -3,11 +3,11 @@
   import {type Instance} from "tippy.js"
   import {append, remove, uniq} from "@welshman/lib"
   import {profileSearch} from "@welshman/app"
+  import {Suggestions} from "@welshman/editor"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Suggestions from "@lib/editor/Suggestions.svelte"
-  import SuggestionProfile from "@lib/editor/SuggestionProfile.svelte"
+  import ProfileSuggestion from "@app/editor/ProfileSuggestion.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/modal"
@@ -78,7 +78,7 @@
       term,
       select: selectPubkey,
       search: profileSearch,
-      component: SuggestionProfile,
+      component: ProfileSuggestion,
       class: "rounded-box",
       style: `left: 4px; width: ${input?.clientWidth + 12}px`,
     }}

src/app/components/ThreadCreate.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import type {Readable} from "svelte/store"
-  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {writable} from "svelte/store"
   import {createEvent, THREAD} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {isMobile} from "@lib/html"
@@ -12,15 +11,16 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/toast"
   import {GENERAL, tagRoom, PROTECTED} from "@app/state"
-  import {getPubkeyHints} from "@app/commands"
-  import {getEditorOptions, getEditorTags} from "@lib/editor"
+  import {getEditor} from "@app/editor"
 
   export let url
 
+  const uploading = writable(false)
+
   const back = () => history.back()
 
   const submit = () => {
-    if ($loading) return
+    if ($uploading) return
 
     if (!title) {
       return pushToast({
@@ -29,7 +29,7 @@
       })
     }
 
-    const content = $editor.getText({blockSeparator: "\n"})
+    const content = $editor.getText({blockSeparator: "\n"}).trim()
 
     if (!content.trim()) {
       return pushToast({
@@ -38,7 +38,12 @@
       })
     }
 
-    const tags = [["title", title], tagRoom(GENERAL, url), ...getEditorTags($editor), PROTECTED]
+    const tags = [
+      ...$editor.storage.welshman.getEditorTags(),
+      tagRoom(GENERAL, url),
+      ["title", title],
+      PROTECTED,
+    ]
 
     publishThunk({
       relays: [url],
@@ -49,14 +54,11 @@
   }
 
   let title: string
-  let editor: Readable<Editor>
-
-  $: loading = $editor?.storage.fileUpload.loading
+  let element: HTMLElement
+  let editor: ReturnType<typeof getEditor>
 
   onMount(() => {
-    editor = createEditor(
-      getEditorOptions({submit, getPubkeyHints, placeholder: "What's on your mind?"}),
-    )
+    editor = getEditor({submit, element, uploading, placeholder: "What's on your mind?"})
   })
 </script>
 
@@ -81,14 +83,14 @@
     <Field>
       <p slot="label">Message*</p>
       <div slot="input" class="note-editor flex-grow overflow-hidden">
-        <EditorContent editor={$editor} />
+        <div bind:this={element} />
       </div>
     </Field>
     <Button
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
       on:click={$editor.commands.selectFiles}>
-      {#if $loading}
+      {#if $uploading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
         <Icon icon="paperclip" size={3} />

src/app/components/ThreadReply.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import type {Readable} from "svelte/store"
-  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {writable} from "svelte/store"
   import {isMobile} from "@lib/html"
   import {fly, slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {getEditorOptions, getEditorTags} from "@lib/editor"
-  import {getPubkeyHints, publishComment} from "@app/commands"
+  import {publishComment} from "@app/commands"
   import {tagRoom, GENERAL, PROTECTED} from "@app/state"
+  import {getEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
   export let url
@@ -17,13 +16,15 @@
   export let onClose
   export let onSubmit
 
+  const uploading = writable(false)
+
   const submit = () => {
-    if ($loading) return
+    if ($uploading) return
 
-    const content = $editor.getText({blockSeparator: "\n"})
-    const tags = [...getEditorTags($editor), tagRoom(GENERAL, url), PROTECTED]
+    const content = $editor.getText({blockSeparator: "\n"}).trim()
+    const tags = [...$editor.storage.welshman.getEditorTags(), tagRoom(GENERAL, url), PROTECTED]
 
-    if (!content.trim()) {
+    if (!content) {
       return pushToast({
         theme: "error",
         message: "Please provide a message for your reply.",
@@ -33,12 +34,11 @@
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
 
-  let editor: Readable<Editor>
-
-  $: loading = $editor?.storage.fileUpload.loading
+  let editor: ReturnType<typeof getEditor>
+  let element: HTMLElement
 
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, getPubkeyHints, autofocus: !isMobile}))
+    editor = getEditor({element, submit, uploading, autofocus: !isMobile})
   })
 </script>
 
@@ -49,13 +49,13 @@
   class="card2 sticky bottom-2 z-feature mx-2 mt-4 bg-neutral">
   <div class="relative">
     <div class="note-editor flex-grow overflow-hidden">
-      <EditorContent editor={$editor} />
+      <div bind:this={element} />
     </div>
     <Button
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
       on:click={$editor.commands.selectFiles}>
-      {#if $loading}
+      {#if $uploading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
         <Icon icon="paperclip" size={3} />