From 256a70d6fbee7c5f3991d874c651bd1497f653f6 Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Tue, 24 Sep 2024 10:56:42 -0700 Subject: [PATCH] Attempt to use tiptap for view, failing due to https://github.com/ueberdosis/tiptap/issues/5176 --- package-lock.json | 39 ++++++++++--------- package.json | 6 +-- .../{EventCard.svelte => EventItem.svelte} | 0 .../{ThreadCard.svelte => ThreadItem.svelte} | 6 ++- src/lib/editor/index.ts | 16 +++++--- .../spaces/[nrelay]/calendar/+page.svelte | 4 +- .../spaces/[nrelay]/threads/+page.svelte | 4 +- 7 files changed, 41 insertions(+), 34 deletions(-) rename src/app/components/{EventCard.svelte => EventItem.svelte} (100%) rename src/app/components/{ThreadCard.svelte => ThreadItem.svelte} (86%) diff --git a/package-lock.json b/package-lock.json index 284c8124..ba138ae0 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz", - "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.6.6.tgz", - "integrity": "sha512-VO5qTsjt6rwworkuo0s5AqYMfDA0ZwiTiH6FHKFSu2G/6sS7HKcc/LjPq+5Legzps4QYdBDl3W28wGsGuS1GdQ==", + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.7.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.6.6.tgz", - "integrity": "sha512-56FGLPn3fwwUlIbLs+BO21bYfyqP9fKyZQbQyY0zWwA/AG2kOwoXaRn7FOVbjP6CylyWpFJnpRRmgn694QKHEg==", + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.7.2.tgz", + "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-transform": "^1.9.0", - "prosemirror-view": "^1.33.9" + "prosemirror-trailing-node": "^3.0.0", + "prosemirror-transform": "^1.10.0", + "prosemirror-view": "^1.33.10" }, "funding": { "type": "github", @@ -4541,11 +4542,11 @@ } }, "node_modules/prosemirror-trailing-node": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.9.tgz", - "integrity": "sha512-YvyIn3/UaLFlFKrlJB6cObvUhmwFNZVhy1Q8OpW/avoTbD/Y7H5EcjK4AZFKhmuS6/N6WkGgt7gWtBWDnmFvHg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz", + "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": { diff --git a/package.json b/package.json index 319b35ab..f9bc2b95 100644 --- a/package.json +++ b/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", diff --git a/src/app/components/EventCard.svelte b/src/app/components/EventItem.svelte similarity index 100% rename from src/app/components/EventCard.svelte rename to src/app/components/EventItem.svelte diff --git a/src/app/components/ThreadCard.svelte b/src/app/components/ThreadItem.svelte similarity index 86% rename from src/app/components/ThreadCard.svelte rename to src/app/components/ThreadItem.svelte index aa101be5..c0d58594 100644 --- a/src/app/components/ThreadCard.svelte +++ b/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 onMount(() => { - editor = createEditor(getViewOptions(root)) + editor = createEditor(getEditorOptions({})) + + setTimeout(() => $editor.commands.insertContent(root.content, {applyPasteRules: true}), 100) }) diff --git a/src/lib/editor/index.ts b/src/lib/editor/index.ts index 0a14559c..4d3c67da 100644 --- a/src/lib/editor/index.ts +++ b/src/lib/editor/index.ts @@ -52,6 +52,8 @@ type EditorOptions = { loading: Writable 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: "", - autofocus: true, + content, + autofocus, extensions: [ Code, CodeBlock, @@ -137,10 +141,10 @@ export const getEditorOptions = ({ }, }), ], - onTransaction() { - // @ts-ignore - console.log(this.getJSON()) - } + // onTransaction() { + // // @ts-ignore + // console.log(this.getJSON()) + // } }) type ViewOptions = { diff --git a/src/routes/spaces/[nrelay]/calendar/+page.svelte b/src/routes/spaces/[nrelay]/calendar/+page.svelte index fb12176d..05c4177d 100644 --- a/src/routes/spaces/[nrelay]/calendar/+page.svelte +++ b/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} {dateDisplay} {/if} - + {/each}

diff --git a/src/routes/spaces/[nrelay]/threads/+page.svelte b/src/routes/spaces/[nrelay]/threads/+page.svelte index 6ab35712..aa033654 100644 --- a/src/routes/spaces/[nrelay]/threads/+page.svelte +++ b/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 @@

{#each threads as { root, replies } (root.id)} - + {/each}