Slate For React Native

Do you want to request a feature or report a bug?

Feature

What’s the current behavior?

React Native Version for Slate

Scenario

We are currently working on some improvements to our platform at my company and one of the feature we are rebuilding is our data creation page (a rich text editor). We have decided to use slate for this after considering other alternatives and found slate to be the best for our use case and most importantly, Slate’s structured data is very similar to how we want our data to look.

Considering the fact that a good percentage of our users uses our mobile apps (android and iOS, both built with React Native), we have need to make the editor work on React Native to enable our users load and edit information on their mobile devices. I guess a number of slate users who may have similar needs as us or has existing or planning to build react-native apps will love to have a react-native slate version.

Internally, we have been looking into how we can build a slate-react-native and after trying a number of ideas, we were able to make it work by using webview.

The webview implementation is not optimal and is just currently being used as a stop-gap solution and my team members ( @vshia and @UrosZivaljevic) and I, with the support of the SlateJs community would love to create a proper react-native version, hence the reason for creating this issue. Ideally, interested contributor can indicate interest here and we can brainstorm on the best way to do this.

[vshia]

@Slapbox , @realbisoye, Nathan (@nathanfu88) and I were working on this and ended up using Slate in a webview on an Android/iOS app. On iOS, Slate in a webview worked as-expected. On Android, we ran into the known issues and our findings are posted here which was posted in https://github.com/ianstormtaylor/slate/issues/725#issuecomment-398152295.

[realbisoye]

For Context, we have tried the following ideas;

• Build a slate-react-native off the existing slate-react.

We basically forked slate-react and tried to rewrite it for react-native, the major challenge here was the react-native TextInput component is not built for handling complex editing, hence the result was a very slow editor.

• Build a react native editor over one of the existing native editor libraries.

We considered build a react-native wrapper for iOS-rich-text-editor for iOS and Knife for Android, the challenge was that it seems iOS-Rich-Text-Editor is no longer maintained (its the only non webview based iOS editor we can find), others like ZSS Editor are built on webivew) and for Knife, we couldn’t get its change/update events to work with slate.

• Wrap the existing slate-react in a react-native Webview.

This works and is currently our stop gap solution but its also not optimal and we will also like to explore other options with everyone.

Also mentioned in the original issue, kindly lets discuss how we can solve this, it can be based on any of the ideas we have tried (we are probably doing one or two things wrong) or a fresh method.