diff --git a/src/CONST/index.ts b/src/CONST/index.ts index cb9c0983faf7..86120a38b39c 100755 --- a/src/CONST/index.ts +++ b/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 `` tags */ + get UNWRAPPED_EMOJI() { + return new RegExp(`(?:(?!]*>))(${this.EMOJIS.source})(?:(?!]*>))`, 'gu'); + }, PRIVATE_USER_AREA: /[\uE000-\uF8FF\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}]/u, diff --git a/src/components/RenderHTML.tsx b/src/components/RenderHTML.tsx index e61a9fa0b5a7..9cfef58d31aa 100644 --- a/src/components/RenderHTML.tsx +++ b/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 tags to prevent double-tagging. - const sanitizedHtml = htmlParam.replaceAll(/<\/?emoji>/g, ''); - return Parser.replace(sanitizedHtml, {shouldEscapeText: false, filterRules: ['emoji']}); + // Wrap all unwrapped emojis in `` tags. + return htmlParam.replace(CONST.REGEX.UNWRAPPED_EMOJI, '$1'); }, [htmlParam]); return (