Work on compose

src/app.css

@@ -84,8 +84,18 @@
   @apply shadow-[0_20px_25px_-5px_rgb(0,0,0,0.1)_0_8px_10px_-6px_rgb(0,0,0,0.1)];
 }
 
+/* tiptap */
+
 .tiptap {
-  @apply rounded-box bg-base-100 px-4 p-2;
+  @apply rounded-box bg-base-300 px-4 p-2 max-h-[350px] overflow-y-auto;
+}
+
+.tiptap pre code {
+  @apply link-content w-full block;
+}
+
+.tiptap p code {
+  @apply link-content;
 }
 
 .link-content {

src/app/components/GroupCompose.svelte

@@ -2,10 +2,15 @@
   import {onMount} from 'svelte'
   import type {Readable} from 'svelte/store'
   import {createEditor, type Editor, EditorContent, SvelteNodeViewRenderer} from 'svelte-tiptap'
+  import {Extension} from '@tiptap/core'
   import StarterKit from '@tiptap/starter-kit'
+  import HardBreakExtension from '@tiptap/extension-hard-break'
   import {NostrExtension} from 'nostr-editor'
   import type {StampedEvent} from '@welshman/util'
-  import {LinkExtension, Mention, Topic} from '@lib/tiptap'
+  import {createEvent, CHAT_MESSAGE} from '@welshman/util'
+  import {LinkExtension, createSuggestions, findNodes} from '@lib/tiptap'
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
   import GroupComposeMention from '@app/components/GroupComposeMention.svelte'
   import GroupComposeEvent from '@app/components/GroupComposeEvent.svelte'
   import GroupComposeImage from '@app/components/GroupComposeImage.svelte'
@@ -19,12 +24,31 @@
   import {searchProfiles, searchTopics, displayProfileByPubkey} from '@app/state'
 
   let editor: Readable<Editor>
+  let uploading = false
 
   const asInline = (extend: Record<string, any>) =>
     ({inline: true, group: 'inline', ...extend})
 
+  const addFile = () => $editor.chain().selectFiles().run()
+
+  const uploadFiles = () => $editor.chain().uploadFiles().run()
+
+  const sendMessage = () => {
+    console.log($editor.getJSON())
+    console.log(findNodes($editor.getJSON(), 'mention'))
+    console.log(findNodes($editor.getJSON(), 'nprofile'))
+    console.log(findNodes($editor.getJSON(), 'nevent'))
+    console.log(findNodes($editor.getJSON(), 'naddr'))
+    console.log(findNodes($editor.getJSON(), 'image'))
+    createEvent(CHAT_MESSAGE, {
+      content: '',
+      tags: [],
+    })
+  }
+
   onMount(() => {
     editor = createEditor({
+      autofocus: true,
       extensions: [
         StarterKit.configure({
           blockquote: false,
@@ -36,6 +60,19 @@
           listItem: false,
           orderedList: false,
           strike: false,
+          hardBreak: false,
+        }),
+        HardBreakExtension.extend({
+          addKeyboardShortcuts() {
+            return {
+              'Shift-Enter': () => this.editor.commands.setHardBreak(),
+              'Mod-Enter': () => {
+                uploadFiles()
+
+                return true
+              },
+            }
+          }
         }),
         LinkExtension.extend({
           addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
@@ -56,70 +93,56 @@
           image: {defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'},
           fileUpload: {
             immediateUpload: false,
-            sign: async (event: StampedEvent) => $signer!.sign(event),
-            onDrop() {
-              //  setPending(true)
+            sign: (event: StampedEvent) => {
+              uploading = true
+
+              return $signer!.sign(event)
             },
-            onComplete(currentEditor: any) {
-              console.log('Upload Completed', currentEditor.getText())
-              //  setPending(false)
+            onComplete: () => {
+              uploading = false
+              sendMessage()
             },
           },
         }),
-        Mention.configure(
-          (() => {
-            let suggestions: GroupComposeSuggestions
-
-            const mapProps = (props: any) => ({
-              term: props.query,
-              select: (id: string) => props.command({id}),
-              search: searchProfiles,
-              component: GroupComposeProfileSuggestion,
-            })
-
-            return {
-              getLabel: displayProfileByPubkey,
-              tippyOptions: {arrow: false, theme: "transparent"},
-              onStart: ({target, props}) => {
-                suggestions = new GroupComposeSuggestions({target, props: mapProps(props)})
-              },
-              onUpdate: ({props}) => suggestions.$set(mapProps(props)),
-              onKeyDown: ({event}) => suggestions.onKeyDown(event),
-              onExit: () => suggestions.$destroy(),
-            }
-          })(),
-        ),
-        Topic.configure(
-          (() => {
-            let suggestions: GroupComposeSuggestions
-
-            const mapProps = (props: any) => ({
-              term: props.query,
-              select: (id: string) => props.command({id}),
-              search: searchTopics,
-              component: GroupComposeTopicSuggestion,
-            })
-
-            return {
-              tippyOptions: {arrow: false, theme: "transparent"},
-              onStart: ({target, props}) => {
-                suggestions = new GroupComposeSuggestions({target, props: mapProps(props)})
-              },
-              onUpdate: ({props}) => suggestions.$set(mapProps(props)),
-              onKeyDown: ({event}) => suggestions.onKeyDown(event),
-              onExit: () => suggestions.$destroy(),
-            }
-          })(),
-        ),
+        createSuggestions('mention').configure({
+          char: '@',
+          search: searchProfiles,
+          select: (pubkey: string, props: any) => props.command({pubkey}),
+          suggestionComponent: GroupComposeProfileSuggestion,
+          suggestionsComponent: GroupComposeSuggestions,
+        }).extend({
+          addAttributes: () => ({pubkey: {default: null}}),
+          addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
+        }),
+        createSuggestions('topic').configure({
+          char: '#',
+          search: searchTopics,
+          select: (name: string, props: any) => props.command({name}),
+          suggestionComponent: GroupComposeTopicSuggestion,
+          suggestionsComponent: GroupComposeSuggestions,
+        }).extend({
+          addAttributes: () => ({name: {default: null}}),
+          addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
+        }),
       ],
       content: '',
       onUpdate: () => {
         //  console.log('update', $editor.getJSON(), $editor.getText())
       },
     })
+    console.log($editor)
   })
 </script>
 
-<div class="relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl">
-  <EditorContent editor={$editor} />
+<div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-neutral">
+  <Button on:click={addFile} class="bg-base-300 rounded-box w-10 h-10 center">
+    {#if uploading}
+      <span class="loading loading-spinner loading-xs"></span>
+    {:else}
+      <Icon icon="gallery-send" />
+    {/if}
+  </Button>
+  <div class="flex-grow">
+    <EditorContent editor={$editor} />
+  </div>
 </div>

src/app/components/GroupComposeImage.svelte

@@ -5,9 +5,10 @@
   import Icon from '@lib/components/Icon.svelte'
 
   export let node: NodeViewProps['node']
+  export let selected: NodeViewProps['selected']
 </script>
 
-<NodeViewWrapper class="inline link-content">
+<NodeViewWrapper class={cx("inline link-content", {'link-content-selected': selected})}>
   <Icon icon="paperclip" size={3} class="inline-block translate-y-px" />
   {node.attrs.file.name}
 </NodeViewWrapper>

src/app/components/GroupComposeMention.svelte

@@ -12,5 +12,5 @@
 </script>
 
 <NodeViewWrapper class="inline">
-  <Link external href="https://njump.me/{node.attrs.nprofile}">@{displayProfile($profile)}</Link>
+  <span class="text-primary">@</span><Link external href="https://njump.me/{node.attrs.nprofile}">{displayProfile($profile)}</Link>
 </NodeViewWrapper>

src/app/components/GroupComposeProfileSuggestion.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import {deriveProfileDisplay} from '@app/state'
+
   export let value
+
+  const display = deriveProfileDisplay(value)
 </script>
 
-<div>
-  @{value}
-</div>
+@{$display}

src/app/components/GroupComposeSuggestions.svelte

@@ -4,6 +4,7 @@
   import {throttle} from "throttle-debounce"
   import {slide} from "svelte/transition"
   import {clamp} from "@welshman/lib"
+  import {theme} from '@app/theme'
 
   export let term
   export let search
@@ -53,16 +54,15 @@
 
 {#if items.length > 0}
   <div
+    data-theme={$theme}
     bind:this={element}
     transition:slide|local={{duration: 100}}
-    class="mt-2 flex max-h-[350px] flex-col overflow-y-auto overflow-x-hidden border border-solid border-neutral-600">
+    class="mt-2 flex max-h-[350px] flex-col overflow-y-auto overflow-x-hidden shadow-xl">
     {#each items as value, i (value)}
       <button
-        class="cursor-pointer border-l-2 border-solid px-4 py-2 text-left text-neutral-100 hover:border-accent hover:bg-tinted-700"
-        class:bg-neutral-800={index !== i}
-        class:bg-tinted-700={index === i}
-        class:border-transparent={index !== i}
-        class:border-accent={index === i}
+        class="cursor-pointer px-4 py-2 text-left hover:bg-primary hover:text-primary-content transition-colors white-space-nowrap overflow-hidden text-ellipsis min-w-0"
+        class:bg-primary={index === i}
+        class:text-primary-content={index === i}
         on:mousedown|preventDefault
         on:click|preventDefault={() => select(value)}>
         <svelte:component this={component} {value} />

src/lib/tiptap/LinkExtension.ts

@@ -22,34 +22,24 @@ declare module '@tiptap/core' {
 }
 
 export const LinkExtension = Node.create({
-  name: 'link',
-
-  group: 'inline',
-
   atom: true,
-
+  name: 'link',
+  group: 'inline',
   inline: true,
-
   selectable: true,
-
   draggable: true,
-
   priority: 1000,
-
   addAttributes() {
     return {
       url: { default: null },
     }
   },
-
   renderHTML(props) {
     return ['div', { 'data-url': props.node.attrs.url }]
   },
-
   renderText(props) {
     return props.node.attrs.url
   },
-
   addStorage() {
     return {
       markdown: {
@@ -60,7 +50,6 @@ export const LinkExtension = Node.create({
       },
     }
   },
-
   addCommands() {
     return {
       insertLink:
@@ -75,7 +64,6 @@ export const LinkExtension = Node.create({
         },
     }
   },
-
   addPasteRules() {
     return [
       nodePasteRule({

src/lib/tiptap/Mention.ts

@@ -1,3 +0,0 @@
-import {createPopoverNode} from '@lib/tiptap/common'
-
-export const Mention = createPopoverNode('mention', '@')

src/lib/tiptap/Suggestions.ts

@@ -1,44 +1,26 @@
+import type {SvelteComponent, ComponentType} from 'svelte'
+import type {Readable} from 'svelte/store'
 import tippy, {type Instance} from 'tippy.js'
 import {mergeAttributes, Node} from '@tiptap/core'
 import {PluginKey} from '@tiptap/pm/state'
 import Suggestion from '@tiptap/suggestion'
+import type {Search} from '@lib/util'
 
-export type PopoverOptions = {
-  tippyOptions: Record<string, any>
-  getLabel?: (id: string) => string
-  onStart?: (opts: any) => void
-  onUpdate?: (opts: any) => void
-  onKeyDown?: (opts: any) => boolean | undefined
-  onExit?: () => void
+export type SuggestionsOptions = {
+  char: string,
+  search: Readable<Search<any, any>>
+  select: (value: any, props: any) => void
+  suggestionComponent: ComponentType
+  suggestionsComponent: ComponentType
 }
 
-export const createPopoverNode = (name: string, char: string) => {
-  const pluginKey = new PluginKey(name)
-
-  return Node.create<PopoverOptions>({
+export const createSuggestions = (name: string) =>
+  Node.create<SuggestionsOptions>({
     name,
-    group: 'inline',
-    inline: true,
-    selectable: false,
     atom: true,
-    addAttributes: () => ({
-      id: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-id'),
-        renderHTML: ({id}) => id ? {'data-id': id} : {},
-      },
-    }),
-    parseHTML() {
-      return [{tag: `span[data-type="${this.name}"]`}]
-    },
-    renderHTML({node, HTMLAttributes}) {
-      const label = this.options.getLabel?.(node.attrs.id) || node.attrs.id
-
-      return ['span', mergeAttributes({'data-type': this.name}, HTMLAttributes), `${char}${label}`]
-    },
-    renderText({node}) {
-      return `${char}${this.options.getLabel?.(node.attrs.id) || node.attrs.id}`
-    },
+    inline: true,
+    group: 'inline',
+    selectable: false,
     addKeyboardShortcuts() {
       return {
         Backspace: () => this.editor.commands.command(({ tr, state }) => {
@@ -66,9 +48,9 @@ export const createPopoverNode = (name: string, char: string) => {
     addProseMirrorPlugins() {
       return [
         Suggestion({
-          char,
-          pluginKey,
+          pluginKey: new PluginKey(name),
           editor: this.editor,
+          char: this.options.char,
           command: ({editor, range, props}) => {
             // increase range.to by one when the next node is of type "text"
             // and starts with a space character
@@ -100,6 +82,14 @@ export const createPopoverNode = (name: string, char: string) => {
           render: () => {
             let popover: Instance[]
             let target: HTMLElement
+            let suggestions: SvelteComponent
+
+            const mapProps = (props: any) => ({
+              term: props.query,
+              search: this.options.search,
+              component: this.options.suggestionComponent,
+              select: (value: string) => this.options.select(value, props),
+            })
 
             return {
               onStart: props => {
@@ -113,13 +103,12 @@ export const createPopoverNode = (name: string, char: string) => {
                   interactive: true,
                   trigger: "manual",
                   placement: "bottom-start",
-                  ...this.options.tippyOptions,
                 })
 
-                this.options.onStart?.({target, props})
+                suggestions = new this.options.suggestionsComponent({target, props: mapProps(props)})
               },
               onUpdate: props => {
-                this.options.onUpdate?.({props})
+                suggestions.$set(mapProps(props))
 
                 if (props.clientRect) {
                   popover[0].setProps({
@@ -134,11 +123,11 @@ export const createPopoverNode = (name: string, char: string) => {
                   return true
                 }
 
-                return Boolean(this.options.onKeyDown?.(props))
+                return Boolean(suggestions.onKeyDown?.(props.event))
               },
               onExit: () => {
                 popover[0].destroy()
-                this.options.onExit?.()
+                suggestions.$destroy()
               },
             }
           },
@@ -146,4 +135,3 @@ export const createPopoverNode = (name: string, char: string) => {
       ]
     },
   })
-}

src/lib/tiptap/Topic.ts

@@ -1,3 +0,0 @@
-import {createPopoverNode} from '@lib/tiptap/common'
-
-export const Topic = createPopoverNode('topic', '#')

src/lib/tiptap/index.ts

@@ -1,3 +1,20 @@
+import type {JSONContent} from '@tiptap/core'
+
+export {createSuggestions} from '@lib/tiptap/Suggestions'
 export {LinkExtension} from '@lib/tiptap/LinkExtension'
-export {Mention} from '@lib//tiptap/Mention'
-export {Topic} from '@lib//tiptap/Topic'
+
+export const findNodes = (json: JSONContent, type: string) => {
+  const results: JSONContent[] = []
+
+  for (const node of json.content || []) {
+    if (node.type === type) {
+      results.push(node)
+    }
+
+    for (const result of findNodes(node, type)) {
+      results.push(result)
+    }
+  }
+
+  return results
+}

src/lib/util.ts

@@ -38,7 +38,14 @@ export type SearchOptions<V, T> = {
   sortFn?: (items: FuseResult<T>) => any
 }
 
-export const createSearch = <V, T>(data: T[], opts: SearchOptions<V, T>) => {
+export type Search<V, T> = {
+  getValue: (item: T) => V
+  getOption: (value: V) => T | undefined
+  searchOptions: (term: string) => T[]
+  searchValues: (term: string) => V[]
+}
+
+export const createSearch = <V, T>(data: T[], opts: SearchOptions<V, T>): Search<V, T> => {
   const fuse = new Fuse(data, {...opts.fuseOptions, includeScore: true})
   const map = new Map<V, T>(data.map(item => [opts.getValue(item), item]))