From 0208efeeadafbb86b9b372ec32facc571be42f19 Mon Sep 17 00:00:00 2001
From: kbieganowski <kamil.bieganowski@callstack.com>
Date: Thu, 16 May 2024 14:05:49 +0200
Subject: [PATCH] rebase wip

---
 src/components/Composer/index.native.tsx           |  3 ++-
 src/components/InlineCodeBlock/WrappedText.tsx     |  3 ++-
 src/components/TextInput/BaseTextInput/index.tsx   |  2 +-
 src/hooks/useMarkdownStyle.ts                      |  6 +++---
 src/libs/EmojiUtils.ts                             |  6 ++++--
 src/libs/ValidationUtils.ts                        |  7 +++++--
 .../home/report/comment/TextWithEmojiFragment.tsx  | 14 +++++++++++---
 src/styles/variables.ts                            |  3 +++
 8 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx
index 22255e5ce92c..b1a60e7ec201 100644
--- a/src/components/Composer/index.native.tsx
+++ b/src/components/Composer/index.native.tsx
@@ -11,6 +11,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
 import {containsOnlyEmojis} from '@libs/EmojiUtils';
+import variables from '@styles/variables';
 import type {ComposerProps} from './types';
 
 function Composer(
@@ -68,7 +69,7 @@ function Composer(
     }, [shouldClear, onClear]);
 
     const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
-    const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? {lineHeight: 32} : null]), [style, textContainsOnlyEmojis]);
+    const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? {lineHeight: variables.lineHeightEmojisOnlyComposer} : null]), [style, textContainsOnlyEmojis]);
 
     return (
         <RNMarkdownTextInput
diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index 3045c15c471b..e77f5dba4eda 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -37,7 +37,8 @@ function getTextMatrix(text: string): string[][] {
  * Validates if the text contains any emoji
  */
 function containsEmoji(text: string): boolean {
-    return CONST.REGEX.EMOJIS.test(text);
+    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+    return emojisRegex.test(text);
 }
 
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
index 6ee88aaa6057..87fe54495b1c 100644
--- a/src/components/TextInput/BaseTextInput/index.tsx
+++ b/src/components/TextInput/BaseTextInput/index.tsx
@@ -381,7 +381,7 @@ function BaseTextInput(
                                     // Add disabled color theme when field is not editable.
                                     inputProps.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
-                                    isMarkdownEnabled ? {lineHeight: 18} : null,
+                                    isMarkdownEnabled ? {lineHeight: variables.lineHeightMarkdownEnabledInput} : null,
                                 ]}
                                 multiline={isMultiline}
                                 maxLength={maxLength}
diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
index 898be6a0a8cc..d7399f2fc9cb 100644
--- a/src/hooks/useMarkdownStyle.ts
+++ b/src/hooks/useMarkdownStyle.ts
@@ -4,7 +4,7 @@ import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
 import useTheme from './useTheme';
 
-function useMarkdownStyle(containsEmojisOnly?: boolean, excludeStyles: Array<keyof MarkdownStyle> = []): MarkdownStyle {
+function useMarkdownStyle(inputContainsOnlyEmojis?: boolean, excludeStyles: Array<keyof MarkdownStyle> = []): MarkdownStyle {
     const theme = useTheme();
 
     // this map is used to reset the styles that are not needed - passing undefined value can break the native side
@@ -32,7 +32,7 @@ function useMarkdownStyle(containsEmojisOnly?: boolean, excludeStyles: Array<key
                 fontSize: variables.fontSizeLarge,
             },
             emoji: {
-                fontSize: containsEmojisOnly ? 27 : 19,
+                fontSize: inputContainsOnlyEmojis ? variables.fontSizeEmojisOnlyComposer : variables.fontSizeEmojisWithinText,
             },
             blockquote: {
                 borderColor: theme.border,
@@ -78,7 +78,7 @@ function useMarkdownStyle(containsEmojisOnly?: boolean, excludeStyles: Array<key
         }
 
         return styling;
-    }, [theme, containsEmojisOnly, excludeStyles, nonStylingDefaultValues]);
+    }, [theme, inputContainsOnlyEmojis, excludeStyles, nonStylingDefaultValues]);
 
     return markdownStyle;
 }
diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
index 80b1f5c9c0fc..9a32b1dbda89 100644
--- a/src/libs/EmojiUtils.ts
+++ b/src/libs/EmojiUtils.ts
@@ -113,7 +113,8 @@ 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 emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+    const match = trimmedMessage.match(emojisRegex);
 
     if (!match) {
         return false;
@@ -269,7 +270,8 @@ function extractEmojis(text: string): Emoji[] {
     }
 
     // Parse Emojis including skin tones - Eg: ['👩🏻', '👩🏻', '👩🏼', '👩🏻', '👩🏼', '👩']
-    const parsedEmojis = text.match(CONST.REGEX.EMOJIS);
+    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+    const parsedEmojis = text.match(emojisRegex);
 
     if (!parsedEmojis) {
         return [];
diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts
index d5a87fc07e28..2c33cb09faf9 100644
--- a/src/libs/ValidationUtils.ts
+++ b/src/libs/ValidationUtils.ts
@@ -43,7 +43,9 @@ function isValidAddress(value: FormValue): boolean {
         return false;
     }
 
-    if (!CONST.REGEX.ANY_VALUE.test(value) || value.match(CONST.REGEX.EMOJIS)) {
+    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+
+    if (!CONST.REGEX.ANY_VALUE.test(value) || value.match(emojisRegex)) {
         return false;
     }
 
@@ -333,7 +335,8 @@ function isValidRoutingNumber(routingNumber: string): boolean {
  * Checks that the provided name doesn't contain any emojis
  */
 function isValidCompanyName(name: string) {
-    return !name.match(CONST.REGEX.EMOJIS);
+    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));
+    return !name.match(emojisRegex);
 }
 
 function isValidReportName(name: string) {
diff --git a/src/pages/home/report/comment/TextWithEmojiFragment.tsx b/src/pages/home/report/comment/TextWithEmojiFragment.tsx
index b7ff0ed70a50..8bd33ca17934 100644
--- a/src/pages/home/report/comment/TextWithEmojiFragment.tsx
+++ b/src/pages/home/report/comment/TextWithEmojiFragment.tsx
@@ -9,16 +9,24 @@ import {splitTextWithEmojis} from '@libs/EmojiUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
-type ComponentProps = {
+type TextWithEmojiFragmentProps = {
+    /** The message to be displayed */
     message: string;
-    passedStyles: StyleProp<TextStyle>;
+    /** Additional styles to add after local styles. */
+    passedStyles?: StyleProp<TextStyle>;
+    /** Should this message fragment be styled as deleted? */
     styleAsDeleted?: boolean;
+    /** Should this message fragment be styled as muted? */
     styleAsMuted?: boolean;
+    /** Is message displayed on narrow screen? */
     isSmallScreenWidth?: boolean;
+    /** Should "(edited)" suffix be rendered? */
     isEdited?: boolean;
+    /** Does message contain only emojis? */
     emojisOnly?: boolean;
 };
-function TextWithEmojiFragment({message, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: ComponentProps) {
+
+function TextWithEmojiFragment({message, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: TextWithEmojiFragmentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const theme = useTheme();
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 87581057a5c1..eb5747e8ad50 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -51,6 +51,7 @@ export default {
     fontSizeOnlyEmojis: 30,
     fontSizeOnlyEmojisHeight: 35,
     fontSizeEmojisWithinText: 19,
+    fontSizeEmojisOnlyComposer: 27,
     fontSizeSmall: getValueUsingPixelRatio(11, 17),
     fontSizeExtraSmall: 9,
     fontSizeLabel: getValueUsingPixelRatio(13, 19),
@@ -115,6 +116,8 @@ export default {
     lineHeightSizeh2: getValueUsingPixelRatio(24, 28),
     lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37),
     lineHeightComment: 23,
+    lineHeightMarkdownEnabledInput: 18,
+    lineHeightEmojisOnlyComposer: 32,
     inputHeight: getValueUsingPixelRatio(52, 72),
     inputHeightSmall: 28,
     formErrorLineHeight: getValueUsingPixelRatio(18, 23),