Merge branch 'feature/normal-emoji-completion' into 'develop'

Add completion for normal emoji.

Closes #15

See merge request pleroma/pleroma-fe!169

3 files changed, 19 insertions, 5 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 59c14eac..1f63de25 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -64,14 +64,15 @@ const PostStatusForm = {
           img: profile_image_url_original
         }))
       } else if (firstchar === ':') {
-        const matchedEmoji = filter(this.emoji, (emoji) => emoji.shortcode.match(this.textAtCaret.slice(1)))
+        const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.match(this.textAtCaret.slice(1)))
         if (matchedEmoji.length <= 0) {
           return false
         }
-        return map(take(matchedEmoji, 5), ({shortcode, image_url}) => ({
+        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}) => ({
           // eslint-disable-next-line camelcase
           screen_name: `:${shortcode}:`,
           name: '',
+          utf: utf || '',
           img: image_url
         }))
       } else {
@@ -90,6 +91,9 @@ const PostStatusForm = {
     },
     emoji () {
       return this.$store.state.config.emoji || []
+    },
+    customEmoji () {
+      return this.$store.state.config.customEmoji || []
     }
   },
   methods: {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index bb2329f3..8e436428 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,8 +6,9 @@
       </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 base02">
-            <img :src="candidate.img"></img>
+          <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))" class="autocomplete base02">
+            <span v-if="candidate.img"><img :src="candidate.img"></img></span>
+            <span v-else>{{candidate.utf}}</span>
             <span>
               {{candidate.screen_name}}
               <small class="base02">{{candidate.name}}</small>
diff --git a/src/main.js b/src/main.js
index de74511b..a14ca7c8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -137,7 +137,7 @@ window.fetch('/api/pleroma/emoji.json')
           const emoji = Object.keys(values).map((key) => {
             return { shortcode: key, image_url: values[key] }
           })
-          store.dispatch('setOption', { name: 'emoji', value: emoji })
+          store.dispatch('setOption', { name: 'customEmoji', value: emoji })
           store.dispatch('setOption', { name: 'pleromaBackend', value: true })
         },
         (failure) => {
@@ -146,3 +146,12 @@ window.fetch('/api/pleroma/emoji.json')
       ),
     (error) => console.log(error)
   )
+
+window.fetch('/static/emoji.json')
+  .then((res) => res.json())
+  .then((values) => {
+    const emoji = Object.keys(values).map((key) => {
+      return { shortcode: key, image_url: false, 'utf': values[key] }
+    })
+    store.dispatch('setOption', { name: 'emoji', value: emoji })
+  })