Currently the getting started docs of Yjs mainly focus on installing and reusing existing Yjs bindings. If one wants to adapt Yjs to an existing in-house editor, I think an example for such "binding developer" can be useful, since for now I believe we mainly take real world projects (like slate-yjs) as reference, and it can be a litter complex for beginners.
Recently I supported multi-user collaboration in our graphics design editor on gaoding.com with Yjs, which works great. This work is started by testing with a new canvas-based toy editor that supports moving, grouping and ungrouping operations, then did I apply its approach to our existing editor (not open source). This toy editor only has about 1000 lines of code, which shows the basic ideas of:
Syncing editor model (plain JavaScript objects) states to Yjs model.
Syncing Yjs delta patch to editor model.
Handling tree operations (building and flattering nested group).
Handling multi-user history states with UndoManager.
Syncing selection highlights with awareness API.
Do you think it worthwhile adding this demo to this repo? I would happy to do some cleanup and provide it if so.
IndexXuan
commented
1 year ago
Currently the getting started docs of Yjs mainly focus on installing and reusing existing Yjs bindings. If one wants to adapt Yjs to an existing in-house editor, I think an example for such "binding developer" can be useful, since for now I believe we mainly take real world projects (like slate-yjs) as reference, and it can be a litter complex for beginners.
Recently I supported multi-user collaboration in our graphics design editor on gaoding.com with Yjs, which works great. This work is started by testing with a new canvas-based toy editor that supports moving, grouping and ungrouping operations, then did I apply its approach to our existing editor (not open source). This toy editor only has about 1000 lines of code, which shows the basic ideas of:
Do you think it worthwhile adding this demo to this repo? I would happy to do some cleanup and provide it if so.