Enlarge emojis in other contexts than just single character messages

package.json

@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
-    "@expensify/react-native-live-markdown": "0.1.143",
+    "@expensify/react-native-live-markdown": "0.1.163",
     "@expo/metro-runtime": "~3.2.3",
     "@firebase/app": "^0.10.10",
     "@firebase/performance": "^0.6.8",

src/CONST.ts

@@ -2643,8 +2643,8 @@ const CONST = {
 
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
-        // eslint-disable-next-line max-len, no-misleading-character-class
-        EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/gu,
+        // eslint-disable-next-line max-len, no-misleading-character-class, no-empty-character-class
+        EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\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,
 
@@ -2681,6 +2681,10 @@ const CONST = {
             return new RegExp(`[\\n\\s]|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu');
         },
 
+        get ALL_EMOJIS() {
+            return new RegExp(this.EMOJIS, this.EMOJIS.flags.concat('g'));
+        },
+
         MERGED_ACCOUNT_PREFIX: /^(MERGED_\d+@)/,
         ROUTES: {
             VALIDATE_LOGIN: /\/v($|(\/\/*))/,

src/components/AccountSwitcher.tsx

@@ -10,6 +10,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate';
+import * as EmojiUtils from '@libs/EmojiUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import variables from '@styles/variables';
@@ -48,6 +49,7 @@ function AccountSwitcher() {
 
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
     const canSwitchAccounts = canUseNewDotCopilot && (delegators.length > 0 || isActingAsDelegate);
+    const processedTextArray = EmojiUtils.splitTextWithEmojis(currentUserPersonalDetails?.displayName);
 
     const createBaseMenuItem = (personalDetails: PersonalDetails | undefined, errors?: Errors, additionalProps: MenuItemWithLink = {}): MenuItemWithLink => {
         const error = Object.values(errors ?? {}).at(0) ?? '';
@@ -150,7 +152,9 @@ function AccountSwitcher() {
                                 numberOfLines={1}
                                 style={[styles.textBold, styles.textLarge, styles.flexShrink1]}
                             >
-                                {currentUserPersonalDetails?.displayName}
+                                {processedTextArray.length !== 0
+                                    ? processedTextArray.map(({text, isEmoji}) => (isEmoji ? <Text style={styles.initialSettingsUsernameEmoji}>{text}</Text> : text))
+                                    : currentUserPersonalDetails?.displayName}
                             </Text>
                             {canSwitchAccounts && (
                                 <View style={styles.justifyContentCenter}>

src/components/Composer/index.tsx

@@ -20,6 +20,7 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo
 import * as EmojiUtils from '@libs/EmojiUtils';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {ComposerProps} from './types';
 
@@ -99,6 +100,7 @@ function Composer(
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
     const [textInputWidth, setTextInputWidth] = useState<ViewStyle['width']>('');
+    const [hasMultipleLines, setHasMultipleLines] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? '');
     const [prevScroll, setPrevScroll] = useState<number | undefined>();
@@ -369,10 +371,10 @@ function Composer(
             scrollStyleMemo,
             StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize),
             isComposerFullSize ? {height: '100%', maxHeight: 'none'} : undefined,
-            textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
+            textContainsOnlyEmojis && hasMultipleLines ? styles.onlyEmojisTextLineHeight : {},
         ],
 
-        [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis],
+        [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, hasMultipleLines, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis],
     );
 
     return (
@@ -392,6 +394,7 @@ function Composer(
                 {...props}
                 onSelectionChange={addCursorPositionToSelectionChange}
                 onContentSizeChange={(e) => {
+                    setHasMultipleLines(e.nativeEvent.contentSize.height > variables.componentSizeLarge);
                     setTextInputWidth(`${e.nativeEvent.contentSize.width}px`);
                     updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles);
                 }}

src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, {useMemo} from 'react';
+import type {TextStyle} from 'react-native';
 import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
 import EmojiWithTooltip from '@components/EmojiWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 function EmojiRenderer({tnode, style: styleProp}: CustomRendererProps<TText | TPhrasing>) {
     const styles = useThemeStyles();
-    const style = {...styleProp, ...('islarge' in tnode.attributes ? styles.onlyEmojisText : {})};
+    const style = useMemo(() => {
+        if ('islarge' in tnode.attributes) {
+            return [styleProp as TextStyle, styles.onlyEmojisText];
+        }
+
+        if ('ismedium' in tnode.attributes) {
+            return [styleProp as TextStyle, styles.emojisWithTextFontSize, styles.verticalAlignTopText];
+        }
+
+        return null;
+    }, [tnode.attributes, styles, styleProp]);
     return (
         <EmojiWithTooltip
             style={[style, styles.cursorDefault, styles.emojiDefaultStyles]}

src/components/InlineCodeBlock/WrappedText.tsx

@@ -37,7 +37,7 @@ function getTextMatrix(text: string): string[][] {
  * Validates if the text contains any emoji
  */
 function containsEmoji(text: string): boolean {
-    return CONST.REGEX.EMOJIS.test(text);
+    return CONST.REGEX.ALL_EMOJIS.test(text);
 }
 
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {

src/components/SelectionList/Search/UserInfoCell.tsx

@@ -35,7 +35,7 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
             />
             <Text
                 numberOfLines={1}
-                style={[isLargeScreenWidth ? styles.themeTextColor : [styles.textMicro, styles.textBold], styles.flexShrink1]}
+                style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1]}
             >
                 {displayName}
             </Text>

src/components/TextInput/BaseTextInput/index.native.tsx

@@ -181,9 +181,10 @@ function BaseTextInput(
             }
 
             const layout = event.nativeEvent.layout;
+            const HEIGHT_TO_FIT_EMOJIS = 1;
 
             setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth));
-            setHeight((prevHeight: number) => (!multiline ? layout.height : prevHeight));
+            setHeight((prevHeight: number) => (!multiline ? layout.height + HEIGHT_TO_FIT_EMOJIS : prevHeight));
         },
         [autoGrowHeight, multiline],
     );

src/components/TextWithTooltip/index.native.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
 import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as EmojiUtils from '@libs/EmojiUtils';
 import type TextWithTooltipProps from './types';
 
 function TextWithTooltip({text, style, numberOfLines = 1}: TextWithTooltipProps) {
+    const styles = useThemeStyles();
+    const processedTextArray = EmojiUtils.splitTextWithEmojis(text);
+
     return (
         <Text
             style={style}
             numberOfLines={numberOfLines}
         >
-            {text}
+            {processedTextArray.length !== 0
+                ? processedTextArray.map(({text: textItem, isEmoji}) => (isEmoji ? <Text style={[style, styles.emojisFontFamily]}>{textItem}</Text> : textItem))
+                : text}
         </Text>
     );
 }

src/components/WorkspacesListRowDisplayName/index.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import type WorkspacesListRowDisplayNameProps from './types';
+
+function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowDisplayNameProps) {
+    const styles = useThemeStyles();
+    const processedOwnerName = EmojiUtils.splitTextWithEmojis(ownerName);
+
+    return (
+        <Text
+            numberOfLines={1}
+            style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+        >
+            {processedOwnerName.length !== 0
+                ? processedOwnerName.map(({text, isEmoji}) =>
+                      isEmoji ? <Text style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}, styles.emojisWithTextFontFamily]}>{text}</Text> : text,
+                  )
+                : ownerName}
+        </Text>
+    );
+}
+
+WorkspacesListRowDisplayName.displayName = 'WorkspacesListRowDisplayName';
+
+export default WorkspacesListRowDisplayName;

src/components/WorkspacesListRowDisplayName/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type WorkspacesListRowDisplayNameProps from './types';
+
+function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowDisplayNameProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <Text
+            numberOfLines={1}
+            style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+        >
+            {ownerName}
+        </Text>
+    );
+}
+
+WorkspacesListRowDisplayName.displayName = 'WorkspacesListRowDisplayName';
+
+export default WorkspacesListRowDisplayName;

src/components/WorkspacesListRowDisplayName/types.tsx

@@ -0,0 +1,9 @@
+type WorkspacesListRowDisplayNameProps = {
+    /** Should the deleted style be applied */
+    isDeleted: boolean;
+
+    /** Workspace owner name */
+    ownerName: string;
+};
+
+export default WorkspacesListRowDisplayNameProps;

src/hooks/useMarkdownStyle.ts

@@ -10,7 +10,7 @@
 function useMarkdownStyle(message: string | null = null, excludeStyles: Array<keyof MarkdownStyle> = defaultEmptyArray): MarkdownStyle {
     const theme = useTheme();
     const hasMessageOnlyEmojis = message != null && message.length > 0 && containsOnlyEmojis(message);
-    const emojiFontSize = hasMessageOnlyEmojis ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal;
+    const emojiFontSize = hasMessageOnlyEmojis ? variables.fontSizeOnlyEmojis : variables.fontSizeEmojisWithinText;
 
     // this map is used to reset the styles that are not needed - passing undefined value can break the native side
     const nonStylingDefaultValues: Record<string, string | number> = useMemo(
@@ -38,6 +38,7 @@
             },
             emoji: {
                 fontSize: emojiFontSize,
+                lineHeight: variables.lineHeightXLarge,
             },
             blockquote: {
                 borderColor: theme.border,
@@ -79,7 +80,7 @@
 
         if (excludeStyles.length) {
             excludeStyles.forEach((key) => {
                 const style: Record<string, unknown> = styling[key];
                 if (style) {
                     Object.keys(style).forEach((styleKey) => {
                         style[styleKey] = nonStylingDefaultValues[styleKey] ?? style[styleKey];

src/libs/ComposerUtils/updateIsFullComposerAvailable.ts

@@ -14,7 +14,7 @@ function updateIsFullComposerAvailable(props: ComposerProps, event: NativeSynthe
         return;
     }
     const totalHeight = inputHeight + paddingTopAndBottom;
-    const isFullComposerAvailable = totalHeight >= CONST.COMPOSER.FULL_COMPOSER_MIN_HEIGHT;
+    const isFullComposerAvailable = totalHeight > CONST.COMPOSER.FULL_COMPOSER_MIN_HEIGHT;
     if (isFullComposerAvailable !== props.isFullComposerAvailable) {
         props.setIsFullComposerAvailable?.(isFullComposerAvailable);
     }

src/libs/EmojiUtils.ts

@@ -18,6 +18,10 @@ type EmojiPickerListItem = EmojiSpacer | Emoji | HeaderEmoji;
 type EmojiPickerList = EmojiPickerListItem[];
 type ReplacedEmoji = {text: string; emojis: Emoji[]; cursorPosition?: number};
 type EmojiTrieModule = {default: typeof EmojiTrie};
+type TextWithEmoji = {
+    text: string;
+    isEmoji: boolean;
+};
 
 const findEmojiByName = (name: string): Emoji => Emojis.emojiNameTable[name];
 
@@ -148,7 +152,7 @@ function trimEmojiUnicode(emojiCode: string): string {
  */
 function isFirstLetterEmoji(message: string): boolean {
     const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
-    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
+    const match = trimmedMessage.match(CONST.REGEX.ALL_EMOJIS);
 
     if (!match) {
         return false;
@@ -162,7 +166,7 @@ function isFirstLetterEmoji(message: string): boolean {
  */
 function containsOnlyEmojis(message: string): boolean {
     const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
-    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
+    const match = trimmedMessage.match(CONST.REGEX.ALL_EMOJIS);
 
     if (!match) {
         return false;
@@ -285,7 +289,7 @@ function extractEmojis(text: string): Emoji[] {
     }
 
     // Parse Emojis including skin tones - Eg: ['👩🏻', '👩🏻', '👩🏼', '👩🏻', '👩🏼', '👩']
-    const parsedEmojis = text.match(CONST.REGEX.EMOJIS);
+    const parsedEmojis = text.match(CONST.REGEX.ALL_EMOJIS);
 
     if (!parsedEmojis) {
         return [];
@@ -595,6 +599,59 @@ function getSpacersIndexes(allEmojis: EmojiPickerList): number[] {
     return spacersIndexes;
 }
 
+/** Splits the text with emojis into array if emojis exist in the text */
+function splitTextWithEmojis(text = ''): TextWithEmoji[] {
+    if (!text) {
+        return [];
+    }
+
+    const doesTextContainEmojis = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')).test(text);
+
+    if (!doesTextContainEmojis) {
+        return [];
+    }
+
+    // The regex needs to be cloned because `exec()` is a stateful operation and maintains the state inside
+    // the regex variable itself, so we must have an independent instance for each function's call.
+    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+
+    const splitText: TextWithEmoji[] = [];
+    let regexResult: RegExpExecArray | null;
+    let lastMatchIndexEnd = 0;
+
+    do {
+        regexResult = emojisRegex.exec(text);
+
+        if (regexResult?.indices) {
+            const matchIndexStart = regexResult.indices[0][0];
+            const matchIndexEnd = regexResult.indices[0][1];
+
+            if (matchIndexStart > lastMatchIndexEnd) {
+                splitText.push({
+                    text: text.slice(lastMatchIndexEnd, matchIndexStart),
+                    isEmoji: false,
+                });
+            }
+
+            splitText.push({
+                text: text.slice(matchIndexStart, matchIndexEnd),
+                isEmoji: true,
+            });
+
+            lastMatchIndexEnd = matchIndexEnd;
+        }
+    } while (regexResult !== null);
+
+    if (lastMatchIndexEnd < text.length) {
+        splitText.push({
+            text: text.slice(lastMatchIndexEnd, text.length),
+            isEmoji: false,
+        });
+    }
+
+    return splitText;
+}
+
 export type {HeaderIndice, EmojiPickerList, EmojiSpacer, EmojiPickerListItem};
 
 export {
@@ -620,4 +677,5 @@ export {
     hasAccountIDEmojiReacted,
     getRemovedSkinToneEmoji,
     getSpacersIndexes,
+    splitTextWithEmojis,
 };