Stop trying to use editor to view notes

package-lock.json

@@ -12,7 +12,6 @@
         "@noble/hashes": "^1.4.0",
         "@poppanator/sveltekit-svg": "^4.2.1",
         "@sveltejs/adapter-static": "^3.0.4",
-        "@tiptap/core": "^2.7.2",
         "@tiptap/extension-code": "^2.6.6",
         "@tiptap/extension-code-block": "^2.6.6",
         "@tiptap/extension-document": "^2.6.6",

src/app/components/ChatCompose.svelte

@@ -30,7 +30,7 @@
   }
 
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true}))
+    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true, autofocus: true}))
   })
 </script>
 

src/app/components/ChatMessage.svelte

@@ -2,7 +2,6 @@
   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"
@@ -22,7 +21,6 @@
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import {REPLY, deriveEvent, displayReaction} from "@app/state"
-  import {getViewOptions} from "@lib/editor"
 
   export let event: TrustedEvent
   export let showPubkey: boolean
@@ -63,8 +61,6 @@
   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 || "")
@@ -72,10 +68,6 @@
   $: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
   $: failure =
     !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
-
-  onMount(() => {
-    editor = createEditor(getViewOptions(event))
-  })
 </script>
 
 <div in:fly class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300">
@@ -107,7 +99,7 @@
         </div>
       {/if}
       <p class="text-sm">
-        <EditorContent editor={$editor} />
+        {event.content}
         {#if isPending}
           <span class="flex-inline ml-1 gap-1">
             <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />

src/app/components/EventItem.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
-  import {getAddress} from "@welshman/util"
   import {secondsToDate, getLocale, formatTimestamp, formatTimestampAsDate} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
 

src/app/components/ThreadCreate.svelte

@@ -29,7 +29,7 @@
   let editor: Readable<Editor>
 
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints}))
+    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, autofocus: true}))
   })
 </script>
 

src/app/components/ThreadItem.svelte

@@ -1,25 +1,13 @@
 <script lang="ts">
-  import {onMount} from "svelte"
-  import type {Readable} from "svelte/store"
-  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {displayPubkey} from "@welshman/util"
   import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
-  import {getEditorOptions} from "@lib/editor"
 
   export let root
   export let replies
 
   const profile = deriveProfile(root.pubkey)
   const profileDisplay = deriveProfileDisplay(root.pubkey)
-
-  let editor: Readable<Editor>
-
-  onMount(() => {
-    editor = createEditor(getEditorOptions({}))
-
-    setTimeout(() => $editor.commands.insertContent(root.content, {applyPasteRules: true}), 100)
-  })
 </script>
 
 <div>
@@ -36,9 +24,7 @@
       </div>
       <span class="text-sm opacity-75">{formatTimestamp(root.created_at)}</span>
     </div>
-    <div class="ml-12">
+    <div class="ml-12"></div>
-      <EditorContent editor={$editor} />
-    </div>
   </div>
   {#if replies.length > 0}
     Show {replies.length} {replies.length === 1 ? "reply" : "replies"}

src/lib/editor/LinkExtension.ts

@@ -1,8 +1,8 @@
-import {last} from '@welshman/lib'
+import {last} from "@welshman/lib"
-import {Node, InputRule, nodePasteRule, type PasteRuleMatch} from "@tiptap/core"
+import {Node, InputRule, nodePasteRule} from "@tiptap/core"
 import type {Node as ProsemirrorNode} from "@tiptap/pm/model"
 import type {MarkdownSerializerState} from "prosemirror-markdown"
-import {createPasteRuleMatch, createInputRuleMatch} from './util'
+import {createPasteRuleMatch} from "./util"
 
 export const LINK_REGEX =
   /([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s\)\(]*/gi
@@ -87,7 +87,10 @@ export const LinkExtension = Node.create({
             try {
               tr.insert(range.from - 1, this.type.create(match.data))
                 .delete(tr.mapping.map(range.from - 1), tr.mapping.map(range.to))
-                .insert(tr.mapping.map(range.to), this.editor.schema.text(last(Array.from(match.input!))))
+                .insert(
+                  tr.mapping.map(range.to),
+                  this.editor.schema.text(last(Array.from(match.input!))),
+                )
             } catch (e) {
               // If the node was already linkified, the above code breaks for whatever reason
             }

src/lib/editor/index.ts

@@ -52,7 +52,6 @@ type EditorOptions = {
   loading: Writable<boolean>
   getPubkeyHints: (pubkey: string) => string[]
   submitOnEnter?: boolean
-  content?: string
   autofocus?: boolean
 }
 
@@ -80,11 +79,10 @@ export const getEditorOptions = ({
   loading,
   getPubkeyHints,
   submitOnEnter,
-  content = "",
   autofocus = false,
 }: EditorOptions) => ({
-  content,
   autofocus,
+  content: "",
   extensions: [
     Code,
     CodeBlock,
@@ -141,36 +139,4 @@ export const getEditorOptions = ({
       },
     }),
   ],
-  // onTransaction() {
-  //   // @ts-ignore
-  //   console.log(this.getJSON())
-  // }
-})
-
-type ViewOptions = {
-  content: string
-}
-
-export const getViewOptions = ({content}: ViewOptions) => ({
-  content,
-  editable: false,
-  shouldRerenderOnTransaction: false,
-  extensions: [
-    Code,
-    CodeBlock,
-    Document,
-    Paragraph,
-    Text,
-    LinkExtension.extend({
-      addNodeView: () => SvelteNodeViewRenderer(EditLink),
-    }),
-    Bolt11Extension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditBolt11)})),
-    NProfileExtension.extend({
-      addNodeView: () => SvelteNodeViewRenderer(EditMention),
-    }),
-    NEventExtension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditEvent)})),
-    NAddrExtension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditEvent)})),
-    ImageExtension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditImage)})),
-    VideoExtension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditVideo)})),
-  ],
 })