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

apps/meteor/client/lib/emoji/emojiParser.ts

@@ -0,0 +1,98 @@
+import { emoji } from './lib';
+
+// Escapes a plain text value into its HTML representation so it can be safely
+// reinserted via innerHTML after emoji rendering (e.g. `<` becomes `&lt;`).
+const escapeHtml = (value: string): string => {
+	const escaper = document.createElement('div');
+	escaper.textContent = value;
+	return escaper.innerHTML;
+};
+
+const renderEmojiPackages = (value: string): string =>
+	Object.entries(emoji.packages)
+		.reverse()
+		.reduce((rendered, [, emojiPackage]) => emojiPackage.render(rendered), value);
+
+/**
+ * emojiParser is a function that will replace emojis
+ */
+export const emojiParser = (html: string) => {
+	html = html.trim();
+
+	// &#39; to apostrophe (') for emojis such as :')
+	html = html.replace(/&#39;/g, "'");
+
+	// '<br>' to ' <br> ' for emojis such at line breaks
+	html = html.replace(/<br>/g, ' <br> ');
+
+	const checkEmojiOnly = document.createElement('div');
+
+	checkEmojiOnly.innerHTML = html;
+
+	// Render emojis only inside text nodes so shortcodes that live in markup
+	// (e.g. a URL containing `:smile:` in an anchor's href) stay untouched.
+	// Emojis inside code blocks are intentionally left as their literal shortcode.
+	const textWalker = document.createTreeWalker(checkEmojiOnly, NodeFilter.SHOW_TEXT, {
+		acceptNode: (node) => (node.parentElement?.closest('code') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+	});
+
+	const textNodes: Text[] = [];
+	while (textWalker.nextNode()) {
+		textNodes.push(textWalker.currentNode as Text);
+	}
+
+	textNodes.forEach((textNode) => {
+		const escaped = escapeHtml(textNode.nodeValue ?? '');
+		const rendered = renderEmojiPackages(escaped);
+
+		if (rendered === escaped) {
+			return;
+		}
+
+		const fragmentHolder = document.createElement('span');
+		fragmentHolder.innerHTML = rendered;
+		textNode.replaceWith(...Array.from(fragmentHolder.childNodes));
+	});
+
+	const emojis = Array.from(checkEmojiOnly.querySelectorAll('.emoji:not(:empty)'));
+
+	let hasText = false;
+
+	const isElement = (node: Node): node is Element => node.nodeType === Node.ELEMENT_NODE;
+
+	const isTextNode = (node: Node): node is Text => node.nodeType === Node.TEXT_NODE;
+
+	const filter = (node: Node) => {
+		if (isElement(node) && node.classList.contains('emoji')) {
+			return NodeFilter.FILTER_REJECT;
+		}
+		return NodeFilter.FILTER_ACCEPT;
+	};
+
+	const walker = document.createTreeWalker(checkEmojiOnly, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, filter);
+
+	while (walker.nextNode()) {
+		if (isTextNode(walker.currentNode) && walker.currentNode.nodeValue.trim() !== '') {
+			hasText = true;
+			break;
+		}
+	}
+	const emojiOnly = emojis.length && !hasText;
+
+	if (emojiOnly) {
+		for (let i = 0, len = emojis.length; i < len; i++) {
+			const { classList } = emojis[i];
+			classList.add('big');
+		}
+	}
+
+	html = checkEmojiOnly.innerHTML;
+
+	// apostrophe (') back to &#39;
+	html = html.replace(/\'/g, '&#39;');
+
+	// line breaks ' <br> ' back to '<br>'
+	html = html.replace(/ <br> /g, '<br>');
+
+	return html;
+};

apps/meteor/client/lib/emoji/helpers.ts

@@ -0,0 +1,258 @@
+import { escapeRegExp } from '@rocket.chat/tools';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+
+import type { EmojiCategory, EmojiItem } from '.';
+import { emoji, emojiEmitter } from './lib';
+
+export const CUSTOM_CATEGORY = 'rocket';
+export const CUSTOM_CATEGORY_CLASSNAME = 'emojipicker--custom';
+
+const MIXED_TONE_SUFFIX = /_tone([1-5])-[1-5]$/;
+
+type RowItem = Array<EmojiItem & { category: string }>;
+type RowDivider = { category: string; i18n: TranslationKey };
+type LoadMoreItem = { loadMore: true };
+export type EmojiPickerItem = RowItem | RowDivider | LoadMoreItem;
+
+export type CategoriesIndexes = { key: string; index: number }[];
+
+export const isRowDivider = (item: EmojiPickerItem): item is RowDivider => 'i18n' in item;
+export const isLoadMore = (item: EmojiPickerItem): item is LoadMoreItem => 'loadMore' in item;
+
+export const createEmojiListByCategorySubscription = (
+	customItemsLimit: number,
+	actualTone: number,
+	recentEmojis: string[],
+	setRecentEmojis: (emojis: string[]) => void,
+	setQuickReactions: () => void,
+): [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => ReturnType<typeof createPickerEmojis>] => {
+	let result: ReturnType<typeof createPickerEmojis> = [[], []];
+	updateRecent(recentEmojis);
+
+	const sub = (cb: () => void) => {
+		result = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis);
+		setQuickReactions();
+		return emojiEmitter.on('updated', () => {
+			result = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis);
+			setQuickReactions();
+			cb();
+		});
+	};
+
+	return [sub, () => result];
+};
+
+export const createPickerEmojis = (
+	customItemsLimit: number,
+	actualTone: number,
+	recentEmojis: string[],
+	setRecentEmojis: (emojis: string[]) => void,
+): [EmojiPickerItem[], CategoriesIndexes] => {
+	const categories = getCategoriesList();
+	const categoriesIndexes: CategoriesIndexes = [];
+
+	const mappedCategories = categories.reduce<EmojiPickerItem[]>((acc, category) => {
+		categoriesIndexes.push({ key: category.key, index: acc.length });
+		acc.push({ category: category.key, i18n: category.i18n });
+		acc.push(...createEmojiList(customItemsLimit, category.key, actualTone, recentEmojis, setRecentEmojis));
+		return acc;
+	}, []);
+
+	return [mappedCategories, categoriesIndexes];
+};
+
+export const createEmojiList = (
+	customItemsLimit: number,
+	category: string,
+	actualTone: number | null,
+	recentEmojis: string[],
+	setRecentEmojis: (emojis: string[]) => void,
+): (RowItem | LoadMoreItem)[] => {
+	const items: RowItem = [];
+	const emojiPackages = Object.entries(emoji.packages);
+	let count = 0;
+	let limited = false;
+
+	emojiPackages.forEach(([packageName, emojiPackage]) => {
+		if (!emojiPackage.emojisByCategory?.[category]) {
+			return;
+		}
+		const _total = emojiPackage.emojisByCategory[category].length;
+		const total = category === CUSTOM_CATEGORY ? customItemsLimit - count : _total;
+		for (let i = 0; i < total; i++) {
+			const current = emojiPackage.emojisByCategory[category][i];
+
+			const tone = actualTone && actualTone > 0 && emojiPackage.toneList.hasOwnProperty(current) ? `_tone${actualTone}` : '';
+
+			const emojiToRender = `:${current}${tone}:`;
+
+			const actualEmoji = emoji.list[emojiToRender];
+			if (!actualEmoji) {
+				removeFromRecent(emojiToRender, recentEmojis, setRecentEmojis);
+				return;
+			}
+
+			// A custom emoji with the same name overrides the native one (including its tones), so skip the native duplicate
+			if (packageName === 'native' && emoji.list[`:${current}:`]?.emojiPackage === 'emojiCustom') {
+				continue;
+			}
+
+			const actualPackage = actualEmoji.emojiPackage;
+			const image = emoji.packages[actualPackage].renderPicker(emojiToRender);
+			if (!image) {
+				continue;
+			}
+			items.push({ emoji: current, image, category });
+			count++;
+		}
+
+		if (_total > total) {
+			limited = true;
+		}
+	});
+
+	const rowCount = 9;
+	const rowList: Array<RowItem | LoadMoreItem> = Array.from({ length: Math.ceil(items.length / rowCount) }).map(() => []);
+
+	for (let i = 0; i < rowList.length; i++) {
+		const row = items.slice(i * rowCount, i * rowCount + rowCount);
+		rowList[i] = row;
+	}
+
+	if (rowList.length === 0) {
+		rowList.push([]);
+	}
+
+	if (limited) {
+		rowList.push({ loadMore: true });
+	}
+
+	return rowList;
+};
+
+export const getCategoriesList = () => {
+	let categoriesList: EmojiCategory[] = [];
+
+	for (const emojiPackage of Object.values(emoji.packages)) {
+		if (emojiPackage.emojiCategories) {
+			if (typeof emojiPackage.categoryIndex !== 'undefined') {
+				categoriesList.splice(emojiPackage.categoryIndex, 0, ...emojiPackage.emojiCategories);
+			} else {
+				categoriesList = categoriesList.concat(emojiPackage.emojiCategories);
+			}
+		}
+	}
+
+	const rocketPosition = categoriesList.findIndex((category) => category.key === CUSTOM_CATEGORY);
+	const rocketCategory = categoriesList.splice(rocketPosition, 1)[0];
+	categoriesList.push(rocketCategory);
+
+	return categoriesList;
+};
+
+export const getEmojisBySearchTerm = (
+	searchTerm: string,
+	actualTone: number,
+	recentEmojis: string[],
+	setRecentEmojis: (emojis: string[]) => void,
+) => {
+	const emojis = [];
+	const seenEmojis = new Set<(typeof emoji.list)[string]>();
+	const searchRegExp = new RegExp(escapeRegExp(searchTerm.replace(/:/g, '')), 'i');
+
+	for (let current in emoji.list) {
+		if (!emoji.list.hasOwnProperty(current) || !searchRegExp.test(current)) {
+			continue;
+		}
+
+		const emojiObject = emoji.list[current];
+
+		// Skip duplicates (same emoji in different packages)
+		if (seenEmojis.has(emojiObject)) {
+			continue;
+		}
+
+		const { emojiPackage, shortnames = [], name } = emojiObject;
+		let tone = '';
+		current = current.replace(/:/g, '');
+
+		if (actualTone > 0 && emoji.packages[emojiPackage].toneList.hasOwnProperty(name ?? current)) {
+			tone = `_tone${actualTone}`;
+		}
+
+		const isNative = emojiPackage === 'native';
+		if (isNative) {
+			const mixedTones = current.match(MIXED_TONE_SUFFIX);
+			if (mixedTones && !(actualTone > 0 && Number(mixedTones[1]) === actualTone)) {
+				continue;
+			}
+		}
+
+		const categoryName = isNative ? current.replace(MIXED_TONE_SUFFIX, '') : current;
+
+		const isCategoryEmoji = Object.values(emoji.packages[emojiPackage].emojisByCategory).some(
+			(contents) => contents.indexOf(categoryName) !== -1,
+		);
+		if (!isCategoryEmoji && shortnames.length === 0) {
+			continue;
+		}
+
+		const emojiToRender = `:${current}${tone}:`;
+
+		const actualEmoji = emoji.list[emojiToRender];
+		if (!actualEmoji) {
+			removeFromRecent(emojiToRender, recentEmojis, setRecentEmojis);
+			continue;
+		}
+
+		seenEmojis.add(emojiObject);
+
+		const actualPackage = actualEmoji.emojiPackage;
+
+		emojis.push({ emoji: `${current}${tone}`, image: emoji.packages[actualPackage].renderPicker(emojiToRender) });
+	}
+
+	return emojis;
+};
+
+export const removeFromRecent = (emoji: string, recentEmojis: string[], setRecentEmojis?: (emojis: string[]) => void) => {
+	const _emoji = emoji.replace(/(^:|:$)/g, '');
+	const pos = recentEmojis.indexOf(_emoji);
+
+	if (pos === -1) {
+		return;
+	}
+	recentEmojis.splice(pos, 1);
+	setRecentEmojis?.(recentEmojis);
+};
+
+// There's no need to dispatchUpdate here. This helper is called before the list is generated.
+// This means that the recent list will always be up to date by the time it is used.
+export const updateRecent = (recentList: string[]) => {
+	const recentPkgList: string[] = emoji.packages.base.emojisByCategory.recent;
+	recentList?.forEach((_emoji) => {
+		!recentPkgList.includes(_emoji) && recentPkgList.push(_emoji);
+	});
+};
+
+export const replaceEmojiInRecent = ({ oldEmoji, newEmoji }: { oldEmoji: string; newEmoji: string }) => {
+	const recentPkgList: string[] = emoji.packages.base.emojisByCategory.recent;
+	const pos = recentPkgList.indexOf(oldEmoji);
+
+	if (pos !== -1) {
+		recentPkgList[pos] = newEmoji;
+		emoji.dispatchUpdate();
+	}
+};
+
+const getEmojiRender = (emojiName: string) => {
+	const emojiPackageName = emoji.list[emojiName]?.emojiPackage;
+	const emojiPackage = emoji.packages[emojiPackageName];
+	return emojiPackage?.render(emojiName);
+};
+
+export const getFrequentEmoji = (frequentEmoji: string[]) => {
+	return frequentEmoji?.map((frequentEmoji) => {
+		return { emoji: frequentEmoji, image: getEmojiRender(`:${frequentEmoji}:`) };
+	});
+};

apps/meteor/client/lib/emoji/index.ts

@@ -0,0 +1,3 @@
+export * from './helpers';
+export type * from './types';
+export { emoji, emojiEmitter } from './lib';

apps/meteor/client/lib/emoji/lib.ts

@@ -0,0 +1,33 @@
+import { Emitter } from '@rocket.chat/emitter';
+
+import type { EmojiPackages } from '../../../app/emoji/lib/rocketchat';
+
+export const emojiEmitter = new Emitter<{ updated: void }>();
+
+export const emoji: EmojiPackages & { dispatchUpdate: () => void } = {
+	packages: {
+		base: {
+			emojiCategories: [{ key: 'recent', i18n: 'Frequently_Used' }],
+			categoryIndex: 0,
+			emojisByCategory: {
+				recent: [],
+			},
+			toneList: {},
+			render: (message: string) => message,
+			renderPicker(emojiToRender) {
+				const correctPackage = emoji.list[emojiToRender].emojiPackage;
+				if (!correctPackage) {
+					return;
+				}
+
+				return emoji.packages[correctPackage]?.renderPicker(emojiToRender);
+			},
+		},
+	},
+	list: {},
+	dispatchUpdate() {
+		queueMicrotask(() => {
+			emojiEmitter.emit('updated');
+		});
+	},
+};

apps/meteor/client/lib/emoji/types.ts

@@ -0,0 +1,20 @@
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+
+export type EmojiItem = {
+	emoji: string;
+	image: string;
+};
+
+export type EmojiCategory = {
+	key: string;
+	i18n: TranslationKey;
+};
+
+export type EmojiByCategory = {
+	key: string;
+	i18n: TranslationKey;
+	emojis: {
+		list: EmojiItem[];
+		limit: number | null;
+	};
+};