From 9d7ead0fd284593344e748731b93e4b689f1885f Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 8 Apr 2024 11:45:12 +0700
Subject: [PATCH 01/23] Prevent emoji from being formatted

---
 .../HTMLRenderers/EmojiRenderer.tsx           |  2 +-
 src/components/InlineCodeBlock/index.tsx      | 48 +++++++++++++++----
 src/hooks/useMarkdownStyle.ts                 |  5 ++
 src/styles/index.ts                           |  5 ++
 4 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
index 6582e99477a8..e94e5a9b6c35 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
@@ -8,7 +8,7 @@ function EmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
     const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {};
     return (
         <EmojiWithTooltip
-            style={[style, styles.cursorDefault]}
+            style={[style, styles.cursorDefault, styles.emojiDefault]}
             emojiCode={'data' in tnode ? tnode.data : ''}
         />
     );
diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index 26a4e8b7a31f..4dfe30032d47 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -1,26 +1,54 @@
 import React from 'react';
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from 'react-native';
 import Text from '@components/Text';
-import getCurrentData from './getCurrentData';
 import type InlineCodeBlockProps from './types';
-import type {TTextOrTPhrasing} from './types';
+import type { TTextOrTPhrasing } from './types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import { TDefaultRendererProps } from 'react-native-render-html';
+import { ThemeStyles } from '@styles/index';
 
-function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
-    const flattenTextStyle = StyleSheet.flatten(textStyle);
-    const {textDecorationLine, ...textStyles} = flattenTextStyle;
+function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
+    const elements: (string | React.JSX.Element)[] = [];
+    
+    let hasLargeStyle = false;
+    if ('data' in defaultRendererProps.tnode) {
+        elements.push(defaultRendererProps.tnode.data);
+    } else if (defaultRendererProps.tnode.children) {
+        defaultRendererProps.tnode.children.forEach((child) => {
+            if ('data' in child) {
+                if (child.tagName === 'emoji') {
+                    const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
+                    if (Object.keys(largeStyle).length > 0) {
+                        hasLargeStyle = true;
+                    }
+                    elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
+                } else {
+                    elements.push(child.data);
+                }
+            }
+        });
+    }
 
-    const data = getCurrentData(defaultRendererProps);
+    return { elements, hasLargeStyle };
+}
+
+function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({ TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle }: InlineCodeBlockProps<TComponent>) {
+    const styles = useThemeStyles();
+    const flattenTextStyle = StyleSheet.flatten(textStyle);
+    const { textDecorationLine, ...textStyles } = flattenTextStyle;
+    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
         >
-            <Text style={[boxModelStyle, textStyles]}>{data}</Text>
+            <Text style={[boxModelStyle, textStyles, hasLargeStyle ? styles.onlyEmojisText : {}]}>
+                {elements}
+            </Text>
         </TDefaultRenderer>
     );
 }
-
 InlineCodeBlock.displayName = 'InlineCodeBlock';
 
-export default InlineCodeBlock;
+export default InlineCodeBlock;
\ No newline at end of file
diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
index e753218e8406..0b159ae1bf5a 100644
--- a/src/hooks/useMarkdownStyle.ts
+++ b/src/hooks/useMarkdownStyle.ts
@@ -42,6 +42,11 @@ function useMarkdownStyle(): MarkdownStyle {
                 color: theme.mentionText,
                 backgroundColor: theme.mentionBG,
             },
+            emoji: {
+                fontStyle: 'normal',
+                fontWeight: 'normal',
+                fontSize: 12,
+            },
         }),
         [theme],
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a736bc537fa6..8f983af2389b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -280,6 +280,11 @@ const styles = (theme: ThemeColors) =>
             ...writingDirection.ltr,
         },
 
+        emojiDefault: {
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+        },
+
         emojiSuggestionsEmoji: {
             fontSize: variables.fontSizeMedium,
             width: 51,

From aaff72e37f726ea49b75bc6a97b7d52b5d5fbf14 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 13 Apr 2024 09:04:59 +0700
Subject: [PATCH 02/23] Add dInlineFlex

---
 src/styles/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 0732cac1fc29..1bb837ecf731 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -283,6 +283,10 @@ const styles = (theme: ThemeColors) =>
         emojiDefault: {
             fontStyle: 'normal',
             fontWeight: 'normal',
+            ...display.dInlineFlex,
+            // textDecoration: 'none',
+            // flexDirection: 'row', flexWrap: 'wrap',
+            
         },
 
         emojiSuggestionsEmoji: {

From 6cb3e5b54fa35155a62b7d413fcba270099cdb77 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 13 Apr 2024 09:36:37 +0700
Subject: [PATCH 03/23] comment emoji style in useMarkdownStyle

---
 src/hooks/useMarkdownStyle.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
index 607ff360f693..6266f87a21cd 100644
--- a/src/hooks/useMarkdownStyle.ts
+++ b/src/hooks/useMarkdownStyle.ts
@@ -44,13 +44,13 @@ function useMarkdownStyle(): MarkdownStyle {
                 color: theme.mentionText,
                 backgroundColor: theme.mentionBG,
             },
-            emoji: {
-                fontStyle: 'normal',
-                fontWeight: 'normal',
-                fontSize: 12,
-            },
+            // emoji: {
+            //     fontStyle: 'normal',
+            //     fontWeight: 'normal',
+            //     fontSize: 12,
+            // },
         }),
