fix: 29978 User mention in the system message after inviting member to the room cannot be copied

src/components/Composer/index.js

@@ -1,4 +1,3 @@
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {flushSync} from 'react-dom';
@@ -15,6 +14,7 @@ import * as ComposerUtils from '@libs/ComposerUtils';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import {htmlToMarkdown} from '@libs/parser';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
@@ -253,8 +253,7 @@ function Composer({
      */
     const handlePastedHTML = useCallback(
         (html) => {
-            const parser = new ExpensiMark();
-            paste(parser.htmlToMarkdown(html));
+            paste(htmlToMarkdown(html));
         },
         [paste],
     );

src/hooks/useCopySelectionHelper.ts

@@ -1,7 +1,7 @@
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import {useEffect} from 'react';
 import Clipboard from '@libs/Clipboard';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
+import {htmlToMarkdown, htmlToText} from '@libs/parser';
 import SelectionScraper from '@libs/SelectionScraper';
 import CONST from '@src/CONST';
 
@@ -10,12 +10,11 @@ function copySelectionToClipboard() {
     if (!selection) {
         return;
     }
-    const parser = new ExpensiMark();
     if (!Clipboard.canSetHtml()) {
-        Clipboard.setString(parser.htmlToMarkdown(selection));
+        Clipboard.setString(htmlToMarkdown(selection));
         return;
     }
-    Clipboard.setHtml(selection, parser.htmlToText(selection));
+    Clipboard.setHtml(selection, htmlToText(selection));
 }
 
 export default function useCopySelectionHelper() {

src/libs/PersonalDetailsUtils.js

@@ -177,4 +177,8 @@ function getFormattedAddress(privatePersonalDetails) {
     return formattedAddress.trim().replace(/,$/, '');
 }
 
-export {getDisplayNameOrDefault, getPersonalDetailsByIDs, getAccountIDsByLogins, getLoginsByAccountIDs, getNewPersonalDetailsOnyxData, getFormattedAddress};
+function getAllPersonalDetails() {
+    return allPersonalDetails;
+}
+
+export {getDisplayNameOrDefault, getPersonalDetailsByIDs, getAccountIDsByLogins, getLoginsByAccountIDs, getNewPersonalDetailsOnyxData, getFormattedAddress, getAllPersonalDetails};

src/libs/ReportUtils.js

@@ -19,6 +19,7 @@ import * as Localize from './Localize';
 import linkingConfig from './Navigation/linkingConfig';
 import Navigation from './Navigation/Navigation';
 import * as NumberUtils from './NumberUtils';
+import * as Parser from './parser';
 import Permissions from './Permissions';
 import * as PolicyUtils from './PolicyUtils';
 import * as ReportActionsUtils from './ReportActionsUtils';
@@ -2295,14 +2296,13 @@ function getParsedComment(text) {
  * @returns {Object}
  */
 function buildOptimisticAddCommentReportAction(text, file) {
-    const parser = new ExpensiMark();
     const commentText = getParsedComment(text);
     const isAttachment = _.isEmpty(text) && file !== undefined;
     const attachmentInfo = isAttachment ? file : {};
     const htmlForNewComment = isAttachment ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : commentText;
 
     // Remove HTML from text when applying optimistic offline comment
-    const textForNewComment = isAttachment ? CONST.ATTACHMENT_MESSAGE_TEXT : parser.htmlToText(htmlForNewComment);
+    const textForNewComment = isAttachment ? CONST.ATTACHMENT_MESSAGE_TEXT : Parser.htmlToText(htmlForNewComment);
 
     return {
         commentText,

src/libs/actions/Report.js

@@ -16,6 +16,7 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import LocalNotification from '@libs/Notification/LocalNotification';
+import {htmlToMarkdown, htmlToText} from '@libs/parser';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -1240,15 +1241,15 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
     // https://github.com/Expensify/App/issues/9090
     // https://github.com/Expensify/App/issues/13221
     const originalCommentHTML = lodashGet(originalReportAction, 'message[0].html');
-    const originalCommentMarkdown = parser.htmlToMarkdown(originalCommentHTML).trim();
+    const originalCommentMarkdown = htmlToMarkdown(originalCommentHTML).trim();
 
     // Skip the Edit if draft is not changed
     if (originalCommentMarkdown === textForNewComment) {
         return;
     }
 
     const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentMarkdown);
-    const reportComment = parser.htmlToText(htmlForNewComment);
+    const reportComment = htmlToText(htmlForNewComment);
 
     // For comments shorter than or equal to 10k chars, convert the comment from MD into HTML because that's how it is stored in the database
     // For longer comments, skip parsing and display plaintext for performance reasons. It takes over 40s to parse a 100k long string!!

src/libs/parser.ts

@@ -0,0 +1,14 @@
+import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import * as PersonalDetailsUtils from './PersonalDetailsUtils';
+
+function htmlToMarkdown(html: string) {
+    const parser = new ExpensiMark();
+    return parser.htmlToMarkdown(html, {personalDetails: PersonalDetailsUtils.getAllPersonalDetails()});
+}
+
+function htmlToText(html: string) {
+    const parser = new ExpensiMark();
+    return parser.htmlToText(html, {personalDetails: PersonalDetailsUtils.getAllPersonalDetails()});
+}
+
+export {htmlToMarkdown, htmlToText};

src/pages/PrivateNotes/PrivateNotesEditPage.js

@@ -1,5 +1,4 @@
 import {useFocusEffect} from '@react-navigation/native';
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
@@ -18,6 +17,7 @@ import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
+import {htmlToMarkdown} from '@libs/parser';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
@@ -54,9 +54,8 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
     const {translate} = useLocalize();
 
     // We need to edit the note in markdown format, but display it in HTML format
-    const parser = new ExpensiMark();
     const [privateNote, setPrivateNote] = useState(
-        () => Report.getDraftPrivateNote(report.reportID).trim() || parser.htmlToMarkdown(lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '')).trim(),
+        () => Report.getDraftPrivateNote(report.reportID).trim() || htmlToMarkdown(lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '')).trim(),
     );
 
     /**
@@ -96,7 +95,7 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
         const originalNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');
 
         if (privateNote.trim() !== originalNote.trim()) {
-            const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
+            const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), htmlToMarkdown(originalNote).trim());
             Report.updatePrivateNotes(report.reportID, route.params.accountID, editedNote);
         }
 

src/pages/ReportWelcomeMessagePage.js

@@ -1,5 +1,4 @@
 import {useFocusEffect} from '@react-navigation/native';
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import PropTypes from 'prop-types';
 import React, {useCallback, useRef, useState} from 'react';
 import {View} from 'react-native';
@@ -13,6 +12,7 @@ import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
+import {htmlToMarkdown} from '@libs/parser';
 import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -46,8 +46,7 @@ const defaultProps = {
 
 function ReportWelcomeMessagePage(props) {
     const styles = useThemeStyles();
-    const parser = new ExpensiMark();
-    const [welcomeMessage, setWelcomeMessage] = useState(() => parser.htmlToMarkdown(props.report.welcomeMessage));
+    const [welcomeMessage, setWelcomeMessage] = useState(() => htmlToMarkdown(props.report.welcomeMessage));
     const welcomeMessageInputRef = useRef(null);
     const focusTimeoutRef = useRef(null);
 

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -1,4 +1,3 @@
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import lodashGet from 'lodash/get';
 import React from 'react';
 import _ from 'underscore';
@@ -11,6 +10,7 @@ import * as Environment from '@libs/Environment/Environment';
 import fileDownload from '@libs/fileDownload';
 import getAttachmentDetails from '@libs/fileDownload/getAttachmentDetails';
 import Navigation from '@libs/Navigation/Navigation';
+import {htmlToMarkdown, htmlToText} from '@libs/parser';
 import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
@@ -285,11 +285,10 @@ export default [
                     const logMessage = ReportUtils.getChannelLogMemberMessage(reportAction);
                     Clipboard.setString(logMessage);
                 } else if (content) {
-                    const parser = new ExpensiMark();
                     if (!Clipboard.canSetHtml()) {
-                        Clipboard.setString(parser.htmlToMarkdown(content));
+                        Clipboard.setString(htmlToMarkdown(content));
                     } else {
-                        const plainText = parser.htmlToText(content);
+                        const plainText = htmlToText(content);
                         Clipboard.setHtml(content, plainText);
                     }
                 }

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -1,4 +1,3 @@
-import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
@@ -22,6 +21,7 @@ import * as ComposerUtils from '@libs/ComposerUtils';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import onyxSubscribe from '@libs/onyxSubscribe';
+import {htmlToMarkdown} from '@libs/parser';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -90,8 +90,7 @@ function ReportActionItemMessageEdit(props) {
     const getInitialDraft = () => {
         if (props.draftMessage === props.action.message[0].html) {
             // We only convert the report action message to markdown if the draft message is unchanged.
-            const parser = new ExpensiMark();
-            return parser.htmlToMarkdown(props.draftMessage).trim();
+            return htmlToMarkdown(props.draftMessage).trim();
         }
         // We need to decode saved draft message because it's escaped before saving.
         return Str.htmlDecode(props.draftMessage);