refactoring

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

@@ -104,8 +104,8 @@ export default {
 
   &.is-selected,
   &:hover {
-    color: black;
-    background: rgba(black, 0.1);
+    color: #A975FF;
+    background: rgba(#A975FF, 0.1);
   }
 }
 </style>

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

@@ -31,6 +31,9 @@ export default {
         Paragraph,
         Text,
         Mention.configure({
+          HTMLAttributes: {
+            class: 'mention',
+          },
           suggestionOptions: {
             items: query => {
               return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
@@ -76,7 +79,7 @@ export default {
         }),
       ],
       content: `
-        <p>text <span data-mention="Philipp"></span></p>
+        <p>Hello <span data-mention="Hans"></span> and <span data-mention="Philipp"></span> and <span data-mention="Kris"></span>!</p>
       `,
     })
   },
@@ -86,3 +89,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.mention {
+  color: #A975FF;
+  background-color: rgba(#A975FF, 0.1);
+  border-radius: 0.3rem;
+  padding: 0.1rem 0.3rem;
+}
+</style>

packages/extension-mention/src/mention.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/core'
+import { Node, mergeAttributes } from '@tiptap/core'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
 export type MentionOptions = {
@@ -57,7 +57,7 @@ export const Mention = Node.create({
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    return ['span', HTMLAttributes, `@${node.attrs.id}`]
+    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), `@${node.attrs.id}`]
   },
 
   renderText({ node }) {