-        [theme],
+        [theme], 
     );
 
     return markdownStyle;

From 521bf2d8d2b589f00705cb0972454e074336949e Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Sat, 13 Apr 2024 14:21:44 +0700
Subject: [PATCH 04/23] Add textDecorationLine none to hide striketrough in
 android

---
 src/styles/index.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index b043191cf509..94c63c102cbb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -284,9 +284,7 @@ const styles = (theme: ThemeColors) =>
             fontStyle: 'normal',
             fontWeight: 'normal',
             ...display.dInlineFlex,
-            // textDecoration: 'none',
-            // flexDirection: 'row', flexWrap: 'wrap',
-            
+            textDecorationLine:'none'
         },
 
         emojiSuggestionsEmoji: {

From dcccca48aa65052ad6136cb2c17493d1ff5f7cc9 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 20 Apr 2024 07:55:04 +0700
Subject: [PATCH 05/23] Move renderEmojisAsTextComponents to a new file

---
 .../InlineCodeBlock/getCurrentData.ts         | 11 -------
 .../InlineCodeBlock/index.native.tsx          |  8 ++---
 src/components/InlineCodeBlock/index.tsx      | 30 ++---------------
 .../renderEmojisAsTextComponents.tsx          | 32 +++++++++++++++++++
 4 files changed, 38 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/InlineCodeBlock/getCurrentData.ts
 create mode 100644 src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx

diff --git a/src/components/InlineCodeBlock/getCurrentData.ts b/src/components/InlineCodeBlock/getCurrentData.ts
deleted file mode 100644
index 591ec74c885d..000000000000
--- a/src/components/InlineCodeBlock/getCurrentData.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {TDefaultRendererProps} from 'react-native-render-html';
-import type {TTextOrTPhrasing} from './types';
-
-// Create a temporary solution to display when there are emojis in the inline code block
-// We can remove this after https://github.com/Expensify/App/issues/14676 is fixed
-export default function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string {
-    if ('data' in defaultRendererProps.tnode) {
-        return defaultRendererProps.tnode.data;
-    }
-    return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join('');
-}
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 1c8a1bea4312..fe7bfba62947 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getCurrentData from './getCurrentData';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
+import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const data = getCurrentData(defaultRendererProps);
+    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
 
     return (
         <TDefaultRenderer
@@ -16,9 +16,9 @@ function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer,
         >
             <WrappedText
                 textStyles={textStyle}
-                wordStyles={[boxModelStyle, styles.codeWordStyle]}
+                wordStyles={[boxModelStyle, styles.codeWordStyle, hasLargeStyle ? styles.onlyEmojisText : {}]}
             >
-                {data}
+                {elements}
             </WrappedText>
         </TDefaultRenderer>
     );
diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index 4dfe30032d47..f092e41fd3fb 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -4,39 +4,13 @@ import Text from '@components/Text';
 import type InlineCodeBlockProps from './types';
 import type { TTextOrTPhrasing } from './types';
 import useThemeStyles from '@hooks/useThemeStyles';
-import { TDefaultRendererProps } from 'react-native-render-html';
-import { ThemeStyles } from '@styles/index';
-
-function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
-    const elements: (string | React.JSX.Element)[] = [];
-    
-    let hasLargeStyle = false;
-    if ('data' in defaultRendererProps.tnode) {
-        elements.push(defaultRendererProps.tnode.data);
-    } else if (defaultRendererProps.tnode.children) {
-        defaultRendererProps.tnode.children.forEach((child) => {
-            if ('data' in child) {
-                if (child.tagName === 'emoji') {
-                    const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
-                    if (Object.keys(largeStyle).length > 0) {
-                        hasLargeStyle = true;
-                    }
-                    elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
-                } else {
-                    elements.push(child.data);
-                }
-            }
-        });
-    }
-
-    return { elements, hasLargeStyle };
-}
+import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({ TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle }: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
     const flattenTextStyle = StyleSheet.flatten(textStyle);
     const { textDecorationLine, ...textStyles } = flattenTextStyle;
-    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps, styles);
+    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx b/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
new file mode 100644
index 000000000000..6c6c97636e11
--- /dev/null
+++ b/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Text from '@components/Text';
+import type { TTextOrTPhrasing } from './types';
+import { TDefaultRendererProps } from 'react-native-render-html';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+
+export function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>) {
+    const elements: (string | React.JSX.Element)[] = [];
+    const styles = useThemeStyles();
+
+    let hasLargeStyle = false;
+    if ('data' in defaultRendererProps.tnode) {
+        elements.push(defaultRendererProps.tnode.data);
+    } else if (defaultRendererProps.tnode.children) {
+        defaultRendererProps.tnode.children.forEach((child) => {
+            if ('data' in child) {
+                if (child.tagName === 'emoji') {
+                    const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
+                    if (Object.keys(largeStyle).length > 0) {
+                        hasLargeStyle = true;
+                    }
+                    elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
+                } else {
+                    elements.push(child.data);
+                }
+            }
+        });
+    }
+
+    return { elements, hasLargeStyle };
+}

From 4fe6841f733dc1c5e92eb8f22648c5615eb37a3b Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 20 Apr 2024 08:52:24 +0700
Subject: [PATCH 06/23] Fix lint and prettier

