Real-time collaborative editing with editor.js

[teilzeitgeist]

Hey!

Did someone test to get editor.js work with SwellRT or other solutions to make the editing collaborative?

[oliver-dvorski]

You'd still need to write quite a bit of logic to make these two communicate, no?

[milu2003]

i need it too!

[marcoancona]

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.

[milu2003]

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.

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

[marcoancona]

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.

[KartikYZ]

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.

[milu2003]

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：
https://www.tiptap.dev/examples/collaborative-editing#example

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.

[hata6502]

This issue may be related to... #1606

[marcoancona]

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

[milu2003]

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.

@marcoancona

[wmonecke]

Have you guys looked at this issue? #1155 Looks promising!

[SavoInfostream]

Any progress update for this feature?

[neSpecc]

Any progress update for this feature?

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.

[SavoInfostream]

Donated.
Keep it going :)

[ChasLui]

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

[ahetawal-p]

Hey @ChasLui do you have some guidelines, on how you went about implementing this ?

[ChasLui]

@ahetawal-p Hi friend. You can refer to this project: hughfenghen/y-editorjs

[ahetawal-p]

Thank you so much @ChasLui

[ahetawal-p]

@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 ?

[ChasLui]

@ahetawal-p y-editorjs is not my code. But my implementation idea is similar to y-editorjs project.

[lijie1129]

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.

[gohabereg]

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

[ghost]

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

[w99910]

IMG_0974.mp4

Hey 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. 😃

[w99910]

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! 🎉(•̀ᴗ•́ )و

[w99910]

I wrote an article about Realtime Collaborative Editor Approach using Socket.io here. I hope I can help you all a bit. :)

[onexdata]

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