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 1/3] 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" />'
+      )
+    })
+  })
+})

From 7379d8375d4446c562a86801c8e4e92343abc9f8 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 18 Aug 2018 22:22:25 +0900
Subject: [PATCH 2/3] refs #480 Show emoji in spoiler text

---
 .../TimelineSpace/Contents/Cards/Toot.vue      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
index 8573f471..d023b5d4 100644
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
@@ -20,7 +20,7 @@
       </div>
       <div class="content-wrapper">
         <div class="spoiler" v-show="spoilered(message)">
-          {{ originalMessage(message).spoiler_text }}
+          <span v-html="spoilerText(message)"></span>
           <el-button v-show="!isShowContent(message)" type="text" @click="showContent = true">
             {{ $t('cards.toot.show_more') }}
           </el-button>
@@ -344,6 +344,10 @@ export default {
     status (message) {
       const original = this.originalMessage(message)
       return emojify(original.content, original.emojis)
+    },
+    spoilerText (message) {
+      const original = this.originalMessage(message)
+      return emojify(original.spoiler_text, original.emojis)
     }
   }
 }
@@ -400,18 +404,18 @@ export default {
       }
     }
 
-    .content-wrapper {
+    .content-wrapper /deep/ {
       font-size: var(--base-font-size);
       color: var(--theme-primary-color);
 
-      .content /deep/ {
+      .content {
         margin: 4px 0 8px;
         word-wrap: break-word;
+      }
 
-        .emojione {
-          width: 20px;
-          height: 20px;
-        }
+      .emojione {
+        width: 20px;
+        height: 20px;
       }
     }
 

From 8902a74bfe7608d96a0b7c8414ba5bfa43ecee28 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 18 Aug 2018 22:33:10 +0900
Subject: [PATCH 3/3] refs #480 Fix v-for and key for performance

---
 src/renderer/components/TimelineSpace/Contents/Home.vue   | 4 ++--
 src/renderer/components/TimelineSpace/Contents/Local.vue  | 2 +-
 src/renderer/components/TimelineSpace/Contents/Public.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index d3ad5e6f..2d17ee64 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -4,8 +4,8 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
-      <toot :message="message" :filter="filter" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <div class="home-timeline" v-for="message in timeline" :key="message.id">
+      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index db984312..6afc7b76 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -4,7 +4,7 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
+    <div class="local-timeline" v-for="message in timeline" :key="message.id">
       <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
     </div>
   </transition-group>
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 861abdd9..8a831108 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -4,7 +4,7 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
+    <div class="public-timeline" v-for="message in timeline" :key="message.id">
       <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
     </div>
   </transition-group>