prosemirror-collaborationserver icon indicating copy to clipboard operation
prosemirror-collaborationserver copied to clipboard

TipTap socket server for collaboration plugins

Prosemirror Collaboration Socket Server

This socket server manages your collaboration communication between your editors participants.

It handles multiple documents in parallel and shows also your participants position. It's all ready to run in a Docker instance or Heroku.

An exampleimplementation with vue.js and tiptap can be found here: https://tiptap-collaboration-demo.netlify.com/

screencapture

See full video here : https://www.youtube.com/watch?v=wNdEUkifCao

Requirements

  • Docker

Document

Every Document has his own Socket.io namespace.

Usage

Events

On update

This event is triggered when a participants has a updated his local document.

  • emits update

On disconnect

A participant hast diconnected. Provide your participants with a actual list of participants.

  • emits getCount
  • emits cursorupdate

On cursorchange

A participant has changed his cursor position.

  • emits cursorupdate

Emit cursorupdate

Let all your participants know, where your current position is.

Emit getCount

Send the current connected participants.

Emit udpate

Send the lates Version of the document to the participants.

Clientside socket setup

	this.socket = io('ws://localhost:3000/dynamic-99')
	  // get the current document and its version
	  .on('init', data => this.onInit(data))
	  // send all updates to the collaboration extension
	  .on('update', data => this.editor.extensions.options.collaboration.update(data))
	  // get count of connected users
	  .on('getCount', count => this.setCount(count))
	  // update Cursor position of collaborators
	  .on('cursorupdate', participants => {
	  	this.editor.extensions.options.participants.update(participants)
	  	this.setParticipants(participants)
	  })

TODO

  • [ ] add mongodb support
  • [ ] global participants list (currently only per document)
  • [ ] improve logging and remove console.log() messages