feat: Feat/519 big emoji messages (#2389)

TryQuiet · Apr 3, 2024 · 71c8b22 · 71c8b22
1 parent e4252e6
commit 71c8b22
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 * Allow JPEG and GIF files as profile photos ([#2332](https://github.com/TryQuiet/quiet/issues/2332))
 
+# New features
+
+* Add utilities for emoji detection in messages and make all-emoji message larger font size ([#519](https://github.com/TryQuiet/quiet/issues/519))
+
 [2.1.2]
 
 # Refactorings:

diff --git a/packages/common/src/emojis.test.ts b/packages/common/src/emojis.test.ts
@@ -0,0 +1,22 @@
+import { hasEmoji, isAllEmoji } from './emojis'
+
+describe('Emoji Utilities', () => {
+  it('Should detect an emoji in a string', () => {
+    expect(hasEmoji('❤️‍🔥')).toBeTruthy()
+    expect(hasEmoji('Hello ❤️‍🔥 Emoji')).toBeTruthy()
+    expect(hasEmoji('No emoji :-(')).toBeFalsy()
+  })
+
+  it('Should detect when a string is all emojis (or spaces)', () => {
+    expect(isAllEmoji('🙂🙂🙂🙂🙂🙂🙂🙂')).toBeTruthy()
+    expect(isAllEmoji('🐈‍⬛❤️‍🔥🏴')).toBeTruthy()
+    expect(isAllEmoji('🐈‍⬛ ❤️‍🔥 🏴')).toBeTruthy()
+    expect(isAllEmoji('❤️‍🔥')).toBeTruthy()
+    expect(isAllEmoji('🐈‍⬛')).toBeTruthy()
+    expect(isAllEmoji('❤️‍🔥 Emoji')).toBeFalsy()
+    expect(isAllEmoji('Hello ❤️‍🔥')).toBeFalsy()
+    expect(isAllEmoji('Hello ❤️‍🔥 Emoji')).toBeFalsy()
+    expect(isAllEmoji('🐈‍⬛ (Not emoji) 🏴')).toBeFalsy()
+    expect(isAllEmoji('No emoji :-(')).toBeFalsy()
+  })
+})
diff --git a/packages/common/src/emojis.ts b/packages/common/src/emojis.ts
@@ -0,0 +1,12 @@
+export const hasEmoji = (testString: string) => {
+  // All strings with at least one emoji character should match this
+  const regExp = /\p{Emoji}/gu
+  return regExp.test(testString)
+}
+
+export const isAllEmoji = (testString: string) => {
+  // Detect whether a string is entirely emojis (and whitespace and zero-width-joins, region indicators, etc)
+  // This may need to be updated as Unicode's Emoji spec is a moving target
+  const emojiOrWhitespaceRegExp = /^(\p{Emoji}|\p{Emoji_Modifier}|\uFE0F|\u200D|\p{RI}|\uE007F|\s)+$/gu
+  return emojiOrWhitespaceRegExp.test(testString)
+}
diff --git a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx
@@ -107,7 +107,7 @@ describe('MathMessageComponent', () => {
       <body>
         <div>
           <span
-            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
             data-testid="messagesGroupContent-1-0"
           >
             It is
@@ -187,7 +187,7 @@ describe('MathMessageComponent', () => {
             </mjx-container>
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
             data-testid="messagesGroupContent-1-2"
           >
             and
@@ -484,7 +484,7 @@ describe('MathMessageComponent', () => {
             </mjx-container>
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
             data-testid="messagesGroupContent-1-1"
           >
             <ul

diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
@@ -88,7 +88,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -177,7 +177,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -187,7 +187,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-1"
                       >
                         message1
@@ -279,7 +279,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -289,7 +289,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-1"
                       >
                         message1
@@ -379,7 +379,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -389,7 +389,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
@@ -139,7 +139,7 @@ describe('ChannelMessages', () => {
                             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                           >
                             <span
-                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
                               data-testid="messagesGroupContent-string"
                             >
                               string

diff --git a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
@@ -19,7 +19,7 @@ describe('NestedMessageContent', () => {
             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1xya0ai-MuiTypography-root"
               data-testid="messagesGroupContent-0"
             >
               message0
@@ -40,7 +40,7 @@ describe('NestedMessageContent', () => {
             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1vefsqk-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1xya0ai-MuiTypography-root"
               data-testid="messagesGroupContent-0"
             >
               message0
@@ -97,7 +97,7 @@ describe('NestedMessageContent', () => {
             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1vefsqk-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1xya0ai-MuiTypography-root"
               data-testid="messagesGroupContent-0"
             >
               message0

diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -4,11 +4,13 @@ import React, { ReactNode } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import theme from '../../../theme'
+import { isAllEmoji } from '../../../../../../common/src/emojis'
 
 const PREFIX = 'TextMessage'
 
 const classes = {
   message: `${PREFIX}message`,
+  emojiMessage: `${PREFIX}emojiMessage`,
   pending: `${PREFIX}pending`,
   blockquote: `${PREFIX}blockquote`,
   code: `${PREFIX}code`,
@@ -29,7 +31,10 @@ const StyledTypography = styled(Typography)(() => ({
     lineHeight: '21px',
     overflowWrap: 'anywhere',
   },
-
+  [`&.${classes.emojiMessage}`]: {
+    fontSize: '1.7rem', // Double the normal fontSize
+    lineHeight: '42px', // Double the normal lineHeight
+  },
   [`&.${classes.pending}`]: {
     color: theme.palette.colors.lightGray,
   },
@@ -127,6 +132,7 @@ export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({ mess
       className={classNames({
         [classes.message]: true,
         [classes.pending]: pending,
+        [classes.emojiMessage]: isAllEmoji(message),
       })}
       data-testid={`messagesGroupContent-${messageId}`}
     >