Skip to content

refactor(emoji): centralize emoji rendering into app/components/Emoji… #6643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

refactor(emoji): centralize emoji rendering into app/components/Emoji… #6643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0daf449
refactor(emoji): centralize emoji rendering into app/components/Emoji…
abhisek7154 Sep 12, 2025
b3daed3
fix(emoji): handle unicode/ASCII safely and remove nested ternary
abhisek7154 Sep 12, 2025
fe650eb
fix(emoji): fix linting and update snapshots
abhisek7154 Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions app/components/Emoji/Emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import { Text, StyleProp, TextStyle, ImageStyle } from 'react-native';

import useShortnameToUnicode from '../../lib/hooks/useShortnameToUnicode';
import CustomEmoji from '../../containers/EmojiPicker/CustomEmoji';
import { ICustomEmoji } from '../../definitions/IEmoji';

interface IEmojiProps {
emoji: string | ICustomEmoji;
style?: StyleProp<TextStyle | ImageStyle>;
size?: number;
}

const Emoji = ({ emoji, style, size = 16 }: IEmojiProps) => {
const { formatShortnameToUnicode } = useShortnameToUnicode(true);

if (typeof emoji === 'string') {
const trimmed = emoji.trim();

const isColonShortname = /^:[^:\s]+:$/.test(trimmed);
const isBareShortname = /^[a-z0-9_+\-]+$/i.test(trimmed);

const leading = emoji.match(/^\s*/)?.[0] ?? '';
const trailing = emoji.match(/\s*$/)?.[0] ?? '';

let converted: string;
if (isColonShortname) {
converted = formatShortnameToUnicode(trimmed);
} else if (isBareShortname) {
converted = formatShortnameToUnicode(`:${trimmed}:`);
} else {
converted = emoji;
}

return <Text style={[{ fontSize: size }, style as StyleProp<TextStyle>]}>{`${leading}${converted}${trailing}`}</Text>;
}

return <CustomEmoji style={[{ width: size, height: size }, style as StyleProp<ImageStyle>]} emoji={emoji} />;
};

export default Emoji;
18 changes: 6 additions & 12 deletions app/containers/EmojiPicker/Emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import React from 'react';
import { Text } from 'react-native';

import useShortnameToUnicode from '../../lib/hooks/useShortnameToUnicode';
import styles from './styles';
import CustomEmoji from './CustomEmoji';
import Emoji from '../../components/Emoji/Emoji';
import { IEmojiProps } from './interfaces';
import styles from './styles';

export const Emoji = ({ emoji }: IEmojiProps): React.ReactElement => {
const { formatShortnameToUnicode } = useShortnameToUnicode(true);
const unicodeEmoji = formatShortnameToUnicode(`:${emoji}:`);
export const EmojiPickerEmoji = ({ emoji }: IEmojiProps): React.ReactElement => (
<Emoji emoji={emoji} style={typeof emoji === 'string' ? styles.categoryEmoji : styles.customCategoryEmoji} />
);

if (typeof emoji === 'string') {
return <Text style={styles.categoryEmoji}>{unicodeEmoji}</Text>;
}
return <CustomEmoji style={styles.customCategoryEmoji} emoji={emoji} />;
};
export { Emoji };
16 changes: 7 additions & 9 deletions app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3769,16 +3769,14 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
"fontSize": 15,
},
[
{
"color": "#2F343D",
},
{},
],
]
}
>
Expand Down
147 changes: 76 additions & 71 deletions app/containers/markdown/__snapshots__/Markdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -485,16 +485,14 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
"fontSize": 15,
},
[
{
"color": "#2F343D",
},
{},
],
]
}
>
Expand All @@ -504,16 +502,14 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
"fontSize": 15,
},
[
{
"color": "#2F343D",
},
{},
],
]
}
>
Expand All @@ -523,16 +519,14 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
"fontSize": 15,
},
[
{
"color": "#2F343D",
},
{},
],
]
}
>
Expand Down Expand Up @@ -597,23 +591,27 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
"fontSize": 15,
},
{},
false,
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
},
{},
false,
],
]
}
>

😂
😂
</Text>
<Text
accessibilityLabel=" "
Expand All @@ -636,23 +634,27 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
"fontSize": 15,
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
},
{},
false,
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "left",
},
{},
false,
],
]
}
>

👍
👍
</Text>
</Text>
</Text>
Expand Down Expand Up @@ -860,16 +862,14 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 30,
"fontWeight": "400",
"lineHeight": 43,
"textAlign": "left",
},
[
{
"color": "#2F343D",
},
{},
],
]
}
>
Expand All @@ -879,18 +879,23 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
style={
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 30,
"fontWeight": "400",
"lineHeight": 43,
"textAlign": "left",
},
{},
false,
[
{
"color": "#2F343D",
},
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 30,
"fontWeight": "400",
"lineHeight": 43,
"textAlign": "left",
},
{},
false,
],
]
}
>
Expand Down
25 changes: 15 additions & 10 deletions app/containers/markdown/components/emoji/Emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React, { useContext } from 'react';
import { Text, useWindowDimensions } from 'react-native';
import { useWindowDimensions } from 'react-native';
import { Emoji as EmojiProps } from '@rocket.chat/message-parser';

import Plain from '../Plain';
import useShortnameToUnicode from '../../../../lib/hooks/useShortnameToUnicode';
import { useTheme } from '../../../../theme';
import styles from '../../styles';
import CustomEmoji from '../../../EmojiPicker/CustomEmoji';
import MarkdownContext from '../../contexts/MarkdownContext';
import { useAppSelector } from '../../../../lib/hooks';
import { getUserSelector } from '../../../../selectors/login';
import { useResponsiveLayout } from '../../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
import EmojiRenderer from '../../../../components/Emoji/Emoji';

interface IEmojiProps {
block: EmojiProps;
Expand Down Expand Up @@ -42,7 +41,13 @@ const Emoji = ({ block, isBigEmoji, style = {}, index, isAvatar = false }: IEmoj
const convertAsciiEmoji = useAppSelector(state => getUserSelector(state)?.settings?.preferences?.convertAsciiEmoji);

if ('unicode' in block) {
return <Text style={[{ color: colors.fontDefault }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
return (
<EmojiRenderer
emoji={block.unicode}
size={isBigEmoji ? 30 * fontScale : 15 * fontScale}
style={[{ color: colors.fontDefault }, style]}
/>
);
}

const emojiToken = getEmojiToken(block, isAvatar);
Expand All @@ -68,20 +73,20 @@ const Emoji = ({ block, isBigEmoji, style = {}, index, isAvatar = false }: IEmoj
};

if (emoji) {
return <CustomEmoji style={[isBigEmoji ? customEmojiBigSize : customEmojiSize, style]} emoji={emoji} />;
return <EmojiRenderer style={[isBigEmoji ? customEmojiBigSize : customEmojiSize, style]} emoji={emoji} />;
}

return (
<Text
<EmojiRenderer
emoji={`${spaceLeft}${displayAsciiEmoji ? block.value!.value : emojiUnicode}`}
size={isBigEmoji ? 30 * fontScale : 15 * fontScale}
style={[
{ color: colors.fontDefault },
isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text,
style,
isAvatar && avatarStyle
]}>
{spaceLeft}
{displayAsciiEmoji ? <Plain value={block.value!.value} /> : emojiUnicode}
</Text>
]}
/>
);
};

Expand Down
Loading