I am trying to figure out how to enable collaborative writing using prosemirror. I did a git clone of the Prosemirror website and used “npm run devserver – --port 8888” to get a working website in my local system.
But I am not able to figure out how to just use the code for collaborative writing from it. I have experience using websockets to build a chat app, and i read what nodes/fragments .etc are in the documentation. And I know how to setup normal editor using Prosemirror now, but not able to figure out collaborative writing.
One more doubt. I am using Prosemirror collaborate feature in my localhost and it works pretty well. But i read somewhere that Prosemirror will not work on distributed system.
I am running my website in Google Cloud App Engine and they use multiple servers to run an app. Is this going to be a problem with running Prosemirror properly?
The collaboration protocol isn’t distributed yes, so you’ll have to set up a scheme where each document has a single coordinating server that determines the order in which changes are applied.
Okay. Based on my experience level, that sounds a little tricky
Checking out your code for collab, i see that you are saving all the data into a json file named "demo-instances.json"
If instead, i save it into a mongodb database will it work in a distributed system?
I’m not going to walk you through an implementation here. If you want to build a collaborative editing system, you’re going to have to figure out how it works yourself.
“I do not enlighten those who are not eager to learn, nor arouse those who are not anxious to give an explanation themselves. If I have presented one corner of the square and they cannot come back to me with the other three, I should not go over the points again.”
@nradam123 We’ve just implemented this at my workplace, and one of the discoveries we made during our implementation that might be useful for you is the Firebase plugin, which should theoretically let you stand up your own collaborative editor very quickly.
I haven’t actually tested it, as we’re not on the Google cloud platform, but might be worth looking at:
@mikeb Oh thanks, that looks interesting. If that plugin works then I can hook it up into my Google Cloud and be live pretty quickly
I have been trying to implement a websocket in the collab module for past 3-4 days but it will take more time as there are a lot of new concepts in the documentation which i am still only getting used to. But a realtime database should do the trick too. Thanks!
I figured out how to implement collaborative editing in mt project … finally.
What helped me a lot was reading EloquentJavascript (http://eloquentjavascript.net/) Chapter 21. Once you understand that chapter, you will also understand the implementation in collab demo.
But its a tough read. In my case I had to start from chapter 1 and finish the whole book to get a good grasp of the code. It took me around 45 days of 3-4 hours a day to do that. There are a ton of useful exercises which will help to sharepen your JS sword And its fun and challenging for beginners.
Things that you can do are -
Change the authors router and use express instead.
Use websockets instead of long polling. This is actually surprisingly easy with socket.io.
Save the changes into a database. I used mongodb using mongoose.
Alright, hope that helps. There is no easy to road to code lol, eloquentJS is hands down the best book available to learn basic JS and learning Chapter 21 in that will help in implementation of collab.
PS: If anyone want me share the Chapter 21 project-code that is modified to use express, mongodb and socket.io … do reply here. I will find some time to save it in github and post a link here I am not in a position to share the collab code with that implementation as I will have to discuss with my team for the same.
I have been trying to implement a websocket in the collab module for past 3-4 days but it will take more time as there are a lot of new concepts in the documentation which i am still only getting used to. But a realtime database should do the trick too. Thanks!