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
• Automatic offers:
• shubham1206agra | Contributor | 105292539

[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., @user@domain.com). 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

[puneetlath]

Great and will @SzymczakJ still be the person to work on it?

[tomekzaw]

Someone from SWM will handle this task as this requires some extra thoughts on how to pass app state to Markdown parser efficiently. Let me check internally who's the lucky person and I will let you know.

[shubham1206agra]

@puneetlath Can I take this over as a reviewer here?
Since I am C+ assigned in #35725.

[tomekzaw]

Just for the context, we're still waiting for the live-markdown bump to be merged (#53627) so let's hold on that PR for now

[melvin-bot]

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[tomekzaw]

Someone from SWM will work on this feature

[Kicu]

Hey guys I work form SWM, please assign me to this issue and I will start working on it.

[allroundexperts]

Can I take this over as a reviewer here?
Since I am C+ assigned in #35725.

@shubham1206agra Do you have greater context here? I see that #35725 is just on hold for this issue. I was tagging along this one since March 😢

[shubham1206agra]

Do you have greater context here?

@allroundexperts Yes since I was following the upstream PR and #35725 is there since February.

[allroundexperts]

@allroundexperts Yes since I was following the upstream PR and #35725 is there since February.

Gotcha.

[Kicu]

@puneetlath I'm not sure if you're the best person to ask, but I have some questions.

I'm currently looking at the regexes in ExpensiMark used to parse userMention (https://github.com/software-mansion-labs/expensify-common/blob/main/lib/ExpensiMark.ts#L365) and I'm trying to add another regex for shortMention.
We need ExpensiMark to return these shortened version so that later (in a worklet) we can compare them with your onyx data.

What specific versions of short mentions should we support? I'm assuming the most basic one is: @john.doe.
But should I also support:

• @justOneWord?
• any special characters?
• are phone numbers affect short mentions in any way?

I guess I can use the first part of CONST.REG_EXP.EMAIL_PART for this.

[puneetlath]

We need to support anything that could be before the @ in an email address. So whatever formatting and special characters are supported for that. I don't think phone numbers matter for short mentions.

[Kicu]

Before Christmas update.

For the past few days I've been working on ExpensiMark, to try to understand the current email-parsing regexes and to add short-mentions.
Here is a draft PR that shows how this could look like, most of the ExpensiMark.replace tests are passing, there are several edge-cases that need further digging.
Expensify/expensify-common#824

Please take a look at the PR and more specifically at which tests are failing, because some of these are tricky and need some agreeing what we would consider a short mention.

The current plan would be:

• allow ExpensiMark to understand and parse short mentions, so that the tag <mention-short can be returned
• use the output of ☝️in parseExpensiMark fn in live-markdown, to be able to create markdown with possible mentions
• in a worklet, inside E/App pass list of possible mentions (based on users in Onyx) to a parsing function, and verify if any of "possible" mentions is actually a mention, then decorate it

I'm going on Holiday till January 6th, however I should be around to answer any questions around 30/31 Dec.

[Kicu]

In depth implementation details

In order to implement this task we need to modify 3 (sic!) repos: A/App, expensify-common (because Expensimark is there) and react-native-live-markdown.

List of PRs needed to implement this issue:

• live-markdown: Add support for short mentions from ExpensiMark react-native-live-markdown#592 -> adds the new type of mention-short so that parseExpensiMark function understands it
• expensify-common: Add handling short mentions tags to ExpensiMark expensify-common#824 -> makes expensimark parser understand and return short mentions
• E/App: [WIP] Show current user mention in MarkdownTextInput with green outline #54037 -> adds actual handling of short mentions inside worklet, verifying if the mention is pointing to an actual users login

Implementation plan

1. Merge live-markdown PR as it does not conflict with anything - done ✅
2. Review and merge ExpensiMark PR to allow for parsing of short-mentions
3. use the output of ☝️in parseExpensiMark function in live-markdown, to be able to create markdown with possible mentions - for this we need to bump expensify-common and live-markdown once both PRs are merged
4. in a worklet, inside E/App pass list of possible mentions: [WIP] Show current user mention in MarkdownTextInput with green outline #54037

[thienlnam]

expensify-common PR in review - @shubham1206agra could you also take a look at this PR since you're the C+ here? Expensify/expensify-common#824

Tried to assign you but can't until you comment on it