From 61deb7f7b41c4720886ffafb9bb1c24fd4d8d3e9 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 11 Dec 2023 18:40:54 +0700 Subject: [PATCH 1/8] fix: text in code block not vertically centered --- src/components/InlineCodeBlock/WrappedText.js | 52 ++++++++++++------- src/styles/utils/index.ts | 8 +++ 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index f00ec891116b..4ec8c1f69ad1 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -1,8 +1,10 @@ +import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {Fragment} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import Text from '@components/Text'; +import useStyleUtils from '@styles/useStyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; @@ -20,6 +22,16 @@ function getTextMatrix(text) { return _.map(text.split('\n'), (row) => _.without(row.split(CONST.REGEX.SPACE_OR_EMOJI), '')); } +/** + * Validates if the text contains any emoji + * + * @param {String} text + * @returns {Boolean} + */ +function containsEmoji(text) { + return CONST.REGEX.EMOJIS.test(text); +} + const propTypes = { /** Required text */ children: PropTypes.string.isRequired, @@ -40,6 +52,7 @@ const defaultProps = { function WrappedText(props) { const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); if (!_.isString(props.children)) { return null; } @@ -47,25 +60,28 @@ function WrappedText(props) { const textMatrix = getTextMatrix(props.children); return ( <> - {_.map(textMatrix, (rowText, rowIndex) => ( - - {_.map(rowText, (colText, colIndex) => ( - // Outer View is important to vertically center the Text - - - {colText} + {_.map(textMatrix, (rowText, rowIndex) => { + const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), lodashGet(props.textStyles, 'fontSize', 13)); + return ( + + {_.map(rowText, (colText, colIndex) => ( + // Outer View is important to vertically center the Text + + + {colText} + - - ))} - - ))} + ))} + + ); + })} ); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8d52c8de200a..b39a3105dc59 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -564,6 +564,13 @@ 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 */ @@ -1080,6 +1087,7 @@ const staticStyleUtils = { getEmojiReactionBubbleTextStyle, getFontFamilyMonospace, getCodeFontSize, + getCodeLineHeight, getFontSizeStyle, getLineHeightStyle, getMenuItemTextContainerStyle, From 67bd189a88084c9f52199488f5914dac6a587eaf Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 11 Dec 2023 18:50:46 +0700 Subject: [PATCH 2/8] fix typo --- src/components/InlineCodeBlock/WrappedText.js | 25 ++++++++++--------- src/styles/utils/index.ts | 2 +- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index 4ec8c1f69ad1..0dea7bf5c024 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -6,6 +6,7 @@ import _ from 'underscore'; import Text from '@components/Text'; import useStyleUtils from '@styles/useStyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; /** @@ -60,14 +61,14 @@ function WrappedText(props) { const textMatrix = getTextMatrix(props.children); return ( <> - {_.map(textMatrix, (rowText, rowIndex) => { - const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), lodashGet(props.textStyles, 'fontSize', 13)); - return ( - - {_.map(rowText, (colText, colIndex) => ( + {_.map(textMatrix, (rowText, rowIndex) => ( + + {_.map(rowText, (colText, colIndex) => { + const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), lodashGet(props.textStyles, 'fontSize', variables.fontSizeNormal)); + return ( // Outer View is important to vertically center the Text {colText} - ))} - - ); - })} + ); + })} + + ))} ); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index b39a3105dc59..bbaa4e16eeac 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -568,7 +568,7 @@ function getCodeFontSize(isInsideH1: boolean) { * Returns the line height for the HTML code tag renderer. */ function getCodeLineHeight(isEmojiChunk: boolean, fontSize: number): number { - return !isEmojiChunk ? 0 : fontSize; + return isEmojiChunk ? 0 : fontSize; } /** From 85a17f1038b4374f847fc9733de87d8f80d7cef6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 15 Dec 2023 12:30:21 +0700 Subject: [PATCH 3/8] reapply changes --- .../InlineCodeBlock/WrappedText.tsx | 37 +++++++++++++------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx index 6dbd17f18e2a..a61048b669ec 100644 --- a/src/components/InlineCodeBlock/WrappedText.tsx +++ b/src/components/InlineCodeBlock/WrappedText.tsx @@ -1,7 +1,9 @@ import React, {Fragment} from 'react'; import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import Text from '@components/Text'; +import useStyleUtils from '@styles/useStyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -31,8 +33,16 @@ function getTextMatrix(text: string): string[][] { return text.split('\n').map((row) => row.split(CONST.REGEX.SPACE_OR_EMOJI).filter((value) => value !== '')); } -function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) { +/** + * Validates if the text contains any emoji + */ +function containsEmoji(text: string): boolean { + return CONST.REGEX.EMOJIS.test(text); +} + +function WrappedText({children, wordStyles, textStyles, fontSize = variables.fontSizeNormal}: WrappedTextProps) { const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); if (typeof children !== 'string') { return null; @@ -45,18 +55,21 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) { // eslint-disable-next-line react/no-array-index-key key={`${rowText[0]}-${rowIndex}`} > - {rowText.map((colText, colIndex) => ( - // Outer View is important to vertically center the Text - - - {colText} + {rowText.map((colText, colIndex) => { + const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), fontSize); + return ( + // Outer View is important to vertically center the Text + + + {colText} + - - ))} + ); + })} )); } From 7b9a4675aa0291edbac365534b4b239800b61fbe Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 15 Dec 2023 12:31:59 +0700 Subject: [PATCH 4/8] fix lint --- src/components/InlineCodeBlock/WrappedText.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx index a61048b669ec..dc13301d96e4 100644 --- a/src/components/InlineCodeBlock/WrappedText.tsx +++ b/src/components/InlineCodeBlock/WrappedText.tsx @@ -3,9 +3,9 @@ import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import Text from '@components/Text'; import useStyleUtils from '@styles/useStyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import variables from '@styles/variables'; type WrappedTextProps = ChildrenProps & { /** Style to be applied to Text */ @@ -40,7 +40,7 @@ function containsEmoji(text: string): boolean { return CONST.REGEX.EMOJIS.test(text); } -function WrappedText({children, wordStyles, textStyles, fontSize = variables.fontSizeNormal}: WrappedTextProps) { +function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -56,7 +56,7 @@ function WrappedText({children, wordStyles, textStyles, fontSize = variables.fon key={`${rowText[0]}-${rowIndex}`} > {rowText.map((colText, colIndex) => { - const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), fontSize); + const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), textStyles?.fontSize); return ( // Outer View is important to vertically center the Text Date: Tue, 19 Dec 2023 23:45:53 +0700 Subject: [PATCH 5/8] pass fontSize as prop --- .../HTMLEngineProvider/HTMLRenderers/CodeRenderer.js | 1 + src/components/InlineCodeBlock/WrappedText.tsx | 8 ++++++-- src/components/InlineCodeBlock/index.native.tsx | 3 ++- src/components/InlineCodeBlock/types.ts | 1 + 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js index 1932eaaf8a4f..fc4d5f0a31b3 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js @@ -43,6 +43,7 @@ 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 8e4d4eb1cb88..2ee46d711350 100644 --- a/src/components/InlineCodeBlock/WrappedText.tsx +++ b/src/components/InlineCodeBlock/WrappedText.tsx @@ -5,6 +5,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import variables from '@styles/variables'; type WrappedTextProps = ChildrenProps & { /** Style to be applied to Text */ @@ -14,6 +15,9 @@ 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; }; /** @@ -39,7 +43,7 @@ function containsEmoji(text: string): boolean { return CONST.REGEX.EMOJIS.test(text); } -function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) { +function WrappedText({children, wordStyles, textStyles, fontSize=variables.fontSizeNormal}: WrappedTextProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -55,7 +59,7 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) { key={`${rowText[0]}-${rowIndex}`} > {rowText.map((colText, colIndex) => { - const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), textStyles?.fontSize); + const lineHeight = StyleUtils.getCodeLineHeight(containsEmoji(colText), fontSize); return ( // Outer View is important to vertically center the Text ({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps) { +function InlineCodeBlock({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle, fontSize}: InlineCodeBlockProps) { const styles = useThemeStyles(); return ( @@ -15,6 +15,7 @@ function InlineCodeBlock({TDefaultRenderer, defaultRen {defaultRendererProps.tnode.data} diff --git a/src/components/InlineCodeBlock/types.ts b/src/components/InlineCodeBlock/types.ts index a100177e41a7..4a31b0e73038 100644 --- a/src/components/InlineCodeBlock/types.ts +++ b/src/components/InlineCodeBlock/types.ts @@ -6,6 +6,7 @@ type InlineCodeBlockProps = { textStyle: StyleProp; defaultRendererProps: TDefaultRendererProps; boxModelStyle: StyleProp; + fontSize: number; }; export default InlineCodeBlockProps; From 0006bc52a4e433759366baf635bd9b163a41ee90 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 20 Dec 2023 14:11:52 +0700 Subject: [PATCH 6/8] fix lint --- src/components/InlineCodeBlock/WrappedText.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx index 2ee46d711350..09cd95532242 100644 --- a/src/components/InlineCodeBlock/WrappedText.tsx +++ b/src/components/InlineCodeBlock/WrappedText.tsx @@ -3,9 +3,9 @@ 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'; -import variables from '@styles/variables'; type WrappedTextProps = ChildrenProps & { /** Style to be applied to Text */ @@ -43,7 +43,7 @@ function containsEmoji(text: string): boolean { return CONST.REGEX.EMOJIS.test(text); } -function WrappedText({children, wordStyles, textStyles, fontSize=variables.fontSizeNormal}: WrappedTextProps) { +function WrappedText({children, wordStyles, textStyles, fontSize = variables.fontSizeNormal}: WrappedTextProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); From f3c19330f58b532aeeef5fb6ab4ea754aebc6500 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 25 Dec 2023 18:21:30 +0700 Subject: [PATCH 7/8] custom lineHeight approach --- .../HTMLRenderers/CodeRenderer.js | 1 - .../InlineCodeBlock/WrappedText.tsx | 35 +++++++------------ .../InlineCodeBlock/index.native.tsx | 1 - src/styles/index.ts | 4 +++ src/styles/utils/codeStyles/index.android.ts | 6 +++- src/styles/utils/codeStyles/index.ios.ts | 6 +++- src/styles/utils/codeStyles/index.ts | 3 +- src/styles/utils/index.ts | 8 ----- 8 files changed, 29 insertions(+), 35 deletions(-) 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, From 02b94601c1a7f21eef68d5b6852619f42fab1f85 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 25 Dec 2023 18:24:37 +0700 Subject: [PATCH 8/8] remove redundant props --- src/components/InlineCodeBlock/index.native.tsx | 2 +- src/components/InlineCodeBlock/types.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx index 6e69b841ae8f..3a70308fa0cc 100644 --- a/src/components/InlineCodeBlock/index.native.tsx +++ b/src/components/InlineCodeBlock/index.native.tsx @@ -4,7 +4,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import type InlineCodeBlockProps from './types'; import WrappedText from './WrappedText'; -function InlineCodeBlock({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle, fontSize}: InlineCodeBlockProps) { +function InlineCodeBlock({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps) { const styles = useThemeStyles(); return ( diff --git a/src/components/InlineCodeBlock/types.ts b/src/components/InlineCodeBlock/types.ts index 4a31b0e73038..a100177e41a7 100644 --- a/src/components/InlineCodeBlock/types.ts +++ b/src/components/InlineCodeBlock/types.ts @@ -6,7 +6,6 @@ type InlineCodeBlockProps = { textStyle: StyleProp; defaultRendererProps: TDefaultRendererProps; boxModelStyle: StyleProp; - fontSize: number; }; export default InlineCodeBlockProps;