Revert "Emojis larger in other contexts than just single character me…

…ssages"
Expensify · Jul 29, 2024 · 04d8540 · 04d8540
1 parent a5a17b0
commit 04d8540
Show file tree

Hide file tree

Showing 21 changed files with 82 additions and 391 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -2308,8 +2308,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, 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
+        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
         EMOJI_SKIN_TONES: /[\u{1f3fb}-\u{1f3ff}]/gu,
 

diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx
@@ -39,9 +39,9 @@ function Composer(
 ) {
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const {isFocused, shouldResetFocusRef} = useResetComposerFocus(textInput);
-    const doesTextContainOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
+    const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
     const theme = useTheme();
-    const markdownStyle = useMarkdownStyle(doesTextContainOnlyEmojis, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
+    const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
@@ -73,10 +73,7 @@ function Composer(
     }, [shouldClear, onClear]);
 
     const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
-    const composerStyle = useMemo(
-        () => StyleSheet.flatten([style, doesTextContainOnlyEmojis ? styles.onlyEmojisTextLineHeight : styles.emojisWithTextLineHeight]),
-        [style, doesTextContainOnlyEmojis, styles],
-    );
+    const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]);
 
     return (
         <RNMarkdownTextInput

diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
@@ -80,10 +80,10 @@ function Composer(
     }: ComposerProps,
     ref: ForwardedRef<TextInput | HTMLInputElement>,
 ) {
-    const doesTextContainOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
+    const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
     const theme = useTheme();
     const styles = useThemeStyles();
-    const markdownStyle = useMarkdownStyle(doesTextContainOnlyEmojis, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
+    const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
     const StyleUtils = useStyleUtils();
     const textRef = useRef<HTMLElement & RNText>(null);
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
@@ -345,9 +345,10 @@ function Composer(
             scrollStyleMemo,
             StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize),
             isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined,
+            textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
         ],
 
-        [style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize],
+        [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis],
     );
 
     return (

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -37,8 +37,7 @@ function getTextMatrix(text: string): string[][] {
  * Validates if the text contains any emoji
  */
 function containsEmoji(text: string): boolean {
-    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
-    return emojisRegex.test(text);
+    return CONST.REGEX.EMOJIS.test(text);
 }
 
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {

diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -32,7 +32,7 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
             />
             <Text
                 numberOfLines={1}
-                style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1]}
+                style={[isLargeScreenWidth ? styles.themeTextColor : [styles.textMicro, styles.textBold], styles.flexShrink1]}
             >
                 {displayName}
             </Text>

diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
@@ -12,7 +12,6 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {ListItem, UserListItemProps} from './types';
@@ -132,7 +131,6 @@ function UserListItem<TItem extends ListItem>({
                         {!!item.alternateText && (
                             <TextWithTooltip
                                 shouldShowTooltip={showTooltip}
-                                emojiFontSize={variables.emojiSizeSmall}
                                 text={Str.removeSMSDomain(item.alternateText ?? '')}
                                 style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />

diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
@@ -386,7 +386,6 @@ function BaseTextInput(
                                     // Add disabled color theme when field is not editable.
                                     inputProps.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
-                                    isMarkdownEnabled ? {lineHeight: variables.lineHeightMarkdownEnabledInput} : null,
                                 ]}
                                 multiline={isMultiline}
                                 maxLength={maxLength}

diff --git a/src/components/TextWithTooltip/index.ios.tsx b/src/components/TextWithTooltip/index.ios.tsx
diff --git a/...ponents/TextWithTooltip/index.android.tsx → ...mponents/TextWithTooltip/index.native.tsx b/...ponents/TextWithTooltip/index.android.tsx → ...mponents/TextWithTooltip/index.native.tsx
diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts
@@ -12,9 +12,6 @@ type TextWithTooltipProps = {
 
     /** Custom number of lines for text wrapping */
     numberOfLines?: number;
-
-    /** Emoji font size */
-    emojiFontSize?: number;
 };
 
 export default TextWithTooltipProps;
diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
@@ -1,13 +1,16 @@
 import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
 import {useMemo} from 'react';
+import {containsOnlyEmojis} from '@libs/EmojiUtils';
 import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
 import useTheme from './useTheme';
 
 const defaultEmptyArray: Array<keyof MarkdownStyle> = [];
 
-function useMarkdownStyle(doesInputContainOnlyEmojis?: boolean, excludeStyles: Array<keyof MarkdownStyle> = defaultEmptyArray): MarkdownStyle {
+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;
 
     // 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(
@@ -34,7 +37,7 @@ function useMarkdownStyle(doesInputContainOnlyEmojis?: boolean, excludeStyles: A
                 fontSize: variables.fontSizeLarge,
             },
             emoji: {
-                fontSize: doesInputContainOnlyEmojis ? variables.fontSizeEmojisOnlyComposer : variables.fontSizeEmojisWithinText,
+                fontSize: emojiFontSize,
             },
             blockquote: {
                 borderColor: theme.border,
@@ -86,7 +89,7 @@ function useMarkdownStyle(doesInputContainOnlyEmojis?: boolean, excludeStyles: A
         }
 
         return styling;
-    }, [theme, doesInputContainOnlyEmojis, excludeStyles, nonStylingDefaultValues]);
+    }, [theme, emojiFontSize, excludeStyles, nonStylingDefaultValues]);
 
     return markdownStyle;
 }

diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
@@ -148,8 +148,7 @@ function trimEmojiUnicode(emojiCode: string): string {
  */
 function isFirstLetterEmoji(message: string): boolean {
     const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
-    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
-    const match = trimmedMessage.match(emojisRegex);
+    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
 
     if (!match) {
         return false;
@@ -163,8 +162,7 @@ function isFirstLetterEmoji(message: string): boolean {
  */
 function containsOnlyEmojis(message: string): boolean {
     const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
-    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
-    const match = trimmedMessage.match(emojisRegex);
+    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
 
     if (!match) {
         return false;
@@ -287,8 +285,7 @@ function extractEmojis(text: string): Emoji[] {
     }
 
     // Parse Emojis including skin tones - Eg: ['👩🏻', '👩🏻', '👩🏼', '👩🏻', '👩🏼', '👩']
-    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
-    const parsedEmojis = text.match(emojisRegex);
+    const parsedEmojis = text.match(CONST.REGEX.EMOJIS);
 
     if (!parsedEmojis) {
         return [];
@@ -589,57 +586,7 @@ function getSpacersIndexes(allEmojis: EmojiPickerList): number[] {
     return spacersIndexes;
 }
 
-type TextWithEmoji = {
-    text: string;
-    isEmoji: boolean;
-};
-
-function splitTextWithEmojis(text = ''): TextWithEmoji[] {
-    if (!text) {
-        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 a 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, TextWithEmoji};
+export type {HeaderIndice, EmojiPickerList, EmojiSpacer, EmojiPickerListItem};
 
 export {
     findEmojiByName,
@@ -664,5 +611,4 @@ export {
     hasAccountIDEmojiReacted,
     getRemovedSkinToneEmoji,
     getSpacersIndexes,
-    splitTextWithEmojis,
 };
diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts
@@ -41,9 +41,7 @@ function isValidAddress(value: FormValue): boolean {
         return false;
     }
 
-    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
-
-    if (!CONST.REGEX.ANY_VALUE.test(value) || value.match(emojisRegex)) {
+    if (!CONST.REGEX.ANY_VALUE.test(value) || value.match(CONST.REGEX.EMOJIS)) {
         return false;
     }
 
@@ -333,8 +331,7 @@ function isValidRoutingNumber(routingNumber: string): boolean {
  * Checks that the provided name doesn't contain any emojis
  */
 function isValidCompanyName(name: string) {
-    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
-    return !name.match(emojisRegex);
+    return !name.match(CONST.REGEX.EMOJIS);
 }
 
 function isValidReportName(name: string) {

diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx
@@ -2,6 +2,7 @@ import React, {memo} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
+import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -14,7 +15,6 @@ import type {Message} from '@src/types/onyx/ReportAction';
 import type ReportActionName from '@src/types/onyx/ReportActionName';
 import AttachmentCommentFragment from './comment/AttachmentCommentFragment';
 import TextCommentFragment from './comment/TextCommentFragment';
-import ReportActionItemMessageHeaderSender from './ReportActionItemMessageHeaderSender';
 
 type ReportActionItemFragmentProps = {
     /** Users accountID */
@@ -159,13 +159,18 @@ function ReportActionItemFragment({
             }
 
             return (
-                <ReportActionItemMessageHeaderSender
+                <UserDetailsTooltip
                     accountID={accountID}
                     delegateAccountID={delegateAccountID}
-                    fragmentText={fragment.text}
-                    actorIcon={actorIcon}
-                    isSingleLine={isSingleLine}
-                />
+                    icon={actorIcon}
+                >
+                    <Text
+                        numberOfLines={isSingleLine ? 1 : undefined}
+                        style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap]}
+                    >
+                        {fragment?.text}
+                    </Text>
+                </UserDetailsTooltip>
             );
         }
         case 'LINK':

diff --git a/src/pages/home/report/ReportActionItemMessageHeaderSender.tsx b/src/pages/home/report/ReportActionItemMessageHeaderSender.tsx