Rich text editor document structure that would work best with y.js

Hello everyone, especially Kevin :slight_smile:

I am re-building a rich text editor. The previous implementation has the document structure similar to prosemirror’s. Since we will be using y.js for collaboration I’d like to come up with a document structure that suits y.js most and eases its integration while not restricting our editor’s features. Can you Kevin share your experience with document structure of the rich text editors while implementing bindings for them and in which way would you really wish that they implemented the document structure?

1 Like

Hi @OrkhanAlikhanov,

I think the ProseMirror model is a good baseline. Internally, Yjs represents the ProseMirror model as Y.XmlElements. Marks (e.g. boldness, italic) are implemented using the rich-text functionality of Y.Text. The Quill editor only uses Y.Text which makes the model easier to understand, but then it is harder to represent nested structures.

Just try to build a simple model using Yjs types. Depending on the use-case, it may really make sense to use Y.XmlElement as a datamodel which allows you to build complex document structures.

If I could change one thing in ProseMirror, I’d make the internal representation mutable. Also editor bindings introduce quite some complexity - it would be great if the model would be directly based on one of the Yjs types. Yjs types already have a nice event pattern, are mutable, and support transactions.

1 Like