Merge pull request Expensify#32801 from tienifr/fix/31427

Fix: Text in code block not vertically centered
bernhardoj · Dec 29, 2023 · d34b673 · d34b673
2 parents f508a90 + 02b9460
commit d34b673
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -31,6 +31,13 @@ function getTextMatrix(text: string): string[][] {
     return text.split('\n').map((row) => row.split(CONST.REGEX.SPACE_OR_EMOJI).filter((value) => value !== ''));
 }
 
+/**
+ * Validates if the text contains any emoji
+ */
+function containsEmoji(text: string): boolean {
+    return CONST.REGEX.EMOJI.test(text);
+}
+
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
     const styles = useThemeStyles();
 
@@ -53,7 +60,7 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
                     style={styles.codeWordWrapper}
                 >
                     <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
-                        <Text style={textStyles}>{colText}</Text>
+                        <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>{colText}</Text>
                     </View>
                 </View>
             ))}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -2769,6 +2769,10 @@ const styles = (theme: ThemeColors) =>
             paddingRight: 5,
         },
 
+        codePlainTextStyle: {
+            ...codeStyles.codePlainTextStyle,
+        },
+
         fullScreenLoading: {
             backgroundColor: theme.componentBG,
             opacity: 0.8,

diff --git a/src/styles/utils/codeStyles/index.android.ts b/src/styles/utils/codeStyles/index.android.ts
@@ -13,4 +13,8 @@ const codeTextStyle: CodeTextStyles = {
     lineHeight: 15,
 };
 
-export default {codeWordWrapper, codeWordStyle, codeTextStyle};
+const codePlainTextStyle: CodeTextStyles = {
+    lineHeight: 14.5,
+};
+
+export default {codeWordWrapper, codeWordStyle, codeTextStyle, codePlainTextStyle};
diff --git a/src/styles/utils/codeStyles/index.ios.ts b/src/styles/utils/codeStyles/index.ios.ts
@@ -14,4 +14,8 @@ const codeTextStyle: CodeTextStyles = {
     lineHeight: 18,
 };
 
-export default {codeWordWrapper, codeWordStyle, codeTextStyle};
+const codePlainTextStyle: CodeTextStyles = {
+    lineHeight: 15,
+};
+
+export default {codeWordWrapper, codeWordStyle, codeTextStyle, codePlainTextStyle};
diff --git a/src/styles/utils/codeStyles/index.ts b/src/styles/utils/codeStyles/index.ts
@@ -4,4 +4,5 @@ import {CodeTextStyles, CodeWordStyles, CodeWordWrapperStyles} from './types';
 const codeWordWrapper: CodeWordWrapperStyles = {};
 const codeWordStyle: CodeWordStyles = {};
 const codeTextStyle: CodeTextStyles = {};
-export default {codeWordWrapper, codeWordStyle, codeTextStyle};
+const codePlainTextStyle: CodeTextStyles = {};
+export default {codeWordWrapper, codeWordStyle, codeTextStyle, codePlainTextStyle};