search

Expensify / react-native-live-markdown

Drop-in replacement for React Native's TextInput component with Markdown formatting.
https://www.npmjs.com/package/@expensify/react-native-live-markdown
MIT License
670 stars 45 forks source link

Implement code and pre blocks support on web #341

Open BartoszGrajdek opened 2 months ago

BartoszGrajdek commented 2 months ago

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

Skalakid commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

Firefox: after pasting code block text is still highlighted

Test string ``` Hello, *world*! https://expensify.com # Lorem ipsum > Hello world `foo` test test @here @someone@swmansion.com #room-mention ```

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

BartoszGrajdek commented 1 month ago

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