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,