From d2036798a80fb4ab73e5bf1982cd8912d68bc7e2 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 18 Aug 2018 22:15:46 +0900
Subject: [PATCH] refs #480 Parse emoji and show emoji in toot

---
 .../TimelineSpace/Contents/Cards/Toot.vue     | 14 ++++-
 src/renderer/utils/emojify.js                 | 14 +++++
 test/mocha/emojify.spec.js                    | 59 +++++++++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/utils/emojify.js
 create mode 100644 test/mocha/emojify.spec.js

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
index 3660861c..8573f471 100644
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
+++ b/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;
+        }
       }
     }
 
diff --git a/src/renderer/utils/emojify.js b/src/renderer/utils/emojify.js
new file mode 100644
index 00000000..478eeace
--- /dev/null
+++ b/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
diff --git a/test/mocha/emojify.spec.js b/test/mocha/emojify.spec.js
new file mode 100644
index 00000000..a0d670ee
--- /dev/null
+++ b/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" />'
+      )
+    })
+  })
+})