Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
y-prosemirror
Advanced tools
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.
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
});
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 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 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.
ProseMirror Binding for Yjs - Demo
This binding maps a Y.XmlFragment to the ProseMirror state.
import { ySyncPlugin, yCursorPlugin, yUndoPlugin, undo, redo } from 'y-prosemirror'
import { exampleSetup } from 'prosemirror-example-setup'
import { keymap } from 'prosemirror-keymap'
..
const type = ydocument.get('prosemirror', Y.XmlFragment)
const prosemirrorView = new EditorView(document.querySelector('#editor'), {
state: EditorState.create({
schema,
plugins: [
ySyncPlugin(type),
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.
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 }))
})
})
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)
The MIT License © Kevin Jahns
FAQs
Prosemirror bindings for Yjs
The npm package y-prosemirror receives a total of 97,108 weekly downloads. As such, y-prosemirror popularity was classified as popular.
We found that y-prosemirror demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.