prosemirror-collab

What is prosemirror-collab?

The prosemirror-collab package provides collaborative editing functionality for ProseMirror, a toolkit for building rich-text editors. It allows multiple users to edit the same document simultaneously, with changes being synchronized in real-time.

What are prosemirror-collab's main functionalities?

Collaboration Plugin

This code sets up a ProseMirror editor with the collaboration plugin enabled. It initializes the editor state with a document and includes the collab plugin to handle collaborative editing.

const { collab, receiveTransaction, sendableSteps, getVersion } = require('prosemirror-collab');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
const { Schema, DOMParser } = require('prosemirror-model');
const { schema } = require('prosemirror-schema-basic');
const { exampleSetup } = require('prosemirror-example-setup');

let doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let state = EditorState.create({
  doc,
  plugins: exampleSetup({ schema }).concat(collab({ version: 0 }))
});

let view = new EditorView(document.querySelector('#editor'), { state });

Receiving Transactions

This function receives transactions from other collaborators and applies them to the editor state. It uses the receiveTransaction function from the prosemirror-collab package.

function receiveCollabTransaction(view, steps, clientIDs) {
  let tr = receiveTransaction(view.state, steps, clientIDs);
  view.updateState(view.state.apply(tr));
}

Sending Steps

This function checks if there are any steps to be sent to the server for synchronization. It uses the sendableSteps function from the prosemirror-collab package.

function sendCollabSteps(view) {
  let sendable = sendableSteps(view.state);
  if (sendable) {
    // Send sendable.steps and sendable.clientID to the server
  }
}

Getting Document Version

This function retrieves the current version of the document being edited. It uses the getVersion function from the prosemirror-collab package.

function getDocVersion(view) {
  return getVersion(view.state);
}

Other packages similar to prosemirror-collab

yjs

Yjs is a high-performance CRDT (Conflict-free Replicated Data Type) for building collaborative applications. It provides real-time synchronization and offline editing capabilities. Compared to prosemirror-collab, Yjs offers more flexibility and can be used with various data structures and editors, not just ProseMirror.

sharedb

ShareDB is a real-time database backend based on Operational Transformation (OT). It allows multiple users to edit the same document simultaneously and synchronizes changes in real-time. ShareDB is more general-purpose compared to prosemirror-collab and can be used with different types of data and editors.

automerge

Automerge is a library for building collaborative applications using CRDTs. It provides automatic conflict resolution and real-time synchronization. Automerge is similar to Yjs in that it offers more general-purpose CRDT functionality, whereas prosemirror-collab is specifically designed for ProseMirror editors.

README

prosemirror-collab

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This is a core module of ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements a plugin that helps track and merge changes for collaborative editing.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

1.3.1 (2023-05-17)

Bug fixes

Include CommonJS type declarations in the package to please new TypeScript resolution settings.