fix mention rendering

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

@@ -74,7 +74,7 @@ export default {
       const item = this.items[index]
 
       if (item) {
-        this.command(item)
+        this.command({ id: item })
       }
     },
   },

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

@@ -70,7 +70,7 @@ export default {
         }),
       ],
       content: `
-        <p>text <span data-mention></span></p>
+        <p>text <span data-mention="Philipp"></span></p>
       `,
     })
   },

packages/core/src/commands/replace.ts

@@ -1,11 +1,11 @@
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../helpers/getNodeType'
-import { Command, Range } from '../types'
+import { Command, Range, AnyObject } from '../types'
 
 /**
  * Replaces text with a node within a range.
  */
-export const replace = (range: Range | null = null, typeOrName: string | NodeType, attrs = {}): Command => ({ tr, state, dispatch }) => {
+export const replace = (range: Range | null = null, typeOrName: string | NodeType, attrs: AnyObject = {}): Command => ({ tr, state, dispatch }) => {
   const type = getNodeType(typeOrName, state.schema)
   const { $from, $to } = state.selection
   const index = $from.index()

packages/extension-mention/src/mention.ts

@@ -22,9 +22,11 @@ export const Mention = Node.create({
     return {
       id: {
         default: null,
-      },
-      label: {
-        default: null,
+        parseHTML: element => {
+          return {
+            id: element.getAttribute('data-mention'),
+          }
+        },
       },
     }
   },
@@ -38,7 +40,7 @@ export const Mention = Node.create({
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    return ['span', HTMLAttributes, `@${node.attrs.label}`]
+    return ['span', HTMLAttributes, `@${node.attrs.id}`]
   },
 
   addProseMirrorPlugins() {
@@ -46,11 +48,11 @@ export const Mention = Node.create({
       Suggestion({
         editor: this.editor,
         ...this.options,
-        command: ({ range }) => {
+        command: ({ range, attributes }) => {
           this.editor
             .chain()
             .focus()
-            .replace(range, 'mention')
+            .replace(range, 'mention', attributes)
             .insertText(' ')
             .run()
         },

packages/suggestion/src/suggestion.ts

@@ -1,4 +1,4 @@
-import { Editor, Range } from '@tiptap/core'
+import { Editor, Range, AnyObject } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
@@ -10,7 +10,7 @@ export interface SuggestionOptions {
   allowSpaces?: boolean,
   startOfLine?: boolean,
   suggestionClass?: string,
-  command?: (props: { range: Range }) => void,
+  command?: (props: { range: Range, attributes: AnyObject }) => void,
   items?: (query: string) => any[],
   render?: () => {
     onStart?: (props: SuggestionProps) => void,
@@ -26,7 +26,7 @@ export interface SuggestionProps {
   query: string,
   text: string,
   items: any[],
-  command: () => void,
+  command: (attributes: AnyObject) => void,
   decorationNode: Element | null,
   virtualNode: VirtualNode | null,
 }
@@ -83,8 +83,8 @@ export function Suggestion({
             items: (handleChange || handleStart)
               ? await items(state.query)
               : [],
-            command: () => {
-              command({ range: state.range })
+            command: attributes => {
+              command({ range: state.range, attributes })
             },
             decorationNode,
             // build a virtual node for popper.js or tippy.js