refs #480 Parse emoji and show emoji in toot

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -28,7 +28,7 @@
             {{ $t('cards.toot.hide')}}
           </el-button>
         </div>
-        <div class="content" v-show="isShowContent(message)" v-html="originalMessage(message).content" @click.capture.prevent="tootClick"></div>
+        <div class="content" v-show="isShowContent(message)" v-html="status(message)" @click.capture.prevent="tootClick"></div>
       </div>
       <div class="attachments">
         <el-button v-show="sensitive(message) && !isShowAttachments(message)" class="show-sensitive" type="info" @click="showAttachments = true">
@@ -110,6 +110,7 @@ import { shell, clipboard } from 'electron'
 import { mapState } from 'vuex'
 import { findAccount, findLink, isTag } from '../../../utils/link'
 import DisplayStyle from '~/src/constants/displayStyle'
+import emojify from '~/src/renderer/utils/emojify'
 
 export default {
   name: 'toot',
@@ -339,6 +340,10 @@ export default {
     },
     locked (message) {
       return message.visibility === 'private' || message.visibility === 'direct'
+    },
+    status (message) {
+      const original = this.originalMessage(message)
+      return emojify(original.content, original.emojis)
     }
   }
 }
@@ -399,9 +404,14 @@ export default {
       font-size: var(--base-font-size);
       color: var(--theme-primary-color);
 
-      .content {
+      .content /deep/ {
         margin: 4px 0 8px;
         word-wrap: break-word;
+
+        .emojione {
+          width: 20px;
+          height: 20px;
+        }
       }
     }
 

src/renderer/utils/emojify.js

@@ -0,0 +1,14 @@
+const emojify = (str, customEmoji = []) => {
+  let result = str
+  customEmoji.map((emoji) => {
+    const reg = new RegExp(`:${emoji.shortcode}:`, 'g')
+    const match = result.match(reg)
+    if (!match) return emoji
+    const replaceTag = `<img draggable="false" class="emojione" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.url}" />`
+    result = result.replace(reg, replaceTag)
+    return emoji
+  })
+  return result
+}
+
+export default emojify

test/mocha/emojify.spec.js

@@ -0,0 +1,59 @@
+import assert from 'assert'
+import emojify from '../../src/renderer/utils/emojify'
+
+describe('emojify', () => {
+  const emoji = [
+    {
+      shortcode: 'python',
+      url: 'https://example.com/python'
+    },
+    {
+      shortcode: 'nodejs',
+      url: 'https://example.com/nodejs'
+    },
+    {
+      shortcode: 'slack',
+      url: 'https://example.com/slack'
+    }
+  ]
+  context('Does not contain shortcode', () => {
+    const str = 'I have a pen.'
+    it('should not change', () => {
+      const result = emojify(str, emoji)
+      assert.strictEqual(
+        result,
+        str
+      )
+    })
+  })
+  context('Contain a shortcode', () => {
+    const str = 'I like :python:'
+    it('should replace', () => {
+      const result = emojify(str, emoji)
+      assert.strictEqual(
+        result,
+        'I like <img draggable="false" class="emojione" alt="python" title="python" src="https://example.com/python" />'
+      )
+    })
+  })
+  context('Contain some shortcodes', () => {
+    const str = 'I like :python: , :nodejs: and :slack:'
+    it('should replace', () => {
+      const result = emojify(str, emoji)
+      assert.strictEqual(
+        result,
+        'I like <img draggable="false" class="emojione" alt="python" title="python" src="https://example.com/python" /> , <img draggable="false" class="emojione" alt="nodejs" title="nodejs" src="https://example.com/nodejs" /> and <img draggable="false" class="emojione" alt="slack" title="slack" src="https://example.com/slack" />'
+      )
+    })
+  })
+  context('Contain same shortcodes', () => {
+    const str = 'I like :python: , I love :python:'
+    it('should replace', () => {
+      const result = emojify(str, emoji)
+      assert.strictEqual(
+        result,
+        'I like <img draggable="false" class="emojione" alt="python" title="python" src="https://example.com/python" /> , I love <img draggable="false" class="emojione" alt="python" title="python" src="https://example.com/python" />'
+      )
+    })
+  })
+})