3 ms·

How would you make a multi-platform rich text editor in React Native?

by jitl 4y ago

gloosx 4y ago
Just like any other app. In React Native, there is a TextInput component which is fully under control, from caret position to nesting typography rules. You can build up all logic you need for text editing based on it.
- jitl 4y ago
  TextInput does not appear to be rich text, I don’t see a way to represent bold text in the docs, much less complex rendering like @mentions tokens, images, or tables. Unfortunately when I Google “rich text input React native”, all the libraries I found use a Webview internally. Can you explain in more detail how you’d style a Heading element, block level image element, and a Quote element within the same editable TextInput? The important UX feature is that the user should be able to start a text selection in a Heading, and end the selection in the Quote, so when they press delete, the image is removed and the quote is merged into the heading.
  - gloosx 4y ago
    I personally implemented web-compatible rich text using TextInput and I will share some of my knowledge here which hopefully fills the gaps for you. 1. Most useful resource for creating this feature would be official TextInput doc [1], no need for googling. 2. Unlike Web, it is possible to nest <Text> elements inside <TextInput>, which is what you need to use for styling your blocks. 3. So finally, you will need your Rich State, and you need a Parser function, which will translate this Rich State into a collection of <Text> elements representing your blocks. There is a lot of nuance still, say, Image elements cant be nested directly into TextInput, so you need to generate a spacer Text block where you will host your image. Also it requires some bits of excellence to work out the selection and caret logic correctly, but overall – it's not that big of a task, I would do it in few days [1] https://reactnative.dev/docs/textinput https://reactnative.dev/docs/textinput
    - jitl 4y ago
      You do need to Google because the docs never mention that TsxtInput can contain Text!
      - gloosx 4y ago
        In fact, never otherwise is mentioned, so generally you should feel free to experiment nesting everything inside anything unless otherwise mentioned explicitly. Of course you will discover that TextInput is only rendering Text elements this way, surely it's not documented well enough, although you should 100% of the time understand it's not the web and, with many many familiarities, things still work different here
lab 4y ago
I think this is the key reason why going hybrid native with a lightweight WebView was needed at Notion. If there was a ProseMirror-like standard library for rich text editor available for crossplatform, with: - Native editor for IOS - Native editor for Android - Native editor for Web - Electron/Native desktop, etc... These editor can share code via a clean architecture inspired state plugin hyerachy that's swappable (i.e, a shared provider that swap out state and data routing per platform). Then with metro or esbuild you can selectively prune the code branch. The UI can be done in RN-web if lazy or straight up native code. It doesn't matter at this level. Then, anyone who wanted to clone Notion can consume this component in their RN app. However, this is against Notion interest atm afaik, since Notion must keeps its advantage (make it harder for people to clone Notion). I'd argue it will try to shutdown such an initiative until it found a better way to have an edge on these competitor (or maybe shift to a new market)
- jitl 4y ago
  Facebook is building a framework with native components in Lexical: https://mobile.twitter.com/peterfriese/status/1567445530581549056 https://mobile.twitter.com/peterfriese/status/15674455305815... I don’t know how we could possibly shut this initiative down, but I guess I should try! For us to build such a project without backing it with a webview would probably take an order of magnitude more engineers working on the editor than we have today.
  - lab 4y ago
    Agreed. I would even call such initiative premature optimization, with unknown gain compared to just optimize the WebView component in the native shell if that's ever needed. More so for any new startup trying to enter the KMS space in general. I don't think Notion need to worry about FB. I think Notion might need to be worried about the potential market saturation caused by how easy it will be for a small team of 3 to clone Notion (and all of its integration, API, and so on) on all platform perfectly in a weekends. At that point, it's not the technology bottleneck anymore but more so a battle over branding and minor UX improvement.

How would you make a multi-platform rich text editor in React Native?

by jitl 4y ago

How would you make a multi-platform rich text editor in React Native?

Just like any other app. In React Native, there is a TextInput component which is fully under control, from caret position to nesting typography rules. You can build up all logic you need for text editing based on it.

jitl 4y ago
TextInput does not appear to be rich text, I don’t see a way to represent bold text in the docs, much less complex rendering like @mentions tokens, images, or tables. Unfortunately when I Google “rich text input React native”, all the libraries I found use a Webview internally. Can you explain in more detail how you’d style a Heading element, block level image element, and a Quote element within the same editable TextInput? The important UX feature is that the user should be able to start a text selection in a Heading, and end the selection in the Quote, so when they press delete, the image is removed and the quote is merged into the heading.
- gloosx 4y ago
  I personally implemented web-compatible rich text using TextInput and I will share some of my knowledge here which hopefully fills the gaps for you. 1. Most useful resource for creating this feature would be official TextInput doc [1], no need for googling. 2. Unlike Web, it is possible to nest <Text> elements inside <TextInput>, which is what you need to use for styling your blocks. 3. So finally, you will need your Rich State, and you need a Parser function, which will translate this Rich State into a collection of <Text> elements representing your blocks. There is a lot of nuance still, say, Image elements cant be nested directly into TextInput, so you need to generate a spacer Text block where you will host your image. Also it requires some bits of excellence to work out the selection and caret logic correctly, but overall – it's not that big of a task, I would do it in few days [1] https://reactnative.dev/docs/textinput https://reactnative.dev/docs/textinput
  - jitl 4y ago
    You do need to Google because the docs never mention that TsxtInput can contain Text!
    - gloosx 4y ago
      In fact, never otherwise is mentioned, so generally you should feel free to experiment nesting everything inside anything unless otherwise mentioned explicitly. Of course you will discover that TextInput is only rendering Text elements this way, surely it's not documented well enough, although you should 100% of the time understand it's not the web and, with many many familiarities, things still work different here

lab 4y ago

I think this is the key reason why going hybrid native with a lightweight WebView was needed at Notion. If there was a ProseMirror-like standard library for rich text editor available for crossplatform, with: - Native editor for IOS - Native editor for Android - Native editor for Web - Electron/Native desktop, etc... These editor can share code via a clean architecture inspired state plugin hyerachy that's swappable (i.e, a shared provider that swap out state and data routing per platform). Then with metro or esbuild you can selectively prune the code branch. The UI can be done in RN-web if lazy or straight up native code. It doesn't matter at this level. Then, anyone who wanted to clone Notion can consume this component in their RN app. However, this is against Notion interest atm afaik, since Notion must keeps its advantage (make it harder for people to clone Notion). I'd argue it will try to shutdown such an initiative until it found a better way to have an edge on these competitor (or maybe shift to a new market)

jitl 4y ago
Facebook is building a framework with native components in Lexical: https://mobile.twitter.com/peterfriese/status/1567445530581549056 https://mobile.twitter.com/peterfriese/status/15674455305815... I don’t know how we could possibly shut this initiative down, but I guess I should try! For us to build such a project without backing it with a webview would probably take an order of magnitude more engineers working on the editor than we have today.
- lab 4y ago
  Agreed. I would even call such initiative premature optimization, with unknown gain compared to just optimize the WebView component in the native shell if that's ever needed. More so for any new startup trying to enter the KMS space in general. I don't think Notion need to worry about FB. I think Notion might need to be worried about the potential market saturation caused by how easy it will be for a small team of 3 to clone Notion (and all of its integration, API, and so on) on all platform perfectly in a weekends. At that point, it's not the technology bottleneck anymore but more so a battle over branding and minor UX improvement.