From d0ba7e2eea790915f0f5c48987bf7c48438972b5 Mon Sep 17 00:00:00 2001
From: DouglasKosvoski <douglas.contactpro@gmail.com>
Date: Fri, 16 Aug 2024 09:20:00 -0300
Subject: [PATCH] fix: improve emoji checking and only increase font with
 single emoji

---
 src/components/FormatMessage/FormatMessage.vue | 8 ++++----
 src/utils/emoji/index.js                       | 6 +++++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/FormatMessage/FormatMessage.vue b/src/components/FormatMessage/FormatMessage.vue
index 3625a82f..c67c8177 100644
--- a/src/components/FormatMessage/FormatMessage.vue
+++ b/src/components/FormatMessage/FormatMessage.vue
@@ -7,7 +7,7 @@
       <div
         v-if="message.markdown"
         class="markdown"
-        :class="{ 'vac-emoji-message': containsOnlyEmojis(message) }"
+        :class="{ 'vac-emoji-message': containsOnlyOneEmoji(message) }"
         @click="openTag"
         v-html="message.value"
       />
@@ -70,7 +70,7 @@ import SvgIcon from '../SvgIcon/SvgIcon'
 
 import markdown from '../../utils/markdown'
 import { IMAGE_TYPES } from '../../utils/constants'
-import { containsOnlyEmojis } from '../../utils/emoji'
+import { containsOnlyEmojis, emojiCount } from '../../utils/emoji'
 
 export default {
   name: 'FormatMessage',
@@ -128,11 +128,11 @@ export default {
   },
 
   methods: {
-    containsOnlyEmojis(message) {
+    containsOnlyOneEmoji(message) {
       const div = document.createElement('div')
       div.innerHTML = message.value
       const text = div.textContent || div.innerText || ''
-      return text.length && containsOnlyEmojis(text)
+      return emojiCount(text) === 1 && containsOnlyEmojis(text)
     },
     checkType(message, type) {
       return message.types && message.types.indexOf(type) !== -1
diff --git a/src/utils/emoji/index.js b/src/utils/emoji/index.js
index 94a4ef69..aef878da 100644
--- a/src/utils/emoji/index.js
+++ b/src/utils/emoji/index.js
@@ -10,5 +10,9 @@ export const extractEmojis = text => {
 
 export const containsOnlyEmojis = text => {
   const emojisOnly = extractEmojis(text)
-  return emojisOnly.length === text.toString().length && hasEmoji(emojisOnly)
+  return emojiCount(text) < text.toString().length && hasEmoji(emojisOnly)
+}
+
+export const emojiCount = text => {
+  return [...new Intl.Segmenter().segment(text)].length
 }