Merge pull request #35838 from dukenv0307/fix/34307

Handle emoji tooltip

Author: stitesExpensify

package-lock.json

@@ -101,7 +101,7 @@
     "date-fns-tz": "^2.0.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#a8ed0f8e1be3a1e09016e07a74cfd13c85bbc167",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#45d3b61bb38b4f9a19ddf573ce1e212369b242db",
     "expo": "^50.0.3",
     "expo-av": "~13.10.4",
     "expo-image": "1.10.1",

package.json

@@ -0,0 +1,10 @@
+import Text from '@components/Text';
+import type EmojiWithTooltipProps from './types';
+
+function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) {
+    return <Text style={style}>{emojiCode}</Text>;
+}
+
+EmojiWithTooltip.displayName = 'EmojiWithTooltip';
+
+export default EmojiWithTooltip;

src/components/EmojiWithTooltip/index.native.tsx

@@ -0,0 +1,40 @@
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as EmojiUtils from '@libs/EmojiUtils';
+import type EmojiWithTooltipProps from './types';
+
+function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) {
+    const styles = useThemeStyles();
+    const emoji = EmojiUtils.findEmojiByCode(emojiCode);
+    const emojiName = EmojiUtils.getEmojiName(emoji);
+
+    const emojiTooltipContent = useCallback(
+        () => (
+            <View style={[styles.alignItemsCenter, styles.ph2]}>
+                <View style={[styles.flexRow, styles.emojiTooltipWrapper]}>
+                    <Text
+                        key={emojiCode}
+                        style={styles.onlyEmojisText}
+                    >
+                        {emojiCode}
+                    </Text>
+                </View>
+                <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`:${emojiName}:`}</Text>
+            </View>
+        ),
+        [emojiCode, emojiName, styles.alignItemsCenter, styles.ph2, styles.flexRow, styles.emojiTooltipWrapper, styles.fontColorReactionLabel, styles.onlyEmojisText, styles.textMicro],
+    );
+
+    return (
+        <Tooltip renderTooltipContent={emojiTooltipContent}>
+            <Text style={[style, styles.cursorDefault]}>{emojiCode}</Text>
+        </Tooltip>
+    );
+}
+
+EmojiWithTooltip.displayName = 'EmojiWithTooltip';
+
+export default EmojiWithTooltip;

src/components/EmojiWithTooltip/index.tsx

@@ -0,0 +1,8 @@
+import type {StyleProp, TextStyle} from 'react-native';
+
+type EmojiWithTooltipProps = {
+    emojiCode: string;
+    style?: StyleProp<TextStyle>;
+};
+
+export default EmojiWithTooltipProps;

src/components/EmojiWithTooltip/types.ts

@@ -70,6 +70,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 mixedUAStyles: {whiteSpace: 'pre'},
                 contentModel: HTMLContentModel.block,
             }),
+            emoji: HTMLElementModel.fromCustomModel({tagName: 'emoji', contentModel: HTMLContentModel.textual}),
         }),
         [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting, styles.lh16],
     );

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import EmojiWithTooltip from '@components/EmojiWithTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function EmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+    const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {};
+    return (
+        <EmojiWithTooltip
+            style={[style, styles.cursorDefault]}
+            emojiCode={'data' in tnode ? tnode.data : ''}
+        />
+    );
+}
+
+EmojiRenderer.displayName = 'EmojiRenderer';
+
+export default EmojiRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx

@@ -2,6 +2,7 @@ import type {CustomTagRendererRecord} from 'react-native-render-html';
 import AnchorRenderer from './AnchorRenderer';
 import CodeRenderer from './CodeRenderer';
 import EditedRenderer from './EditedRenderer';
+import EmojiRenderer from './EmojiRenderer';
 import ImageRenderer from './ImageRenderer';
 import MentionHereRenderer from './MentionHereRenderer';
 import MentionUserRenderer from './MentionUserRenderer';
