Showing selections/carets of collaborators

1

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

2 Likes
2

This might be duplicate of Collaborative Editor: Show Other Users Cursor Position.

3

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?

1 Like
4

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.

1 Like
5

Cool… what exactly are you thinking about doing in the coming months? By yourself, or with a team?

6

I am in the exact same boat! I will take a look at the examples posted in this thread… Thanks!

1 Like
7

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
3 Likes
8

@ted_chou12, this may be of interest to you to follow based on your suggestions for the licit editor (https://github.com/MO-Movia/licit).

1 Like