[Hold for Payment 13 August] Implement Hyperlink and Email link HTML to markdown conversion

[Jag96]

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

---

Related to #3047, similar to Expensify/expensify-common#392. Email and link MD->HTML version can be found here

Action Performed:

Copied a hyperlink from slack to E.cash

Expected Result:

Rules of parsing would be as

1. [html](www.google.com) When <a href="www.google.com">html</a> and you will see this type pf link as html.
2. www.google.com when <a href="www.google.com">www.google.com</a> and you will see this type pf link as www.google.com.
3. abc@gmail.com when <a href="abc@gmail.com">abc@gmail.com</a> and visible as abc@gmail.com.

Actual Result:

Message just pasted text

Platform:

Where is this issue occurring?

• Web
• Desktop App
• Mobile Web

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @MitchExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[parasharrajat]

A suggestion to the description.
Rules of parsing would be as

1. [html](www.google.com) When <a href="www.google.com">html</a> and you will see this type of link as html.
2. www.google.com when <a href="www.google.com">www.google.com</a> and you will see this type of link as www.google.com.
3. abc@gmail.com when <a href="abc@gmail.com">abc@gmail.com</a> and visible as abc@gmail.com.

[Jag96]

Sounds good, updated!

[parasharrajat]

To match anchor tags we can use this
<(a)(?:href=(['"])(.*?)\2|"[^"]*"|'[^']*'|[^'">])*>(.*?)<\/\1>(?![^<]*(<\/pre>|<\/code>))

1. Groups 3 and 4 contain the URL and text respectively.
2. We will use a process method that will parse all three types of URLs based on these rules.
   a. if g2 and g3 are not equal, then output [g3](g2). we don't need to worry even if href was an email it just works.
   b. If not a then the output would be simple g2. We don't care if it's an email or a normal link.

[MitchExpensify]

Replicated! Looks like a good external issue right @Jag96?

[Jag96]

@MitchExpensify ah yes, forgot to add the External label!

[MitchExpensify]

Weird that it didn't auto assign someone

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mananjadhav]

Ignore the PR reference.

Proposal for Link HTML to Markdown

I would go ahead with this regex.

<a.*?href=["']([^"']*)["'][^>]*>([^<]*)</a>

This will result in two matches $1 and $2. I'll add code to matching groups to handle plain links and mailto: href too.

It basically covers the odd cases such as inconsistent parenthesis etc. I can implement this if you plan to hire along with the tests. Will handle this for all the three groups mentioned.

[laurenreidexpensify]

Hi Folks - @Jag96 @MitchExpensify I'm confused here - should I have hired @mananjadhav in Upwork yet? did we agree on the path for the fix in the PR?

[MitchExpensify]

We agreed the problem was a good candidate for external so I think an Upwork job can be created. Then we'd hire @mananjadhav if the proposal suggested here looks good, right?

[Jag96]

@laurenreidexpensify @MitchExpensify first we need to create the Upwork job, then we can assign the Exported label which will assign an engineer to review proposals.

[mananjadhav]

Will wait for the job to be created. For the engineer to review, I've added this commit in my fork along with the unit test cases that confirm it is working for hyperlink as well as email.

mananjadhav/expensify-common@02e23c3

[laurenreidexpensify]

okay we're on upwork here now

[mananjadhav]

I've added a PR for review and also sent a proposal on Upwork!

[laurenreidexpensify]

Thanks @mananjadhav, just for reference the process here is that once a job has been added to Upwork folks can submit proposals on this GH issue and @Luke9389 will review them here and confirm when we're ready to move to PR. So for now you can close that PR and if @Luke9389 confirms your proposal is the one we're moving forward with, I will hire you in Upwork and then you can reopen or create a new PR. Thanks!

[mananjadhav]

Noted. Thanks for explaining the process. Closing the PR.

[laurenreidexpensify]

@Luke9389 can you take a look today when you're back? Thanks

[parasharrajat]

Proposal #4187 (comment).

Please let me know if you need further explanation. Thanks.

[Luke9389]

Ok, @parasharrajat had a proposal down first, so I'm gonna give him the green light to write up a PR.

[laurenreidexpensify]

https://www.upwork.com/jobs/~015d7fb34d72ccdc11

@parasharrajat hired you on Upwork

[MelvinBot]

@parasharrajat, @Luke9389, @laurenreidexpensify it looks like no one is assigned to work on this job.
Please double the price or add a comment stating why the job isn't being doubled.

[laurenreidexpensify]

melvin u liar

[Luke9389]

Strange, I'm gonna look into why Melvin misfired here...

[laurenreidexpensify]

@parasharrajat looks like we missed a step here and you were never hired in Upwork for this one 😬 can you apply and i'll hire / pay you as soon as that's done! thanks!

[laurenreidexpensify]

All sorted

[0xmiros]

Rules of parsing would be as

[html](www.google.com) When <a href="www.google.com">html</a> and you will see this type pf link as html.
www.google.com when <a href="www.google.com">www.google.com</a> and you will see this type pf link as www.google.com.
abc@gmail.com when <a href="abc@gmail.com">abc@gmail.com</a> and visible as abc@gmail.com.

I think this case should be added as well: (when text includes http/https so text and url are same)

https://www.google.com when <a href="https://www.google.com">https://www.google.com</a> and you will see this type pf link as https://www.google.com.

Here's video of failure:

html.markdown.mov

https://github.com/Expensify/expensify-common/blob/e0ec0b9abca4d7b417ba0b016f8725856cfeeece/lib/ExpensiMark.js#L259-L269

After reviewing code, I suspect this line which excludes failure case above:

                    if (link !== g4) {

But we cannot remove this condition completely because of email case.

Solution:
https://github.com/Expensify/expensify-common/blob/e0ec0b9abca4d7b417ba0b016f8725856cfeeece/lib/ExpensiMark.js#L264-L267
replace these lines with this simple line:

                    return g3.startsWith('mailto:') && link === g4 ? link : `[${g4}](${link})`;

final code:

            {
                name: 'anchor',
                regex: /<(a)[^><]*href\s*=\s*(['"])(.*?)\2(?:".*?"|'.*?'|[^'"><])*>(.*?)<\/\1>(?![^<]*(<\/pre>|<\/code>))/gi,
                replacement: (match, g1, g2, g3, g4) => {
                    const link = g3.startsWith('mailto:') ? g3.slice(7) : g3;
                    return g3.startsWith('mailto:') && link === g4 ? link : `[${g4}](${link})`;
                },
            },