Hacker News Reader

Comment by schrijver | Hacker News Reader

I wonder if React’s algorithm could be used to implement support for ‘operational transformations’ on DOM trees?

OT is the technique used for collaborative editing, etherpad-style. Current implementations don’t work with conventional DOM’s: Etherpad has its own model of plain text with an additional ’attribute pool’. Libraries like http://sharejs.org/ only know to deal with plain text and JSON.

I would love if I could implement a collaborative editor that hooks into an existing HTML element on the page, in the way contentEditable allows for in single-user apps.

cf https://github.com/share/ShareJS/issues/1

View on HN

For OT to work you would need the ability to track all the changes and mirror them to the other users. React appears to have the ability to track changes, but I am unsure how easy it would be to mirror them over the network.

There's a great article here that describes how OT and other synchronization algorithms work (OT is event passing): https://neil.fraser.name/writing/sync/

React internals support being used in a web worker. It should be easy to send it via XHR.

Now, synchronizing two clients is going to be more tricky. The diff algorithm works on the virtual DOM which is the result of an arbitrary javascript execution.

So while it's certainly possible to synchronize and merge the virtual DOM. You'll need to also feed this result back to the javascript program that generates this virtual DOM. The next time you call render, it should return the new merged virtual DOM.

This would be a pretty exciting thing to be able to do, i'd love to see a demo :)

Instead of performing OT at the DOM level, you could do it at the data/JSON level with ShareJS and continuously feed this JSON into React.

If the underlying data is structured as plain-text or JSON, I think that’s the way to go. But I’m specifically thinking of collaborative rich text editing, in which case you’re probably using HTML both as the data format and the presentation/editing format.

For data as plain text, one could imagine to have an editor based on Markdown. I’ve seen shareJS used this way. IMHO once one wants more sophisticated formatting options this is not as user-friendly as a WYSIWIG solution.

Alternatively, the HTML needs to be converted client-side on the fly to something like JSONML http://www.jsonml.org/ Would that be feasible from a performance perspective?

There's a diff match patch library in JavaScript that can be used for this. In fact, we did use it in Mozilla Bespin

https://code.google.com/p/google-diff-match-patch/

Diff match patch is not necessarily easier than OT.

That’s for plain text no?

Reply on news.ycombinator.com