y-quill
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

import { QuillBinding } from 'y-quill'
import Quill from 'quill'
import QuillCursors from 'quill-cursors'

..

Quill.register('modules/cursors', QuillCursors)

const type = ydoc.getText('quill')

var editor = new Quill('#editor-container', {
  modules: {
    cursors: true,
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Start collaborating...',
  theme: 'snow' // or 'bubble'
})

// Optionally specify an Awareness instance, if supported by the Provider
const binding = new QuillBinding(type, editor, provider.awareness)

/*
// Define user name and user name
// Check the quill-cursors package on how to change the way cursors are rendered
provider.awareness.setLocalStateField('user', {
  name: 'Typing Jimmy',
  color: 'blue'
})
*/

Also look here for a working example.

License

The MIT License © Kevin Jahns

Readme

Keywords

Package Sidebar

Install

npm i y-quill

Weekly Downloads

2,187

Version

1.0.0

License

MIT

Unpacked Size

9.36 MB

Total Files

13

Last publish

Collaborators

  • dmonad