Real-time collaborative editing with editor.js #1874
Replies: 18 comments 13 replies
-
|
You'd still need to write quite a bit of logic to make these two communicate, no? |
Beta Was this translation helpful? Give feedback.
-
|
i need it too! |
Beta Was this translation helpful? Give feedback.
-
|
I tried to get real-time collaboration with Firebase Real-time Database but editor.js lacks fundamental APIs to get this to work nicely. In particular, without a mechanism to render only some blocks rather than all, a mechanism to pass metadata to blocks or to make individual blocks read-only, it is very hard. |
Beta Was this translation helpful? Give feedback.
-
editorJS didn't think of this from the beginning of design. Multi person real-time collaboration is not only a problem of local rendering, such as how to undo multi person real-time collaboration? How to compare the differences between the two versions. It is difficult to develop these functions using editorjs. I gave up How to recover from one version to another is very difficult |
Beta Was this translation helpful? Give feedback.
-
|
My idea was to take advantage of the block nature of the underlying data and to prevent editing a block that is being edited by somebody else, by setting it read-only. Conflict resolution should be easier under the constraint that within the same block there should be no conflicts. Undo only for the changes within the block being edited. This should be possible now that blocks have a unique id. On the other hand, for this to work it should be possible for all other blocks to be updated without disrupting the editing experience of the block the user is working on. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, would you able to provide more detail into how you went about this? I am currently trying to implement the exact same functionality but can't figure out how to set certain blocks to readOnly. |
Beta Was this translation helpful? Give feedback.
-
|
As for what you said about locking a block for editing, I think the user experience is very bad At the beginning of my project, I used editor to develop it. Later, I didn't support collaboration well enough. Later, I used prosemirror to reconstruct the project. I found that prosemirror did a good job in this aspect. Editor has been abandoned by me. You can also try tiptap, based on prosemirrorοΌ I think if real-time collaboration is an important feature of your product, then editorjs is not a better choice, because the design didn't take this into account at the beginning. |
Beta Was this translation helpful? Give feedback.
-
|
This issue may be related to... #1606 |
Beta Was this translation helpful? Give feedback.
-
|
Tiptap seems interesting, thanks for the hint @milu2003. Although, I have to say, that I would prefer a block-based editor to build something closer to Notion/Confluence. And editor.js looks good out of the box. @hata6502 indeed that would help |
Beta Was this translation helpful? Give feedback.
-
|
Block building is not difficult. My current product is also in the form of block, similar to notion, but it's very easy for me to build with prosemirror, just a little more work. But the high degree of customization of prosemirror made it easier for me to build programs. What you said out of the box is both good and bad. Although it's easy to use, once you want more complex functions, I think your program will be greatly limited. |
Beta Was this translation helpful? Give feedback.
-
|
Have you guys looked at this issue? #1155 Looks promising! |
Beta Was this translation helpful? Give feedback.
-
|
Any progress update for this feature? |
Beta Was this translation helpful? Give feedback.
-
Yes, we've designed and started implementing it. Here is the first part. You can support us and boost development speed via donation on OpenCollective. |
Beta Was this translation helpful? Give feedback.
-
|
Donated. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Friends, we have implemented collaborative documentation (including collaborative cursors) using editor.js + yjs and we are now live. Thanks again to editor.js. https://lanhuapp.com/dashboard/#/item
|
Beta Was this translation helpful? Give feedback.
-
|
@ahetawal-p Hi friend. You can refer to this project: hughfenghen/y-editorjs |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much @ChasLui |
Beta Was this translation helpful? Give feedback.
-
|
@ChasLui can you please confirm if which version of editorjs you are using in the above repo. Is this your own fork with some custom code in it to make it for collaboration ? |
Beta Was this translation helpful? Give feedback.
-
|
@ahetawal-p y-editorjs is not my code. But my implementation idea is similar to y-editorjs project. |
Beta Was this translation helpful? Give feedback.
-
Hello, this plan has been running online for 2 years and has not encountered any major problems. |
Beta Was this translation helpful? Give feedback.
-
|
Hi,everyone. About collaboration scenarios. Recently, I tried to make a binding between the YJS and EditorJS. It is to realize an idea. Please refer to it here. I think the EditorJS(v2.x) has some issues with compatibility design for the collaboration scenarios. 1. Absent the reactive & incremental state of EditorJS.The remote to local: we can use the data of EditorJSβ configuration to initialize existing content. But the incremental updates from other remote clients to local will only use the update method of the blockβ API. (EditorJS v2.x doesnβt have the update method of the blockβ API, and I created it in this PR) The local updates to remote: we can listen to the EditorJS via onChange and use the update method previously of the blockβs API. 2. Too many unnecessary DOM mutations in the EditorJSβs internal.Update the block: please see here. Switch the read-only mode: please see here. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @lijie1129 Thank you for your research! We were discussing exactly the same problems internally. Therefore we are working on the architecture redesign to enable reactive data-first approach. That is a challenging problem as existing solutions usually work with known in advance set of content blocks. Whereas Editor.js core doesn't know much about connected Tools. We are on the research stage now, hopefully we will come up to the public with the new design soon |
Beta Was this translation helpful? Give feedback.
-
|
This will be an amazing enhancement |
Beta Was this translation helpful? Give feedback.
-
|
Does anyone have a recommendation for editor that very well supports showing the difference between two versions of a file. The editor should have its own format and should be able to receive data from two sources and the create a diff. I've been searching for this for a long time now |
Beta Was this translation helpful? Give feedback.
-
IMG_0974.mp4Hey guys, I just implemented responsive real-time caret and text selection which would be a feature of real-time collaboration mechanism. It is easy to calculate the position in fixed window size but different browsers could have different window size and font size. So I took current font size, line height and word spacing of the selected element into account, and pre-render lines and calculate the positions. I haven't refactored my code yet. If you guys are interested, I will try to release it. π |
Beta Was this translation helpful? Give feedback.
-
|
I just released a package called "editorjs-caret-selection" for caret selection feature and you can find it here if you are interested. It is an initial version and there would be probably bugs. Feel free to fork it, submit pull request or modify and use as you wish. Cheers, guys! π(β’Μα΄β’Μ )Ω |
Beta Was this translation helpful? Give feedback.
-
|
I wrote an article about Realtime Collaborative Editor Approach using Socket.io here. I hope I can help you all a bit. :) |
Beta Was this translation helpful? Give feedback.
-
|
Here is a dead-simple implementation of a real-time collaborative editor.js interface using OT (Operational Transforms) for conflict resolution, which is faster than CRDT-based solutions like Ys (Both Google and Microsoft opted for OT over CRDT). I tested it up to 10 collaborators with no issues in sight. Uses ShareDB to manage the document on the server and implement OT, with no other requirements other than websocket (so you don't have to use Socket.io or other protocols). Feel free to use it for whatever you want. https://github.com/onexdata/realtime-editor.js
|
Beta Was this translation helpful? Give feedback.
-
|
It seems like you opted to move to Yjs? Did you end up finding it simpler for this sort of application? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey!
Did someone test to get editor.js work with SwellRT or other solutions to make the editing collaborative?
Beta Was this translation helpful? Give feedback.
All reactions