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()
}