App: [HOLD for payment 2023-08-01] [$1000] App allows to add link in code block and does not display the same on copy and send

Thanks @thesahindia - let me know if you need any help with the payment stuff through New Expensify

Created Regression Test - https://github.com/Expensify/Expensify/issues/306418 Closing this GH

@thesahindia paid through NewExpensify $1000 + $500 speed bonus

Actually I haven’t got paid yet. I still need to add my bank account at old dot (having some issues). But this issue is in my list so we can close it, I will request payment soon.

Sorry for the delay here are the steps -

1. Go to a chat and add following comment

[```code```](google.com)

1. Verify that only code is displayed as code block and link google.com is displayed as auto link.
2. Edit the comment and verify the initial draft is

Paying out in Upwork - https://www.upwork.com/jobs/~01f921043b5d238f9f

@dhanashree-sawant paid through Upwork for reporting the bug $250 @eh2077 paid through Upwork for contributor work $1000 + $500 speed bonus @thesahindia paid through NewExpensify $1000 + $500 speed bonus

Thanks @zanyrenney, @Christinadobrzyn, Invite accepted.

Invites have been sent to @eh2077 @thesahindia and @dhanashree but we are still waiting on them to accept. The final step is payment. I am going OOO so please can you pay out these? Thank you BZ team member!

@hayata-suenaga I commented in the PR https://github.com/Expensify/expensify-common/pull/558 and explained why fixing this issue won’t conflict with the direction of fixing the issue mentioned by @parasharrajat

Proposal

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

App allows to add link in code block and does not display the same on copy and send.

What is the root cause of that problem?

The following markdown input

[```code```](google.com)

is translated into html

<a href="https://google.com" target="_blank" rel="noreferrer noopener"><pre>code</pre></a>

from frontend by method ExpensiMark.replace applying code fence rule and link rule.

The backend corrects the above html into following html

<a href="https://google.com" target="_blank" rel="noreferrer noopener"></a><pre><a href="https://google.com" target="_blank" rel="noreferrer noopener">code</a></pre><a href="https://google.com" target="_blank" rel="noreferrer noopener"></a>

which is translated into following markdown when clicking to edit the comment

```
[code](https://google.com)
```

Note the starting and ending anchor tag, <a href="https://google.com" target="_blank" rel="noreferrer noopener"></a>, are same and translated into empty string.

So, the root cause of this issue is that the link rule doesn’t skip to translate markdown link syntax if its alias text inside [] contains code fence tag <pre>.

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

To fix this issue, we should avoid translating link markdown syntax if its alias text part contains <pre> tag.

To achieve it, we can change following condition

https://github.com/Expensify/expensify-common/blob/d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9/lib/ExpensiMark.js#L454

of method modifyTextForUrlLinks by checking if the alias text part, match[1], includes <pre> tags

if (abort || match[1].includes('<pre>')) {

to skip replacing link syntax to html.

What alternative solutions did you explore? (Optional)

N/A