y-prosemirror

What is y-prosemirror?

The y-prosemirror package is a binding for ProseMirror, a toolkit for building rich-text editors, to Yjs, a high-performance CRDT (Conflict-free Replicated Data Type) for building collaborative applications. This package allows you to create collaborative rich-text editors that can be used in real-time by multiple users.

What are y-prosemirror's main functionalities?

Collaborative Editing

This code sets up a ProseMirror editor with Yjs bindings, enabling collaborative editing. The ySyncPlugin synchronizes the editor state with a Yjs document, yCursorPlugin shows the cursor positions of other users, and yUndoPlugin adds undo/redo functionality.

const Y = require('yjs');
const { ySyncPlugin, yCursorPlugin, yUndoPlugin, undo, redo } = require('y-prosemirror');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
const { schema } = require('prosemirror-schema-basic');

const ydoc = new Y.Doc();
const yXmlFragment = ydoc.getXmlFragment('prosemirror');

const state = EditorState.create({
  schema,
  plugins: [
    ySyncPlugin(yXmlFragment),
    yCursorPlugin(ydoc),
    yUndoPlugin()
  ]
});

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

Undo/Redo Functionality

This code demonstrates how to use the undo and redo functions provided by y-prosemirror to manage undo/redo actions in a collaborative editor.

const { undo, redo } = require('y-prosemirror');

// To undo the last change
undo(view.state, view.dispatch);

// To redo the last undone change
redo(view.state, view.dispatch);

Cursor Synchronization

This code sets up cursor synchronization in a collaborative ProseMirror editor using the yCursorPlugin. It shows the cursor positions of other users in real-time.

const { yCursorPlugin } = require('y-prosemirror');

const ydoc = new Y.Doc();
const yXmlFragment = ydoc.getXmlFragment('prosemirror');

const state = EditorState.create({
  schema,
  plugins: [
    ySyncPlugin(yXmlFragment),
    yCursorPlugin(ydoc)
  ]
});

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

Other packages similar to y-prosemirror

tiptap

Tiptap is a headless, framework-agnostic, and collaborative editor built on top of ProseMirror. It provides a more modern and flexible API compared to y-prosemirror and includes built-in support for collaborative editing using Yjs.

quill

Quill is a powerful, rich text editor that offers a variety of features for building collaborative applications. While it does not natively support Yjs, it can be integrated with Yjs for collaborative editing, similar to y-prosemirror.

slate

Slate is a completely customizable framework for building rich text editors. It provides a more flexible and extensible API compared to ProseMirror. Like Quill, it can be integrated with Yjs for collaborative editing.

README

y-prosemirror

ProseMirror Binding for Yjs - Demo

This binding maps a Y.XmlFragment to the ProseMirror state.

Features

• Sync ProseMirror state
• Shared Cursors
• Shared Undo / Redo (each client has its own undo-/redo-history)
• Successfully recovers when concurrents edit result in an invalid document schema

Example

import { ySyncPlugin, yCursorPlugin, yUndoPlugin, undo, redo, initProseMirrorDoc } from 'y-prosemirror'
import { exampleSetup } from 'prosemirror-example-setup'
import { keymap } from 'prosemirror-keymap'
..

const type = ydocument.get('prosemirror', Y.XmlFragment)
const { doc, mapping } = initProseMirrorDoc(type, schema)

const prosemirrorView = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({
    doc,
    schema,
    plugins: [
        ySyncPlugin(type, { mapping }),
        yCursorPlugin(provider.awareness),
        yUndoPlugin(),
        keymap({
          'Mod-z': undo,
          'Mod-y': redo,
          'Mod-Shift-z': redo
        })
      ].concat(exampleSetup({ schema }))
  })
})

Also look here for a working example.

Remote Cursors

The shared cursors depend on the Awareness instance that is exported by most providers. The Awareness protocol handles non-permanent data like the number of users, their user names, their cursor location, and their colors. You can change the name and color of the user like this:

