Merge pull request Expensify#66081 from Expensify/cmartins-fix-custom-emoji-for-header-in-threads

[CP Staging] fix custom emoji for header in threads

Author: luacmartins

src/components/DisplayNames/index.native.tsx

@@ -1,21 +1,31 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import Parser from '@libs/Parser';
 import StringUtils from '@libs/StringUtils';
+import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment';
 import type DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
 function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText}: DisplayNamesProps) {
     const {translate} = useLocalize();
+    const titleContainsTextAndCustomEmoji = useMemo(() => !containsCustomEmoji(fullTitle) && containsOnlyCustomEmoji(fullTitle), [fullTitle]);
     return (
         <Text
             accessibilityLabel={accessibilityLabel}
             style={textStyles}
             numberOfLines={numberOfLines}
             testID={DisplayNames.displayName}
         >
-            {StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')}
+            {titleContainsTextAndCustomEmoji ? (
+                <TextWithEmojiFragment
+                    message={StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')}
+                    style={textStyles}
+                />
+            ) : (
+                StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')
+            )}
             {renderAdditionalText?.()}
         </Text>
     );

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -323,7 +323,7 @@ function OptionRowLHN({
                                                         <TextWithEmojiFragment
                                                             message={Parser.htmlToText(optionItem.alternateText)}
                                                             style={[alternateTextStyle, styles.mh0]}
-                                                            isAlternateText
+                                                            alignCustomEmoji
                                                         />
                                                     ) : (
                                                         Parser.htmlToText(optionItem.alternateText)

src/components/MenuItem.tsx

@@ -11,10 +11,12 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
 import mergeRefs from '@libs/mergeRefs';
 import Parser from '@libs/Parser';
 import type {AvatarSource} from '@libs/UserUtils';
+import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment';
 import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import variables from '@styles/variables';
 import {callFunctionIfActionIsAllowed} from '@userActions/Session';
@@ -601,6 +603,18 @@ function MenuItem(
             );
         }
 
+        const titleContainsTextAndCustomEmoji = containsCustomEmoji(title ?? '') && !containsOnlyCustomEmoji(title ?? '');
+
+        if (title && titleContainsTextAndCustomEmoji) {
+            return (
+                <TextWithEmojiFragment
+                    message={convertToLTR(title) || ''}
+                    style={combinedTitleTextStyle}
+                    alignCustomEmoji
+                />
+            );
+        }
+
         return title ? convertToLTR(title) : '';
     };
 

src/components/Text.tsx

@@ -53,7 +53,15 @@ function Text(
     }
 
     const isOnlyCustomEmoji = useMemo(() => {
-        return typeof children === 'string' ? containsOnlyCustomEmoji(children) : false;
+        if (typeof children === 'string') {
+            return containsOnlyCustomEmoji(children);
+        }
+        if (Array.isArray(children)) {
+            return children.every((child) => {
+                return child === null || (typeof child === 'string' && containsOnlyCustomEmoji(child));
+            });
+        }
+        return false;
     }, [children]);
 
     if (isOnlyCustomEmoji) {

src/pages/home/report/comment/TextWithEmojiFragment/index.tsx

@@ -5,7 +5,7 @@ import convertToLTR from '@libs/convertToLTR';
 import {splitTextWithEmojis} from '@libs/EmojiUtils';
 import type TextWithEmojiFragmentProps from './types';
 
-function TextWithEmojiFragment({message = '', style, isAlternateText = false}: TextWithEmojiFragmentProps) {
+function TextWithEmojiFragment({message = '', style, alignCustomEmoji = false}: TextWithEmojiFragmentProps) {
     const styles = useThemeStyles();
     const processedTextArray = useMemo(() => splitTextWithEmojis(message), [message]);
     return (
@@ -15,7 +15,7 @@ function TextWithEmojiFragment({message = '', style, isAlternateText = false}: T
                     <Text
                         // eslint-disable-next-line react/no-array-index-key
                         key={index}
-                        style={isAlternateText ? style : styles.emojisWithTextFontSize}
+                        style={alignCustomEmoji ? style : styles.emojisWithTextFontSize}
                     >
                         {text}
                     </Text>

src/pages/home/report/comment/TextWithEmojiFragment/types.ts

@@ -8,7 +8,7 @@ type TextWithEmojiFragmentProps = {
     style: StyleProp<TextStyle>;
 
     /** Whether the text is alternate text */
-    isAlternateText?: boolean;
+    alignCustomEmoji?: boolean;
 };
 
 export default TextWithEmojiFragmentProps;

src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts

@@ -41,7 +41,7 @@ const fontFamily: FontFamilyStyles = {
         fontWeight: fontWeight.normal,
     },
     EXP_NEUE_BOLD: {
-        fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji',
+        fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji, Custom Emoji Font',
         fontStyle: 'normal',
         fontWeight: fontWeight.bold,
     },
@@ -57,7 +57,7 @@ const fontFamily: FontFamilyStyles = {
     },
 
     EXP_NEW_KANSAS_MEDIUM: {
-        fontFamily: 'Expensify New Kansas, Segoe UI Emoji, Noto Color Emoji',
+        fontFamily: 'Expensify New Kansas, Segoe UI Emoji, Noto Color Emoji, Custom Emoji Font',
         fontStyle: 'normal',
         fontWeight: fontWeight.medium,
     },