From e294c13370998ff480ea27088b248d2231e23e28 Mon Sep 17 00:00:00 2001
From: kubabutkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 7 Mar 2025 12:18:02 +0100
Subject: [PATCH 1/3] added correct styling to inline code renderer on native

---
 .../CodeRenderer/index.native.tsx             | 50 +++++++++++++++++++
 .../index.tsx}                                |  6 ++-
 .../InlineCodeBlock/index.native.tsx          |  5 +-
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx
 rename src/components/HTMLEngineProvider/HTMLRenderers/{CodeRenderer.tsx => CodeRenderer/index.tsx} (93%)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx
new file mode 100644
index 000000000000..3d867cb36f73
--- /dev/null
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx
@@ -0,0 +1,50 @@
+
+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';
+import { View } from 'react-native';
+
+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 (
+        <View style={{marginBottom: 4}}>
+        <InlineCodeBlock
+            defaultRendererProps={{...defaultRendererProps, style: {marginBottom: 4}}}
+            TDefaultRenderer={TDefaultRenderer}
+            boxModelStyle={[boxModelStyle]}
+            textStyle={{...textStyle, ...textStyleOverride}}
+            key={key}
+        />
+        </View>
+    );
+}
+
+CodeRenderer.displayName = 'CodeRenderer';
+
+export default CodeRenderer;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
similarity index 93%
rename from src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx
rename to src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
index 6350fe0556da..dd903f5ce133 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
@@ -1,3 +1,4 @@
+
 import React from 'react';
 import {splitBoxModelStyle} from 'react-native-render-html';
 import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
@@ -5,6 +6,7 @@ import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils
 import InlineCodeBlock from '@components/InlineCodeBlock';
 import useStyleUtils from '@hooks/useStyleUtils';
 import FontUtils from '@styles/utils/FontUtils';
+import { View } from 'react-native';
 
 type CodeRendererProps = CustomRendererProps<TText | TPhrasing> & {
     /** Key of the element */
@@ -32,9 +34,9 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
 
     return (
         <InlineCodeBlock
-            defaultRendererProps={{...defaultRendererProps, style: {}}}
+            defaultRendererProps={{...defaultRendererProps, style: {marginBottom: 4}}}
             TDefaultRenderer={TDefaultRenderer}
-            boxModelStyle={boxModelStyle}
+            boxModelStyle={[boxModelStyle]}
             textStyle={{...textStyle, ...textStyleOverride}}
             key={key}
         />
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 7a896dc25088..6c4b3518313f 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -3,6 +3,7 @@ import type {TDefaultRendererProps} from 'react-native-render-html';
 import Text from '@components/Text';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
+import { View } from 'react-native';
 
 /**
  * Retrieves the text content from a Text or Phrasing node.
@@ -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>
     );
 }

From 0d17a77aceef0bd6fca3f405e9a70ca5775182dd Mon Sep 17 00:00:00 2001
From: kubabutkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 7 Mar 2025 12:35:15 +0100
Subject: [PATCH 2/3] run prettier

---
 .../HTMLRenderers/CodeRenderer/index.native.tsx | 17 ++++++++---------
 .../HTMLRenderers/CodeRenderer/index.tsx        |  3 +--
 src/components/InlineCodeBlock/index.native.tsx |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx
index 3d867cb36f73..b40ac7875fe8 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.native.tsx
@@ -1,12 +1,11 @@
-
 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';
 import InlineCodeBlock from '@components/InlineCodeBlock';
 import useStyleUtils from '@hooks/useStyleUtils';
 import FontUtils from '@styles/utils/FontUtils';
-import { View } from 'react-native';
 
 type CodeRendererProps = CustomRendererProps<TText | TPhrasing> & {
     /** Key of the element */
@@ -34,13 +33,13 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
 
     return (
         <View style={{marginBottom: 4}}>
-        <InlineCodeBlock
-            defaultRendererProps={{...defaultRendererProps, style: {marginBottom: 4}}}
-            TDefaultRenderer={TDefaultRenderer}
-            boxModelStyle={[boxModelStyle]}
-            textStyle={{...textStyle, ...textStyleOverride}}
-            key={key}
-        />
+            <InlineCodeBlock
+                defaultRendererProps={{...defaultRendererProps, style: {marginBottom: 4}}}
+                TDefaultRenderer={TDefaultRenderer}
+                boxModelStyle={[boxModelStyle]}
+                textStyle={{...textStyle, ...textStyleOverride}}
+                key={key}
+            />
         </View>
     );
 }
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
index dd903f5ce133..b0b9465ea94d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
@@ -1,12 +1,11 @@
-
 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';
 import InlineCodeBlock from '@components/InlineCodeBlock';
 import useStyleUtils from '@hooks/useStyleUtils';
 import FontUtils from '@styles/utils/FontUtils';
-import { View } from 'react-native';
 
 type CodeRendererProps = CustomRendererProps<TText | TPhrasing> & {
     /** Key of the element */
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 6c4b3518313f..290952d690d3 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,9 +1,9 @@
 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';
 import type {TTextOrTPhrasing} from './types';
-import { View } from 'react-native';
 
 /**
  * Retrieves the text content from a Text or Phrasing node.

From c64b5fd2648381faf1e4a3a4d111ed7da3a5ce3e Mon Sep 17 00:00:00 2001
From: kubabutkiewicz <jakub.butkiewicz94@gmail.com>
Date: Fri, 7 Mar 2025 12:36:51 +0100
Subject: [PATCH 3/3] fix lint

---
 .../HTMLRenderers/CodeRenderer/index.tsx            | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
index b0b9465ea94d..e150a0123ef4 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer/index.tsx
@@ -1,7 +1,6 @@
 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 { 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';
@@ -12,11 +11,11 @@ type CodeRendererProps = CustomRendererProps<TText | TPhrasing> & {
     key?: string;
 };
 
-function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: CodeRendererProps) {
+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 ?? {});
+    const { boxModelStyle, otherStyle: textStyle } = splitBoxModelStyle(style ?? {});
 
     /** Get the default fontFamily variant */
     const font = FontUtils.fontFamily.platform.MONOSPACE.fontFamily;
@@ -33,10 +32,10 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
 
     return (
         <InlineCodeBlock
-            defaultRendererProps={{...defaultRendererProps, style: {marginBottom: 4}}}
+            defaultRendererProps={{ ...defaultRendererProps, style: { marginBottom: 4 } }}
             TDefaultRenderer={TDefaultRenderer}
             boxModelStyle={[boxModelStyle]}
-            textStyle={{...textStyle, ...textStyleOverride}}
+            textStyle={{ ...textStyle, ...textStyleOverride }}
             key={key}
         />
     );