slate-yjs

Slate Yjs - Live Demo

Yjs bindings for Slate.

Heavily inspired by slate-collaborative

Installation

Via npm:

npm install slate-yjs

Via yarn:

yarn add slate-yjs

Why use slate-yjs over slate-collaborative?

Performance. slate-collaborative works well for small documents but can cause 20 seconds + load times on heavier ones which slate-yjs can load in a fraction of a second.

For a more in-depth comparison take a look at these benchmarks

You might also want to take a look at "CRDTs are the future" from the creator of sharedb

API

YjsEditor

Adding a 2-way binding from the editor to a Yjs document is as easy as:

import { withYjs, SyncElement } from 'slate-yjs';
import * as Y from 'yjs';

const doc = new Y.Doc();
const sharedType = doc.getArray<SyncElement>('content');
const yjsEditor = withYjs(editor, sharedType);

Cursors

Slate-yjs support syncing collaborative cursors using awareness:

import { withCursor, useCursors } from 'slate-yjs';

// Adds (and syncs) cursor information (anchor, focus) to the awareness local state.
const cursorEditor = withCursor(yjsEditor, provider.awareness);

// Returns a decorator that annotates text nodes with cursor information and
// a array containing all cursor information.
const { decorate, cursors } = useCursors(cursorEditor);

Example project

Take a look at the example project here

Contribute

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

1. Fork the repo on GitHub
2. Clone the project to your machine
3. Commit changes to your branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!