Add clickable custom emoji support for onboarding task

src/CONST.ts

@@ -121,7 +121,7 @@ const onboardingEmployerOrSubmitMessage: OnboardingMessage = {
                 '\n' +
                 'Here’s how to submit an expense:\n' +
                 '\n' +
-                '1. Click the green *+* button.\n' +
+                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Add your reimburser to the request.\n' +
@@ -144,7 +144,7 @@ const combinedTrackSubmitOnboardingEmployerOrSubmitMessage: OnboardingMessage =
                 '\n' +
                 'Here’s how to submit an expense:\n' +
                 '\n' +
-                '1. Click the green *+* button.\n' +
+                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Add your reimburser to the request.\n' +
@@ -175,7 +175,7 @@ const onboardingPersonalSpendMessage: OnboardingMessage = {
                 '\n' +
                 'Here’s how to track an expense:\n' +
                 '\n' +
-                '1. Click the green *+* button.\n' +
+                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Click "Just track it (don\'t submit it)".\n' +
@@ -198,7 +198,7 @@ const combinedTrackSubmitOnboardingPersonalSpendMessage: OnboardingMessage = {
                 '\n' +
                 'Here’s how to track an expense:\n' +
                 '\n' +
-                '1. Click the green *+* button.\n' +
+                '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
                 '2. Choose *Create expense*.\n' +
                 '3. Enter an amount or scan a receipt.\n' +
                 '4. Click "Just track it (don\'t submit it)".\n' +
@@ -5172,7 +5172,7 @@ const CONST = {
                         '\n' +
                         'Here’s how to start a chat:\n' +
                         '\n' +
-                        '1. Click the green *+* button.\n' +
+                        '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
                         '2. Choose *Start chat*.\n' +
                         '3. Enter emails or phone numbers.\n' +
                         '\n' +
@@ -5189,7 +5189,7 @@ const CONST = {
                         '\n' +
                         'Here’s how to request money:\n' +
                         '\n' +
-                        '1. Click the green *+* button.\n' +
+                        '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button\n' +
                         '2. Choose *Start chat*.\n' +
                         '3. Enter any email, SMS, or name of who you want to split with.\n' +
                         '4. From within the chat, click the *+* button on the message bar, and click *Split expense*.\n' +
@@ -5239,7 +5239,7 @@ const CONST = {
                         '\n' +
                         'Here’s how to submit an expense:\n' +
                         '\n' +
-                        '1. Click the green *+* button.\n' +
+                        '1. Press the <custom-emoji emoji="actionMenuIcon" pressablewithdefaultaction /> button.\n' +
                         '2. Choose *Create expense*.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
                         '4. Add your reimburser to the request.\n' +

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -80,6 +80,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
             'mention-report': HTMLElementModel.fromCustomModel({tagName: 'mention-report', contentModel: HTMLContentModel.textual}),
             'mention-here': HTMLElementModel.fromCustomModel({tagName: 'mention-here', contentModel: HTMLContentModel.textual}),
+            'custom-emoji': HTMLElementModel.fromCustomModel({tagName: 'custom-emoji', contentModel: HTMLContentModel.textual}),
             'next-step': HTMLElementModel.fromCustomModel({
                 tagName: 'next-step',
                 mixedUAStyles: {...styles.textLabelSupporting, ...styles.lh16},

src/components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction.tsx

@@ -0,0 +1,21 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import FloatingActionButtonAndPopover from '@pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover';
+
+type CustomEmojiWithDefaultPressableActionProps = {
+    /* Key name identifying the emoji */
+    emojiKey: string;
+
+    /* Emoji content to render */
+    children: ReactNode;
+};
+
+function CustomEmojiWithDefaultPressableAction({emojiKey, children}: CustomEmojiWithDefaultPressableActionProps) {
+    if (emojiKey === 'actionMenuIcon') {
+        return <FloatingActionButtonAndPopover isEmoji>{children}</FloatingActionButtonAndPopover>;
+    }
+
+    return children;
+}
+
+export default CustomEmojiWithDefaultPressableAction;

src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type {FC} from 'react';
+import {View} from 'react-native';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import type {SvgProps} from 'react-native-svg';
+import GlobalCreateIcon from '@assets/images/customEmoji/global-create.svg';
+import CustomEmojiWithDefaultPressableAction from '@components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction';
+import ImageSVG from '@components/ImageSVG';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+
+const emojiMap: Record<string, FC<SvgProps>> = {
+    actionMenuIcon: GlobalCreateIcon,
+};
+
+function CustomEmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+    const emojiKey = tnode.attributes.emoji;
+
+    if (emojiMap[emojiKey]) {
+        const image = (
+            <View style={styles.customEmoji}>
+                <ImageSVG
+                    src={emojiMap[emojiKey]}
+                    width={variables.iconSizeNormal}
+                    height={variables.iconSizeNormal}
+                />
+            </View>
+        );
+
+        if ('pressablewithdefaultaction' in tnode.attributes) {
+            return <CustomEmojiWithDefaultPressableAction emojiKey={emojiKey}>{image}</CustomEmojiWithDefaultPressableAction>;
+        }
+
+        return image;
+    }
+
+    return null;
+}
+
+export default CustomEmojiRenderer;
+export {emojiMap};

src/components/HTMLEngineProvider/HTMLRenderers/index.ts

@@ -1,6 +1,7 @@
 import type {CustomTagRendererRecord} from 'react-native-render-html';
 import AnchorRenderer from './AnchorRenderer';
 import CodeRenderer from './CodeRenderer';
+import CustomEmojiRenderer from './CustomEmojiRenderer';
 import DeletedActionRenderer from './DeletedActionRenderer';
 import EditedRenderer from './EditedRenderer';
 import EmojiRenderer from './EmojiRenderer';
@@ -29,6 +30,7 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     'mention-user': MentionUserRenderer,
     'mention-report': MentionReportRenderer,
     'mention-here': MentionHereRenderer,
+    'custom-emoji': CustomEmojiRenderer,
     emoji: EmojiRenderer,
     'next-step-email': NextStepEmailRenderer,
     'deleted-action': DeletedActionRenderer,

src/libs/ReportUtils.ts

@@ -6412,6 +6412,7 @@ function buildOptimisticTaskReport(
     description?: string,
     policyID: string = CONST.POLICY.OWNER_EMAIL_FAKE,
     notificationPreference: NotificationPreference = CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
+    shouldEscapeText = true,
 ): OptimisticTaskReport {
     const participants: Participants = {
         [ownerAccountID]: {
@@ -6426,7 +6427,7 @@ function buildOptimisticTaskReport(
     return {
         reportID: generateReportID(),
         reportName: title,
-        description: getParsedComment(description ?? ''),
+        description: getParsedComment(description ?? '', {shouldEscapeText}),
         ownerAccountID,
         participants,
         managerID: assigneeAccountID,

src/libs/actions/Report.ts

@@ -3722,6 +3722,7 @@ function prepareOnboardingOptimisticData(
                 taskDescription,
                 targetChatPolicyID,
                 CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
+                false,
             );
             const emailCreatingAction =
                 engagementChoice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM ? allPersonalDetails?.[actorAccountID]?.login ?? CONST.EMAIL.CONCIERGE : CONST.EMAIL.CONCIERGE;