Merge pull request #56924 from callstack-internal/bugfix/53458-code-b…

…locks-native Use simple styles for code blocks in Native platforms
Expensify · Feb 27, 2025 · 7d0bcb4 · 7d0bcb4
2 parents 0856182 + 4b24788
commit 7d0bcb4
Show file tree

Hide file tree

Showing 8 changed files with 2 additions and 260 deletions.
diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import type {TDefaultRendererProps} from 'react-native-render-html';
-import useThemeStyles from '@hooks/useThemeStyles';
+import Text from '@components/Text';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
-import WrappedText from './WrappedText';
 
 /**
  * Retrieves the text content from a Text or Phrasing node.
@@ -21,20 +20,14 @@ function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhra
 }
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
-    const styles = useThemeStyles();
     const data = getCurrentData(defaultRendererProps);
 
     return (
         <TDefaultRenderer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
         >
-            <WrappedText
-                textStyles={textStyle}
-                wordStyles={[boxModelStyle, styles.codeWordStyle]}
-            >
-                {data}
-            </WrappedText>
+            <Text style={[boxModelStyle, textStyle]}>{data}</Text>
         </TDefaultRenderer>
     );
 }

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -20,7 +20,6 @@ import type {ThemeColors} from './theme/types';
 import addOutlineWidth from './utils/addOutlineWidth';
 import borders from './utils/borders';
 import chatContentScrollViewPlatformStyles from './utils/chatContentScrollViewPlatformStyles';
-import codeStyles from './utils/codeStyles';
 import cursor from './utils/cursor';
 import display from './utils/display';
 import editedLabelStyles from './utils/editedLabelStyles';
@@ -201,7 +200,6 @@ const webViewStyles = (theme: ThemeColors) =>
 
             code: {
                 ...baseCodeTagStyles(theme),
-                ...(codeStyles.codeTextStyle as MixedStyleDeclaration),
                 paddingLeft: 5,
                 paddingRight: 5,
                 fontFamily: FontUtils.fontFamily.platform.MONOSPACE.fontFamily,
@@ -3355,10 +3353,6 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'center',
         },
 
-        codeWordWrapper: {
-            ...codeStyles.codeWordWrapper,
-        },
-
         codeWordStyle: {
             borderLeftWidth: 0,
             borderRightWidth: 0,
@@ -3369,7 +3363,6 @@ const styles = (theme: ThemeColors) =>
             paddingLeft: 0,
             paddingRight: 0,
             justifyContent: 'center',
-            ...codeStyles.codeWordStyle,
         },
 
         codeFirstWordStyle: {
@@ -3386,10 +3379,6 @@ 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
diff --git a/src/styles/utils/codeStyles/index.ios.ts b/src/styles/utils/codeStyles/index.ios.ts
diff --git a/src/styles/utils/codeStyles/index.ts b/src/styles/utils/codeStyles/index.ts
diff --git a/src/styles/utils/codeStyles/types.ts b/src/styles/utils/codeStyles/types.ts
diff --git a/tests/unit/splitLongWordTest.ts b/tests/unit/splitLongWordTest.ts