Customize Mention node based on Superclass

webapp/components/ContributionForm.vue

@@ -71,7 +71,8 @@ export default {
       id: null,
       loading: false,
       disabled: false,
-      slug: null
+      slug: null,
+      users: []
     }
   },
   watch: {

webapp/components/Editor/index.vue

@@ -185,8 +185,8 @@ import {
   Underline,
   Link,
   History,
-  Mention
 } from 'tiptap-extensions'
+import Mention from './nodes/Mention.js'
 
 let throttleInputEvent
 
@@ -358,7 +358,8 @@ export default {
       this.insertMention({
         range: this.suggestionRange,
         attrs: {
-          id: user.id,
+          // TODO: use router here
+          url: `/profile/${user.id}`,
           label: user.name
         }
       })
@@ -533,17 +534,8 @@ li > p {
 }
 
 .editor {
-  .mention {
-    background: rgba($color-neutral-0, 0.1);
-    color: rgba($color-neutral-0, 0.6);
-    font-size: 0.8rem;
-    font-weight: bold;
-    border-radius: 5px;
-    padding: 0.2rem 0.5rem;
-    white-space: nowrap;
-  }
   .mention-suggestion {
-    color: rgba($color-neutral-0, 0.6);
+    color: $color-primary
   }
   &__floating-menu {
     position: absolute;

webapp/components/Editor/nodes/Mention.js

@@ -0,0 +1,25 @@
+import { Node } from 'tiptap'
+import { replaceText } from 'tiptap-commands'
+import { Mention as TipTapMention } from 'tiptap-extensions'
+
+export default class Mention extends TipTapMention {
+  get schema() {
+    const schema = super.schema
+    schema.attrs = {
+      url: {},
+      label: {},
+    },
+    schema.toDOM = node => [
+      'a',
+      {
+        class: this.options.mentionClass,
+        href: node.attrs.url,
+      },
+      `${this.options.matcher.char}${node.attrs.label}`
+    ]
+    schema.parseDOM = [
+      // this is not implemented
+    ]
+    return schema
+  }
+}