Attempt to use tiptap for view, failing due to https://github.com/ueberdosis/tiptap/issues/5176

package-lock.json

@@ -12,6 +12,7 @@
         "@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",
@@ -750,9 +751,9 @@
       }
     },
     "node_modules/@remirror/core-constants": {
-      "version": "2.0.2",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
-      "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ=="
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg=="
     },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
@@ -1126,15 +1127,15 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "2.6.6",
+      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.6.6.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.7.2.tgz",
-      "integrity": "sha512-VO5qTsjt6rwworkuo0s5AqYMfDA0ZwiTiH6FHKFSu2G/6sS7HKcc/LjPq+5Legzps4QYdBDl3W28wGsGuS1GdQ==",
+      "integrity": "sha512-rGAH90LPMR5OIG7vuTDRw8WxDYxPXSxuGtu++mxPF+Bv7V2ijPOy3P1oyV1G3KGoS0pPiNugLh+tVLsElcx/9Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/pm": "^2.6.6"
+        "@tiptap/pm": "^2.7.0"
       }
     },
     "node_modules/@tiptap/extension-bubble-menu": {
@@ -1325,13 +1326,13 @@
       }
     },
     "node_modules/@tiptap/pm": {
-      "version": "2.6.6",
+      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.6.6.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.7.2.tgz",
-      "integrity": "sha512-56FGLPn3fwwUlIbLs+BO21bYfyqP9fKyZQbQyY0zWwA/AG2kOwoXaRn7FOVbjP6CylyWpFJnpRRmgn694QKHEg==",
+      "integrity": "sha512-RiRPlwpuE6IHDJytE0tglbFlWELOaqeyGRGv25wBTjzV1plnqC5B3U65XY/8kKuuLjdd3NpRfR68DXBafusSBg==",
       "dependencies": {
         "prosemirror-changeset": "^2.2.1",
         "prosemirror-collab": "^1.3.1",
-        "prosemirror-commands": "^1.5.2",
+        "prosemirror-commands": "^1.6.0",
         "prosemirror-dropcursor": "^1.8.1",
         "prosemirror-gapcursor": "^1.3.2",
         "prosemirror-history": "^1.4.1",
@@ -1339,14 +1340,14 @@
         "prosemirror-keymap": "^1.2.2",
         "prosemirror-markdown": "^1.13.0",
         "prosemirror-menu": "^1.2.4",
-        "prosemirror-model": "^1.22.2",
+        "prosemirror-model": "^1.22.3",
         "prosemirror-schema-basic": "^1.2.3",
         "prosemirror-schema-list": "^1.4.1",
         "prosemirror-state": "^1.4.3",
         "prosemirror-tables": "^1.4.0",
-        "prosemirror-trailing-node": "^2.0.9",
+        "prosemirror-trailing-node": "^3.0.0",
-        "prosemirror-transform": "^1.9.0",
+        "prosemirror-transform": "^1.10.0",
-        "prosemirror-view": "^1.33.9"
+        "prosemirror-view": "^1.33.10"
       },
       "funding": {
         "type": "github",
@@ -4541,11 +4542,11 @@
       }
     },
     "node_modules/prosemirror-trailing-node": {
-      "version": "2.0.9",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
-      "integrity": "sha512-YvyIn3/UaLFlFKrlJB6cObvUhmwFNZVhy1Q8OpW/avoTbD/Y7H5EcjK4AZFKhmuS6/N6WkGgt7gWtBWDnmFvHg==",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
       "dependencies": {
-        "@remirror/core-constants": "^2.0.2",
+        "@remirror/core-constants": "3.0.0",
         "escape-string-regexp": "^4.0.0"
       },
       "peerDependencies": {

package.json

@@ -48,12 +48,12 @@
     "@tiptap/extension-text": "^2.6.6",
     "@tiptap/suggestion": "^2.6.4",
     "@types/throttle-debounce": "^5.0.2",
+    "@welshman/app": "^0.0.7",
     "@welshman/lib": "^0.0.17",
-    "@welshman/util": "^0.0.33",
-    "@welshman/store": "^0.0.7",
     "@welshman/net": "^0.0.22",
     "@welshman/signer": "^0.0.5",
-    "@welshman/app": "^0.0.7",
+    "@welshman/store": "^0.0.7",
+    "@welshman/util": "^0.0.33",
     "daisyui": "^4.12.10",
     "date-picker-svelte": "^2.13.0",
     "fuse.js": "^7.0.0",

src/app/components/ThreadItem.svelte

@@ -5,7 +5,7 @@
   import {displayPubkey} from "@welshman/util"
   import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
-  import {getViewOptions} from "@lib/editor"
+  import {getEditorOptions} from "@lib/editor"
 
   export let root
   export let replies
@@ -16,7 +16,9 @@
   let editor: Readable<Editor>
 
   onMount(() => {
-    editor = createEditor(getViewOptions(root))
+    editor = createEditor(getEditorOptions({}))
+
+    setTimeout(() => $editor.commands.insertContent(root.content, {applyPasteRules: true}), 100)
   })
 </script>
 

src/lib/editor/index.ts

@@ -52,6 +52,8 @@ type EditorOptions = {
   loading: Writable<boolean>
   getPubkeyHints: (pubkey: string) => string[]
   submitOnEnter?: boolean
+  content?: string
+  autofocus?: boolean
 }
 
 export const getModifiedHardBreakExtension = () =>
@@ -78,9 +80,11 @@ export const getEditorOptions = ({
   loading,
   getPubkeyHints,
   submitOnEnter,
+  content = "",
+  autofocus = false,
 }: EditorOptions) => ({
-  content: "",
+  content,
-  autofocus: true,
+  autofocus,
   extensions: [
     Code,
     CodeBlock,
@@ -137,10 +141,10 @@ export const getEditorOptions = ({
       },
     }),
   ],
-  onTransaction() {
+  // onTransaction() {
-    // @ts-ignore
+  //   // @ts-ignore
-    console.log(this.getJSON())
+  //   console.log(this.getJSON())
-  }
+  // }
 })
 
 type ViewOptions = {

src/routes/spaces/[nrelay]/calendar/+page.svelte

@@ -7,7 +7,7 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import EventCard from "@app/components/EventCard.svelte"
+  import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
   import {pushModal} from "@app/modal"
   import {eventsByUrl, decodeNRelay} from "@app/state"
@@ -55,7 +55,7 @@
       {#if dateDisplay}
         <Divider>{dateDisplay}</Divider>
       {/if}
-      <EventCard {event} />
+      <EventItem {event} />
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
       <Spinner {loading}>

src/routes/spaces/[nrelay]/threads/+page.svelte

@@ -4,7 +4,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import ThreadCard from "@app/components/ThreadCard.svelte"
+  import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import {pushModal} from "@app/modal"
   import {threadsByUrl, decodeNRelay} from "@app/state"
@@ -34,7 +34,7 @@
   </div>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
     {#each threads as { root, replies } (root.id)}
-      <ThreadCard {root} {replies} />
+      <ThreadItem {root} {replies} />
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
       <Spinner {loading}>