Creating a Collaborative Editor

https://www.pierrehedkvist.com/posts/1-creating-a-collaborative-editor

by phedkvist • 7 years ago

80 14 7 years ago

darkbatman• 7 years ago

I took a different approach btw building collaborative editing in WordPress core editor. Knowing about OT/CRDT but decided to go with the approach here: https://github.com/WordPress/gutenberg/pull/1877

Might be useful to you as this is react/redux.

xuejie• 7 years ago

I'm confused here, Quill has a a very nice OT solution built-in to solve collaborative issue: https://github.com/quilljs/delta

Why not leverage that solution than just saying OT is incorrect and roll out a rudimentary solution? CRDT is not something easier, OT and CRDT are just 2 different beasts with different trade-offs.

phedkvist2• 7 years ago

Maybe I should clarify. From my understanding OT is correct when used with a client-server model. But if you have read the research a lot has happened since the first OT paper was published. The OT algortihm works well even for Google Docs and other open source solutions.

cyborgx72• 7 years ago

My Bachelor Thesis was implementing an operational transformation algorithm for tree structures (JSON objects) and evaluate it. Always thought about going back to it and build it into a usable application.

AnthonBerg3• 7 years ago

I think you would find willing collaborators! <3

Cool thesis. Pretty significant job :)

cyborgx72• 7 years ago

The algorithm already existed I just implemented it in js with a node server.

kba2• 7 years ago

You may find ShareDB[1] interesting – it's a library that does exactly that.

ShareDB is a realtime database backend based on Operational Transformation (OT) of JSON documents. It is the realtime backend for the DerbyJS web application framework.

And now a selfplug:

We're using ShareDB to create collaborative DOM in Webstrates[2]. The tl;dr is that every DOM change you make gets synchronized to all other connected clients and the document (including full version history of every single DOM change) gets saved.

Creating a collaborative editor in Webstrates is a simple as creating a new webstrate[3], opening Devtools and adding `contenteditable` to the body element.

[1] https://github.com/share/sharedb, [2] https://github.com/Webstrates/Webstrates, [3] https://demo.webstrates.net/frontpage/

scofalik• 7 years ago

Operational Transformation (OT) is one of those algorithms, which have been evolving over time, as versions of it have been proven incorrect.

Source or explanation required.

Also, this: https://arxiv.org/abs/1905.01302

I guess that you can argue for both sides :). But they are just different solutions. Basing on my experience and on what I read it is simply unfair saying that one is incorrect and other is correct (or one is better and the other is worse).

phedkvist2• 7 years ago

Maybe I should have phrased it better. OT was first introduced a long time ago, a quick search on Google Scholar and you will find papers from the 90s. Since then the algorithm has evolved and improved. I did not say it was better. I think CRDTs are easier to understand, but that's my opinion :)

AnthonBerg3• 7 years ago

That’s a great paper! Recommended if only for how much fun it is :)

(Maybe that’s just me of course :) Only one way to find out ...)

raphlinus• 7 years ago

I think the original statement is defensible. Many of the original OT papers proposed algorithms that have since been shown not to converge in particular cases (especially the TP2 puzzle). It took a while for the fog to clear, in part because TP2 requires concurrent edits from 3 peers.

I also highly recommend the talk "CRDTs and the Quest for Distributed Consistency"[0] from Martin Kleppmann, which I believe surveys the landscape in as clear and accessible a manner as I've seen; much of the literature is pretty dense.

[0] https://www.youtube.com/watch?v=B5NULPSiOGw

zellyn• 7 years ago

If you're interested in this subject, definitely make sure you check out the xi-editor retrospective: https://github.com/xi-editor/xi-editor/issues/1187#issuecomm...

kba2• 7 years ago

That's an interesting project and good writeup!

Peer-to-peer OT has indeed been proven wrong many times (I've debunked a few papers myself as well), but client-server-based OT is very solid.

For the last 3 years, I've been the primary developer on Webstrates[1], an open source[2] research project that "makes the DOM collaborative", that is to say, as Google Docs (and your project) makes text editing collaborative (a subset of the DOM), Webstrate aims to make the entire DOM collaborative, allowing developers to easily built collaborative tools (such as text editors).

In fact, I just made a basic editor here (https://demo.webstrates.net/dom-editor/) in about 5 seconds. I just created a new webstrate (a "page" on the server) and added the `contenteditable` attribute to the body element. Of course, it dosen't have any of the rich text editing capabilities of your editor, but that's just a matter of adding more stuff directly in the DOM, e.g. https://demo.webstrates.net/shaggy-elephant-60/?copy.

Through those 3 years, there haven't been any DOM consistency errors caused by issues with the OT algorithm used.

Absolutely nothing wrong with CRDT – it's even on our own agenda to eventually develop a peer-to-peer-basd Webstrates using CRDT. I just wanted to point out that OT is a very viable alternative for client-server applications.

[1] https://webstrates.net/, [2] https://github.com/Webstrates/Webstrates

Creating a Collaborative Editor

Related Stories