Live collaborative real-time editing feature request

[bmoren]

Nature of issue?

• New feature request

New feature details:

In light of Covid19 and so many folks going to be teaching online, it would be amazing to implement a live collaborative editing feature into the editor.

Several other platforms have similar feature set, and it may make sense to migrate to them in the short term, but I think a discussion of this and if it's even possible with the current build would be amazing. Since so many of our classes are already using the editor, this feature would be major for continuing the classes as seamlessly as possible while adding a nice hands on way to help students debug code, and work together that's a little more fluid than a screen-share.

I think the most reasonable model to follow is glitch.com's 'Invite Others to Edit' link

open processing has recently implemented a similar feature:
https://twitter.com/openprocessing/status/1237901609314762754

atom.io has it's teletype package:
https://teletype.atom.io/

visual Studio has it's live share feature:
https://code.visualstudio.com/blogs/2017/11/15/live-share

[shakti97]

Yes this would be an amazing feature, already added to my todo list, will work on it , and provide you update on it asap.

[bmoren]

Amazing, I'm not much of a react programmer, but I'm happy to help in whatever capacity I have to make this a reality asap! I do have some experience with node and socket.io

do you have any ideas on how you might approach the implementation so I could do some reading and investigation?

[catarak]

This would be an awesome feature to add. Just to list out some of the details that this would involve, to get a sense of how big of an undertaking this would be:

• Adding authorization for multiple users to edit a sketch
• Shared undo/redo stack
• Add socket.io to share the sketch state among clients
• Fundamentally change how sketch files are updated. Right now, when a sketch is saved, the whole new sketch in the client is sent to the server. With multiple users, the web editor would need to adopt an editing model of applying diffs.
• Interface for turning on live coding/adding users to edit the sketch.
• ??? Other stuff ???

I think the best approach to this feature would be to start incrementally. Out of the steps I've listed, I think the first step would be changing how sketches are updated.

[andrewn]

This would be an amazing feature! I looked into approaches to collaborative text editing for another project and it seems the two main approaches for synchronising edits across clients are:

• Operational transforms (OT) as used by Google Docs
• Conflict-Free Replicated Data Type (CRDT)

OpenProcessing seems to be using Firebase Realtime Database and Firepad with CodeMirror. This uses OTs.

I also found ShareJS (also OT) which provides a nodejs server we could host ourselves that connects to mongo. It has CodeMirror bindings.

[shakti97]

This would be an awesome feature to add. Just to list out some of the details that this would involve, to get a sense of how big of an undertaking this would be:

• Adding authorization for multiple users to edit a sketch
• Shared undo/redo stack
• Add socket.io to share the sketch state among clients
• Fundamentally change how sketch files are updated. Right now, when a sketch is saved, the whole new sketch in the client is sent to the server. With multiple users, the web editor would need to adopt an editing model of applying diffs.
• Interface for turning on live coding/adding users to edit the sketch.
• ??? Other stuff ???

I think the best approach to this feature would be to start incrementally. Out of the steps I've listed, I think the first step would be changing how sketches are updated.

I already added a similar approach to build this feature in my gsoc proposal. Can you please check it once and provide feedback @catarak

[bmoren]

OpenProcessing seems to be using Firebase Realtime Database and Firepad with CodeMirror. This uses OTs.

this seems like a really promising stack to implement this. it seems like this could be a good place to start with the editor. @catarak do you think that we could get around some of the update issues if we implemented the realtime editing with out the ability for the collaborator to save the sketch? basically they just get a link to login and change the editor instance live, but the owner of the sketch still retains the permission and capability to save/autosave the sketch? It seems like if that is a possibility, then we could re-do the editor instance with the firepad/codemirror and let the saving be for the moment? maybe this is a terrible idea?!

[dskeithbuck]

Glad to see this issue is being worked on! I'm about to teach a processing workshop via Google Hangouts and this would be super helpful.

[siusoon]

yes definitely this will help a lot in teaching. :)

[catarak]

@catarak do you think that we could get around some of the update issues if we implemented the realtime editing with out the ability for the collaborator to save the sketch? basically they just get a link to login and change the editor instance live, but the owner of the sketch still retains the permission and capability to save/autosave the sketch? It seems like if that is a possibility, then we could re-do the editor instance with the firepad/codemirror and let the saving be for the moment? maybe this is a terrible idea?!

I think switching to OTs will help with the updating/synching issues.

I like this idea of creating a "live session" with one person being the host (which is what I think most platforms do?)

I want to take this 🌈one step at a time 🌈and add all of the pieces carefully/in the right order so it's all stable, but yes, it would be very exciting to add all of this.

[ffd8]

Worth checking out some of the solutions/routes I've gone with P5LIVE, which has found solutions for a handful of the issues mentioned above (after testing 4+ techniques, CRDT via websockets is far smoother for group collab than Firebase). It's been primarily developed for both VJ visuals + teaching (regularly have cocoding sessions with 25 people), using an admin/user setup. Hope it can be of help!

++ Since the editor is based on CodeMirror, I'd suggest looking into y.js for the CRDT collab.

[catarak]

amazing, thank you ted!!

[bmoren]

Just saw this, and it seemed very relevant to this issue: https://github.com/convergencelabs/codemirror-collab-ext

[bmoren]

another package which seems relevant to this discussion:
https://github.com/yjs/y-codemirror

edit: I see @ffd8 above mentioned y.js It seems like this might be the route.

[catarak]

@bmoren thanks for the update!

[slowizzm]

What is the status of this feature? Is there a version I can use next semester in my classes?

[catarak]

I have been working on some of the infrastructural changes to make this happen (#166 specifically). While I would love for this to happen soon, I unfortunately don't have a timeline as to when this work would be done.

[cproctor]

Hi everyone, I've used and admired p5js for a while, but I'm new to active participation in this community. Thanks to @lm-n for the welcome.

Two grad students (one in education, one in CS) and I have started working on this issue this summer. It doesn't look like anyone's actively working on this, but it would be lovely to hear if someone is. We're just a week in, learning our way around the codebase and prior implementations of real-time programming collaboration; we'll post updates here. The first step will be to share out a system design proposal, likely using y.js. Completely in agreement with the prior discussion, especially around scoping our work and making modular contributions.