4 ms·

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

by 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

by gloosx 4y ago

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