---
 .../InlineCodeBlock/index.native.tsx          |  4 +-
 src/components/InlineCodeBlock/index.tsx      | 20 +++----
 .../renderEmojisAsTextComponents.tsx          | 60 ++++++++++++-------
 src/styles/index.ts                           |  2 +-
 4 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index fe7bfba62947..099ae9e48613 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
+import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
-import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
+    const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index f092e41fd3fb..c6862002466a 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -1,28 +1,26 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 import Text from '@components/Text';
-import type InlineCodeBlockProps from './types';
-import type { TTextOrTPhrasing } from './types';
 import useThemeStyles from '@hooks/useThemeStyles';
-import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
+import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
+import type InlineCodeBlockProps from './types';
+import type {TTextOrTPhrasing} from './types';
 
-function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({ TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle }: InlineCodeBlockProps<TComponent>) {
+function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
     const flattenTextStyle = StyleSheet.flatten(textStyle);
-    const { textDecorationLine, ...textStyles } = flattenTextStyle;
-    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
+    const {textDecorationLine, ...textStyles} = flattenTextStyle;
+    const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
         >
-            <Text style={[boxModelStyle, textStyles, hasLargeStyle ? styles.onlyEmojisText : {}]}>
-                {elements}
-            </Text>
+            <Text style={[boxModelStyle, textStyles, hasLargeStyle ? styles.onlyEmojisText : {}]}>{elements}</Text>
         </TDefaultRenderer>
     );
 }
 InlineCodeBlock.displayName = 'InlineCodeBlock';
 
-export default InlineCodeBlock;
\ No newline at end of file
+export default InlineCodeBlock;
diff --git a/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx b/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
index 6c6c97636e11..5b435bc1b03e 100644
--- a/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
+++ b/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
@@ -1,32 +1,46 @@
 import React from 'react';
+import type {TDefaultRendererProps} from 'react-native-render-html';
 import Text from '@components/Text';
-import type { TTextOrTPhrasing } from './types';
-import { TDefaultRendererProps } from 'react-native-render-html';
-import useThemeStyles from '@hooks/useThemeStyles';
-
-
-export function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>) {
-    const elements: (string | React.JSX.Element)[] = [];
-    const styles = useThemeStyles();
+import type {ThemeStyles} from '@styles/index';
+import type {TTextOrTPhrasing} from './types';
 
+function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
+    const elements: Array<string | React.JSX.Element> = [];
     let hasLargeStyle = false;
+
     if ('data' in defaultRendererProps.tnode) {
         elements.push(defaultRendererProps.tnode.data);
-    } else if (defaultRendererProps.tnode.children) {
-        defaultRendererProps.tnode.children.forEach((child) => {
-            if ('data' in child) {
-                if (child.tagName === 'emoji') {
-                    const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
-                    if (Object.keys(largeStyle).length > 0) {
-                        hasLargeStyle = true;
-                    }
-                    elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
-                } else {
-                    elements.push(child.data);
-                }
-            }
-        });
+        return {elements, hasLargeStyle};
+    }
+
+    if (!defaultRendererProps.tnode.children) {
+        return {elements, hasLargeStyle};
     }
 
-    return { elements, hasLargeStyle };
+    defaultRendererProps.tnode.children.forEach((child) => {
+        if (!('data' in child)) {
+            return;
+        }
+
+        if (child.tagName === 'emoji') {
+            const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
+            if (Object.keys(largeStyle).length > 0) {
+                hasLargeStyle = true;
+            }
+            elements.push(
+                <Text
+                    style={[largeStyle, styles.emojiDefault]}
+                    key={child.data}
+                >
+                    {child.data}
+                </Text>,
+            );
+        } else {
+            elements.push(child.data);
+        }
+    });
+
+    return {elements, hasLargeStyle};
 }
+
+export default renderEmojisAsTextComponents;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 44e044fdc62f..d5116b805182 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -283,8 +283,8 @@ const styles = (theme: ThemeColors) =>
         emojiDefault: {
             fontStyle: 'normal',
             fontWeight: 'normal',
+            textDecorationLine: 'none',
             ...display.dInlineFlex,
-            textDecorationLine:'none'
         },
 
         emojiSuggestionsEmoji: {

From 6b0d2d68e6ca5009d32d9fa81d383617ecc05a22 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 20 Apr 2024 09:12:49 +0700
Subject: [PATCH 07/23] render emojis as EmojiWithTooltip instead of Text to
 keep emoji tooltip

---
 src/components/InlineCodeBlock/index.native.tsx   |  4 ++--
 src/components/InlineCodeBlock/index.tsx          |  4 ++--
 ...mojisAsTextComponents.tsx => renderEmojis.tsx} | 15 +++++++--------
 3 files changed, 11 insertions(+), 12 deletions(-)
 rename src/components/InlineCodeBlock/{renderEmojisAsTextComponents.tsx => renderEmojis.tsx} (74%)

diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 099ae9e48613..c6969e91934b 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
-import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
+import renderEmojis from './renderEmojis';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);
+    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index c6862002466a..833b5a47b5c0 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
-import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
+import renderEmojis from './renderEmojis';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 
@@ -10,7 +10,7 @@ function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer,
     const styles = useThemeStyles();
     const flattenTextStyle = StyleSheet.flatten(textStyle);
     const {textDecorationLine, ...textStyles} = flattenTextStyle;