example.binding.awareness.setLocalStateField('user', { color: '#008833', name: 'My real name' })

In order to render cursor information you need to embed custom CSS for the user icon. This is a template that you can use for styling cursor information.

/* this is a rough fix for the first cursor position when the first paragraph is empty */
.ProseMirror > .ProseMirror-yjs-cursor:first-child {
  margin-top: 16px;
}
.ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
  margin-top: 16px
}
/* This gives the remote user caret. The colors are automatically overwritten*/
.ProseMirror-yjs-cursor {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-color: orange;
  word-break: normal;
  pointer-events: none;
}
/* This renders the username above the caret */
.ProseMirror-yjs-cursor > div {
  position: absolute;
  top: -1.05em;
  left: -1px;
  font-size: 13px;
  background-color: rgb(250, 129, 0);
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  user-select: none;
  color: white;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}

You can also overwrite the default Widget dom by specifying a cursor builder in the yCursorPlugin

/**
 * This function receives the remote users "user" awareness state.
 */
export const myCursorBuilder = user => {
  const cursor = document.createElement('span')
  cursor.classList.add('ProseMirror-yjs-cursor')
  cursor.setAttribute('style', `border-color: ${user.color}`)
  const userDiv = document.createElement('div')
  userDiv.setAttribute('style', `background-color: ${user.color}`)
  userDiv.insertBefore(document.createTextNode(user.name), null)
  cursor.insertBefore(userDiv, null)
  return cursor
}

const prosemirrorView = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({
    schema,
    plugins: [
        ySyncPlugin(type),
        yCursorPlugin(provider.awareness, { cursorBuilder: myCursorBuilder }),
        yUndoPlugin(),
        keymap({
          'Mod-z': undo,
          'Mod-y': redo,
          'Mod-Shift-z': redo
        })
      ].concat(exampleSetup({ schema }))
  })
})

Utilities

The package includes a number of utility methods for converting back and forth between a Y.Doc and Prosemirror compatible data structures. These can be useful for persisting to a datastore or for importing existing documents.

Note: Serializing and deserializing to JSON will not store collaboration history steps and as such should not be used as the primary storage. You will still need to store the Y.Doc binary update format.

import { prosemirrorToYDoc } from 'y-prosemirror'

// Pass JSON previously output from Prosemirror
const doc = Node.fromJSON(schema, {
  type: "doc",
  content: [...]
})
const ydoc = prosemirrorToYDoc(doc)

Because JSON is a common usecase there is an equivalent method that skips the need to create a Prosemirror Node.

import { prosemirrorJSONToYDoc } from 'y-prosemirror'

// Pass JSON previously output from Prosemirror
const ydoc = prosemirrorJSONToYDoc(schema, {
  type: "doc",
  content: [...]
})

import { yDocToProsemirror } from 'y-prosemirror'

// apply binary updates from elsewhere
const ydoc = new Y.Doc()
ydoc.applyUpdate(update)

const node = yDocToProsemirror(schema, ydoc)

Because JSON is a common usecase there is an equivalent method that outputs JSON directly, this method does not require the Prosemirror schema.

import { yDocToProsemirrorJSON } from 'y-prosemirror'

// apply binary updates from elsewhere
const ydoc = new Y.Doc()
ydoc.applyUpdate(update)

const node = yDocToProsemirrorJSON(ydoc)

Undo/Redo

The package exports undo and redo commands which can be used in place of prosemirror-history by mapping the mod-Z/Y keys - see ProseMirror and Tiptap examples.

Undo and redo are be scoped to the local client, so one peer won't undo another's changes. See Y.UndoManager for more details.

Just like prosemirror-history, you can set a transaction's addToHistory meta property to false to prevent that transaction from being rolled back by undo. This can be helpful for programmatic document changes that aren't initiated by the user.

tr.setMeta("addToHistory", false);

License

The MIT License © Kevin Jahns