Fix differences in inline code block on native vs web

src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx → src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {View} from 'react-native';
 import {splitBoxModelStyle} from 'react-native-render-html';
 import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
@@ -31,13 +32,15 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
     };
 
     return (
-        <InlineCodeBlock
-            defaultRendererProps={{...defaultRendererProps, style: {}}}
-            TDefaultRenderer={TDefaultRenderer}
-            boxModelStyle={boxModelStyle}
-            textStyle={{...textStyle, ...textStyleOverride}}
-            key={key}
-        />
+        <View style={{marginBottom: 4}}>
+            <InlineCodeBlock
+                defaultRendererProps={{...defaultRendererProps, style: {marginBottom: 4}}}
+                TDefaultRenderer={TDefaultRenderer}
+                boxModelStyle={[boxModelStyle]}
+                textStyle={{...textStyle, ...textStyleOverride}}
+                key={key}
+            />
+        </View>
     );
 }
 

src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { splitBoxModelStyle } from 'react-native-render-html';
+import type { CustomRendererProps, TPhrasing, TText } from 'react-native-render-html';
+import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
+import InlineCodeBlock from '@components/InlineCodeBlock';
+import useStyleUtils from '@hooks/useStyleUtils';
+import FontUtils from '@styles/utils/FontUtils';
+
+type CodeRendererProps = CustomRendererProps<TText | TPhrasing> & {
+    /** Key of the element */
+    key?: string;
+};
+
+function CodeRenderer({ TDefaultRenderer, key, style, ...defaultRendererProps }: CodeRendererProps) {
+    const StyleUtils = useStyleUtils();
+    // We split wrapper and inner styles
+    // "boxModelStyle" corresponds to border, margin, padding and backgroundColor
+    const { boxModelStyle, otherStyle: textStyle } = splitBoxModelStyle(style ?? {});
+
+    /** Get the default fontFamily variant */
+    const font = FontUtils.fontFamily.platform.MONOSPACE.fontFamily;
+
+    // Determine the font size for the code based on whether it's inside an H1 element.
+    const isInsideH1 = HTMLEngineUtils.isChildOfH1(defaultRendererProps.tnode);
+
+    const fontSize = StyleUtils.getCodeFontSize(isInsideH1);
+
+    const textStyleOverride = {
+        fontSize,
+        fontFamily: font,
+    };
+
+    return (
+        <InlineCodeBlock
+            defaultRendererProps={{ ...defaultRendererProps, style: { marginBottom: 4 } }}
+            TDefaultRenderer={TDefaultRenderer}
+            boxModelStyle={[boxModelStyle]}
+            textStyle={{ ...textStyle, ...textStyleOverride }}
+            key={key}
+        />
+    );
+}
+
+CodeRenderer.displayName = 'CodeRenderer';
+
+export default CodeRenderer;

src/components/InlineCodeBlock/index.native.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {View} from 'react-native';
 import type {TDefaultRendererProps} from 'react-native-render-html';
 import Text from '@components/Text';
 import type InlineCodeBlockProps from './types';
@@ -27,7 +28,9 @@ function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer,
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
         >
-            <Text style={[boxModelStyle, textStyle]}>{data}</Text>
+            <View style={[boxModelStyle]}>
+                <Text style={[textStyle]}>{data}</Text>
+            </View>
         </TDefaultRenderer>
     );
 }