@lexical/yjs
Advanced tools
@lexical/yjs is an npm package that integrates Lexical, a text editor framework, with Yjs, a real-time collaboration framework. This package allows developers to create collaborative text editing experiences where multiple users can edit the same document simultaneously with real-time updates.
Real-time Collaboration
This feature allows multiple users to collaborate on the same document in real-time. The code sample demonstrates how to set up a Lexical editor with Yjs WebSocket provider to enable real-time collaboration.
const { createEditor } = require('lexical');
const { WebsocketProvider } = require('y-websocket');
const { yjsPlugin } = require('@lexical/yjs');
const editor = createEditor();
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'my-roomname', editor);
editor.registerPlugin(yjsPlugin(provider));Conflict Resolution
This feature ensures that any conflicts that arise during real-time collaboration are automatically resolved. The code sample shows how to listen for the 'synced' event to confirm that all conflicts have been resolved.
const { createEditor } = require('lexical');
const { WebsocketProvider } = require('y-websocket');
const { yjsPlugin } = require('@lexical/yjs');
const editor = createEditor();
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'my-roomname', editor);
editor.registerPlugin(yjsPlugin(provider));
provider.on('synced', (isSynced) => {
if (isSynced) {
console.log('All conflicts have been resolved.');
}
});Offline Editing
This feature allows users to continue editing the document even when they are offline. The code sample demonstrates how to set up IndexedDB persistence to enable offline editing.
const { createEditor } = require('lexical');
const { IndexeddbPersistence } = require('y-indexeddb');
const { yjsPlugin } = require('@lexical/yjs');
const editor = createEditor();
const persistence = new IndexeddbPersistence('my-database', editor);
editor.registerPlugin(yjsPlugin(persistence));slate-yjs integrates Slate, another text editor framework, with Yjs for real-time collaboration. Similar to @lexical/yjs, it allows multiple users to edit the same document simultaneously. However, it is designed specifically for use with the Slate editor.
@lexical/yjsThis package provides a set of bindings for Y.js that allow for collaborative editing with Lexical.
0.4.0 (September 3, 2022)
editor.isReadyOnly -> editor.isEditable() editor.setReadyOnly -> editor.setEditable() editor.registerReadOnlyListener -> editor.registerEditableListener() editor config { readOnly: true } -> { editable: boolean }
https://github.com/facebook/lexical/pull/2912
The "dependencies" property is now required for custom markdown Element and TextMatch Transformers. It takes an array of LexicalNode subclasses and asserts that they're available in the editor when transforms are registered.
https://github.com/facebook/lexical/pull/2910
Lexical will now track and update selection in response to DOM selectionchange events when editor.isEditable is false. This is necessary for enabling some behavior such as commenting via marks, but may cause other indirect changes such as update listeners firing when they didn't previously.
addTransform with registerNodeTransform in transforms doc (#2882) Kevin AnsfieldFAQs
The library provides Yjs editor bindings for Lexical.
The npm package @lexical/yjs receives a total of 219,563 weekly downloads. As such, @lexical/yjs popularity was classified as popular.
We found that @lexical/yjs 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.