Enable collaborative text editing on Text and Area items like one does on Google Docs. Additionally, by applying the Quill editor, we get nicer text-editing features, such as automatic bullets.
Design
Use 1 Y.js CRDT document per board to represent collaboratively edited text. Each document contains the text property of each collaboratively edited item. The approach can be scaled to include other fields too. Maybe all fields at some point if the approach proves good.
Use Quill editor and y-quill for integrating the editor with the Y.js CRDT
Use y-websocket client for connecting the Y.js CRDT with the server
Port the y-websocket server to TypeScript and into this codebase (see backend/src/y-websocket-server). Customize as necessary
Use Cookies for associating Y.js websockets with Ourboard websockets by sessionId
Persist CRDTs as diffs, that go along the "event bundles" we store as database rows. Consider additionally storing a snapshot of the whole CRDT
1. Experimental roll-out
When this PR is merged, collaborative editing can be enabled by signed in users when creating a new board.
2. Enabling collaborative editor by default
TODO items
Add environment variables for controlling collaborative editing (false, true, opt-in)
Mobile check
Performance testing
Storage requirement measurements
APIs
Documentation
Playwright tests (create text, reload, change, reload, use two clients, clear indexeddb and reload...)
Include API basic tests in Playwright tests
Nice-to-haves
Undo buffer integration. Editor has its own local undo but we should also add the full edit as a global undo item
Persistence: consider storing CRDT snapshot
UI: Show proper username by the cursor when hovering. Now shows some large number
UI: Add a formatting toolbar. Needs some styling - if you now enable toolbar in Quill, it looks broken
Sharing: split the TypeScript y-websocket server into a separate shared module for others to enjoy
3. Utilizing CRDT more widely
It would be interesting to see if we can switch the whole board state into CRDT. Would likely simplify code. Performance might also improve, but this is something to investigate. Anyway, it makes sense to me to first reap the immediate collaborative editing benefits and then see how far we can go.
Goal
Enable collaborative text editing on Text and Area items like one does on Google Docs. Additionally, by applying the Quill editor, we get nicer text-editing features, such as automatic bullets.
Design
textproperty of each collaboratively edited item. The approach can be scaled to include other fields too. Maybe all fields at some point if the approach proves good.1. Experimental roll-out
When this PR is merged, collaborative editing can be enabled by signed in users when creating a new board.
2. Enabling collaborative editor by default
TODO items
Nice-to-haves
3. Utilizing CRDT more widely
It would be interesting to see if we can switch the whole board state into CRDT. Would likely simplify code. Performance might also improve, but this is something to investigate. Anyway, it makes sense to me to first reap the immediate collaborative editing benefits and then see how far we can go.