Replies: 9 comments
-
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. |
Beta Was this translation helpful? Give feedback.
-
@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:
Am I missing something? Care to share your ways? |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Hi there |
Beta Was this translation helpful? Give feedback.
-
Sorry it took me so long to reply. I wasn't aware of new comments. The editor performs really fast. It doesn't have the problem of freezing when rendering thousands of blocks.
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 I've been able to make the inline tags work on iOS (show bold, italics, ..., in TextInput), which's a huge progress. 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. 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. |
Beta Was this translation helpful? Give feedback.
-
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? |
Beta Was this translation helpful? Give feedback.
-
Hi @mqtik |
Beta Was this translation helpful? Give feedback.
-
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. (: |
Beta Was this translation helpful? Give feedback.
-
@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... |
Beta Was this translation helpful? Give feedback.
-
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
Beta Was this translation helpful? Give feedback.
All reactions