mention link

1 files changed, 13 insertions, 3 deletions

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 7bff23cd..00cf6623 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -1,7 +1,8 @@
 import Vue from 'vue'
-import { unescape } from 'lodash'
+import { unescape, flattenDeep } from 'lodash'
 import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
+import MentionLink from 'src/components/mention_link/mention_link.vue'
 
 import './rich_content.scss'
 
@@ -22,6 +23,9 @@ export default Vue.component('RichContent', {
       const attrs = getAttrs(tag)
       return <StillImage {...{ attrs }} class="img"/>
     }
+    const renderMention = (attrs, children) => {
+      return <MentionLink url={attrs.href} content={flattenDeep(children).join('')} origattrs={attrs}/>
+    }
     const structure = convertHtml(this.html)
     const processItem = (item) => {
       if (typeof item === 'string') {
@@ -45,8 +49,14 @@ export default Vue.component('RichContent', {
       if (Array.isArray(item)) {
         const [opener, children] = item
         const Tag = getTagName(opener)
-        if (Tag === 'img') {
-          return renderImage(opener)
+        switch (Tag) {
+          case 'img':
+            return renderImage(opener)
+          case 'a':
+            const attrs = getAttrs(opener)
+            if (attrs['class'] && attrs['class'].includes('mention')) {
+              return renderMention(attrs, children)
+            }
         }
         if (children !== undefined) {
           return <Tag {...{ attrs: getAttrs(opener) }}>