From 397df8c6737fdac26cc2c6279ee2a5be21611e33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 19 Jan 2021 20:42:15 +0100
Subject: [PATCH] refactoring

---
 docs/src/demos/Nodes/Mention/MentionList.vue |  4 ++--
 docs/src/demos/Nodes/Mention/index.vue       | 14 +++++++++++++-
 packages/extension-mention/src/mention.ts    |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 140788726..c48104fdd 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/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>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index bdf541597..900e98009 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/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>
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 921b4a94d..a7412c2cf 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/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 }) {