y-quill

Quill Editor binding for Yjs - Demo

This binding maps a Y.Text to a Quill instance. It optionally supports shared cursors via the quill-cursors module.

Example

1import { QuillBinding } from 'y-quill'
2import Quill from 'quill'
3import QuillCursors from 'quill-cursors'
4
5..
6
7Quill.register('modules/cursors', QuillCursors)
8
9const type = ydoc.getText('quill')
10
11var editor = new Quill('#editor-container', {
12  modules: {
13    cursors: true,
14    toolbar: [
15      [{ header: [1, 2, false] }],
16      ['bold', 'italic', 'underline'],
17      ['image', 'code-block']
18    ]
19  },
20  placeholder: 'Start collaborating...',
21  theme: 'snow' // or 'bubble'
22})
23
24// Optionally specify an Awareness instance, if supported by the Provider
25const binding = new QuillBinding(type, editor, provider.awareness)
26
27/*
28// Define user name and user name
29// Check the quill-cursors package on how to change the way cursors are rendered
30provider.awareness.setLocalStateField('user', {
31  name: 'Typing Jimmy',
32  color: 'blue'
33})
34*/
35

Also look here for a working example.

License

The MIT License © Kevin Jahns