Merge pull request Expensify#67696 from dmkt9/fix/66602-emoji-disappeared

Fix PR 67030 - Emojis disappear after the user sends the message

Author: techievivek

src/CONST/index.ts

@@ -3470,6 +3470,10 @@ const CONST = {
         EMOJIS: /[\p{Extended_Pictographic}\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}](\u200D[\p{Extended_Pictographic}\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/du,
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI_SKIN_TONES: /[\u{1f3fb}-\u{1f3ff}]/gu,
+        /** Regex to match emojis that are not wrapped in `<emoji>` tags */
+        get UNWRAPPED_EMOJI() {
+            return new RegExp(`(?:(?!<emoji[^>]*>))(${this.EMOJIS.source})(?:(?!</emoji[^>]*>))`, 'gu');
+        },
 
         PRIVATE_USER_AREA: /[\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]/u,
 

src/components/RenderHTML.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {RenderHTMLSource} from 'react-native-render-html';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import Parser from '@libs/Parser';
+import CONST from '@src/CONST';
 
 type RenderHTMLProps = {
     /** HTML string to render */
@@ -15,9 +15,8 @@ type RenderHTMLProps = {
 function RenderHTML({html: htmlParam}: RenderHTMLProps) {
     const {windowWidth} = useWindowDimensions();
     const html = useMemo(() => {
-        // Sanitize emoji characters already wrapped in <emoji> tags to prevent double-tagging.
-        const sanitizedHtml = htmlParam.replaceAll(/<\/?emoji>/g, '');
-        return Parser.replace(sanitizedHtml, {shouldEscapeText: false, filterRules: ['emoji']});
+        // Wrap all unwrapped emojis in `<emoji>` tags.
+        return htmlParam.replace(CONST.REGEX.UNWRAPPED_EMOJI, '<emoji>$1</emoji>');
     }, [htmlParam]);
     return (
         <RenderHTMLSource