(fix) emojis reactions and shortcuts

Author: antoine92190

demo/src/ChatContainer.vue

@@ -638,7 +638,7 @@ export default {
 			await messagesRef(roomId)
 				.doc(messageId)
 				.update({
-					[`reactions.${reaction.name}`]: dbAction
+					[`reactions.${reaction.unicode}`]: dbAction
 				})
 		},
 

src/components/EmojiPicker/EmojiPicker.vue

@@ -65,8 +65,7 @@ export default {
 						.querySelector('emoji-picker')
 						.addEventListener('emoji-click', ({ detail }) => {
 							this.$emit('add-emoji', {
-								icon: detail.unicode,
-								name: detail.annotation
+								unicode: detail.unicode
 							})
 						})
 				}, 0)

src/lib/Message/Message.vue

@@ -188,7 +188,7 @@
 							@update-options-opened="optionsOpened = $event"
 							@update-emoji-opened="emojiOpened = $event"
 							@message-action-handler="messageActionHandler"
-							@send-message-reaction="sendMessageReaction($event)"
+							@send-message-reaction="sendMessageReaction"
 						>
 							<template v-for="(i, name) in $scopedSlots" #[name]="data">
 								<slot :name="name" v-bind="data" />
@@ -199,8 +199,7 @@
 					<message-reactions
 						:current-user-id="currentUserId"
 						:message="message"
-						:emojis-list="emojisList"
-						@send-message-reaction="sendMessageReaction($event)"
+						@send-message-reaction="sendMessageReaction"
 					/>
 				</div>
 			</slot>
@@ -252,7 +251,6 @@ export default {
 		showNewMessagesDivider: { type: Boolean, required: true },
 		textFormatting: { type: Boolean, required: true },
 		linkOptions: { type: Object, required: true },
-		emojisList: { type: Object, required: true },
 		hideOptions: { type: Boolean, required: true }
 	},
 

src/lib/Message/MessageReactions/MessageReactions.vue

@@ -11,9 +11,9 @@
 			:style="{
 				float: message.senderId === currentUserId ? 'right' : 'left'
 			}"
-			@click="sendMessageReaction({ name: key }, reaction)"
+			@click="sendMessageReaction({ unicode: key }, reaction)"
 		>
-			{{ getEmojiByName(key) }}<span>{{ reaction.length }}</span>
+			{{ key }}<span>{{ reaction.length }}</span>
 		</button>
 	</transition-group>
 </template>
@@ -24,16 +24,12 @@ export default {
 
 	props: {
 		currentUserId: { type: [String, Number], required: true },
-		message: { type: Object, required: true },
-		emojisList: { type: Object, required: true }
+		message: { type: Object, required: true }
 	},
 
 	emits: ['send-message-reaction'],
 
 	methods: {
-		getEmojiByName(emojiName) {
-			return this.emojisList[emojiName]
-		},
 		sendMessageReaction(emoji, reaction) {
 			this.$emit('send-message-reaction', { emoji, reaction })
 		}

src/lib/Room/Room.vue

@@ -88,7 +88,6 @@
 								:show-new-messages-divider="showNewMessagesDivider"
 								:text-formatting="textFormatting"
 								:link-options="linkOptions"
-								:emojis-list="emojisList"
 								:hide-options="hideOptions"
 								@message-added="onMessageAdded"
 								@message-action-handler="messageActionHandler"
@@ -332,6 +331,7 @@
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
 import vClickOutside from 'v-click-outside'
+import { Database } from 'emoji-picker-element'
 
 import Loader from '../../components/Loader/Loader'
 import SvgIcon from '../../components/SvgIcon/SvgIcon'
@@ -446,18 +446,14 @@ export default {
 			selectedUsersTag: [],
 			textareaCursorPosition: null,
 			cursorRangePosition: null,
+			emojisDB: new Database(),
 			recorder: this.initRecorder(),
 			isRecording: false,
 			format: 'mp3'
 		}
 	},
 
 	computed: {
-		emojisList() {
-			const emojis = {}
-			const emojisTable = Object.keys(emojis).map(key => emojis[key])
-			return Object.assign({}, ...emojisTable)
-		},
 		room() {
 			return this.rooms.find(room => room.roomId === this.roomId) || {}
 		},
@@ -734,13 +730,11 @@ export default {
 
 			return { position, endPosition }
 		},
-		updateEmojis(query) {
+		async updateEmojis(query) {
 			if (!query) return
 
-			const emojisListKeys = Object.keys(this.emojisList)
-			const matchingKeys = emojisListKeys.filter(key => key.startsWith(query))
-
-			this.filteredEmojis = matchingKeys.map(key => this.emojisList[key])
+			const emojis = await this.emojisDB.getEmojiBySearchQuery(query)
+			this.filteredEmojis = emojis.map(emoji => emoji.unicode)
 		},
 		selectEmoji(emoji) {
 			const { position, endPosition } = this.getCharPosition(':')
@@ -982,7 +976,7 @@ export default {
 			el.style.height = el.scrollHeight - padding * 2 + 'px'
 		},
 		addEmoji(emoji) {
-			this.message += emoji.icon
+			this.message += emoji.unicode
 			this.focusTextarea(true)
 		},
 		launchFilePicker() {