-    const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);
+    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx b/src/components/InlineCodeBlock/renderEmojis.tsx
similarity index 74%
rename from src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
rename to src/components/InlineCodeBlock/renderEmojis.tsx
index 5b435bc1b03e..e79293799a49 100644
--- a/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
+++ b/src/components/InlineCodeBlock/renderEmojis.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import type {TDefaultRendererProps} from 'react-native-render-html';
-import Text from '@components/Text';
+import EmojiWithTooltip from '@components/EmojiWithTooltip';
 import type {ThemeStyles} from '@styles/index';
 import type {TTextOrTPhrasing} from './types';
 
-function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
+function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
     const elements: Array<string | React.JSX.Element> = [];
     let hasLargeStyle = false;
 
@@ -28,12 +28,11 @@ function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProp
                 hasLargeStyle = true;
             }
             elements.push(
-                <Text
-                    style={[largeStyle, styles.emojiDefault]}
+                <EmojiWithTooltip
+                    style={[styles.cursorDefault, largeStyle, styles.emojiDefault]}
                     key={child.data}
-                >
-                    {child.data}
-                </Text>,
+                    emojiCode={child.data}
+                />,
             );
         } else {
             elements.push(child.data);
@@ -43,4 +42,4 @@ function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProp
     return {elements, hasLargeStyle};
 }
 
-export default renderEmojisAsTextComponents;
+export default renderEmojis;

From f55d6a04502fede6b4b5aae5641ac943a9962430 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 22 Apr 2024 16:53:38 +0700
Subject: [PATCH 08/23] Override EmojiWithTooltip textStyles with code
 textStyles

---
 src/components/InlineCodeBlock/index.tsx        | 2 +-
 src/components/InlineCodeBlock/renderEmojis.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index 833b5a47b5c0..18117efe2642 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -10,7 +10,7 @@ function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer,
     const styles = useThemeStyles();
     const flattenTextStyle = StyleSheet.flatten(textStyle);
     const {textDecorationLine, ...textStyles} = flattenTextStyle;
-    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, styles);
+    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, textStyles, styles);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/renderEmojis.tsx b/src/components/InlineCodeBlock/renderEmojis.tsx
index e79293799a49..5302ab2c939d 100644
--- a/src/components/InlineCodeBlock/renderEmojis.tsx
+++ b/src/components/InlineCodeBlock/renderEmojis.tsx
@@ -4,7 +4,7 @@ import EmojiWithTooltip from '@components/EmojiWithTooltip';
 import type {ThemeStyles} from '@styles/index';
 import type {TTextOrTPhrasing} from './types';
 
-function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
+function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, textStyles: TextStyle, styles: ThemeStyles) {
     const elements: Array<string | React.JSX.Element> = [];
     let hasLargeStyle = false;
 
@@ -29,7 +29,7 @@ function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasi
             }
             elements.push(
                 <EmojiWithTooltip
-                    style={[styles.cursorDefault, largeStyle, styles.emojiDefault]}
+                    style={[textStyles, styles.cursorDefault, largeStyle, styles.emojiDefault]}
                     key={child.data}
                     emojiCode={child.data}
                 />,

From f59918e0c96e428e9ce13afd0fd7ffc4eb5e113c Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 22 Apr 2024 17:11:10 +0700
Subject: [PATCH 09/23] Fix Type

---
 src/components/InlineCodeBlock/index.native.tsx | 2 +-
 src/components/InlineCodeBlock/renderEmojis.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index c6969e91934b..23a90d459927 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -7,7 +7,7 @@ import WrappedText from './WrappedText';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, styles);
+    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, textStyle, styles);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/renderEmojis.tsx b/src/components/InlineCodeBlock/renderEmojis.tsx
index 5302ab2c939d..bbe5e937910b 100644
--- a/src/components/InlineCodeBlock/renderEmojis.tsx
+++ b/src/components/InlineCodeBlock/renderEmojis.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
 import type {TDefaultRendererProps} from 'react-native-render-html';
 import EmojiWithTooltip from '@components/EmojiWithTooltip';
 import type {ThemeStyles} from '@styles/index';
 import type {TTextOrTPhrasing} from './types';
 
