diff --git a/package-lock.json b/package-lock.json index ba138ae0..01f1a064 100644 --- a/package-lock.json +++ b/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", diff --git a/src/app/components/ChatCompose.svelte b/src/app/components/ChatCompose.svelte index ea2cc586..80ea61f6 100644 --- a/src/app/components/ChatCompose.svelte +++ b/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})) }) diff --git a/src/app/components/ChatMessage.svelte b/src/app/components/ChatMessage.svelte index 050fd7bb..9170c506 100644 --- a/src/app/components/ChatMessage.svelte +++ b/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 - $: 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)) - })
@@ -107,7 +99,7 @@
{/if}

- + {event.content} {#if isPending}

@@ -36,9 +24,7 @@
{formatTimestamp(root.created_at)} -
- -
+
{#if replies.length > 0} Show {replies.length} {replies.length === 1 ? "reply" : "replies"} diff --git a/src/lib/editor/LinkExtension.ts b/src/lib/editor/LinkExtension.ts index 0cf7a5da..bbc399f3 100644 --- a/src/lib/editor/LinkExtension.ts +++ b/src/lib/editor/LinkExtension.ts @@ -1,8 +1,8 @@ -import {last} from '@welshman/lib' -import {Node, InputRule, nodePasteRule, type PasteRuleMatch} from "@tiptap/core" +import {last} from "@welshman/lib" +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 } diff --git a/src/lib/editor/index.ts b/src/lib/editor/index.ts index 4d3c67da..8d89b122 100644 --- a/src/lib/editor/index.ts +++ b/src/lib/editor/index.ts @@ -52,7 +52,6 @@ type EditorOptions = { loading: Writable 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)})), - ], })