diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx index 9ad138444b9c..8f96238573ee 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx @@ -1,11 +1,22 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html'; import EmojiWithTooltip from '@components/EmojiWithTooltip'; import useThemeStyles from '@hooks/useThemeStyles'; function EmojiRenderer({tnode}: CustomRendererProps) { const styles = useThemeStyles(); - const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {}; + const style = useMemo(() => { + if ('islarge' in tnode.attributes) { + return styles.onlyEmojisText; + } + + if ('ismedium' in tnode.attributes) { + return [styles.emojisWithinTextFontSize, styles.verticalAlignMiddle]; + } + + return null; + }, [tnode.attributes, styles]); + return ( tags and emoji tag // on native, we render it as text, not as html @@ -57,7 +59,14 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so const editedTag = fragment?.isEdited ? `` : ''; const htmlWithDeletedTag = styleAsDeleted ? `${html}` : html; - const htmlContent = doesTextContainOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '', '') : htmlWithDeletedTag; + let htmlContent = htmlWithDeletedTag; + + if (doesTextContainOnlyEmojis) { + htmlContent = Str.replaceAll(htmlWithDeletedTag, '', ''); + } else if (doesTextContainEmojis) { + htmlContent = Str.replaceAll(htmlWithDeletedTag, '', ''); + } + let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent; if (styleAsMuted) { @@ -73,7 +82,6 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so } const message = isEmpty(iouMessage) ? text : iouMessage; - const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')); return ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 3f0173ddf446..c11192433be4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -364,6 +364,9 @@ const styles = (theme: ThemeColors) => verticalAlignTop: { verticalAlign: 'top', }, + verticalAlignMiddle: { + verticalAlign: 'middle', + }, lineHeightLarge: { lineHeight: variables.lineHeightLarge, }, @@ -1713,6 +1716,10 @@ const styles = (theme: ThemeColors) => lineHeight: variables.lineHeightEmojisWithTextComposer, }, + emojisWithinTextFontSize: { + fontSize: variables.fontSizeEmojisWithinText, + }, + emojisWithinText: { fontSize: variables.fontSizeEmojisWithinText, lineHeight: variables.lineHeightComment,