-function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, textStyles: TextStyle, styles: ThemeStyles) {
+function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, textStyles: StyleProp<TextStyle>, styles: ThemeStyles) {
     const elements: Array<string | React.JSX.Element> = [];
     let hasLargeStyle = false;
 

From dd86bd923e850be59fb118ad0a467cd981ee13ff Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 15:56:22 +0700
Subject: [PATCH 10/23] create platform specific emojiDefaultStyles

---
 src/styles/index.ts                                 |  9 ++-------
 src/styles/utils/emojiDefaultStyles/index.native.ts |  9 +++++++++
 src/styles/utils/emojiDefaultStyles/index.ts        | 11 +++++++++++
 src/styles/utils/emojiDefaultStyles/types.ts        |  5 +++++
 4 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/utils/emojiDefaultStyles/index.native.ts
 create mode 100644 src/styles/utils/emojiDefaultStyles/index.ts
 create mode 100644 src/styles/utils/emojiDefaultStyles/types.ts

diff --git a/src/styles/index.ts b/src/styles/index.ts
index b14041f7b435..e061e6891d03 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -19,6 +19,7 @@ import codeStyles from './utils/codeStyles';
 import cursor from './utils/cursor';
 import display from './utils/display';
 import editedLabelStyles from './utils/editedLabelStyles';
+import emojiDefaultStyles from './utils/emojiDefaultStyles';
 import flex from './utils/flex';
 import FontUtils from './utils/FontUtils';
 import getPopOverVerticalOffset from './utils/getPopOverVerticalOffset';
@@ -256,6 +257,7 @@ const styles = (theme: ThemeColors) =>
         ...objectFit,
         ...textDecorationLine,
         editedLabelStyles,
+        emojiDefaultStyles,
 
         autoCompleteSuggestionsContainer: {
             backgroundColor: theme.appBG,
@@ -280,13 +282,6 @@ const styles = (theme: ThemeColors) =>
             ...writingDirection.ltr,
         },
 
-        emojiDefault: {
-            fontStyle: 'normal',
-            fontWeight: 'normal',
-            textDecorationLine: 'none',
-            ...display.dInlineFlex,
-        },
-
         emojiSuggestionsEmoji: {
             fontSize: variables.fontSizeMedium,
             width: 51,
diff --git a/src/styles/utils/emojiDefaultStyles/index.native.ts b/src/styles/utils/emojiDefaultStyles/index.native.ts
new file mode 100644
index 000000000000..20bb887161d6
--- /dev/null
+++ b/src/styles/utils/emojiDefaultStyles/index.native.ts
@@ -0,0 +1,9 @@
+import type EmojiDefaultStyles from './types';
+
+const emojiDefaultStyles: EmojiDefaultStyles = {
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    textDecorationLine: 'none',
+};
+
+export default emojiDefaultStyles;
diff --git a/src/styles/utils/emojiDefaultStyles/index.ts b/src/styles/utils/emojiDefaultStyles/index.ts
new file mode 100644
index 000000000000..a24424f6677c
--- /dev/null
+++ b/src/styles/utils/emojiDefaultStyles/index.ts
@@ -0,0 +1,11 @@
+// eslint-disable-next-line no-restricted-imports
+import display from '@styles/utils/display';
+import type EmojiDefaultStyles from './types';
+
+const emojiDefaultStyles: EmojiDefaultStyles = {
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    ...display.dInlineFlex,
+};
+
+export default emojiDefaultStyles;
diff --git a/src/styles/utils/emojiDefaultStyles/types.ts b/src/styles/utils/emojiDefaultStyles/types.ts
new file mode 100644
index 000000000000..e279412bbdae
--- /dev/null
+++ b/src/styles/utils/emojiDefaultStyles/types.ts
@@ -0,0 +1,5 @@
+import type {TextStyle} from 'react-native';
+
+type EmojiDefaultStyles = TextStyle;
+
+export default EmojiDefaultStyles
\ No newline at end of file

From 1807fa2a8a28ebdb18ddcb54a4b3268338b40cf5 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 15:58:01 +0700
Subject: [PATCH 11/23] change emojiDefault to emojiDefaultStyles

---
 .../HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
index e94e5a9b6c35..9ad138444b9c 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
@@ -8,7 +8,7 @@ function EmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
     const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {};
     return (
         <EmojiWithTooltip
-            style={[style, styles.cursorDefault, styles.emojiDefault]}
+            style={[style, styles.cursorDefault, styles.emojiDefaultStyles]}
             emojiCode={'data' in tnode ? tnode.data : ''}
         />
     );

From 2e7c14824ca4baef643647f1ce9e56fc1750819e Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 15:58:40 +0700
Subject: [PATCH 12/23] restore getCurrentData

---
 src/components/InlineCodeBlock/getCurrentData.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/components/InlineCodeBlock/getCurrentData.tsx

diff --git a/src/components/InlineCodeBlock/getCurrentData.tsx b/src/components/InlineCodeBlock/getCurrentData.tsx
new file mode 100644
index 000000000000..1e5dc24fa980
--- /dev/null
+++ b/src/components/InlineCodeBlock/getCurrentData.tsx
@@ -0,0 +1,11 @@
+import type {TDefaultRendererProps} from 'react-native-render-html';
+import type {TTextOrTPhrasing} from './types';
+
+// Create a temporary solution to display when there are emojis in the inline code block
+// We can remove this after https://github.com/Expensify/App/issues/14676 is fixed
+export default function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string {
+    if ('data' in defaultRendererProps.tnode) {
+        return defaultRendererProps.tnode.data;
+    }
+    return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join('');
+}
\ No newline at end of file

From 1a05d042911f7c96b66f0ee601e9cede9c86b799 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 15:59:46 +0700
Subject: [PATCH 13/23] revert inlinecodeblock native change

---
 src/components/InlineCodeBlock/index.native.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 23a90d459927..580c99981964 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
-import renderEmojis from './renderEmojis';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
+import getCurrentData from './getCurrentData';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, textStyle, styles);
+    const data = getCurrentData(defaultRendererProps);
 
     return (
         <TDefaultRenderer
@@ -16,9 +16,9 @@ function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer,
         >
             <WrappedText
                 textStyles={textStyle}
-                wordStyles={[boxModelStyle, styles.codeWordStyle, hasLargeStyle ? styles.onlyEmojisText : {}]}
+                wordStyles={[boxModelStyle, styles.codeWordStyle]}
             >
-                {elements}
+                {data}
             </WrappedText>
         </TDefaultRenderer>
     );

From 964a7a9dc78cba6fd8fe5aaaf12f502f1384cfec Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 16:03:06 +0700
Subject: [PATCH 14/23] apply default style to emoji inside wrappedText

---
 src/components/InlineCodeBlock/WrappedText.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index 3c196f2a7492..ef658e0c8a11 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -39,6 +39,13 @@ function containsEmoji(text: string): boolean {
     return CONST.REGEX.EMOJI.test(text);
 }
 
+/**
+ * Validates if the string is a single emoji
+ */
+function isEmoji(text: string): boolean {
+    return CONST.REGEX.EMOJI.test(text) && text.length === 2;
+}
+
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
     const styles = useThemeStyles();
 
@@ -60,8 +67,12 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
                     key={`${colText}-${colIndex}`}
                     style={styles.codeWordWrapper}
                 >
-                    <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
-                        <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>{colText}</Text>
+                    <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle, {height: 35, justifyContent:'center'}]}>
+                        <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>
+                            {Array.from(colText).map((char, charIndex) => (
+                                isEmoji(char) ? <Text key={charIndex} style={[textStyles, styles.emojiDefaultStyles]}>{char}</Text> : char
+                            ))}
+                        </Text>
                     </View>
                 </View>
             ))}

