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 iOS

Open maksg opened this issue 1 year ago • 3 comments

Details

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

maksg avatar Apr 12 '24 16:04 maksg

Still discussing the expected behavior for codeblocks here

tomekzaw avatar Apr 16 '24 23:04 tomekzaw

It looks like padding in markdownStyle only affects the size of the rectangle in the background and not the text itself:

Screenshot 2024-04-17 at 01 35 09

It's okay for the initial implementation but ultimately we'd like padding to affect the text layout here as well.

I don't think it's possible to achieve padding for inline code on iOS (Slack for iOS also does not support it).

However, I think it should be possible to implement padding for codeblocks. As for horizontal padding, I've copied this code from blockquotes and it seems to work:

https://github.com/Expensify/react-native-live-markdown/blob/cd42c45c0a76c4beba86e52899e196d9f176eb46/ios/RCTMarkdownUtils.mm#L119-L122

Screenshot 2024-04-17 at 01 36 38

As for vertical padding, ChatGPT says that the only option is to set lineSpacing but this affects the height of the cursor so I'm not really sure how to implement it.

We can implement that in a follow-up PR.

tomekzaw avatar Apr 16 '24 23:04 tomekzaw

There seems to be some problem with codeblocks containing only one character:

https://github.com/Expensify/react-native-live-markdown/assets/20516055/935e409f-8dae-4829-8a51-9d877e905534

tomekzaw avatar Apr 16 '24 23:04 tomekzaw