feat: increase font size for messages with only emojis (issue #396 pr #93)

src/components/FormatMessage/FormatMessage.scss

@@ -3,6 +3,11 @@
     display: inline;
   }
 
+  .vac-emoji-message {
+    font-size: 3rem;
+    letter-spacing: 4px;
+  }
+
   .vac-icon-deleted {
     height: 14px;
     width: 14px;

src/components/FormatMessage/FormatMessage.vue

@@ -7,6 +7,7 @@
       <div
         v-if="message.markdown"
         class="markdown"
+        :class="{ 'vac-emoji-message': containsOnlyEmojis(message) }"
         @click="openTag"
         v-html="message.value"
       />
@@ -69,6 +70,7 @@ import SvgIcon from '../SvgIcon/SvgIcon'
 
 import markdown from '../../utils/markdown'
 import { IMAGE_TYPES } from '../../utils/constants'
+import { containsOnlyEmojis } from '../../utils/emoji'
 
 export default {
   name: 'FormatMessage',
@@ -126,6 +128,12 @@ export default {
   },
 
   methods: {
+    containsOnlyEmojis(message) {
+      const div = document.createElement('div')
+      div.innerHTML = message.value
+      const text = div.textContent || div.innerText || ''
+      return text.length && containsOnlyEmojis(text)
+    },
     checkType(message, type) {
       return message.types && message.types.indexOf(type) !== -1
     },

src/utils/emoji/index.js

@@ -0,0 +1,14 @@
+export const emojiRegex = /\p{Extended_Pictographic}/ug
+
+export const hasEmoji = text => {
+  return emojiRegex.test(text.toString())
+}
+
+export const extractEmojis = text => {
+  return text.toString().match(emojiRegex)?.join('') || ''
+}
+
+export const containsOnlyEmojis = text => {
+  const emojisOnly = extractEmojis(text)
+  return emojisOnly.length === text.toString().length && hasEmoji(emojisOnly)
+}