diff --git a/docs/src/demos/Examples/Community/React/index.jsx b/docs/src/demos/Examples/Community/React/index.jsx
index baab3abf..f6ca7cce 100644
--- a/docs/src/demos/Examples/Community/React/index.jsx
+++ b/docs/src/demos/Examples/Community/React/index.jsx
@@ -72,7 +72,7 @@ export default () => {
     ],
     content: `
       <p>
-        What do you all think about the new <span data-mention="Winona Ryder"></span> movie?
+        What do you all think about the new <span data-mention data-id="Winona Ryder"></span> movie?
       </p>
     `,
   })
diff --git a/docs/src/demos/Examples/Community/Vue/index.vue b/docs/src/demos/Examples/Community/Vue/index.vue
index 824c4172..5f5d269b 100644
--- a/docs/src/demos/Examples/Community/Vue/index.vue
+++ b/docs/src/demos/Examples/Community/Vue/index.vue
@@ -123,7 +123,7 @@ export default {
       ],
       content: `
         <p>
-          What do you all think about the new <span data-mention="Winona Ryder"></span> movie?
+          What do you all think about the new <span data-mention data-id="Winona Ryder"></span> movie?
         </p>
       `,
     })
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index e5d9a19b..b22530c0 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -82,9 +82,9 @@ export default {
       ],
       content: `
         <p>Hi everyone! Don’t forget the daily stand up at 8 AM.</p>
-        <p><span data-mention="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
-        <p><span data-mention="Winona Ryder"></span> <span data-mention="Axl Rose"></span> Let’s go through your most important points quickly.</p>
-        <p>I have a meeting with <span data-mention="Christina Applegate"></span> and don’t want to come late.</p>
+        <p><span data-mention data-id="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
+        <p><span data-mention data-id="Winona Ryder"></span> <span data-mention data-id="Axl Rose"></span> Let’s go through your most important points quickly.</p>
+        <p>I have a meeting with <span data-mention data-id="Christina Applegate"></span> and don’t want to come late.</p>
         <p>– Thanks, your big boss</p>
       `,
     })
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 9fea4afa..2dae93c4 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -49,7 +49,7 @@ export const Mention = Node.create<MentionOptions>({
         default: null,
         parseHTML: element => {
           return {
-            id: element.getAttribute('data-mention'),
+            id: element.getAttribute('data-id'),
           }
         },
         renderHTML: attributes => {
@@ -58,7 +58,7 @@ export const Mention = Node.create<MentionOptions>({
           }
 
           return {
-            'data-mention': attributes.id,
+            'data-id': attributes.id,
           }
         },
       },