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="action-menu-icon" 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="action-menu-icon" 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="action-menu-icon" 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="action-menu-icon" 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="action-menu-icon" 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="action-menu-icon" 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="action-menu-icon" 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,34 @@
+import React from 'react';
+import {Platform, View} from 'react-native';
+import ImageSVG from '@components/ImageSVG';
+import useThemeStyles from '@hooks/useThemeStyles';
+import FloatingActionButtonAndPopover from '@pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover';
+import variables from '@styles/variables';
+import {emojiMap} from './HTMLRenderers/CustomEmojiRenderer';
+
+type CustomEmojiWithDefaultPressableActionProps = {
+    emojiKey: string;
+};
+
+function CustomEmojiWithDefaultPressableAction({emojiKey}: CustomEmojiWithDefaultPressableActionProps) {
+    const styles = useThemeStyles();
+    const positionFix = Platform.OS !== 'web' && {height: '5%'};
+
+    const image = (
+        <View style={[styles.customEmoji, positionFix]}>
+            <ImageSVG
+                src={emojiMap[emojiKey]}
+                width={variables.iconSizeNormal}
+                height={variables.iconSizeNormal}
+            />
+        </View>
+    );
+
+    if (emojiKey === 'action-menu-icon') {
+        return <FloatingActionButtonAndPopover isEmoji>{image}</FloatingActionButtonAndPopover>;
+    }
+
+    return image;
+}
+
+export default CustomEmojiWithDefaultPressableAction;

src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type {FC} from 'react';
+import {Platform} 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';
+
+// eslint-disable-next-line rulesdir/no-inline-named-export
+export const emojiMap: Record<string, FC<SvgProps>> = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'action-menu-icon': GlobalCreateIcon,
+};
+
+function CustomEmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+    const emojiKey = tnode.attributes.emoji;
+    const positionFix = Platform.OS !== 'web' && {height: '5%'};
+
+    if (emojiMap[emojiKey]) {
+        if ('pressablewithdefaultaction' in tnode.attributes) {
+            return <CustomEmojiWithDefaultPressableAction emojiKey={emojiKey} />;
+        }
+
+        return (
+            <ImageSVG
+                style={[styles.customEmoji, positionFix]}
+                src={emojiMap[emojiKey]}
+                width={variables.iconSizeNormal}
+                height={variables.iconSizeNormal}
+            />
+        );
+    }
+    return null;
+}
+
+export default CustomEmojiRenderer;

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?: boolean,
 ): 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;