fix: emoji not getting rendered as avatar (#6382)

Author: Rohit3523

app/containers/Avatar/Avatar.tsx

@@ -54,7 +54,11 @@ const Avatar = React.memo(
 					value={{
 						getCustomEmoji
 					}}>
-					<Emoji block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }} style={avatarStyle} />
+					<Emoji
+						block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }}
+						style={avatarStyle}
+						isAvatar={true}
+					/>
 				</MarkdownContext.Provider>
 			);
 		} else {

app/containers/markdown/__snapshots__/Markdown.test.tsx.snap

@@ -608,6 +608,7 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
                 "textAlign": "left",
               },
               {},
+              false,
             ]
           }
         >
@@ -646,6 +647,7 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
                 "textAlign": "left",
               },
               {},
+              false,
             ]
           }
         >
@@ -888,6 +890,7 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
               "textAlign": "left",
             },
             {},
+            false,
           ]
         }
       >

app/containers/markdown/components/emoji/Emoji.tsx

@@ -10,28 +10,44 @@ 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';
 
 interface IEmojiProps {
 	block: EmojiProps;
 	isBigEmoji?: boolean;
 	style?: object;
 	index?: number;
+	isAvatar?: boolean;
 }
 
-const Emoji = ({ block, isBigEmoji, style = {}, index }: IEmojiProps) => {
+function getEmojiToken(block: EmojiProps, isAvatar: boolean) {
+	if ('unicode' in block) {
+		return block.unicode;
+	}
+
+	if (isAvatar) {
+		return block.value?.value;
+	}
+
+	return block?.shortCode ? `:${block.shortCode}:` : `:${block.value?.value}:`;
+}
+
+const Emoji = ({ block, isBigEmoji, style = {}, index, isAvatar = false }: IEmojiProps) => {
 	const { colors } = useTheme();
 	const { getCustomEmoji } = useContext(MarkdownContext);
 	const { fontScale } = useWindowDimensions();
+	const { fontScaleLimited } = useResponsiveLayout();
 	const { formatShortnameToUnicode } = useShortnameToUnicode();
 	const spaceLeft = index && index > 0 ? ' ' : '';
 	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>;
 	}
 
-	const emojiToken = block?.shortCode ? `:${block.shortCode}:` : `:${block.value?.value}:`;
+	const emojiToken = getEmojiToken(block, isAvatar);
 	const emojiUnicode = formatShortnameToUnicode(emojiToken);
-	const emoji = getCustomEmoji?.(block.value?.value);
+	const emoji = getCustomEmoji?.(block.value?.value.replace(/\:/g, ''));
 	const isAsciiEmoji = !!block?.shortCode && block.value?.value !== block?.shortCode;
 	const displayAsciiEmoji = !convertAsciiEmoji && isAsciiEmoji && !!block.value;
 	const customEmojiSize = {
@@ -44,12 +60,25 @@ const Emoji = ({ block, isBigEmoji, style = {}, index }: IEmojiProps) => {
 		height: 30 * fontScale
 	};
 
+	const avatarStyle = {
+		fontSize: 30 * fontScaleLimited,
+		lineHeight: 30 * fontScaleLimited,
+		textAlign: 'center',
+		textAlignVertical: 'center'
+	};
+
 	if (emoji) {
 		return <CustomEmoji style={[isBigEmoji ? customEmojiBigSize : customEmojiSize, style]} emoji={emoji} />;
 	}
+
 	return (
 		<Text
-			style={[{ color: colors.fontDefault }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text, style]}>
+			style={[
+				{ color: colors.fontDefault },
+				isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text,
+				style,
+				isAvatar && avatarStyle
+			]}>
 			{spaceLeft}
 			{displayAsciiEmoji ? <Plain value={block.value!.value} /> : emojiUnicode}
 		</Text>

app/containers/message/Message.stories.tsx

@@ -1920,6 +1920,16 @@ export const LongNameUser = () => (
 	</>
 );
 
+export const Avatar = () => (
+	<>
+		<Message msg={'This message has no avatar.'} author={{ username: 'no.avatar', name: 'No Avatar' }} />
+		<Message msg={"This message uses the user's profile picture as the avatar."} author={author} />
+		<Message msg={'This message uses a Unicode emoji as the avatar.'} author={author} emoji={':smile:'} />
+		<Message msg={'This message uses a custom animated emoji as the avatar.'} author={author} emoji={':marioparty:'} />
+		<Message msg={'This message uses a custom static emoji as the avatar.'} author={author} emoji={':react_rocket:'} />
+	</>
+);
+
 export const LongNameUserLargeFont = () => (
 	<>
 		<MessageLargeFont msg={'this is a normal message'} author={longNameAuthor} />