From 3a1d6a197006d8e92aec74ac705abaa9752de408 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 8 Jun 2022 12:37:22 +0100
Subject: [PATCH] allow custom reactions

---
 src/components/react_button/react_button.js  | 10 ++++++++--
 src/components/react_button/react_button.vue |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index ce82c90d..7531fbc8 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -45,7 +45,10 @@ const ReactButton = {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
         let orderedEmojiList = []
-        for (const emoji of this.$store.state.instance.emoji) {
+        for (const emoji of [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ]) {
           if (emoji.replacement === this.filterWord) return [emoji]
 
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
@@ -58,7 +61,10 @@ const ReactButton = {
         }
         return orderedEmojiList.flat()
       }
-      return this.$store.state.instance.emoji || []
+      return [
+        ...this.$store.state.instance.emoji,
+        ...this.$store.state.instance.customEmoji
+      ] || []
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..a9fc8abe 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -34,7 +34,14 @@
           :title="emoji.displayText"
           @click="addReaction($event, emoji.replacement, close)"
         >
-          {{ emoji.replacement }}
+          <img
+            v-if="emoji.imageUrl !== false"
+            :src="emoji.imageUrl"
+            width="30px"
+          >
+          <span v-else>
+            {{ emoji.replacement }}
+          </span>
         </span>
         <div class="reaction-bottom-fader" />
       </div>