Implement code and pre blocks support on web

[BartoszGrajdek]

Details

Adds support for displaying and customising code and pre blocks on web.

Related Issues

GH_LINK

Manual Tests

1. Change regex for codeFence in ExpensiMark to /(```(?:\r\n|\n))((?:\s*?(?!(?:\r\n|\n)?```(?!`))[\S])+\s*?(?:\r\n|\n))(```)/g
2. Run npm run build in /parser
3. You should now be able to test it out 🙌🏻

Linked PRs

[BartoszGrajdek]

I believe this is something we should discuss. We can't set the display to inline-block or block because it will break how we are positioning inline-code blocks.

Since we're not able to do so margin won't work on inline-code block. That's why I decided to set the line-height to 1.4 - In my opinion it looks alright but let me know what do you think 😄

Screen Shot

[Skalakid]

Found a couple of bugs while testing:

1. It's impossible to remove the newline between the first syntax `backticks` and `code block`

Screen.Recording.2024-05-09.at.09.35.48.mov

2. After removing whole content from code block, there are some new lines added

Screen.Recording.2024-05-09.at.09.44.26.mov

3. Strange selection behavior when trying to select whole `codeblock`

Screen.Recording.2024-05-09.at.09.46.43.mov

4. Cursor is wrongly positioned when removing syntax backticks at the end of `codeblock`

Screen.Recording.2024-05-09.at.09.51.02.mov

[Skalakid]

The bugs that I previously reported have been fixed, thank you! After your changes I've only found the problem with cursor positioning when entering newline after first backticks:

Video

https://github.com/Expensify/react-native-live-markdown/assets/39538890/beeed721-10ae-49a6-8727-cda96d746bfd

[Skalakid]

Left some questions and comments, but overall looks good

[Skalakid]

Hi, when testing I found a problem with cursor positioning when writing on Firefox:

Screen.Recording.2024-06-04.at.09.09.35.mov

[Skalakid]

Firefox: after pasting code block text is still highlighted

Test string

Hello, *world*!
https://expensify.com
# Lorem ipsum
> Hello world
`foo`
test test
@here
@[email protected]
#room-mention

Screen.Recording.2024-06-04.at.09.29.51.mov

[BartoszGrajdek]

Hi, when testing I found a problem with cursor positioning when writing on Firefox:

Screen.Recording.2024-06-04.at.09.09.35.mov

This is related to a regression caused by another PR - we'll work on solving it in another issue