From fd99866b1e104f1a97d1964aaad009d4af68feac Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Tue, 4 Feb 2025 20:00:19 -0800 Subject: [PATCH] Replace svelte components with node views --- src/app/editor/EditMention.svelte | 20 ------------ src/app/editor/MentionNodeView.ts | 26 ++++++++++++++++ src/app/editor/index.ts | 7 ++--- src/lib/editor/components/EditBolt11.svelte | 13 -------- src/lib/editor/components/EditEvent.svelte | 14 --------- src/lib/editor/components/EditMedia.svelte | 14 --------- src/lib/editor/components/EditMention.svelte | 13 -------- src/lib/editor/components/index.ts | 4 --- src/lib/editor/extensions/Welshman.ts | 15 +++++---- src/lib/editor/index.ts | 2 +- src/lib/editor/nodeviews/Bolt11NodeView.ts | 18 +++++++++++ src/lib/editor/nodeviews/EventNodeView.ts | 19 ++++++++++++ src/lib/editor/nodeviews/MediaNodeView.ts | 32 ++++++++++++++++++++ src/lib/editor/nodeviews/MentionNodeView.ts | 18 +++++++++++ src/lib/editor/nodeviews/index.ts | 4 +++ src/lib/editor/plugins/TippySuggestion.ts | 1 + 16 files changed, 129 insertions(+), 91 deletions(-) delete mode 100644 src/app/editor/EditMention.svelte create mode 100644 src/app/editor/MentionNodeView.ts delete mode 100644 src/lib/editor/components/EditBolt11.svelte delete mode 100644 src/lib/editor/components/EditEvent.svelte delete mode 100644 src/lib/editor/components/EditMedia.svelte delete mode 100644 src/lib/editor/components/EditMention.svelte delete mode 100644 src/lib/editor/components/index.ts create mode 100644 src/lib/editor/nodeviews/Bolt11NodeView.ts create mode 100644 src/lib/editor/nodeviews/EventNodeView.ts create mode 100644 src/lib/editor/nodeviews/MediaNodeView.ts create mode 100644 src/lib/editor/nodeviews/MentionNodeView.ts create mode 100644 src/lib/editor/nodeviews/index.ts diff --git a/src/app/editor/EditMention.svelte b/src/app/editor/EditMention.svelte deleted file mode 100644 index b7378d1a..00000000 --- a/src/app/editor/EditMention.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/src/app/editor/MentionNodeView.ts b/src/app/editor/MentionNodeView.ts new file mode 100644 index 00000000..24411fe5 --- /dev/null +++ b/src/app/editor/MentionNodeView.ts @@ -0,0 +1,26 @@ +import type {NodeViewProps} from '@tiptap/core' +import {deriveProfileDisplay} from "@welshman/app" + +export const MentionNodeView = ({node}: NodeViewProps) => { + const dom = document.createElement('span') + const display = deriveProfileDisplay(node.attrs.pubkey) + + dom.classList.add('tiptap-object') + + const unsubDisplay = display.subscribe($display => { + dom.textContent = '@' + $display + }) + + return { + dom, + destroy: () => { + unsubDisplay() + }, + selectNode() { + dom.classList.add('tiptap-active') + }, + deselectNode() { + dom.classList.remove('tiptap-active') + }, + } +} diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts index ccb64a8e..3fb35c36 100644 --- a/src/app/editor/index.ts +++ b/src/app/editor/index.ts @@ -1,15 +1,14 @@ -import {asClassComponent} from "svelte/legacy" import {mount} from "svelte" import type {Writable} from "svelte/store" import {get} from "svelte/store" -import {Editor, SvelteNodeViewRenderer} from "svelte-tiptap" +import {Editor} from "@tiptap/core" import {ctx} from "@welshman/lib" import type {StampedEvent} from "@welshman/util" import {signer, profileSearch} from "@welshman/app" import {MentionSuggestion, WelshmanExtension} from "@lib/editor" import {getSetting, userSettingValues} from "@app/state" +import {MentionNodeView} from "./MentionNodeView" import ProfileSuggestion from "./ProfileSuggestion.svelte" -import EditMention from "./EditMention.svelte" export const getUploadType = () => getSetting<"nip96" | "blossom">("upload_type") @@ -78,7 +77,7 @@ export const makeEditor = ({ }, nprofile: { extend: { - addNodeView: () => SvelteNodeViewRenderer(asClassComponent(EditMention)), + addNodeView: () => MentionNodeView, addProseMirrorPlugins() { return [ MentionSuggestion({ diff --git a/src/lib/editor/components/EditBolt11.svelte b/src/lib/editor/components/EditBolt11.svelte deleted file mode 100644 index 4cbaf62d..00000000 --- a/src/lib/editor/components/EditBolt11.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - - - diff --git a/src/lib/editor/components/EditEvent.svelte b/src/lib/editor/components/EditEvent.svelte deleted file mode 100644 index b5582a57..00000000 --- a/src/lib/editor/components/EditEvent.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/src/lib/editor/components/EditMedia.svelte b/src/lib/editor/components/EditMedia.svelte deleted file mode 100644 index 75274577..00000000 --- a/src/lib/editor/components/EditMedia.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - - {node.attrs.file?.name || node.attrs.src} - diff --git a/src/lib/editor/components/EditMention.svelte b/src/lib/editor/components/EditMention.svelte deleted file mode 100644 index 3aaa53a6..00000000 --- a/src/lib/editor/components/EditMention.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - - - diff --git a/src/lib/editor/components/index.ts b/src/lib/editor/components/index.ts deleted file mode 100644 index a7ab0760..00000000 --- a/src/lib/editor/components/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export {default as EditBolt11} from "./EditBolt11.svelte" -export {default as EditMedia} from "./EditMedia.svelte" -export {default as EditEvent} from "./EditEvent.svelte" -export {default as EditMention} from "./EditMention.svelte" diff --git a/src/lib/editor/extensions/Welshman.ts b/src/lib/editor/extensions/Welshman.ts index be25e91e..5233b6b9 100644 --- a/src/lib/editor/extensions/Welshman.ts +++ b/src/lib/editor/extensions/Welshman.ts @@ -1,6 +1,5 @@ import type {StampedEvent, SignedEvent} from "@welshman/util" import {deepMergeLeft} from "@welshman/lib" -import {SvelteNodeViewRenderer} from "svelte-tiptap" import type {Extensions, AnyExtension} from "@tiptap/core" import {CodeBlock} from "@tiptap/extension-code-block" import type {CodeBlockOptions} from "@tiptap/extension-code-block" @@ -38,7 +37,7 @@ import { import {WordCount} from "./WordCount.js" import {CodeInline, type CodeInlineOptions} from "./CodeInline.js" import {BreakOrSubmit, type BreakOrSubmitOptions} from "./BreakOrSubmit.js" -import {EditBolt11, EditMedia, EditEvent, EditMention} from "../components/index.js" +import {MentionNodeView, Bolt11NodeView, MediaNodeView, EventNodeView} from "../nodeviews/index.js" export type ChildExtensionOptions = | false @@ -115,7 +114,7 @@ export const WelshmanExtension = NostrExtension.extend({ group: "inline", }, extend: { - addNodeView: () => SvelteNodeViewRenderer(EditBolt11), + addNodeView: () => Bolt11NodeView, }, }, image: { @@ -126,7 +125,7 @@ export const WelshmanExtension = NostrExtension.extend({ defaultUploadType, }, extend: { - addNodeView: () => SvelteNodeViewRenderer(EditMedia), + addNodeView: () => MediaNodeView, }, }, video: { @@ -137,7 +136,7 @@ export const WelshmanExtension = NostrExtension.extend({ defaultUploadType, }, extend: { - addNodeView: () => SvelteNodeViewRenderer(EditMedia), + addNodeView: () => MediaNodeView, }, }, nevent: { @@ -146,7 +145,7 @@ export const WelshmanExtension = NostrExtension.extend({ group: "inline", }, extend: { - addNodeView: () => SvelteNodeViewRenderer(EditEvent), + addNodeView: () => EventNodeView, }, }, naddr: { @@ -155,12 +154,12 @@ export const WelshmanExtension = NostrExtension.extend({ group: "inline", }, extend: { - addNodeView: () => SvelteNodeViewRenderer(EditEvent), + addNodeView: () => EventNodeView, }, }, nprofile: { extend: { - addNodeView: () => SvelteNodeViewRenderer(EditMention), + addNodeView: () => MentionNodeView, }, }, breakOrSubmit: { diff --git a/src/lib/editor/index.ts b/src/lib/editor/index.ts index b09d8ffa..682f45dc 100644 --- a/src/lib/editor/index.ts +++ b/src/lib/editor/index.ts @@ -1,5 +1,5 @@ import "./index.css" -export * from "./components/index.js" +export * from "./nodeviews/index.js" export * from "./extensions/index.js" export * from "./plugins/index.js" diff --git a/src/lib/editor/nodeviews/Bolt11NodeView.ts b/src/lib/editor/nodeviews/Bolt11NodeView.ts new file mode 100644 index 00000000..285fca9d --- /dev/null +++ b/src/lib/editor/nodeviews/Bolt11NodeView.ts @@ -0,0 +1,18 @@ +import type {NodeViewProps} from '@tiptap/core' + +export const Bolt11NodeView = ({node}: NodeViewProps) => { + const dom = document.createElement('span') + + dom.classList.add('tiptap-object') + dom.innerText = `${node.attrs.lnbc.slice(0, 16)}...` + + return { + dom, + selectNode() { + dom.classList.add('tiptap-active') + }, + deselectNode() { + dom.classList.remove('tiptap-active') + }, + } +} diff --git a/src/lib/editor/nodeviews/EventNodeView.ts b/src/lib/editor/nodeviews/EventNodeView.ts new file mode 100644 index 00000000..4e789ed1 --- /dev/null +++ b/src/lib/editor/nodeviews/EventNodeView.ts @@ -0,0 +1,19 @@ +import type {NodeViewProps} from '@tiptap/core' +import {fromNostrURI} from "@welshman/util" + +export const EventNodeView = ({node}: NodeViewProps) => { + const dom = document.createElement('span') + + dom.classList.add('tiptap-object') + dom.innerText = `${fromNostrURI(node.attrs.bech32).slice(0, 16)}...` + + return { + dom, + selectNode() { + dom.classList.add('tiptap-active') + }, + deselectNode() { + dom.classList.remove('tiptap-active') + }, + } +} diff --git a/src/lib/editor/nodeviews/MediaNodeView.ts b/src/lib/editor/nodeviews/MediaNodeView.ts new file mode 100644 index 00000000..6e90f2b7 --- /dev/null +++ b/src/lib/editor/nodeviews/MediaNodeView.ts @@ -0,0 +1,32 @@ +import type {Node, NodeViewProps} from '@tiptap/core' +import {fromNostrURI} from "@welshman/util" + +export const MediaNodeView = ({node}: NodeViewProps) => { + const dom = document.createElement('span') + + const syncUploading = (node: NodeViewProps['node']) => { + if (node.attrs.uploading) { + dom.classList.add('tiptap-uploading') + } else { + dom.classList.remove('tiptap-uploading') + } + } + + dom.classList.add('tiptap-object') + dom.innerText = node.attrs.file?.name || node.attrs.src + + syncUploading(node) + + return { + dom, + update(node: NodeViewProps['node']) { + syncUploading(node) + }, + selectNode() { + dom.classList.add('tiptap-active') + }, + deselectNode() { + dom.classList.remove('tiptap-active') + }, + } +} diff --git a/src/lib/editor/nodeviews/MentionNodeView.ts b/src/lib/editor/nodeviews/MentionNodeView.ts new file mode 100644 index 00000000..cb93e271 --- /dev/null +++ b/src/lib/editor/nodeviews/MentionNodeView.ts @@ -0,0 +1,18 @@ +import type {NodeViewProps} from '@tiptap/core' + +export const MentionNodeView = ({node}: NodeViewProps) => { + const dom = document.createElement('span') + + dom.classList.add('tiptap-object') + dom.textContent = `@${node.attrs.bech32.slice(0, 16)}...` + + return { + dom, + selectNode() { + dom.classList.add('tiptap-active') + }, + deselectNode() { + dom.classList.remove('tiptap-active') + }, + } +} diff --git a/src/lib/editor/nodeviews/index.ts b/src/lib/editor/nodeviews/index.ts new file mode 100644 index 00000000..0d241821 --- /dev/null +++ b/src/lib/editor/nodeviews/index.ts @@ -0,0 +1,4 @@ +export * from './MentionNodeView.js' +export * from './Bolt11NodeView.js' +export * from './EventNodeView.js' +export * from './MediaNodeView.js' diff --git a/src/lib/editor/plugins/TippySuggestion.ts b/src/lib/editor/plugins/TippySuggestion.ts index c88235c0..67fd2c29 100644 --- a/src/lib/editor/plugins/TippySuggestion.ts +++ b/src/lib/editor/plugins/TippySuggestion.ts @@ -127,6 +127,7 @@ export class DefaultSuggestionsWrapper implements ISuggestionsWrapper { setProps(props: SuggestionsWrapperProps) { this.props = props + this.search() this.render() }