react-native-live-markdown icon indicating copy to clipboard operation
react-native-live-markdown copied to clipboard
verified publisher icon Expensify

Implement code and pre blocks support on web

Open BartoszGrajdek opened this issue 1 year ago • 5 comments

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 avatar May 07 '24 10:05 BartoszGrajdek

Found a couple of bugs while testing:

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

https://github.com/Expensify/react-native-live-markdown/assets/39538890/55fd04f8-f6d0-4867-9c79-aa6a151055e9

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

https://github.com/Expensify/react-native-live-markdown/assets/39538890/07f150d2-c092-442d-92f7-ac9af34ee74e

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

https://github.com/Expensify/react-native-live-markdown/assets/39538890/89fa22bd-14bb-4665-aac1-c7451e16488e

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

https://github.com/Expensify/react-native-live-markdown/assets/39538890/f0d1e857-778b-404b-9a4d-55cac908f3d0

Skalakid avatar May 09 '24 10:05 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 avatar May 21 '24 09:05 Skalakid

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

https://github.com/Expensify/react-native-live-markdown/assets/39538890/2476d33e-0d60-48ed-b90f-11bd2d3a65c1

Skalakid avatar Jun 04 '24 07:06 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

https://github.com/Expensify/react-native-live-markdown/assets/39538890/1706ff6b-e440-46bb-b385-e7cce08f1d99

Skalakid avatar Jun 04 '24 07:06 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

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

BartoszGrajdek avatar Jun 05 '24 09:06 BartoszGrajdek