Add topic extension

src/app/components/GroupCompose.svelte

@@ -5,13 +5,14 @@
   import {Extension} from '@tiptap/core'
   import StarterKit from '@tiptap/starter-kit'
   import HardBreakExtension from '@tiptap/extension-hard-break'
-  import {NostrExtension} from 'nostr-editor'
+  import {Bolt11Extension, NProfileExtension, NEventExtension, NAddrExtension, ImageExtension, VideoExtension, FileUploadExtension} from 'nostr-editor'
   import type {StampedEvent} from '@welshman/util'
   import {createEvent, CHAT_MESSAGE} from '@welshman/util'
-  import {LinkExtension, createSuggestions, findNodes} from '@lib/tiptap'
+  import {LinkExtension, TopicExtension, 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 GroupComposeTopic from '@app/components/GroupComposeTopic.svelte'
   import GroupComposeEvent from '@app/components/GroupComposeEvent.svelte'
   import GroupComposeImage from '@app/components/GroupComposeImage.svelte'
   import GroupComposeBolt11 from '@app/components/GroupComposeBolt11.svelte'
@@ -35,11 +36,7 @@
 
   const sendMessage = () => {
     console.log($editor.getJSON())
-    console.log(findNodes($editor.getJSON(), 'mention'))
+    $editor.chain().clearContent().run()
-    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: [],
@@ -66,10 +63,15 @@
           addKeyboardShortcuts() {
             return {
               'Shift-Enter': () => this.editor.commands.setHardBreak(),
-              'Mod-Enter': () => {
+              'Mod-Enter': () => this.editor.commands.setHardBreak(),
+              'Enter': () => {
+                if (this.editor.getText().trim()) {
                   uploadFiles()
 
                   return true
+                }
+
+                return false
               },
             }
           }
@@ -77,21 +79,49 @@
         LinkExtension.extend({
           addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
         }),
-        NostrExtension.configure({
+        Bolt11Extension.extend({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)}),
-          extend: {
+        NProfileExtension.extend({
-            bolt11: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeBolt11)}),
+          addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
-            nprofile: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention)}),
+          addProseMirrorPlugins() {
-            nevent: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeEvent)}),
+            return [
-            naddr: asInline({addNodeView: () =>  SvelteNodeViewRenderer(GroupComposeEvent)}),
+              createSuggestions({
-            image: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeImage)}),
+                char: '@',
-            video: asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeVideo)}),
+                name: 'nprofile',
+                editor: this.editor,
+                search: searchProfiles,
+                select: (pubkey: string, props: any) => props.command({pubkey}),
+                suggestionComponent: GroupComposeProfileSuggestion,
+                suggestionsComponent: GroupComposeSuggestions,
+              }),
+            ]
+          }
+        }),
+        NEventExtension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeEvent)})),
+        NAddrExtension.extend(asInline({addNodeView: () =>  SvelteNodeViewRenderer(GroupComposeEvent)})),
+        ImageExtension
+          .extend(asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeImage)}))
+          .configure({defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'}),
+        VideoExtension
+          .extend(asInline({addNodeView: () => SvelteNodeViewRenderer(GroupComposeVideo)}))
+          .configure({defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'}),
+        TopicExtension.extend({
+          addNodeView: () => SvelteNodeViewRenderer(GroupComposeTopic),
+          addProseMirrorPlugins() {
+            return [
+              createSuggestions({
+                char: '#',
+                name: 'topic',
+                editor: this.editor,
+                search: searchTopics,
+                select: (name: string, props: any) => props.command({name}),
+                allowCreate: true,
+                suggestionComponent: GroupComposeTopicSuggestion,
+                suggestionsComponent: GroupComposeSuggestions,
+              }),
+            ]
           },
-          link: false,
+        }),
-          tweet: false,
+        FileUploadExtension.configure({
-          youtube: false,
-          video: {defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'},
-          image: {defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'},
-          fileUpload: {
           immediateUpload: false,
           sign: (event: StampedEvent) => {
             uploading = true
@@ -102,27 +132,6 @@
             uploading = false
             sendMessage()
           },
-          },
-        }),
-        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: '',

src/app/components/GroupComposeSuggestions.svelte

@@ -11,6 +11,7 @@
   export let select
   export let component
   export let loading = false
+  export let allowCreate = false
 
   let index = 0
   let element: Element
@@ -28,13 +29,20 @@
   }
 
   export const onKeyDown = (e: any) => {
-    if (e.code === "Enter") {
+    if (['Enter', 'Tab'].includes(e.code)) {
       const value = items[index]
 
       if (value) {
         select(value)
+        return true
+      } else if (term && allowCreate) {
+        select(term)
+        return true
+      }
     }
 
+    if (e.code === 'Space' && term && allowCreate) {
+      select(term)
       return true
     }
 
@@ -52,12 +60,20 @@
   }
 </script>
 
-{#if items.length > 0}
+{#if items.length > 0 || (term && allowCreate)}
   <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 shadow-xl">
+    {#if term && allowCreate}
+      <button
+        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"
+        on:mousedown|preventDefault
+        on:click|preventDefault={() => select(term)}>
+        Use "<svelte:component this={component} value={term} />"
+      </button>
+    {/if}
     {#each items as value, i (value)}
       <button
         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"

src/app/components/GroupComposeTopic.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 text-primary">
+  #<span class="underline">{node.attrs.name}</span>
+</NodeViewWrapper>

src/app/components/GroupComposeTopicSuggestion.svelte

@@ -2,6 +2,4 @@
   export let value
 </script>
 
-<div>
+#{value}
-  #{value}
-</div>

src/lib/tiptap/Suggestions.ts

@@ -2,55 +2,27 @@ 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 type {Editor} from '@tiptap/core'
 import {PluginKey} from '@tiptap/pm/state'
 import Suggestion from '@tiptap/suggestion'
 import type {Search} from '@lib/util'
 
 export type SuggestionsOptions = {
   char: string,
+  name: string,
+  editor: Editor,
   search: Readable<Search<any, any>>
   select: (value: any, props: any) => void
+  allowCreate?: boolean,
   suggestionComponent: ComponentType
   suggestionsComponent: ComponentType
 }
 
-export const createSuggestions = (name: string) =>
+export const createSuggestions = (options: SuggestionsOptions) =>
-  Node.create<SuggestionsOptions>({
-    name,
-    atom: true,
-    inline: true,
-    group: 'inline',
-    selectable: false,
-    addKeyboardShortcuts() {
-      return {
-        Backspace: () => this.editor.commands.command(({ tr, state }) => {
-          let isMention = false
-          const { selection } = state
-          const { empty, anchor } = selection
-
-          if (!empty) {
-            return false
-          }
-
-          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
-            if (node.type.name === this.name) {
-              isMention = true
-              tr.insertText('', pos, pos + node.nodeSize)
-
-              return false
-            }
-          })
-
-          return isMention
-        }),
-      }
-    },
-    addProseMirrorPlugins() {
-      return [
   Suggestion({
-          pluginKey: new PluginKey(name),
+    char: options.char,
-          editor: this.editor,
+    editor: options.editor,
-          char: this.options.char,
+    pluginKey: new PluginKey(`suggest-${options.name}`),
     command: ({editor, range, props}) => {
       // increase range.to by one when the next node is of type "text"
       // and starts with a space character
@@ -65,7 +37,7 @@ export const createSuggestions = (name: string) =>
         .chain()
         .focus()
         .insertContentAt(range, [
-                {type: this.name, attrs: props},
+          {type: options.name, attrs: props},
           {type: 'text', text: ' '},
         ])
         .run()
@@ -74,10 +46,9 @@ export const createSuggestions = (name: string) =>
     },
     allow: ({ state, range }) => {
       const $from = state.doc.resolve(range.from)
-            const type = state.schema.nodes[this.name]
+      const type = state.schema.nodes[options.name]
-            const allow = !!$from.parent.type.contentMatch.matchType(type)
 
-            return allow
+      return !!$from.parent.type.contentMatch.matchType(type)
     },
     render: () => {
       let popover: Instance[]
@@ -86,9 +57,10 @@ export const createSuggestions = (name: string) =>
 
       const mapProps = (props: any) => ({
         term: props.query,
-              search: this.options.search,
+        search: options.search,
-              component: this.options.suggestionComponent,
+        allowCreate: options.allowCreate,
-              select: (value: string) => this.options.select(value, props),
+        component: options.suggestionComponent,
+        select: (value: string) => options.select(value, props),
       })
 
       return {
@@ -105,7 +77,7 @@ export const createSuggestions = (name: string) =>
             placement: "bottom-start",
           })
 
-                suggestions = new this.options.suggestionsComponent({target, props: mapProps(props)})
+          suggestions = new options.suggestionsComponent({target, props: mapProps(props)})
         },
         onUpdate: props => {
           suggestions.$set(mapProps(props))
@@ -131,7 +103,4 @@ export const createSuggestions = (name: string) =>
         },
       }
     },
-        }),
-      ]
-    },
   })

src/lib/tiptap/TopicExtension.ts

@@ -0,0 +1,81 @@
+import {Node, nodePasteRule} from '@tiptap/core'
+import type {Node as ProsemirrorNode} from '@tiptap/pm/model'
+import type {MarkdownSerializerState} from 'prosemirror-markdown'
+import {createPasteRuleMatch} from '@lib/tiptap/util'
+
+export const TOPIC_REGEX = /(#[^\s]+)/g
+
+export interface TopicAttributes {
+  name: string
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    topic: {
+      insertTopic: (options: { name: string }) => ReturnType
+    }
+  }
+}
+
+export const TopicExtension = Node.create({
+  atom: true,
+  name: 'topic',
+  group: 'inline',
+  inline: true,
+  selectable: true,
+  draggable: true,
+  priority: 1000,
+  addAttributes() {
+    return {
+      name: { default: null },
+    }
+  },
+  renderText(props) {
+    return "#" + props.node.attrs.name
+  },
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state: MarkdownSerializerState, node: ProsemirrorNode) {
+          state.write(node.attrs.name)
+        },
+        parse: {},
+      },
+    }
+  },
+  addCommands() {
+    return {
+      insertTopic:
+        ({ name }) =>
+        ({ commands }) => {
+          return commands.insertContent(
+            { type: this.name, attrs: { name } },
+            {
+              updateSelection: false,
+            },
+          )
+        },
+    }
+  },
+  addPasteRules() {
+    return [
+      nodePasteRule({
+        type: this.type,
+        getAttributes: (match) => match.data,
+        find: (text) => {
+          const matches = []
+
+          for (const match of text.matchAll(TOPIC_REGEX)) {
+            try {
+              matches.push(createPasteRuleMatch(match, { name: match[0] }))
+            } catch (e) {
+              continue
+            }
+          }
+
+          return matches
+        },
+      }),
+    ]
+  },
+})

src/lib/tiptap/index.ts

@@ -1,20 +1,4 @@
-import type {JSONContent} from '@tiptap/core'
+export * from '@lib/tiptap/util'
-
 export {createSuggestions} from '@lib/tiptap/Suggestions'
+export {TopicExtension} from '@lib/tiptap/TopicExtension'
 export {LinkExtension} from '@lib/tiptap/LinkExtension'
-
-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/tiptap/util.ts

@@ -0,0 +1,22 @@
+import type {JSONContent, PasteRuleMatch} from '@tiptap/core'
+
+export const createPasteRuleMatch = <T extends Record<string, unknown>>(
+  match: RegExpMatchArray,
+  data: T,
+): PasteRuleMatch => ({ index: match.index!, replaceWith: match[2], text: match[0], match, data })
+
+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/routes/spaces/[nom]/[[room]]/+page.svelte

@@ -60,7 +60,7 @@
 </script>
 
 <div class="relative flex h-screen flex-col">
-  <div class="relative z-feature px-2 pt-4">
+  <div class="relative z-feature mx-2 pt-4 rounded-xl">
     <div class="flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
       <div class="flex items-center gap-2">
         <Icon icon="hashtag" />
@@ -68,7 +68,7 @@
       </div>
     </div>
   </div>
-  <div class="flex flex-grow flex-col-reverse overflow-auto">
+  <div class="flex flex-grow flex-col-reverse overflow-auto -mt-2 py-2">
     {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
         <div class="flex items-center gap-2 p-2 text-xs opacity-50">