[HOLD react-native-live-markdown #317] [$500] Render shortened mentions with blue/green outline in live markdown preview

[puneetlath]

Problem

Our markdown rendering renders mentions with a blue or green outline within the chat body like this:

We also have "live markdown preview" in the composer which is supposed to give a live preview of how the text will be rendered like this:

However, this doesn't currently happen for shortened mentions:

Solution

Add shortened mentions to the live markdown preview rendering that happens in the composer.

Note for potential contributors: live markdown preview currently only exists on mobile apps.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b3ecb2640f3bf7a3
• Upwork Job ID: 1766890615417413632
• Last Price Increase: 2024-03-10

[melvin-bot]

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

[melvin-bot]

Current assignee @puneetlath is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

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

[miroshar-success]

No problem. Done

[melvin-bot]

📣 @OskarMast! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[brandonhenry]

Proposal

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

New Feature - The live markdown preview in the composer (mobile app only) does not currently render shortened mentions (e.g., @username without the domain) with the blue/green outline like it does for full mentions (e.g., @[email protected]). This is inconsistent with how mentions actually render in the chat.

What is the root cause of that problem?

The root cause is that the logic for detecting and rendering mentions in the live preview, specifically in the ExpensiMark lib, does not account for the shortened mention format. The regular expressions (REG_EXP.EMAIL_PART and REG_EXP.MARKDOWN_EMAIL) and the userMentions rule only match full mentions with the domain included. As a result, shortened mentions are not detected and rendered with the appropriate styling in the live preview.

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

To solve this issue, we should make the following changes:

1. Update the REG_EXP.EMAIL_PART constant to also match shortened mentions without the domain part:

readonly EMAIL_PART: "([\\w\\-\\+\\'#]+(?:\\.[\\w\\-\\'\\+]+)*(?:@(?:[\\w\\-]+\\.)+[a-z]{2,})?)";

2. Update the REG_EXP.MARKDOWN_EMAIL constant to match both full and shortened mentions:

readonly MARKDOWN_EMAIL: "([\\w\\-\\+\\'#]+(?:\\.[\\w\\-\\'\\+]+)*(?:@(?:[\\w\\-]+\\.)+[a-z]{2,})?)";

Now, the userMentions rule will handle both full and shortened mentions, thus adding the new feature we're looking for in the markdown live preview.

[shubham1206agra]

Tagging @robertKozik @tomekzaw as this is related to markdown preview.

[tomekzaw]

@thienlnam We would like to work on it as this probably requires some small changes in Live Markdown library as well.

[SzymczakJ]

Hey! I’m Jakub Szymczak from Software Mansion, an expert agency, and I’d like to work on this issue!

[brandonhenry]

Personally I don't think this requires any change in markdown live preview, and should only include an update to our expensify-common library. See proposal @thienlnam

[thienlnam]

Any progress on this one Expensify/react-native-live-markdown#317 cc @tomekzaw?

[tomekzaw]

Discussing it here: https://expensify.slack.com/archives/C01GTK53T8Q/p1716235671381059

[puneetlath]

Still on hold, but we're making progress.

[thienlnam]

Discussion here: https://expensify.slack.com/archives/C01GTK53T8Q/p1716235671381059

Seems like we're currently holding on #42247

[puneetlath]

Still on hold, but the issues we're held on are making progress.

[shubham1206agra]

@thienlnam @puneetlath I think this should be off hold now.

[tomekzaw]

Waiting for Expensify/react-native-live-markdown#317

Latest update here Expensify/react-native-live-markdown#317 (comment)

[thienlnam]

Still held

[puneetlath]

Still on hold for Expensify/react-native-live-markdown#317

[thienlnam]

Same ^

[thienlnam]

Looks like the above is closed to getting merged, should be off hold soon