Ckeditor5-react: Will there be a react-native version?

[ItsNoHax]

Documentation on how to use this within react-native would be nice.

(Edit by @Reinmar) If you'd like to see support for react-native version please 👍 this ticket. Also, see the discussion below.

[pomek]

I cannot imagine how it could work. React-native transforms React components to native controls used in Android or iOS. There is no HTML and it doesn't use WebView.

[pomek]

Do you have any idea how could it work?

[ItsNoHax]

Not sure, how we have been doing it so far is by loading it inside a WebView. Which works but so far it hasn't been a great experience.

[Reinmar]

We'd need to dive deep into this topic to know whether this is doable and how much work it requires. I think we can confirm this as a feature request but to invest time in it we'd need to see whether this is a popular demand. What may help is lots of 👍 on the ticket and contributions :)

[artshevtsov]

There is a react native view editable library (https://www.npmjs.com/package/react-native-view-editable), so it is possible to make CKEditor 5 compatible with react native.

[Reinmar]

@artshevtsov could you write a bit more? I don't see how it's related.

But I googled some things and found https://www.reddit.com/r/reactnative/comments/8xdqgz/best_option_for_a_maybe_rich_text_editor/ and https://github.com/imnapo/react-native-cn-richtext-editor.

From https://github.com/wix/react-native-zss-rich-text-editor/blob/2cad3349dbac79713065eed33a211e67dab2f680/src/RichTextEditor.js#L292-L310, I can see that you can embed a webview inside your app and use a real JS app inside it. That seems to be an option for us. However, from the comments under the reddit thread, it sounds like it's far from perfect.

[artshevtsov]

Yes, it is possible to place a <WebView> component to the app screen, then load a local html page with ckeditor initialization and communicate with an editor via postMessage, but it will be extremely slow, with lots of limitations. (@vitalyliber already done it, here is an example: https://github.com/vitalyliber/react-native-ckeditor/blob/master/index.js)
An output of CKEditor will be HTML, but react native uses it's own components like <View>, <Text>,
<Image> to render a content native way for Android and iOS platforms. So the output should be a JSON object which can be rendered on all platforms correctly.
For example an object

const blogPost =  {
   'viewBlock': {
          'styles': { 'padding': 10},
          'children': {
              'text': {
                   'styles': {'fontWeight': 'bold',  'fontSize': 16}
                  'caption': 'example',
               }
          }
    }
}

can be rendered to React Native layout like this:

<View style={{padding: 10}}>
   <Text style={{fontWeight: 'bold', fontSize: 16}}>
      example
   </Text>
</View>

and to React dom:

<div style="padding: 10px;">
 <span style="font-weight: bold; font-size: 16px;">
   example
 </span>
</div>

Good way is to write a React Native component which uses declarative components for ckeditor tollbar, editable area and so on.