configurable mentions placement

src/components/mention_link/mention_link.js

@@ -13,11 +13,6 @@ const MentionLink = {
       required: true,
       type: String
     },
-    origattrs: {
-      required: false,
-      type: Object,
-      default: {}
-    },
     firstMention: {
       required: false,
       type: Boolean,
@@ -56,6 +51,12 @@ const MentionLink = {
     highlightClass () {
       if (this.highlight) return highlightClass(this.user)
     },
+    oldPlace () {
+      return this.mergedConfig.mentionsOldPlace
+    },
+    oldStyle () {
+      return this.mergedConfig.mentionsOldStyle
+    },
     style () {
       if (this.highlight) {
         const {
@@ -72,7 +73,8 @@ const MentionLink = {
         {
           '-you': this.isYou,
           '-highlighted': this.highlight,
-          '-firstMention': this.firstMention
+          '-firstMention': this.firstMention,
+          '-oldStyle': this.oldStyle
         },
         this.highlightType
       ]

src/components/mention_link/mention_link.scss

@@ -3,6 +3,7 @@
   white-space: normal;
   display: inline-block;
   color: var(--link);
+  margin-right: 0.25em;
 
   & .new,
   & .original {
@@ -33,23 +34,25 @@
   & .short,
   & .full {
     &::before {
-      color: var(--faint);
       content: '@';
     }
   }
 
   .new {
-    &.-firstMention {
-      display: none;
+    &.-you {
+      & .shortName,
+      & .full {
+        font-weight: 600;
+      }
     }
 
-    &,
-    &.-highlighted {
+    &:not(.-oldStyle) {
       .short {
         line-height: 1.5;
         font-size: inherit;
 
         &::before {
+          color: var(--faint);
           display: inline-block;
           height: 50%;
           line-height: 1;
@@ -111,12 +114,9 @@
     }
   }
 
-  .new {
-    &.-you {
-      & .shortName,
-      & .full {
-        font-weight: 600;
-      }
+  &:not(.-oldPlace) {
+    .new.-firstMention {
+      display: none;
     }
   }
 

src/components/mention_link/mention_link.vue

@@ -1,5 +1,8 @@
 <template>
-  <span class="MentionLink">
+<span
+  class="MentionLink"
+  :class="{ '-oldPlace': oldPlace }"
+>
     <!-- eslint-disable vue/no-v-html -->
     <a
       v-if="!user"
@@ -15,8 +18,8 @@
       :class="classnames"
     >
       <button
-        class="short button-default"
-        :class="{ '-sublime': !highlight }"
+        class="short"
+        :class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->