How to use Meteor to make a collaborative notepad?

Hello all. I would like to create a notepad where many people can write on it.

Does anyone know how I could do that or point me in the right direction of the information.

Thanks,

Kris

This could help you get going:

https://atmospherejs.com/mizzao/sharejs

2 Likes

This is a very complex subject with quite a few different approaches that could be taken based on your requirements. If you just need plain-text in your notepad then the sharejs integration @serkandurusoy pointed you to is probably the best bet. If you need something that supports rich-text in some way then things get quite a bit trickier.

You may want to familiarize yourself with operational transform and the alternatives listed at the bottom of the page (CRDT’s, differential syncronization, diff-match-patch etc…). These will help learn the terms often used when discussing real-time collaborative editing solutions.

See also a post I started discussing some of this and the responses there.

2 Likes

@ksistrunk Kris, not sure if you are still interested in embarking on this but @efrancis and I started this type of effort with Prosemeteor which essentially adds a back-end for Prosemirror.

If you are still interested we’re more than happy to add contributors.

Any progress on this? Having some sort of a solution would be an amazing addition to Meteor.

Hi, we’re using ShareDB integrated with Meteor very extensively. We have collaborative text boxes, collaborative forms etc. You can see some examples here https://www.youtube.com/watch?v=5cSc4v9Y2P4. Happy to discuss how we do it (all our code is public, but this is kind of baked into our code, however to get simple functionality in your app wouldn’t be that hard).

1 Like

Hi All,

Thanks for your responses. I have a question.
CK Editor 5 was recently release which also has collaboration. Has anyone checked out the feasability of that. Is it only possible using their own cloud services or can we use it with Meteor/Mongo etc.

Thanks,

Kris

Wow, nice work! Are you also using some WYSIWYG editor (haven’t seen one on my quick look)? Also, what are your thoughts on integrating ShareDB web sockets into existing Meteor ones? I’m guessing that ShareDB needs its own MongoDB database and it probably isn’t the best idea to integrate withing existing one that is used for the Meteor app.

CK Editor 5 looks neat. Kind of given with their experiences.

As far as I looked integrating the collaborative function with Meteor doesn’t seem to be a simple thing at this point and I doubt that it will be in the future (though you can try to make a feature request). The main reason is that the server code (which is the most difficult one aka ShareDB) is proprietary and understandably they will charge for the service. Theoretically, you could setup ShareDB on Meteor and try to plug together with the editor.

Hi. We don’t have rich text writing enabled right now, but we are planning to add it, there are plugins from ShareDB to Quill for rich text. To me what is great about ShareDB is that we’re using the json type very extensively for collaboration in rich activities - so it’s much more than just collaborative editing (collaborative voting, ranking, concept maps etc).

The one thing I could never figure out is how to piggyback on the Meteor websockets, so we set up a second websocket connection (which does lead to some complications with mup etc, but nothing we can’t solve). However, there is no problem with reusing the same Mongo server, and we also run the ShareDB code within the Meteor process (only a few lines to add a SharedB listener).

I think it would have been a great idea for Meteor to integrate something like this in the core, because it’s fantastically useful, and the backend is anyway Mongo documents, but I guess it will never happen, and in the meantime, we manage quite well.

1 Like

Interesting. Thanks for the info! It would be really nice if we could have this functionality in core as it would complement what is already there, but as you said that is unlikely to happen any time soon as there are more pressing requests and needs.

This just popped up on Atmosphere:
https://atmospherejs.com/synthfx/meteor-collaboration

We have made a lot of progress on this - we currently have Quill working, I’m just looking at shared cursors etc. Latest demo https://www.youtube.com/watch?v=9-lU-in3ydc

1 Like

Is anyone aware of a markdown-based, Blaze friendly editor?

@houshuang Hi! I saw your video while searching for a similar topic as this one, and around 1:57 in your first video where it shows the collaborative lists with editing, thumbs up/thumbs down, etc. is exactly what I’m looking to make. Would you be able to provide any guidance or help on how to develop that part specifically? That live chat would also be cool.

All the code is here: https://github.com/chili-epfl/FROG. The voting list code is at https://github.com/chili-epfl/FROG/tree/develop/ac/ac-brainstorm

I’ve recently released @chilifrog/reactive-tools (in the branch reactive-tools in the repo above, or on NPM), a hook to easily let React components access and modify ShareDB state. Needs more polish and documentation.

Anyway these are very easy things to do with ShareDB (and indeed, you could also do them with pure Meteor, since they are more or less atomic actions - collaborative writing is more complex, and requires something like ShareDB).

Let me know if you have more specific questions.

1 Like