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
668 stars 45 forks source link

Ordered and unordered lists #381

Open robinmitra opened 3 weeks ago

robinmitra commented 3 weeks ago

Thank you for your work on this library!

Do you have any plans for implementing ordered and unordered lists?

tomekzaw commented 3 weeks ago

Hello and thanks for opening this issue.

Do you have any plans for implementing ordered and unordered lists?

Currently, we don't support ordered and unordered lists. This is mostly because currently the library uses a hard-coded Markdown parser called ExpensiMark and it does not have this feature.

However, in the future, library users will be able to pass custom Markdown parser and use custom styles for formatting so theoretically this should be possible.

If you need this feature now, I think it should be pretty straightforward to extend this library in terms of Markdown parser as well as on the native side. If you need any guidance, I could provide you exact steps how to do that.

I will keep you updated on that.

robinmitra commented 3 weeks ago

Thanks for coming back to me, yes I think I'd like some guidance on extending this library for supporting these feature. Appreciate the help 🙌🏼

tomekzaw commented 3 weeks ago

Sure! First you'll need to make changes in the JS parser here: https://github.com/Expensify/react-native-live-markdown/blob/main/parser/index.ts There's a function called parseExpensiMarkToRanges that accepts a string with the message and returns an array of styled ranges. Don't forget to bundle the code with yarn build and test it with yarn test.

Once that's complete, you'll need to implement the actual styling logic on the native side.

For iOS, you'll need to edit this file: https://github.com/Expensify/react-native-live-markdown/blob/457a90c4756182ebca62edc468a5f803e666e25f/ios/RCTMarkdownUtils.mm#L97-L136

For Android, you'll need to make changes here: https://github.com/Expensify/react-native-live-markdown/blob/457a90c4756182ebca62edc468a5f803e666e25f/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java#L105-L168

FYI We also offer consulting services, so if you need some more help with extending this library, we'd be more than happy to do so, just drop us a line at projects@swmansion.com.

robinmitra commented 1 week ago

Thank you! I'll give it a try this weekend.