Add emoji completion.

src/components/post_status_form/post_status_form.js

@@ -50,17 +50,30 @@ const PostStatusForm = {
   },
   computed: {
     candidates () {
-      if (this.textAtCaret.charAt(0) === '@') {
+      const firstchar = this.textAtCaret.charAt(0)
+      if (firstchar === '@') {
         const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).match(this.textAtCaret.slice(1)))
         if (matchedUsers.length <= 0) {
           return false
         }
         // eslint-disable-next-line camelcase
         return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({
-          screen_name: screen_name,
+          // eslint-disable-next-line camelcase
+          screen_name: `@${screen_name}`,
           name: name,
           img: profile_image_url_original
         }))
+      } else if (firstchar === ':') {
+        const matchedEmoji = filter(this.emoji, (emoji) => emoji.shortcode.match(this.textAtCaret.slice(1)))
+        if (matchedEmoji.length <= 0) {
+          return false
+        }
+        return map(take(matchedEmoji, 5), ({shortcode, image_url}) => ({
+          // eslint-disable-next-line camelcase
+          screen_name: `:${shortcode}:`,
+          name: '',
+          img: image_url
+        }))
       } else {
         return false
       }
@@ -74,6 +87,9 @@ const PostStatusForm = {
     },
     users () {
       return this.$store.state.users.users
+    },
+    emoji () {
+      return this.$store.state.config.emoji || []
     }
   },
   methods: {

src/components/post_status_form/post_status_form.vue

@@ -6,10 +6,10 @@
       </div>
       <div style="position:relative;" v-if="candidates">
         <div class="autocomplete-panel base05-background">
-          <div v-for="candidate in candidates" @click="replace('@' + candidate.screen_name + ' ')" class="autocomplete base01">
+          <div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base01">
             <img :src="candidate.img"></img>
             <span>
-              @{{candidate.screen_name}}
+              {{candidate.screen_name}}
               <small class="base02">{{candidate.name}}</small>
             </span>
           </div>

src/main.js

@@ -102,3 +102,13 @@ window.fetch('/static/terms-of-service.html')
   .then((html) => {
     store.dispatch('setOption', { name: 'tos', value: html })
   })
+
+window.fetch('/static/emoji.txt')
+  .then((res) => res.text())
+  .then((csv) => {
+    const emoji = csv.split('\n').map((row) => {
+      const values = row.split(', ')
+      return { shortcode: values[0], url: values[1] }
+    })
+    store.dispatch('setOption', { name: 'emoji', value: emoji })
+  })

src/services/completion/completion.js

@@ -37,7 +37,7 @@ export const addPositionToWords = (words) => {
 export const splitIntoWords = (str) => {
   // Split at word boundaries
   const regex = /\b/
-  const triggers = /[@#]+$/
+  const triggers = /[@#:]+$/
 
   let split = str.split(regex)