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] 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;