From a7a1f123e48245191c8774b451ba32c70a988927 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 22:46:52 +0700
Subject: [PATCH 15/23] use existing containsOnlyEmojis

---
 src/components/InlineCodeBlock/WrappedText.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index ef658e0c8a11..43d3dede4238 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -5,6 +5,7 @@ import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import {containsOnlyEmojis} from '@libs/EmojiUtils';
 
 type WrappedTextProps = ChildrenProps & {
     /** Style to be applied to Text */
@@ -39,13 +40,6 @@ function containsEmoji(text: string): boolean {
     return CONST.REGEX.EMOJI.test(text);
 }
 
-/**
- * Validates if the string is a single emoji
- */
-function isEmoji(text: string): boolean {
-    return CONST.REGEX.EMOJI.test(text) && text.length === 2;
-}
-
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
     const styles = useThemeStyles();
 
@@ -67,10 +61,14 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
                     key={`${colText}-${colIndex}`}
                     style={styles.codeWordWrapper}
                 >
-                    <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle, {height: 35, justifyContent:'center'}]}>
+                    <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
                         <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>
+                            {/* {colText} */}
                             {Array.from(colText).map((char, charIndex) => (
-                                isEmoji(char) ? <Text key={charIndex} style={[textStyles, styles.emojiDefaultStyles]}>{char}</Text> : char
+                                containsOnlyEmojis(char) ? <Text key={charIndex} style={[
+                                    textStyles, 
+                                    styles.emojiDefaultStyles
+                                ]}>{char}</Text> : char
                             ))}
                         </Text>
                     </View>

From e74c233c540e792ef2554e258d80822a7cf811e5 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 24 Apr 2024 23:09:59 +0700
Subject: [PATCH 16/23] remove unnecessary code

---
 src/components/InlineCodeBlock/WrappedText.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index 43d3dede4238..fcc8120194a8 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -63,7 +63,6 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
                 >
                     <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
                         <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>
