diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
index fc4d5f0a31b3..1932eaaf8a4f 100644
--- 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
index 09cd95532242..1c66cef234ed 100644
--- 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;
-
- /** 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
-
-
- {colText}
-
+ {rowText.map((colText, colIndex) => (
+ // Outer View is important to vertically center the Text
+
+
+ {colText}
- );
- })}
+
+ ))}
));
}
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 2b06c10afd05..6e69b841ae8f 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -15,7 +15,6 @@ function InlineCodeBlock({TDefaultRenderer, defaultRen
{defaultRendererProps.tnode.data}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b0178a3cdb46..f687e58c63f8 100644
--- 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
index 1c2b80374fa1..1912f0ad7489 100644
--- 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
index 07a67f0f4a20..ec87e3b6427b 100644
--- 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
index 0ba8b2104867..45f669b0adaa 100644
--- 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
index c2315ec9a83a..a7bc368983b5 100644
--- 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,