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

1import { ySyncPlugin, yCursorPlugin, yUndoPlugin, undo, redo, initProseMirrorDoc } from 'y-prosemirror'
2import { exampleSetup } from 'prosemirror-example-setup'
3import { keymap } from 'prosemirror-keymap'
4..
5
6const type = ydocument.get('prosemirror', Y.XmlFragment)
7const { doc, mapping } = initProseMirrorDoc(type, schema)
8
9const prosemirrorView = new EditorView(document.querySelector('#editor'), {
10  state: EditorState.create({
11    doc,
12    schema,
13    plugins: [
14        ySyncPlugin(type, { mapping }),
15        yCursorPlugin(provider.awareness),
16        yUndoPlugin(),
17        keymap({
18          'Mod-z': undo,
19          'Mod-y': redo,
20          'Mod-Shift-z': redo
21        })
22      ].concat(exampleSetup({ schema }))
23  })
24})

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:

1example.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.

1/* this is a rough fix for the first cursor position when the first paragraph is empty */
2.ProseMirror > .ProseMirror-yjs-cursor:first-child {
3  margin-top: 16px;
4}
5.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 {
6  margin-top: 16px
7}
8/* This gives the remote user caret. The colors are automatically overwritten*/
9.ProseMirror-yjs-cursor {
10  position: relative;
11  margin-left: -1px;
12  margin-right: -1px;
13  border-left: 1px solid black;
14  border-right: 1px solid black;
15  border-color: orange;
16  word-break: normal;
17  pointer-events: none;
18}
19/* This renders the username above the caret */
20.ProseMirror-yjs-cursor > div {
21  position: absolute;
22  top: -1.05em;
23  left: -1px;
24  font-size: 13px;
25  background-color: rgb(250, 129, 0);
26  font-family: serif;
27  font-style: normal;
28  font-weight: normal;
29  line-height: normal;
30  user-select: none;
31  color: white;
32  padding-left: 2px;
33  padding-right: 2px;
34  white-space: nowrap;
35}

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

1/**
2 * This function receives the remote users "user" awareness state.
3 */
4export const myCursorBuilder = user => {
5  const cursor = document.createElement('span')
6  cursor.classList.add('ProseMirror-yjs-cursor')
7  cursor.setAttribute('style', `border-color: ${user.color}`)
8  const userDiv = document.createElement('div')
9  userDiv.setAttribute('style', `background-color: ${user.color}`)
10  userDiv.insertBefore(document.createTextNode(user.name), null)
11  cursor.insertBefore(userDiv, null)
12  return cursor
13}
14
15const prosemirrorView = new EditorView(document.querySelector('#editor'), {
16  state: EditorState.create({
17    schema,
18    plugins: [
19        ySyncPlugin(type),
20        yCursorPlugin(provider.awareness, { cursorBuilder: myCursorBuilder }),
21        yUndoPlugin(),
22        keymap({
23          'Mod-z': undo,
24          'Mod-y': redo,
25          'Mod-Shift-z': redo
26        })
27      ].concat(exampleSetup({ schema }))
28  })
29})

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.

1import { prosemirrorToYDoc } from 'y-prosemirror'
2
3// Pass JSON previously output from Prosemirror
4const doc = Node.fromJSON(schema, {
5  type: "doc",
6  content: [...]
7})
8const ydoc = prosemirrorToYDoc(doc)

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

1import { prosemirrorJSONToYDoc } from 'y-prosemirror'
2
3// Pass JSON previously output from Prosemirror
4const ydoc = prosemirrorJSONToYDoc(schema, {
5  type: "doc",
6  content: [...]
7})

1import { yDocToProsemirror } from 'y-prosemirror'
2
3// apply binary updates from elsewhere
4const ydoc = new Y.Doc()
5ydoc.applyUpdate(update)
6
7const 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.

1import { yDocToProsemirrorJSON } from 'y-prosemirror'
2
3// apply binary updates from elsewhere
4const ydoc = new Y.Doc()
5ydoc.applyUpdate(update)
6
7const 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.

1tr.setMeta("addToHistory", false);

License

The MIT License © Kevin Jahns