React/ReactNative in the scope

[mqtik]

Question

Hi. Currently I'm using this library to load the editor (in React/Web) -> https://github.com/Jungwoo-An/react-editor-js

But I'm wondering, since the architecture of the code it's actually quite similar to React, is there an official wrapper?

Is there any plans to make it available in the React Native ecosystem?
As a side note, we maybe could use the code of this library: https://github.com/imnapo/react-native-cn-richtext-editor/tree/programaticStyle
as a base —I had made some pull request, and it works with blocks using native views (the newest version uses WebView, because this method of render things natively freezes the app, since it needs to use FlatList instead of ScrollView, so the author just changed to WebView) -> relate: #1191

[mqtik]

If anyone cares, I'm porting editorJS to React Native without using WebViews (so no, it doesn't use any code from editorJS, it only shares the syntax of blocks). It's all native and performs fast even if there's thousands of blocks to render. It uses a virtualized view.

I've written most of the plugins of the editor (like images, linkTool, paragraph, header, lists, quotes, warnings, delimiter).

Don't take it as an advertise; I'm struggling with TextInput (set bold, italic, inline toolbar), and any help it's highly appreciate.

I'll make it public if anyone's interested.

[mikekoro]

@mqtik having editorjs iside RN might be an overkill for my case, I am just trying to consume its JSON in RN. I am using react-native-webview but it doesn't return anything when I use it in this context:

<WebView source={{ html: block.data.text }}/>

Am I missing something? Care to share your ways?

[mqtik]

Well, I actually ended up writing everything native, because I couldn't load the editor in the WebView.

But if you're fine with the overkill performance of having a WebView anywhere in your app, then that should be pretty straightforward. I'll even advice you to do it native, since you might as well take advantage of the awesome architecture of the JSON (which, in short words, that was the point: export anywhere)

Loop the blocks[], switch it by type (paragraph, link, list, ...) and render what you want there.

[gohabereg]

Hi there
Editor.js is strongly relying on browser JS APIs and DOM model.
Would be cool to make it available for RN, to do so we need to inject some modules with RN renderers and selection controls to replace ones related to DOM and browsers APIs. At the moment that is not possible. Also I'm not sure native selection control interfaces and other APIs are really compatible with browser ones

[mqtik]

Sorry it took me so long to reply. I wasn't aware of new comments.
@gohabereg I could create a repo so you can try it yourself. I'll make it open source anyways, but it would be really cool if we just use this same repo, but when in native, import it like: import Editor from 'editorjs/native

The editor performs really fast. It doesn't have the problem of freezing when rendering thousands of blocks.

Also I'm not sure native selection control interfaces and other APIs are really compatible with browser ones

Well, of course. They're not. But there's a silver lining. We can work something out native, and use the bridge.

The editor I wrote (which's fully compatible with editorJS), uses editMode property (or previewMode, if you will).

When editMode is OFF, the editor will render <Text /> components. When it's ON, will render <TextInputs /> —for paragraphs, captions, and everything where there's a textstring—

I've been able to make the inline tags work on iOS (show bold, italics, ..., in TextInput), which's a huge progress.
In Android, however, all plugins works, but in paragraphs, it currently renders Text and so on, because TextInputs can't have EditGroups on Android. But I will figure something out.

We can code native and make a plugin for this (writing Swift on iOS, and Java on Android) for just that porpuse, textstrings and inline editor, using selectable text toolbars, and start/end string selects. All other plugins are taken care of.

I have a project which uses this editor on iOS and Android, and editorJS on macOS (I'm close to release a version for Windows & Linux) so you can check it out.
You can write on desktop using editorJS, and all of that syncs to your phone and you can keep writing/reading there.

https://newt.to // https://newt.to/downloads

(again, not trying to advertise, just trying to show you an example)

It would be really cool to merge the code into editor.js so we can all have the editor on native platforms.

[mqtik]

Oh, and we would really need to use random IDs for every block, because with keys we can work something out for performance issues. In native apps we need to use IDs keys for clip all components that are not in the viewport.

Load thousands of blocks in one-go it's bad practice, but with IDs.. we can do something.

Can we look at this problem as well?

[gohabereg]

Hi @mqtik
I you have any examples how you enable EditorJS in RN environment, I would be happy to check them out. However, if we want some convenient way (in terms of development and maintenance), we need to use dependency injection pattern for modules relying on DOM APIs.
So it's more about design and architecture. I have some ideas in mind, but cause of other ongoing work I can't focus on the Editor only. Also @neSpecc and @khaydarov should participate in any arch discussions as a maintainers, but they also have great workload. So if you are ready to contribute I am happy to help.

[mqtik]

Sure. I'll try to open a new repo as soon as possible. I have to clean the code from any credentials and other data, and write an example so you can run it. (:

[patrickjm]

@mqtik what you have so far looks awesome. I'd also love to see an open source version, there is just no good cross platform solution for this kind of editor at the moment...