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.

• Fork the repo on GitHub
• Clone the project to your machine
• Commit changes to your branch
• Push your work back up to your fork
• 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!