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,