Just starting to look into the ProseMirror ecosystem and I’ve read about the collaboration module; We need a basic text editor (very simple schema) that shows the selections/carets of all connected users. I’ve seen a few posts mentioning the use of widget decorations to implement this. Wondering if there are any plugins or known best practices for this that I should be aware of before I reinvent the wheel. This post from @saranrapjs makes it sound non-trivial. https://discuss.prosemirror.net/t/how-we-went-about-prosemirror-collab-at-the-new-york-times/2119/8 Thanks! Joe
This might be duplicate of Collaborative Editor: Show Other Users Cursor Position.
Thanks @kepta, I would suggest that the referenced post is a year old, and didn’t terminate conclusively. In the meantime, I’ve asked the OP on that thread if he could update the community on how his efforts went. I think it would be valuable to have a separate, and fresh conversation here about how best to go about this in 2020. Are there any successful examples / demos of bringing this functionality to life with prosemirror?
Are there any successful examples / demos of bringing this functionality to life with prosemirror?
If you are looking to see a full blown example, the folks at atlassian have their code opensourced and I think you can pretty much get the gist of the idea in the code. Here is a working example of the same.
That said, I myself plan to implement this in the coming months and would love to share the project with the community and also take notes on other projects that show up.
Cool… what exactly are you thinking about doing in the coming months? By yourself, or with a team?
I am in the exact same boat! I will take a look at the examples posted in this thread… Thanks!
We’re working on this as part of prosemirror-collab-plus, here’s what we’ve learned so fair and hope to open source soon:
- Store selections server-side, map through commits as they come in.
- On the client side, use decorations to show cursors and selections.
- Client should send server selection every time it changes. The selection should be given as-of a server-side document version, so that the position can be mapped through commits made while the selection is in flight from the client.
- You kinda have to re-implement all three of prosemirror selection types server-side and send them over the wire. The most difficult piece is being able to map correctly through commits while maintaining the correct selection range. Prosemirror gets weird when a decoration range is collapsed by an edit - if characters are added next to the cursor, the range expands rather than moves
- Ensure clients who disconnect have their cursors removed