Add nostr-editor

src/app/components/GroupCompose.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import type {Readable} from 'svelte/store'
+  import {createEditor, type Editor, EditorContent, SvelteNodeViewRenderer} from 'svelte-tiptap'
+  import StarterKit from '@tiptap/starter-kit'
+  import {NostrExtension} from 'nostr-editor'
+  import type {StampedEvent} from '@welshman/util'
+  import {LinkExtension} from '@lib/tiptap'
+  import GroupComposeMention from '@app/components/GroupComposeMention.svelte'
+  import GroupComposeEvent from '@app/components/GroupComposeEvent.svelte'
+  import GroupComposeImage from '@app/components/GroupComposeImage.svelte'
+  import GroupComposeBolt11 from '@app/components/GroupComposeBolt11.svelte'
+  import GroupComposeVideo from '@app/components/GroupComposeVideo.svelte'
+  import GroupComposeLink from '@app/components/GroupComposeLink.svelte'
+  import {signer} from '@app/base'
+
+  let editor: Readable<Editor>
+
+  const asInline = (extend: Record<string, any>) =>
+    ({inline: true, group: 'inline', draggable: false, ...extend})
+
+  onMount(() => {
+    editor = createEditor({
+      extensions: [
+        StarterKit.configure({
+          blockquote: false,
+          bold: false,
+          bulletList: false,
+          heading: false,
+          horizontalRule: false,
+          italic: false,
+          listItem: false,
+          orderedList: false,
+          strike: false,
+        }),
+        LinkExtension.extend({
+          addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
+        }),
+        NostrExtension.configure({
+          extend: {
+            bolt11: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)}),
+            nprofile: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention)}),
+            nevent: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeEvent)}),
+            naddr: asInline({addNodeView: () =>  SvelteNodeViewRenderer(GroupComposeEvent)}),
+            image: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeImage)}),
+            video: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeVideo)}),
+          },
+          link: false,
+          tweet: false,
+          youtube: false,
+          video: {defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'},
+          image: {defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'},
+          fileUpload: {
+            immediateUpload: false,
+            sign: async (event: StampedEvent) => $signer!.sign(event),
+            onDrop() {
+              //  setPending(true)
+            },
+            onComplete(currentEditor: Editor) {
+              console.log('Upload Completed', currentEditor.getText())
+              //  setPending(false)
+            },
+          },
+        }),
+      ],
+      content: '',
+      onUpdate: () => {
+        //  console.log('update', $editor.getJSON(), $editor.getText())
+      },
+    })
+  })
+</script>
+
+<div class="relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl">
+  <EditorContent editor={$editor} />
+</div>

src/app/components/GroupComposeBolt11.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type {NodeViewProps} from '@tiptap/core'
+  import {NodeViewWrapper} from 'svelte-tiptap'
+
+  export let node: NodeViewProps['node']
+</script>
+
+<NodeViewWrapper class="inline link-content">
+  {node.attrs.lnbc.slice(0, 16)}...
+</NodeViewWrapper>

src/app/components/GroupComposeEvent.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type {NodeViewProps} from '@tiptap/core'
+  import {NodeViewWrapper} from 'svelte-tiptap'
+  import {ellipsize} from '@welshman/lib'
+  import {type TrustedEvent, fromNostrURI, Address} from '@welshman/util'
+  import Link from '@lib/components/Link.svelte'
+  import {deriveEvent} from '@app/state'
+
+  export let node: NodeViewProps['node']
+
+  const displayEvent = (e: TrustedEvent) =>
+    e?.content.length > 1 ? ellipsize(e.content, 50) : fromNostrURI(nevent || naddr).slice(0, 16) + '...'
+
+  $: ({identifier, pubkey, kind, id, relays = [], nevent, naddr} = node.attrs)
+  $: event = deriveEvent(id || new Address(kind, pubkey, identifier).toString(), relays)
+</script>
+
+<NodeViewWrapper class="inline">
+  <Link external href="https://njump.me/{node.attrs.nevent}" class="link-content">
+    {displayEvent($event)}
+  </Link>
+</NodeViewWrapper>

src/app/components/GroupComposeImage.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import type {NodeViewProps} from '@tiptap/core'
+  import {NodeViewWrapper} from 'svelte-tiptap'
+  import Icon from '@lib/components/Icon.svelte'
+
+  export let node: NodeViewProps['node']
+</script>
+
+<NodeViewWrapper class="inline link-content">
+  <Icon icon="paperclip" size={3} class="inline-block translate-y-px" />
+  {node.attrs.file.name}
+</NodeViewWrapper>

src/app/components/GroupComposeLink.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import type {NodeViewProps} from '@tiptap/core'
+  import {NodeViewWrapper} from 'svelte-tiptap'
+  import {stripProtocol} from '@welshman/lib'
+  import Icon from '@lib/components/Icon.svelte'
+  import Link from '@lib/components/Link.svelte'
+
+  export let node: NodeViewProps['node']
+</script>
+
+<NodeViewWrapper class="inline">
+  <Link external href={node.attrs.url} class="link-content">
+    <Icon icon="link-round" size={3} class="inline-block translate-y-px" />
+    {stripProtocol(node.attrs.url)}
+  </Link>
+</NodeViewWrapper>
+

src/app/components/GroupComposeMention.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import type {NodeViewProps} from '@tiptap/core'
+  import {NodeViewWrapper} from 'svelte-tiptap'
+  import {displayProfile} from '@welshman/util'
+  import Link from '@lib/components/Link.svelte'
+  import {deriveProfile} from '@app/state'
+
+  export let node: NodeViewProps['node']
+
+  $: profile = deriveProfile(node.attrs.pubkey, node.attrs.relays)
+</script>
+
+<NodeViewWrapper class="inline">
+  <Link external href="https://njump.me/{node.attrs.nprofile}">@{displayProfile($profile)}</Link>
+</NodeViewWrapper>

src/app/components/GroupComposeVideo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import type {NodeViewProps} from '@tiptap/core'
+  import {NodeViewWrapper} from 'svelte-tiptap'
+  import Icon from '@lib/components/Icon.svelte'
+
+  export let node: NodeViewProps['node']
+</script>
+
+<NodeViewWrapper class="inline link-content">
+  <Icon icon="paperclip" size={3} class="inline-block translate-y-px" />
+  {node.attrs.file.name}
+</NodeViewWrapper>

src/app/components/PrimaryNav.svelte

@@ -37,7 +37,7 @@
   }
 </script>
 
-<div class="relative w-14 bg-base-100" bind:this={element}>
+<div class="relative w-14 bg-base-100 flex-shrink-0" bind:this={element}>
   <div
     class="absolute z-nav-active ml-2 h-[144px] w-12 bg-base-300"
     style={`top: ${$activeOffset}px`} />