[PAID] [$250] Chat - Manually copied and pasted user mention turns into user profile hyperlink

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.71-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Log in to New Expensify
2. Navigate to any chat
3. Manually select, copy and paste the message
4. Send the message

Expected Result:

Copied user mention should remain a mention

Actual Result:

Manually copied and pasted user mention turns in to hyperlink leading to the user profile

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6474088_1715104769258.2024-05-07_18-39-15.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cc954368da0c91d3
• Upwork Job ID: 1788782724202225664
• Last Price Increase: 2024-05-10
• Automatic offers:
• c3024 | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Copying a user mention and paste it turns the text into a link markdown.

What is the root cause of that problem?

The mention text is rendered as an anchor tag.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Lines 103 to 110 in e0b6a06

	<Text
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...defaultRendererProps}
	style={[styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
	role={CONST.ROLE.LINK}
	testID="span"
	href={`/${navigationRoute}`}
	>

So, when we copy it, it will be copied as a link. This was previously fixed in #20814 by adding a testID of span because previously, if an element has a testID, the element name will be renamed to the testID, in this case span.

But in my PR here, I update the logic so that it replaces the element name only if the testID is a valid markdown name. In this case, span is not a valid markdown. It's to fix another issue here.

What changes do you think we should make in order to solve the problem?

Instead of setting the testID to span here,

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Line 108 in e0b6a06

testID="span"

we can set it to mention-user. Then, add mention-user to the valid markdown list here

App/src/libs/SelectionScraper/index.ts

Line 9 in e0b6a06

const markdownElements = ['h1', 'strong', 'em', 'del', 'blockquote', 'q', 'code', 'pre', 'a', 'br', 'li', 'ul', 'ol', 'b', 'i', 's'];

_or simply add span to the valid markdown list above, but not preferable

we can add a similar fix if there is another issue found with other markdown

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01cc954368da0c91d3

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)