Merge pull request #37778 from Expensify/revert-35838-fix/34307

Revert "Handle emoji tooltip"

package.json

@@ -100,7 +100,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#45d3b61bb38b4f9a19ddf573ce1e212369b242db",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#a8ed0f8e1be3a1e09016e07a74cfd13c85bbc167",
     "expo": "^50.0.3",
     "expo-av": "~13.10.4",
     "expo-image": "1.10.1",

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -70,7 +70,6 @@ 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/HTMLRenderers/index.ts

@@ -2,7 +2,6 @@ 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';
@@ -26,7 +25,6 @@ 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/libs/EmojiUtils.ts

@@ -38,9 +38,6 @@ 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/pages/home/report/comment/TextCommentFragment.tsx

@@ -16,7 +16,6 @@ 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 */
@@ -45,15 +44,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 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 htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
+    // 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;
 
-        const htmlContent = containsOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji islarge>') : htmlWithDeletedTag;
+    // Only render HTML if we have html in the fragment
+    if (!differByLineBreaksOnly) {
+        const editedTag = fragment.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
+        const htmlContent = styleAsDeleted ? `<del>${html}</del>` : html;
 
         const htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
 
@@ -65,6 +64,7 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs
         );
     }
 
+    const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text);
     const message = isEmpty(iouMessage) ? text : iouMessage;
 
     return (

src/styles/index.ts

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