Merge pull request #9 from cesardeazevedo/pr-2349

Pr 2349

examples/svelte/src/App.svelte

@@ -7,6 +7,7 @@
   import StarterKit from '@tiptap/starter-kit'
   import { SvelteNodeViewRenderer } from 'svelte-tiptap'
   import MentionEditor from './lib/Mention/MentionEditor.svelte'
+  import NEventEditor from './lib/NEvent/NEventEditor.svelte'
 
   let element: HTMLDivElement
   let editor: Editor
@@ -21,12 +22,12 @@
         NostrExtension.configure({
           extend: {
             nprofile: {
-              // @ts-ignore
               addNodeView: () => SvelteNodeViewRenderer(MentionEditor),
             },
             nevent: {
-              // TODO
-              // addNodeView: () => SvelteNodeViewRenderer(NEventEditor),
+              inline: true,
+              group: "inline",
+              addNodeView: () => SvelteNodeViewRenderer(NEventEditor),
             },
           },
         }),

examples/svelte/src/lib/NEvent/NEvent.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { pool } from '../../nostr'
+  import type { NostrEvent } from 'nostr-tools/core'
+
+  export let id: string
+  export let nevent: string
+  export let relays: string[]
+
+  let event: any = null
+
+  onMount(async () => {
+    const subscription = pool.subscribeMany(relays, [{ ids: [id] }], {
+      onevent(e: NostrEvent) {
+        event = e
+      },
+    })
+
+    return () => subscription.close()
+  })
+</script>
+
+<span
+  data-tooltip={`
+Id: ${id}
+.
+Relays: ${JSON.stringify(relays)}
+`}>
+  {#if event}
+    <a href="#">{nevent.replace('nostr:', '').slice(0, 12)}: {event.content.slice(0, 20)}...</a>
+  {:else}
+    <span class="text-gray-600">loading</span>
+  {/if}
+</span>

examples/svelte/src/lib/NEvent/NEventEditor.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { NodeViewProps, NodeViewRendererProps } from '@tiptap/core'
+  import type { NEventAttributes } from 'nostr-editor'
+  import { NodeViewWrapper, NodeViewContent } from 'svelte-tiptap'
+  import NEvent from './NEvent.svelte'
+
+  export let node: NodeViewProps['node']
+
+  $: attrs = node.attrs as NEventAttributes
+</script>
+
+<NodeViewWrapper data-type="nevent" as="span">
+  <NEvent id={attrs.id} relays={attrs.relays} nevent={attrs.nevent} />
+</NodeViewWrapper>

package.json

@@ -9,7 +9,8 @@
     "url": "https://github.com/cesardeazevedo/nostr-editor"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "./dist/nostr-editor.umd.cjs",
   "module": "./dist/nostr-editor.js",
@@ -27,7 +28,8 @@
     "type-check": "tsc --noEmit",
     "format": "prettier --write .",
     "test": "vitest",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "npm run build"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",

src/extensions/LinkExtension.ts

@@ -1,8 +1,10 @@
 import type { PasteRuleMatch } from '@tiptap/core'
-import { Link } from '@tiptap/extension-link'
+import { Link, type LinkOptions } from '@tiptap/extension-link'
 import * as linkifyjs from 'linkifyjs'
 import { getLinkKind } from '../helpers/utils'
 
+export {LinkOptions}
+
 export type LinkAttributes = {
   href: string
 }

src/extensions/NSecRejectExtension.ts

@@ -2,11 +2,11 @@ import { Extension } from '@tiptap/core'
 
 const NSEC_REGEX = /(nsec1[0-9a-z]+)/g
 
-export type NSecRejectionOptions = {
+export type NSecRejectOptions = {
   onError?: (props: unknown) => void
 }
 
-export const NSecRejectExtension = Extension.create<NSecRejectionOptions>({
+export const NSecRejectExtension = Extension.create<NSecRejectOptions>({
   name: 'nsecReject',
 
   addOptions() {

src/extensions/NostrExtension.ts

@@ -17,7 +17,7 @@ import type { NEventAttributes } from './NEventExtension'
 import { NEventExtension } from './NEventExtension'
 import type { NProfileAttributes } from './NProfileExtension'
 import { NProfileExtension } from './NProfileExtension'
-import { NSecRejectExtension, type NSecRejectionOptions } from './NSecRejectExtension'
+import { NSecRejectExtension, type NSecRejectOptions } from './NSecRejectExtension'
 import type { TagAttributes } from './TagExtension'
 import { TagExtension } from './TagExtension'
 import { TweetExtension } from './TweetExtension'
@@ -44,7 +44,7 @@ export interface NostrOptions {
     video?: Partial<NodeConfig>
     tag?: Partial<MarkConfig>
     bolt11?: Partial<NodeConfig>
-    nsecReject?: Partial<NSecRejectionOptions>
+    nsecReject?: Partial<NSecRejectOptions>
     fileUpload?: Partial<FileUploadOptions>
   }
   nprofile?: boolean
@@ -57,7 +57,7 @@ export interface NostrOptions {
   image?: Partial<ImageOptions> | false
   video?: Partial<NodeConfig> | false
   youtube?: Partial<YoutubeOptions> | false
-  nsecReject?: Partial<NSecRejectionOptions> | false
+  nsecReject?: Partial<NSecRejectOptions> | false
   fileUpload?: Partial<FileUploadOptions> | false
 }
 

src/index.ts

@@ -1,12 +1,12 @@
 export { Bolt11Extension, type Bolt11Attributes } from './extensions/Bolt11Extension'
 export { FileUploadExtension, type FileUploadOptions, type FileUploadStorage } from './extensions/FileUploadExtension'
-export { ImageExtension, type ImageAttributes } from './extensions/ImageExtension'
-export { LinkExtension, type LinkAttributes } from './extensions/LinkExtension'
+export { ImageExtension, type ImageOptions, type ImageAttributes } from './extensions/ImageExtension'
+export { LinkExtension, type LinkOptions, type LinkAttributes } from './extensions/LinkExtension'
 export { NAddrExtension, type NAddrAttributes } from './extensions/NAddrExtension'
 export { NEventExtension, type NEventAttributes } from './extensions/NEventExtension'
 export { NostrExtension, type NostrOptions, type NostrStorage } from './extensions/NostrExtension'
 export { NProfileExtension, type NProfileAttributes } from './extensions/NProfileExtension'
-export { NSecRejectExtension, type NSecRejectionOptions } from './extensions/NSecRejectExtension'
+export { NSecRejectExtension, type NSecRejectOptions } from './extensions/NSecRejectExtension'
 export { TagExtension, type TagAttributes } from './extensions/TagExtension'
 export { TweetExtension, type TweetAttributes } from './extensions/TweetExtension'
 export { VideoExtension, type VideoAttributes } from './extensions/VideoExtension'