Increase emoji size within text messages on web

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<TText | TPhrasing>) {
     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 (
         <EmojiWithTooltip
             style={[style, styles.cursorDefault, styles.emojiDefaultStyles]}

src/hooks/useMarkdownStyle.ts

@@ -35,6 +35,7 @@ function useMarkdownStyle(doesInputContainOnlyEmojis?: boolean, excludeStyles: A
             },
             emoji: {
                 fontSize: doesInputContainOnlyEmojis ? variables.fontSizeEmojisOnlyComposer : variables.fontSizeEmojisWithinText,
+                lineHeight: doesInputContainOnlyEmojis ? variables.lineHeightEmojisOnlyComposer : variables.fontSizeEmojisWithinText,
             },
             blockquote: {
                 borderColor: theme.border,

src/pages/home/report/comment/TextCommentFragment.tsx

@@ -48,6 +48,8 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
     const {html = '', text = ''} = fragment ?? {};
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+    const doesTextContainEmojis = emojisRegex.test(text);
 
     // If the only difference between fragment.text and fragment.html is <br /> 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 ? `<edited ${styleAsDeleted ? 'deleted' : ''} ${doesTextContainOnlyEmojis ? 'islarge' : ''}></edited>` : '';
         const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
 
-        const htmlContent = doesTextContainOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji islarge>') : htmlWithDeletedTag;
+        let htmlContent = htmlWithDeletedTag;
+
+        if (doesTextContainOnlyEmojis) {
+            htmlContent = Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji islarge>');
+        } else if (doesTextContainEmojis) {
+            htmlContent = Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji ismedium>');
+        }
+
         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 (
         <Text style={[doesTextContainOnlyEmojis && styles.onlyEmojisText, styles.ltr, style]}>

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,