refactoring

docs/src/demos/Nodes/Mention/index.vue

@@ -31,6 +31,7 @@ export default {
         Paragraph,
         Text,
         Mention.configure({
+          suggestionOptions: {
             items: query => {
               return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
             },
@@ -71,6 +72,7 @@ export default {
                 },
               }
             },
+          },
         }),
       ],
       content: `

packages/extension-mention/src/mention.ts

@@ -1,14 +1,22 @@
 import { Node } from '@tiptap/core'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
-export type MentionOptions = Omit<SuggestionOptions, 'editor'>
+export type MentionOptions = {
+  HTMLAttributes: {
+    [key: string]: any,
+  },
+  suggestionOptions: Omit<SuggestionOptions, 'editor'>,
+}
 
 export const Mention = Node.create({
   name: 'mention',
 
   defaultOptions: <MentionOptions>{
+    HTMLAttributes: {},
+    suggestionOptions: {
       char: '@',
     },
+  },
 
   group: 'inline',
 
@@ -27,6 +35,15 @@ export const Mention = Node.create({
             id: element.getAttribute('data-mention'),
           }
         },
+        renderHTML: attributes => {
+          if (!attributes.id) {
+            return {}
+          }
+
+          return {
+            'data-mention': attributes.id,
+          }
+        },
       },
     }
   },
@@ -47,7 +64,7 @@ export const Mention = Node.create({
     return [
       Suggestion({
         editor: this.editor,
-        ...this.options,
+        ...this.options.suggestionOptions,
         command: ({ range, attributes }) => {
           this.editor
             .chain()