conflicts resolved

Expensify · Apr 3, 2024 · a6768d3 · a6768d3
1 parent 13182fd
commit a6768d3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 35 deletions.
diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
@@ -29,6 +29,9 @@ function useMarkdownStyle(): MarkdownStyle {
                 color: theme.text,
                 backgroundColor: 'transparent',
             },
+            emoji: {
+                fontSize: 19,
+            },
             pre: {
                 fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
                 color: theme.text,

diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
@@ -125,31 +125,14 @@ function isFirstLetterEmoji(message: string): boolean {
  * Validates that this message contains only emojis
  */
 function containsOnlyEmojis(message: string): boolean {
-    const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
-    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
-
-    if (!match) {
+    if (!message) {
         return false;
     }
+    const splittedMessage = message.split(' ');
+    // @ts-expect-error -- comments contain only BMP characters and emojis so codePointAt will return number
+    const messageWithoutEmojis = splittedMessage.filter((char: string) => char && char.codePointAt(0) <= 0xffff);
 
-    const codes = [];
-    match.map((emoji) =>
-        getEmojiUnicode(emoji)
-            .split(' ')
-            .map((code) => {
-                if (!(CONST.INVISIBLE_CODEPOINTS as readonly string[]).includes(code)) {
-                    codes.push(code);
-                }
-                return code;
-            }),
-    );
-
-    // Emojis are stored as multiple characters, so we're using spread operator
-    // to iterate over the actual emojis, not just characters that compose them
-    const messageCodes = [...trimmedMessage]
-        .map((char) => getEmojiUnicode(char))
-        .filter((string) => string.length > 0 && !(CONST.INVISIBLE_CODEPOINTS as readonly string[]).includes(string));
-    return codes.length === messageCodes.length;
+    return messageWithoutEmojis.length === 0;
 }
 
 /**
@@ -665,7 +648,7 @@ const splitTextWithEmojis = (text: string): string[] => {
             // eslint-disable-next-line no-continue -- skip rest of the checks in current iteration
             continue;
         }
-        // @ts-expect-error -- ensured in 1st 'if' that object won't be undefined
+        // @ts-expect-error -- comments contain only BMP characters and emojis so codePointAt will return number
         if (tmpResult[j].codePointAt(0) <= 0xffff) {
             // is BMP character
             tmpString += tmpResult[j];

diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -82,22 +82,23 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
             {CONST.REGEX.EMOJIS.test(message) ? (
                 <TextWithEmojiFragment
                     text={message}
-                    textContainsOnlyEmojis={textContainsOnlyEmojis}
                     passedStyles={style}
                     styleAsDeleted={styleAsDeleted}
                     styleAsMuted={styleAsMuted}
                     isEdited={fragment.isEdited}
+                    emojisOnly={textContainsOnlyEmojis}
                 />
             ) : (
                 <>
                     <Text
                         style={[
-                            textContainsOnlyEmojis ? styles.onlyEmojisText : undefined,
                             styles.ltr,
                             style,
+                            styles.enhancedLineHeight,
                             styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
                             styleAsMuted ? styles.colorMuted : undefined,
                             !DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth ? styles.userSelectText : styles.userSelectNone,
+                            textContainsOnlyEmojis ? styles.onlyEmojisText : styles.enhancedLineHeight,
                         ]}
                     >
                         {message}
@@ -106,7 +107,7 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
                     {fragment.isEdited && (
                         <>
                             <Text
-                                style={[textContainsOnlyEmojis && styles.onlyEmojisTextLineHeight, styles.userSelectNone]}
+                                style={[styles.userSelectNone]}
                                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                             >
                                 {' '}

diff --git a/src/pages/home/report/comment/TextWithEmojiFragment.tsx b/src/pages/home/report/comment/TextWithEmojiFragment.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
-import {View} from 'react-native';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
@@ -12,24 +11,24 @@ import CONST from '@src/CONST';
 
 type ComponentProps = {
     text: string;
-    textContainsOnlyEmojis: boolean;
     passedStyles: StyleProp<TextStyle>;
     styleAsDeleted?: boolean;
     styleAsMuted?: boolean;
     isSmallScreenWidth?: boolean;
     isEdited?: boolean;
+    emojisOnly?: boolean;
 };
-function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited}: ComponentProps) {
+function TextWithEmojiFragment({text, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: ComponentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const theme = useTheme();
     const processedTextArray = splitTextWithEmojis(text);
 
     return (
-        <View style={styles.emojisAndTextWrapper}>
+        <>
             {processedTextArray.map((word: string) =>
                 CONST.REGEX.EMOJIS.test(word) ? (
-                    <Text style={[styles.emojisWithinText, textContainsOnlyEmojis ? styles.onlyEmojisText : undefined]}>{word}</Text>
+                    <Text style={[emojisOnly ? styles.onlyEmojisText : styles.emojisWithinText]}>{word}</Text>
                 ) : (
                     <Text
                         style={[
@@ -38,6 +37,7 @@ function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styl
                             styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
                             styleAsMuted ? styles.colorMuted : undefined,
                             !DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth ? styles.userSelectText : styles.userSelectNone,
+                            emojisOnly ? styles.onlyEmojisText : styles.enhancedLineHeight,
                         ]}
                     >
                         {word}
@@ -48,7 +48,7 @@ function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styl
             {isEdited && (
                 <>
                     <Text
-                        style={[textContainsOnlyEmojis && styles.onlyEmojisTextLineHeight, styles.userSelectNone]}
+                        style={[emojisOnly && styles.onlyEmojisTextLineHeight, styles.userSelectNone]}
                         dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                     >
                         {' '}
@@ -62,7 +62,7 @@ function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styl
                     </Text>
                 </>
             )}
-        </View>
+        </>
     );
 }
 

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1574,8 +1574,6 @@ const styles = (theme: ThemeColors) =>
         emojisAndTextWrapper: {
             flexDirection: 'row',
             alignItems: 'center',
-            flexWrap: 'wrap',
-            width: '100%',
         },
 
         onlyEmojisText: {
@@ -1591,6 +1589,10 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.fontSizeOnlyEmojisHeight,
         },
 
+        enhancedLineHeight: {
+            lineHeight: 23,
+        },
+
         createMenuPositionSidebar: (windowHeight: number) =>
             ({
                 horizontal: 18,