Using sharejs with contenteditable elements

Question

Is there a way to use sharejs together with contenteditable-Elements like <div contenteditable="true">Content <b>with html</b></div> with HTML-Content in it?

Or are there other best practises for Operational Transformation (OT) in conjunction with HTML-Content or Rich-Text? How could this be done with node.js?

Answer 1

It is possible to define an OT algorithm on trees such as DOM trees. I've written a shareJS-compliant OT type for DOM operations: https://github.com/marcelklehr/dom-ot

Use it with caution, though. Even though it works, the question is if syncing the raw DOM is a good idea and really what you want. Many browsers have a variety of quirks regarding their DOM implementation and especially in handling contenteditable elements.

A different approach would be to rely on an in-browser rich text editor to provide OT interoperability. The CKeditor team for example is currently devising such a feature for v5. ProseMirror advocates and supports a rebasing and transformation scheme similar to that found in version control systems (the difference to OT is that replicas are not guaranteed to converge if you apply edits in different orders).