Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
prosemirror-collab
Advanced tools
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.
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);
}
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 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 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.
[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]
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 demos and the documentation.
NOTE: This project is in BETA stage. It isn't thoroughly tested,
and the API might still change across 0.x
releases. You are welcome
to use it, but don't expect it to be very stable yet.
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.
FAQs
Collaborative editing for ProseMirror
The npm package prosemirror-collab receives a total of 768,302 weekly downloads. As such, prosemirror-collab popularity was classified as popular.
We found that prosemirror-collab demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.