[FIX] Emoji not rendered on attachments description (#22437)

client/components/MarkdownText.tsx

@@ -3,10 +3,13 @@ import dompurify from 'dompurify';
 import marked from 'marked';
 import React, { FC, useMemo } from 'react';
 
+import { renderMessageEmoji } from '../lib/renderMessageEmoji';
+
 type MarkdownTextParams = {
 	content: string;
 	variant: 'inline' | 'inlineWithoutBreaks' | 'document';
 	preserveHtml: boolean;
+	parseEmoji: boolean;
 	withTruncatedText: boolean;
 };
 
@@ -66,6 +69,7 @@ const MarkdownText: FC<Partial<MarkdownTextParams>> = ({
 	variant = 'document',
 	withTruncatedText = false,
 	preserveHtml = false,
+	parseEmoji = false,
 	...props
 }) => {
 	const sanitizer = dompurify.sanitize;
@@ -86,12 +90,23 @@ const MarkdownText: FC<Partial<MarkdownTextParams>> = ({
 	}
 
 	const __html = useMemo(() => {
-		const html =
-			content &&
-			typeof content === 'string' &&
-			marked(new Option(content).innerHTML, markedOptions);
+		const html = ((): any => {
+			if (content && typeof content === 'string') {
+				const markedHtml = marked(new Option(content).innerHTML, markedOptions);
+
+				if (parseEmoji) {
+					// We are using the old emoji parser here. This could come
+					// with additional processing use, but is the workaround available right now.
+					// Should be replaced in the future with the new parser.
+					return renderMessageEmoji({ html: markedHtml });
+				}
+
+				return markedHtml;
+			}
+		})();
+
 		return preserveHtml ? html : html && sanitizer(html, { ADD_ATTR: ['target'] });
-	}, [content, preserveHtml, sanitizer, markedOptions]);
+	}, [content, preserveHtml, sanitizer, markedOptions, parseEmoji]);
 
 	return __html ? (
 		<Box

client/components/Message/Attachments/DefaultAttachment.tsx

@@ -15,7 +15,8 @@ const applyMarkdownIfRequires = (
 	list: MessageAttachmentDefault['mrkdwn_in'] = ['text', 'pretext'],
 	key: MarkdownFields,
 	text: string,
-): ReactNode => (list?.includes(key) ? <MarkdownText variant='inline' content={text} /> : text);
+): ReactNode =>
+	list?.includes(key) ? <MarkdownText parseEmoji variant='inline' content={text} /> : text;
 
 const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 	const [collapsed, collapse] = useCollapse(!!attachment.collapsed);

client/components/Message/Attachments/Files/AudioAttachment.tsx

@@ -20,7 +20,7 @@ export const AudioAttachment: FC<AudioAttachmentProps> = ({
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
-			<MarkdownText variant='inline' content={description} />
+			<MarkdownText parseEmoji variant='inline' content={description} />
 			<Attachment.Row>
 				<Attachment.Title>{title}</Attachment.Title>
 				{size && <Attachment.Size size={size} />}

client/components/Message/Attachments/Files/GenericFileAttachment.tsx

@@ -26,7 +26,7 @@ export const GenericFileAttachment: FC<GenericFileAttachmentProps> = ({
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
-			{description && <MarkdownText content={description} />}
+			{description && <MarkdownText parseEmoji content={description} />}
 			<Attachment.Row>
 				{hasDownload && link ? (
 					<Attachment.TitleLink link={getURL(link)} title={title} />

client/components/Message/Attachments/Files/ImageAttachment.tsx

@@ -27,7 +27,7 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
-			{description && <MarkdownText variant='inline' content={description} />}
+			{description && <MarkdownText parseEmoji variant='inline' content={description} />}
 			<Attachment.Row>
 				<Attachment.Title>{title}</Attachment.Title>
 				{size && <Attachment.Size size={size} />}

client/components/Message/Attachments/Files/VideoAttachment.tsx

@@ -2,6 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
 import { VideoAttachmentProps } from '../../../../../definition/IMessage/MessageAttachment/Files/VideoAttachmentProps';
+import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import { useMediaUrl } from '../context/AttachmentContext';
 import { useCollapse } from '../hooks/useCollapse';
@@ -32,7 +33,11 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 					<Box is='video' width='full' controls>
 						<source src={getURL(url)} type={type} />
 					</Box>
-					{description && <Attachment.Details is='figcaption'>{description}</Attachment.Details>}
+					{description && (
+						<Attachment.Details is='figcaption'>
+							<MarkdownText parseEmoji variant='inline' content={description} />
+						</Attachment.Details>
+					)}
 				</Attachment.Content>
 			)}
 		</Attachment>

client/components/Message/Attachments/QuoteAttachment.tsx

@@ -55,7 +55,7 @@ export const QuoteAttachment: FC<MessageQuoteAttachment> = ({
 							{format(ts)}
 						</Box>
 					</Attachment.Author>
-					<MarkdownText variant='inline' content={text} />
+					<MarkdownText parseEmoji variant='inline' content={text} />
 					{attachments && (
 						<Attachment.Inner>
 							<Attachments attachments={attachments} />

client/lib/renderMessageEmoji.ts

@@ -0,0 +1,6 @@
+import { emojiParser } from '../../app/emoji/client/emojiParser.js';
+import { IMessage } from '../../definition/IMessage';
+
+export const renderMessageEmoji = <T extends Partial<IMessage> & { html?: string }>(
+	message: T,
+): string => emojiParser(message)?.html;