snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

packages/gazzodown/src/emoji/BigEmojiBlock.tsx

@@ -0,0 +1,17 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+
+import BigEmojiElement from './BigEmojiElement';
+
+export type BigEmojiBlockProps = {
+	emoji: MessageParser.Emoji[];
+};
+
+const BigEmojiBlock = ({ emoji }: BigEmojiBlockProps) => (
+	<div role='presentation'>
+		{emoji.map((emoji, index) => (
+			<BigEmojiElement key={index} {...emoji} />
+		))}
+	</div>
+);
+
+export default BigEmojiBlock;

packages/gazzodown/src/emoji/BigEmojiElement.tsx

@@ -0,0 +1,9 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+
+import Emoji from './Emoji';
+
+export type BigEmojiElementProps = MessageParser.Emoji;
+
+const BigEmojiElement = (emoji: BigEmojiElementProps) => <Emoji big {...emoji} />;
+
+export default BigEmojiElement;

packages/gazzodown/src/emoji/Emoji.tsx

@@ -0,0 +1,32 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+import { useMemo, useContext, memo } from 'react';
+
+import { MarkupInteractionContext } from '../MarkupInteractionContext';
+import EmojiRenderer from './EmojiRenderer';
+import PlainSpan from '../elements/PlainSpan';
+
+export type EmojiProps = MessageParser.Emoji & {
+	big?: boolean;
+	preview?: boolean;
+};
+
+const Emoji = ({ big = false, preview = false, ...emoji }: EmojiProps) => {
+	const { convertAsciiToEmoji, useEmoji } = useContext(MarkupInteractionContext);
+
+	const asciiEmoji = useMemo(
+		() => ('shortCode' in emoji && emoji.value.value !== emoji.shortCode ? emoji.value.value : undefined),
+		[emoji],
+	);
+
+	if (!useEmoji && 'shortCode' in emoji) {
+		return <PlainSpan text={emoji.shortCode === emoji.value.value ? `:${emoji.shortCode}:` : emoji.value.value} />;
+	}
+
+	if (!convertAsciiToEmoji && asciiEmoji) {
+		return <PlainSpan text={asciiEmoji} />;
+	}
+
+	return <EmojiRenderer big={big} preview={preview} {...emoji} />;
+};
+
+export default memo(Emoji);

packages/gazzodown/src/emoji/EmojiElement.tsx

@@ -0,0 +1,10 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+import { memo } from 'react';
+
+import Emoji from './Emoji';
+
+export type EmojiElementProps = MessageParser.Emoji;
+
+const EmojiElement = (emoji: EmojiElementProps) => <Emoji {...emoji} />;
+
+export default memo(EmojiElement);

packages/gazzodown/src/emoji/EmojiRenderer.tsx

@@ -0,0 +1,47 @@
+import { MessageEmoji, ThreadMessageEmoji } from '@rocket.chat/fuselage';
+import type * as MessageParser from '@rocket.chat/message-parser';
+import { useContext, memo } from 'react';
+
+import { MarkupInteractionContext } from '../MarkupInteractionContext';
+import { useEmojiDescriptors } from './useEmojiDescriptors';
+import PlainSpan from '../elements/PlainSpan';
+
+type EmojiProps = MessageParser.Emoji & {
+	big?: boolean;
+	preview?: boolean;
+};
+
+const EmojiRenderer = ({ big = false, preview = false, ...emoji }: EmojiProps) => {
+	const { useEmoji } = useContext(MarkupInteractionContext);
+
+	const { descriptors, sanitizedFallback } = useEmojiDescriptors(emoji);
+
+	//handles unicode emojis
+	if (!useEmoji) {
+		return <PlainSpan text={descriptors?.map(({ name, content }) => name || content).join('') ?? sanitizedFallback} />;
+	}
+
+	return (
+		<>
+			{descriptors?.map(({ name, className, image, content }, i) => (
+				<span key={i} title={name}>
+					{preview ? (
+						<ThreadMessageEmoji className={className} name={name} image={image}>
+							{content}
+						</ThreadMessageEmoji>
+					) : (
+						<MessageEmoji big={big} className={className} name={name} image={image}>
+							{content}
+						</MessageEmoji>
+					)}
+				</span>
+			)) ?? (
+				<span title={sanitizedFallback} role='img' aria-label={sanitizedFallback.charAt(0) === ':' ? sanitizedFallback : undefined}>
+					{sanitizedFallback}
+				</span>
+			)}
+		</>
+	);
+};
+
+export default memo(EmojiRenderer);

packages/gazzodown/src/emoji/PreviewBigEmojiBlock.tsx

@@ -0,0 +1,17 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+
+import PreviewEmojiElement from './PreviewEmojiElement';
+
+export type PreviewBigEmojiBlockProps = {
+	emoji: MessageParser.Emoji[];
+};
+
+const PreviewBigEmojiBlock = ({ emoji }: PreviewBigEmojiBlockProps) => (
+	<>
+		{emoji.map((emoji, index) => (
+			<PreviewEmojiElement key={index} {...emoji} />
+		))}
+	</>
+);
+
+export default PreviewBigEmojiBlock;

packages/gazzodown/src/emoji/PreviewEmojiElement.tsx

@@ -0,0 +1,9 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+
+import Emoji from './Emoji';
+
+export type PreviewEmojiElementProps = MessageParser.Emoji;
+
+const PreviewEmojiElement = (emoji: PreviewEmojiElementProps) => <Emoji preview {...emoji} />;
+
+export default PreviewEmojiElement;

packages/gazzodown/src/emoji/useEmojiDescriptors.ts

@@ -0,0 +1,20 @@
+import type * as MessageParser from '@rocket.chat/message-parser';
+import DOMPurify from 'dompurify';
+import { useContext, useMemo } from 'react';
+
+import { MarkupInteractionContext } from '../MarkupInteractionContext';
+
+export const useEmojiDescriptors = (emoji: MessageParser.Emoji) => {
+	const { detectEmoji } = useContext(MarkupInteractionContext);
+
+	const fallback = useMemo(() => ('unicode' in emoji ? emoji.unicode : `:${emoji.shortCode ?? emoji.value.value}:`), [emoji]);
+
+	const sanitizedFallback = useMemo(() => DOMPurify.sanitize(fallback), [fallback]);
+
+	const descriptors = useMemo(() => {
+		const detected = detectEmoji?.(sanitizedFallback);
+		return detected?.length !== 0 ? detected : undefined;
+	}, [detectEmoji, sanitizedFallback]);
+
+	return { descriptors, sanitizedFallback };
+};