-                            {/* {colText} */}
                             {Array.from(colText).map((char, charIndex) => (
                                 containsOnlyEmojis(char) ? <Text key={charIndex} style={[
                                     textStyles, 

From e0d25a2003928b780a20709aa85950fea8173597 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 25 Apr 2024 07:15:47 +0700
Subject: [PATCH 17/23] run prettier

---
 src/components/InlineCodeBlock/getCurrentData.tsx | 2 +-
 src/components/InlineCodeBlock/index.native.tsx   | 2 +-
 src/styles/utils/emojiDefaultStyles/types.ts      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/InlineCodeBlock/getCurrentData.tsx b/src/components/InlineCodeBlock/getCurrentData.tsx
index 1e5dc24fa980..591ec74c885d 100644
--- a/src/components/InlineCodeBlock/getCurrentData.tsx
+++ b/src/components/InlineCodeBlock/getCurrentData.tsx
@@ -8,4 +8,4 @@ export default function getCurrentData(defaultRendererProps: TDefaultRendererPro
         return defaultRendererProps.tnode.data;
     }
     return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join('');
-}
\ No newline at end of file
+}
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 580c99981964..1c8a1bea4312 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
+import getCurrentData from './getCurrentData';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
-import getCurrentData from './getCurrentData';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
diff --git a/src/styles/utils/emojiDefaultStyles/types.ts b/src/styles/utils/emojiDefaultStyles/types.ts
index e279412bbdae..62537f95d0ac 100644
--- a/src/styles/utils/emojiDefaultStyles/types.ts
+++ b/src/styles/utils/emojiDefaultStyles/types.ts
@@ -2,4 +2,4 @@ import type {TextStyle} from 'react-native';
 
 type EmojiDefaultStyles = TextStyle;
 
-export default EmojiDefaultStyles
\ No newline at end of file
+export default EmojiDefaultStyles;

From e06746aa3be399bd8d86e2ff3f7044d03c56df97 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 25 Apr 2024 07:22:58 +0700
Subject: [PATCH 18/23] fix lint error

---
 .../InlineCodeBlock/WrappedText.tsx           | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index fcc8120194a8..d97e1feb7ff8 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -3,9 +3,9 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {containsOnlyEmojis} from '@libs/EmojiUtils';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import {containsOnlyEmojis} from '@libs/EmojiUtils';
 
 type WrappedTextProps = ChildrenProps & {
     /** Style to be applied to Text */
@@ -63,12 +63,19 @@ function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
                 >
                     <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
                         <Text style={[textStyles, !containsEmoji(colText) && styles.codePlainTextStyle]}>
-                            {Array.from(colText).map((char, charIndex) => (
-                                containsOnlyEmojis(char) ? <Text key={charIndex} style={[
-                                    textStyles, 
-                                    styles.emojiDefaultStyles
-                                ]}>{char}</Text> : char
-                            ))}
+                            {Array.from(colText).map((char, charIndex) =>
+                                containsOnlyEmojis(char) ? (
+                                    <Text
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={`${colIndex}-${charIndex}`}
+                                        style={[textStyles, styles.emojiDefaultStyles]}
+                                    >
+                                        {char}
+                                    </Text>
+                                ) : (
+                                    char
+                                ),
+                            )}
                         </Text>
                     </View>
                 </View>

From be66270720e1f3d90b0708153c413cc097209d24 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 25 Apr 2024 07:32:13 +0700
Subject: [PATCH 19/23] fix containsEmoji function

---
 src/components/InlineCodeBlock/WrappedText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index d97e1feb7ff8..3045c15c471b 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -37,7 +37,7 @@ function getTextMatrix(text: string): string[][] {
  * Validates if the text contains any emoji
  */
 function containsEmoji(text: string): boolean {
-    return CONST.REGEX.EMOJI.test(text);
+    return CONST.REGEX.EMOJIS.test(text);
 }
 
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {

From 5448e1a4fb43904a0313f6d644a77c4a2d68191e Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 25 Apr 2024 08:34:57 +0700
Subject: [PATCH 20/23] refactor, add comment

---
 src/components/InlineCodeBlock/index.tsx      | 57 +++++++++++++++++--
 .../InlineCodeBlock/renderEmojis.tsx          | 46 ---------------
 2 files changed, 53 insertions(+), 50 deletions(-)
 delete mode 100644 src/components/InlineCodeBlock/renderEmojis.tsx

diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index 18117efe2642..be428f4ba67d 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -1,23 +1,72 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
+import type {StyleProp, TextStyle} from 'react-native';
+import type {TDefaultRendererProps} from 'react-native-render-html';
+import EmojiWithTooltip from '@components/EmojiWithTooltip';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
-import renderEmojis from './renderEmojis';
-import type InlineCodeBlockProps from './types';
+import type {ThemeStyles} from '@styles/index';
 import type {TTextOrTPhrasing} from './types';
+import type InlineCodeBlockProps from './types';
+
+/**
+ * This function is used to render elements based on the provided defaultRendererProps and styles.
+ * It iterates over the children of the tnode object in defaultRendererProps, and for each child,
+ * it checks if the child's tagName is 'emoji'. If it is, it creates an EmojiWithTooltip component
+ * with the appropriate styles and adds it to the elements array. If it's not, it adds the child's
+ * 'data' property to the elements array. The function then returns the elements array.
+ *
+ * @param {TDefaultRendererProps<TTextOrTPhrasing>} defaultRendererProps - The default renderer props.
+ * @param {StyleProp<TextStyle>} textStyles - The text styles.
+ * @param {ThemeStyles} styles - The theme styles.
+ * @returns {Array<string | React.JSX.Element>} The array of elements to be rendered.
+ */
+function renderElements(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, textStyles: StyleProp<TextStyle>, styles: ThemeStyles) {
+    const elements: Array<string | React.JSX.Element> = [];
+
+    if ('data' in defaultRendererProps.tnode) {
+        elements.push(defaultRendererProps.tnode.data);
+        return elements;
+    }
+
+    if (!defaultRendererProps.tnode.children) {
+        return elements;
+    }
+
+    defaultRendererProps.tnode.children.forEach((child) => {
+        if (!('data' in child)) {
+            return;
+        }
+
+        if (child.tagName === 'emoji') {
+            elements.push(
+                <EmojiWithTooltip
+                    style={[textStyles, styles.cursorDefault, styles.emojiDefaultStyles]}
+                    key={child.data}
+                    emojiCode={child.data}
+                />,
+            );
+        } else {
+            elements.push(child.data);
+        }
+    });
+
+    return elements;
+}
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
     const flattenTextStyle = StyleSheet.flatten(textStyle);
     const {textDecorationLine, ...textStyles} = flattenTextStyle;
-    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, textStyles, styles);
+
+    const elements = renderElements(defaultRendererProps, textStyles, styles);
 
     return (
         <TDefaultRenderer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
         >
-            <Text style={[boxModelStyle, textStyles, hasLargeStyle ? styles.onlyEmojisText : {}]}>{elements}</Text>
+            <Text style={[boxModelStyle, textStyles]}>{elements}</Text>
         </TDefaultRenderer>
     );
 }
diff --git a/src/components/InlineCodeBlock/renderEmojis.tsx b/src/components/InlineCodeBlock/renderEmojis.tsx
deleted file mode 100644
index bbe5e937910b..000000000000
--- a/src/components/InlineCodeBlock/renderEmojis.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import type {StyleProp, TextStyle} from 'react-native';
-import type {TDefaultRendererProps} from 'react-native-render-html';
-import EmojiWithTooltip from '@components/EmojiWithTooltip';
-import type {ThemeStyles} from '@styles/index';
-import type {TTextOrTPhrasing} from './types';
-
-function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, textStyles: StyleProp<TextStyle>, styles: ThemeStyles) {
-    const elements: Array<string | React.JSX.Element> = [];
-    let hasLargeStyle = false;
-
-    if ('data' in defaultRendererProps.tnode) {
-        elements.push(defaultRendererProps.tnode.data);
-        return {elements, hasLargeStyle};
-    }
-
-    if (!defaultRendererProps.tnode.children) {
-        return {elements, hasLargeStyle};
-    }
-
-    defaultRendererProps.tnode.children.forEach((child) => {
-        if (!('data' in child)) {
-            return;
-        }
-
-        if (child.tagName === 'emoji') {
-            const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
-            if (Object.keys(largeStyle).length > 0) {
-                hasLargeStyle = true;
-            }
-            elements.push(
-                <EmojiWithTooltip
-                    style={[textStyles, styles.cursorDefault, largeStyle, styles.emojiDefault]}
-                    key={child.data}
-                    emojiCode={child.data}
-                />,
-            );
-        } else {
-            elements.push(child.data);
-        }
-    });
-
-    return {elements, hasLargeStyle};
-}
-
-export default renderEmojis;

From 46c1230c790eea5a8ec09ef99bb1d492942f5410 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 25 Apr 2024 10:17:56 +0700
Subject: [PATCH 21/23] fix lint

---
 src/components/InlineCodeBlock/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index be428f4ba67d..e1a89719bb82 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -16,10 +16,10 @@ import type InlineCodeBlockProps from './types';
  * with the appropriate styles and adds it to the elements array. If it's not, it adds the child's
  * 'data' property to the elements array. The function then returns the elements array.
  *
- * @param {TDefaultRendererProps<TTextOrTPhrasing>} defaultRendererProps - The default renderer props.
- * @param {StyleProp<TextStyle>} textStyles - The text styles.
- * @param {ThemeStyles} styles - The theme styles.
- * @returns {Array<string | React.JSX.Element>} The array of elements to be rendered.
+ * @param defaultRendererProps - The default renderer props.
+ * @param textStyles - The text styles.
+ * @param styles - The theme styles.
+ * @returns The array of elements to be rendered.
  */
 function renderElements(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, textStyles: StyleProp<TextStyle>, styles: ThemeStyles) {
     const elements: Array<string | React.JSX.Element> = [];

From 4e651a8c59dded92c33f67442125efbf7f579f9d Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 29 Apr 2024 13:03:21 +0700
Subject: [PATCH 22/23] move getCurrentData to native specific file

---
 src/components/InlineCodeBlock/getCurrentData.tsx | 11 -----------
 src/components/InlineCodeBlock/index.native.tsx   |  9 ++++++++-
 2 files changed, 8 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/InlineCodeBlock/getCurrentData.tsx

diff --git a/src/components/InlineCodeBlock/getCurrentData.tsx b/src/components/InlineCodeBlock/getCurrentData.tsx
deleted file mode 100644
index 591ec74c885d..000000000000
--- a/src/components/InlineCodeBlock/getCurrentData.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {TDefaultRendererProps} from 'react-native-render-html';
-import type {TTextOrTPhrasing} from './types';
-
-// Create a temporary solution to display when there are emojis in the inline code block
-// We can remove this after https://github.com/Expensify/App/issues/14676 is fixed
-export default function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string {
-    if ('data' in defaultRendererProps.tnode) {
-        return defaultRendererProps.tnode.data;
-    }
-    return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join('');
-}
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 1c8a1bea4312..5dbf80045012 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getCurrentData from './getCurrentData';
+import type {TDefaultRendererProps} from 'react-native-render-html';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
 
+function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string {
+    if ('data' in defaultRendererProps.tnode) {
+        return defaultRendererProps.tnode.data;
+    }
+    return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join('');
+}
+
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
     const data = getCurrentData(defaultRendererProps);

From 2fb2a4997032f0fadc0030f9f76e00aaae8d9b90 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 29 Apr 2024 13:15:45 +0700
Subject: [PATCH 23/23] Add comment to getCurrentData

---
 src/components/InlineCodeBlock/index.native.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 5dbf80045012..048bcfc960bd 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
-import useThemeStyles from '@hooks/useThemeStyles';
 import type {TDefaultRendererProps} from 'react-native-render-html';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
 
+/**
+ * Retrieves the text content from a Text or Phrasing node.
+ *
+ * @param defaultRendererProps - The default renderer props containing the node information.
+ * @returns The text content of the node.
+ *
+ * @template TTextOrTPhrasing
+ */
 function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string {
     if ('data' in defaultRendererProps.tnode) {
         return defaultRendererProps.tnode.data;