diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30481dbdd9..0ed1ba5b24 100644
--- 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
new file mode 100644
index 0000000000..17337f8147
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..ac5a7486da
--- /dev/null
+++ 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
index f0610a8787..3a4a5afeb4 100644
--- 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', () => {
It is
@@ -187,7 +187,7 @@ describe('MathMessageComponent', () => {
and
@@ -484,7 +484,7 @@ describe('MathMessageComponent', () => {
{
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message0
@@ -177,7 +177,7 @@ describe('BasicMessage', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message0
@@ -187,7 +187,7 @@ describe('BasicMessage', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message1
@@ -279,7 +279,7 @@ describe('BasicMessage', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message0
@@ -289,7 +289,7 @@ describe('BasicMessage', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message1
@@ -379,7 +379,7 @@ describe('BasicMessage', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message0
@@ -389,7 +389,7 @@ describe('BasicMessage', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
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
index b991dad766..6c0b32cfc8 100644
--- 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"
>
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
index f10e9dbaa9..77c423288e 100644
--- 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"
>
message0
@@ -40,7 +40,7 @@ describe('NestedMessageContent', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message0
@@ -97,7 +97,7 @@ describe('NestedMessageContent', () => {
class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
>
message0
diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
index 93dc4c4a49..a129eb8236 100644
--- 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 = ({ mess
className={classNames({
[classes.message]: true,
[classes.pending]: pending,
+ [classes.emojiMessage]: isAllEmoji(message),
})}
data-testid={`messagesGroupContent-${messageId}`}
>