refactoring

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

@@ -31,45 +31,47 @@ export default {
         Paragraph,
         Text,
         Mention.configure({
-          items: query => {
+          suggestionOptions: {
-            return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
+            items: query => {
-          },
+              return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
-          render: () => {
+            },
-            let component
+            render: () => {
-            let popup
+              let component
+              let popup
 
-            return {
+              return {
-              onStart: props => {
+                onStart: props => {
-                component = new VueRenderer(MentionList, {
+                  component = new VueRenderer(MentionList, {
-                  parent: this,
+                    parent: this,
-                  propsData: props,
+                    propsData: props,
-                })
+                  })
 
-                popup = tippy('body', {
+                  popup = tippy('body', {
-                  getReferenceClientRect: () => props.clientRect,
+                    getReferenceClientRect: () => props.clientRect,
-                  appendTo: () => document.body,
+                    appendTo: () => document.body,
-                  content: component.element,
+                    content: component.element,
-                  showOnCreate: true,
+                    showOnCreate: true,
-                  interactive: true,
+                    interactive: true,
-                  trigger: 'manual',
+                    trigger: 'manual',
-                  placement: 'top-start',
+                    placement: 'top-start',
-                })
+                  })
-              },
+                },
-              onUpdate(props) {
+                onUpdate(props) {
-                component.updateProps(props)
+                  component.updateProps(props)
 
-                popup[0].setProps({
+                  popup[0].setProps({
-                  getReferenceClientRect: () => props.clientRect,
+                    getReferenceClientRect: () => props.clientRect,
-                })
+                  })
-              },
+                },
-              onKeyDown(props) {
+                onKeyDown(props) {
-                return component.vm.onKeyDown(props)
+                  return component.vm.onKeyDown(props)
-              },
+                },
-              onExit() {
+                onExit() {
-                popup[0].destroy()
+                  popup[0].destroy()
-                component.destroy()
+                  component.destroy()
-              },
+                },
-            }
+              }
+            },
           },
         }),
       ],

packages/extension-mention/src/mention.ts

@@ -1,13 +1,21 @@
 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>{
-    char: '@',
+    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()