Add topic extension

src/lib/tiptap/Suggestions.ts

@@ -2,136 +2,105 @@ 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) =>
-  Node.create<SuggestionsOptions>({
-    name,
-    atom: true,
-    inline: true,
-    group: 'inline',
-    selectable: false,
-    addKeyboardShortcuts() {
+export const createSuggestions = (options: SuggestionsOptions) =>
+  Suggestion({
+    char: options.char,
+    editor: options.editor,
+    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
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter
+      const overrideSpace = nodeAfter?.text?.startsWith(' ')
+
+      if (overrideSpace) {
+        range.to += 1
+      }
+
+      editor
+        .chain()
+        .focus()
+        .insertContentAt(range, [
+          {type: options.name, attrs: props},
+          {type: 'text', text: ' '},
+        ])
+        .run()
+
+      window.getSelection()?.collapseToEnd()
+    },
+    allow: ({ state, range }) => {
+      const $from = state.doc.resolve(range.from)
+      const type = state.schema.nodes[options.name]
+
+      return !!$from.parent.type.contentMatch.matchType(type)
+    },
+    render: () => {
+      let popover: Instance[]
+      let target: HTMLElement
+      let suggestions: SvelteComponent
+
+      const mapProps = (props: any) => ({
+        term: props.query,
+        search: options.search,
+        allowCreate: options.allowCreate,
+        component: options.suggestionComponent,
+        select: (value: string) => options.select(value, props),
+      })
+
       return {
-        Backspace: () => this.editor.commands.command(({ tr, state }) => {
-          let isMention = false
-          const { selection } = state
-          const { empty, anchor } = selection
+        onStart: props => {
+          target = document.createElement("div")
 
-          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
-            }
+          popover = tippy('body', {
+            getReferenceClientRect: props.clientRect as any,
+            appendTo: document.body,
+            content: target,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
           })
 
-          return isMention
-        }),
+          suggestions = new options.suggestionsComponent({target, props: mapProps(props)})
+        },
+        onUpdate: props => {
+          suggestions.$set(mapProps(props))
+
+          if (props.clientRect) {
+            popover[0].setProps({
+              getReferenceClientRect: props.clientRect as any,
+            })
+          }
+        },
+        onKeyDown: props => {
+          if (props.event.key === "Escape") {
+            popover[0].hide()
+
+            return true
+          }
+
+          return Boolean(suggestions.onKeyDown?.(props.event))
+        },
+        onExit: () => {
+          popover[0].destroy()
+          suggestions.$destroy()
+        },
       }
     },
-    addProseMirrorPlugins() {
-      return [
-        Suggestion({
-          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
-            const nodeAfter = editor.view.state.selection.$to.nodeAfter
-            const overrideSpace = nodeAfter?.text?.startsWith(' ')
-
-            if (overrideSpace) {
-              range.to += 1
-            }
-
-            editor
-              .chain()
-              .focus()
-              .insertContentAt(range, [
-                {type: this.name, attrs: props},
-                {type: 'text', text: ' '},
-              ])
-              .run()
-
-            window.getSelection()?.collapseToEnd()
-          },
-          allow: ({ state, range }) => {
-            const $from = state.doc.resolve(range.from)
-            const type = state.schema.nodes[this.name]
-            const allow = !!$from.parent.type.contentMatch.matchType(type)
-
-            return allow
-          },
-          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 => {
-                target = document.createElement("div")
-
-                popover = tippy('body', {
-                  getReferenceClientRect: props.clientRect as any,
-                  appendTo: document.body,
-                  content: target,
-                  showOnCreate: true,
-                  interactive: true,
-                  trigger: "manual",
-                  placement: "bottom-start",
-                })
-
-                suggestions = new this.options.suggestionsComponent({target, props: mapProps(props)})
-              },
-              onUpdate: props => {
-                suggestions.$set(mapProps(props))
-
-                if (props.clientRect) {
-                  popover[0].setProps({
-                    getReferenceClientRect: props.clientRect as any,
-                  })
-                }
-              },
-              onKeyDown: props => {
-                if (props.event.key === "Escape") {
-                  popover[0].hide()
-
-                  return true
-                }
-
-                return Boolean(suggestions.onKeyDown?.(props.event))
-              },
-              onExit: () => {
-                popover[0].destroy()
-                suggestions.$destroy()
-              },
-            }
-          },
-        }),
-      ]
-    },
   })

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
+}