custom lineHeight approach

bernhardoj · Dec 25, 2023 · f3c1933 · f3c1933
1 parent 7054e8d
commit f3c1933
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 35 deletions.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
@@ -43,7 +43,6 @@ function CodeRenderer(props) {
             boxModelStyle={boxModelStyle}
             textStyle={{...textStyle, ...textStyleOverride}}
             key={props.key}
-            fontSize={fontSize}
         />
     );
 }

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -1,9 +1,7 @@
 import React, {Fragment} from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import Text from '@components/Text';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
@@ -15,9 +13,6 @@ type WrappedTextProps = ChildrenProps & {
      * Style for each individual word (token) in the text. Note that a token can also include whitespace characters between words.
      */
     wordStyles?: StyleProp<ViewStyle>;
-
-    /** The size of the text */
-    fontSize?: number;
 };
 
 /**
@@ -40,12 +35,11 @@ function getTextMatrix(text: string): string[][] {
  * Validates if the text contains any emoji
  */
 function containsEmoji(text: string): boolean {
-    return CONST.REGEX.EMOJIS.test(text);
+    return CONST.REGEX.EMOJI.test(text);
 }
 
-function WrappedText({children, wordStyles, textStyles, fontSize = variables.fontSizeNormal}: WrappedTextProps) {
+function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
 
     if (typeof children !== 'string') {
         return null;
@@ -58,21 +52,18 @@ function WrappedText({children, wordStyles, textStyles, fontSize = variables.fon
             // eslint-disable-next-line react/no-array-index-key
             key={`${rowText[0]}-${rowIndex}`}
         >
-            {rowText.map((colText, colIndex) => {
-                const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), fontSize);
-                return (
-                    // Outer View is important to vertically center the Text
-                    <View
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`${colText}-${colIndex}`}
-                        style={styles.codeWordWrapper}
-                    >
-                        <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
-                            <Text style={[textStyles, lineHeight ? {lineHeight} : {}]}>{colText}</Text>
-                        </View>
+            {rowText.map((colText, colIndex) => (
+                // Outer View is important to vertically center the Text
+                <View
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`${colText}-${colIndex}`}
+                    style={styles.codeWordWrapper}
+                >
+                    <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
+                        <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>{colText}</Text>
                     </View>
-                );
-            })}
+                </View>
+            ))}
         </Fragment>
     ));
 }

diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
@@ -15,7 +15,6 @@ function InlineCodeBlock<TComponent extends TText>({TDefaultRenderer, defaultRen
             <WrappedText
                 textStyles={textStyle}
                 wordStyles={[boxModelStyle, styles.codeWordStyle]}
-                fontSize={fontSize}
             >
                 {defaultRendererProps.tnode.data}
             </WrappedText>

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -2762,6 +2762,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};
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -536,13 +536,6 @@ function getCodeFontSize(isInsideH1: boolean) {
     return isInsideH1 ? 15 : 13;
 }
 
-/**
- * Returns the line height for the HTML code tag renderer.
- */
-function getCodeLineHeight(isEmojiChunk: boolean, fontSize: number): number {
-    return isEmojiChunk ? 0 : fontSize;
-}
-
 /**
  * Gives the width for Emoji picker Widget
  */
@@ -1058,7 +1051,6 @@ const staticStyleUtils = {
     getEmojiReactionBubbleTextStyle,
     getFontFamilyMonospace,
     getCodeFontSize,
-    getCodeLineHeight,
     getFontSizeStyle,
     getLineHeightStyle,
     getMenuItemTextContainerStyle,