Allow codefence regex to accept any characters after first three backticks

[tsa321]

Fixed Issues

$ Expensify/App#45088

Tests

1. What unit/integration tests cover your change? What autoQA tests cover your change?
   I have add unit tests for this issue.
2. What tests did you perform that validates your changed worked?
   Update the related regex in the expensify-common in node module and send the test messages from composer of the App.
   Test example:

```   
test
```

```  abc 
test
```

The code fence/ code block must be displayed properly.

Verify the displayed message is displayed correctly.

QA

1. What does QA need to do to validate your changes?
   Same as test above
2. What areas to they need to test for regressions?
   Code fence related regression tests.

[tsa321]

cc @akinwale

[tsa321]

@akinwale Just to confirm when sending message for example:

```aaa
bbb
```

The displayed message is:

bbb

The aaa text is removed. When editing the message, the aaa text no longer appears.
It looks like:

```
bbb
```

This is expected behavior right?

[tsa321]

cc @AndrewGable

[AndrewGable]

cc @akinwale - Want to review?

[akinwale]

@akinwale Just to confirm when sending message for example:

```aaa
bbb

The displayed message is:

bbb

The `aaa` text is removed. When editing the message, the `aaa` text no longer appears. It looks like:

bbb

This is expected behavior right?

I don't think this is expected behaviour. The characters within the codefence should be included instead of being stripped out.

[tsa321]

@akinwale so the expected result would be:

aaa
bbb

Right?

[akinwale]

@akinwale so the expected result would be:

aaa
bbb

Right?

Yes, this is correct.

[deetergp]

The characters within the codefence should be included instead of being stripped out.

I will volley here and say that yes, this is the expected behavior for every Markdown variant I have ever come across. If you want your text to appear in your codefence, you need to make sure it's after the line containing the triple backticks. In some variants the area after the backticks is reserved for specifying what flavor of context highlighting you want for you code.

[tsa321]

@deetergp I have made some modifications to the regex; it now functions as shown in this video:

Test video:

codefence--with-syntax.mp4

Currently, it works offline.

This is achieved by adding a syntax attribute to the <pre> tag. For example:

```javascript
aaa
bbb
```

This will be converted to: <pre syntax='javascript'>aaa<br />bbb<br /></pre>. When editing the message, the syntax value will be restored right after the first three backticks.

It is currently working offline because the server removes all attributes from the <pre> tag, including the syntax attribute.

HTTP request payload:

Server response:

What do you think? Should we proceed with this solution?

[tsa321]

Or maybe we just want to address the original issue by allowing only white spaces after the first three backticks.
cc @akinwale

[deetergp]

Yeah, I think allowing anything after the three backticks is fine, but expected behavior should be that they are not rendered in the code block.

[tsa321]

@deetergp I completely agree.

I have a question about when user edits the message: should we display the text placed after the first three backticks and before the new line? If we want to display it during editing, this will require back-end changes, as I mentioned here.

[deetergp]

@tsa321 Let's not block on that. Right now we don't really support any kind of context highlighting, so there's no real reason for text to be there anyway.

[tsa321]

@akinwale based on the expected results above, my code changes in this PR are fine.

[tsa321]

kindly bump for review @akinwale

[tsa321]

kindly bump for review @akinwale.
Or maybe @AndrewGable Could you review this instead?

[akinwale]

kindly bump for review @akinwale. Or maybe @AndrewGable Could you review this instead?

Reviewing this today.

[akinwale]

LGTM.

[akinwale]

@tsa321 Looks good, thanks. Will wait for internal review from @deetergp or @AndrewGable and then you can create the corresponding PR in the Expensify App repo.

[github-actions]

🚀Published to npm in v2.0.84