[FIX] Emojis on thread replies (#18407)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

app/emoji/client/emojiParser.js

@@ -12,72 +12,76 @@ import { emoji } from '../lib/rocketchat';
  * @param {Object} message - The message object
  */
 
-Tracker.autorun(() => {
-	if (!getUserPreference(Meteor.userId(), 'useEmojis')) {
-		return callbacks.remove('renderMessage', 'emoji');
-	}
-	callbacks.add('renderMessage', (message) => {
-		let html = s.trim(message.html);
-		if (html) {
-			// ' to apostrophe (') for emojis such as :')
-			html = html.replace(/'/g, '\'');
+const emojiParser = function(message) {
+	let html = s.trim(message.html);
+	if (html) {
+		// ' to apostrophe (') for emojis such as :')
+		html = html.replace(/'/g, '\'');
 
-			// '<br>' to ' <br> ' for emojis such at line breaks
-			html = html.replace(/<br>/g, ' <br> ');
+		// '<br>' to ' <br> ' for emojis such at line breaks
+		html = html.replace(/<br>/g, ' <br> ');
 
-			html = Object.entries(emoji.packages).reduce((value, [, emojiPackage]) => emojiPackage.render(value), html);
+		html = Object.entries(emoji.packages).reduce((value, [, emojiPackage]) => emojiPackage.render(value), html);
 
-			const checkEmojiOnly = document.createElement('div');
+		const checkEmojiOnly = document.createElement('div');
 
-			checkEmojiOnly.innerHTML = html;
+		checkEmojiOnly.innerHTML = html;
 
-			const emojis = Array.from(checkEmojiOnly.querySelectorAll('.emoji:not(:empty), .emojione:not(:empty)'));
+		const emojis = Array.from(checkEmojiOnly.querySelectorAll('.emoji:not(:empty), .emojione:not(:empty)'));
 
-			let hasText = false;
+		let hasText = false;
 
-			if (!isIE11()) {
-				const filter = (node) => {
-					if (node.nodeType === Node.ELEMENT_NODE && (
-						node.classList.contains('emojione')
-							|| node.classList.contains('emoji')
-					)) {
-						return NodeFilter.FILTER_REJECT;
-					}
-					return NodeFilter.FILTER_ACCEPT;
-				};
+		if (!isIE11()) {
+			const filter = (node) => {
+				if (node.nodeType === Node.ELEMENT_NODE && (
+					node.classList.contains('emojione')
+						|| node.classList.contains('emoji')
+				)) {
+					return NodeFilter.FILTER_REJECT;
+				}
+				return NodeFilter.FILTER_ACCEPT;
+			};
 
-				const walker = document.createTreeWalker(
-					checkEmojiOnly,
-					NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
-					filter,
-				);
+			const walker = document.createTreeWalker(
+				checkEmojiOnly,
+				NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+				filter,
+			);
 
 
-				while (walker.nextNode()) {
-					if (walker.currentNode.nodeType === Node.TEXT_NODE && walker.currentNode.nodeValue.trim() !== '') {
-						hasText = true;
-						break;
-					}
+			while (walker.nextNode()) {
+				if (walker.currentNode.nodeType === Node.TEXT_NODE && 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;
+			}
+			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;');
+		// apostrophe (') back to &#39;
+		html = html.replace(/\'/g, '&#39;');
 
-			// line breaks ' <br> ' back to '<br>'
-			html = html.replace(/ <br> /g, '<br>');
-		}
+		// line breaks ' <br> ' back to '<br>'
+		html = html.replace(/ <br> /g, '<br>');
+	}
 
-		return { ...message, html };
-	}, callbacks.priority.LOW, 'emoji');
+	return { ...message, html };
+};
+
+Tracker.autorun(() => {
+	if (!getUserPreference(Meteor.userId(), 'useEmojis')) {
+		return callbacks.remove('renderMessage', 'emoji');
+	}
+	callbacks.add('renderMessage', emojiParser, callbacks.priority.LOW, 'emoji');
 });
+
+export { emojiParser };

app/threads/client/lib/normalizeThreadTitle.js

@@ -5,6 +5,7 @@ import { filterMarkdown } from '../../../markdown/lib/markdown';
 import { Users } from '../../../models/client';
 import { settings } from '../../../settings/client';
 import { MentionsParser } from '../../../mentions/lib/MentionsParser';
+import { emojiParser } from '../../../emoji/client/emojiParser.js';
 
 export const normalizeThreadTitle = ({ ...message }) => {
 	if (message.msg) {
@@ -24,8 +25,8 @@ export const normalizeThreadTitle = ({ ...message }) => {
 			userTemplate: ({ label }) => `<strong> ${ label } </strong>`,
 			roomTemplate: ({ prefix, mention }) => `${ prefix }<strong> ${ mention } </strong>`,
 		});
-
-		return instance.parse({ ...message, msg: filteredMessage, html: filteredMessage }).html;
+		const { html } = emojiParser({ html: filteredMessage });
+		return instance.parse({ ...message, msg: filteredMessage, html }).html;
 	}
 
 	if (message.attachments) {