@@ -25,6 +26,7 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     /* eslint-disable @typescript-eslint/naming-convention */
     'mention-user': MentionUserRenderer,
     'mention-here': MentionHereRenderer,
+    emoji: EmojiRenderer,
     'next-step-email': NextStepEmailRenderer,
     /* eslint-enable @typescript-eslint/naming-convention */
 };

src/components/HTMLEngineProvider/HTMLRenderers/index.ts

@@ -38,6 +38,9 @@ const findEmojiByName = (name: string): Emoji => Emojis.emojiNameTable[name];
 const findEmojiByCode = (code: string): Emoji => Emojis.emojiCodeTableWithSkinTones[code];
 
 const getEmojiName = (emoji: Emoji, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): string => {
+    if (!emoji) {
+        return '';
+    }
     if (lang === CONST.LOCALES.DEFAULT) {
         return emoji.name;
     }

src/libs/EmojiUtils.ts

@@ -16,6 +16,7 @@ import CONST from '@src/CONST';
 import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import type {Message} from '@src/types/onyx/ReportAction';
 import RenderCommentHTML from './RenderCommentHTML';
+import shouldRenderAsText from './shouldRenderAsText';
 
 type TextCommentFragmentProps = {
     /** The reportAction's source */
@@ -44,15 +45,15 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    // If the only difference between fragment.text and fragment.html is <br /> tags
-    // we render it as text, not as html.
-    // This is done to render emojis with line breaks between them as text.
-    const differByLineBreaksOnly = Str.replaceAll(html, '<br />', '\n') === text;
-
-    // Only render HTML if we have html in the fragment
-    if (!differByLineBreaksOnly) {
+    // If the only difference between fragment.text and fragment.html is <br /> tags and emoji tag
+    // on native, we render it as text, not as html
+    // on other device, only render it as text if the only difference is <br /> tag
+    const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text);
+    if (!shouldRenderAsText(html, text) && !(containsOnlyEmojis && styleAsDeleted)) {
         const editedTag = fragment.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
-        const htmlContent = styleAsDeleted ? `<del>${html}</del>` : html;
+        const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
+
+        const htmlContent = containsOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji islarge>') : htmlWithDeletedTag;
 
         const htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
 
@@ -64,7 +65,6 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs
         );
     }
 
-    const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text);
     const message = isEmpty(iouMessage) ? text : iouMessage;
 
     return (

src/pages/home/report/comment/TextCommentFragment.tsx

@@ -0,0 +1,12 @@
+import Str from 'expensify-common/lib/str';
+
+/**
+ * Whether to render the report action as text
+ */
+export default function shouldRenderAsText(html: string, text: string): boolean {
+    // On native, we render emoji as text to prevent the large emoji is cut off when the action is edited.
+    // More info: https://github.com/Expensify/App/pull/35838#issuecomment-1964839350
+    const htmlWithoutLineBreak = Str.replaceAll(html, '<br />', '\n');
+    const htmlWithoutEmojiOpenTag = Str.replaceAll(htmlWithoutLineBreak, '<emoji>', '');
+    return Str.replaceAll(htmlWithoutEmojiOpenTag, '</emoji>', '') === text;
+}

src/pages/home/report/comment/shouldRenderAsText/index.native.ts

@@ -0,0 +1,8 @@
+import Str from 'expensify-common/lib/str';
+
+/**
+ * Whether to render the report action as text
+ */
+export default function shouldRenderAsText(html: string, text: string): boolean {
+    return Str.replaceAll(html, '<br />', '\n') === text;
+}

src/pages/home/report/comment/shouldRenderAsText/index.ts

@@ -286,6 +286,10 @@ const styles = (theme: ThemeColors) =>
             ...wordBreak.breakWord,
             ...spacing.pr4,
         },
+        emojiTooltipWrapper: {
+            ...spacing.p2,
+            borderRadius: 8,
+        },
 
         mentionSuggestionsAvatarContainer: {
             width: 24,