Rich Text type for Yjs

The fabulous feature of y-richtext is that you can bind it to a Quill instance (> v1.0.0) in order to enable collaborative richtext editing.

Use it!

Bower

Retrieve y-richtext and Quill Editor with bower.

bower install y-richtext quill --save

NPM

npm install y-richtext y-array quill --save

This type depends on y-array. So you have to extend Yjs in the right order:

var Y = require('yjs')
require('y-array')(Y)
require('y-richtext')(Y)

Example

Y({
  db: {
    name: 'memory'
  },
  connector: {
    name: 'websockets-client',
    room: 'richtext-example'
  },
  share: {
    richtext: 'Richtext' // y.share.richtext is of type Y.Richtext
  }
}).then(function (y) {
  window.yquill = y

  // create quill element
  window.quill = new Quill('#editor', {
    modules: {
      'toolbar': { container: '#toolbar' },
      'link-tooltip': true
    },
    theme: 'snow'
  })
  // bind quill to richtext type
  y.share.richtext.bindQuill(window.quill)
})

RichText Object

Reference

• .bind(editor)
  • Bind this type to an rich text editor. (Currently, only QuillJs is supported)
  • .bind(editor) does not preserve the existing value of the bound editor
• .bindQuill(quill)
  • Explicitely bind a Quill editor
• unbindQuill(quill)
  • Remove binding
• unbindQuillAll()
  • Remove all quill bindings
• .insert(position, string)
  • Insert text at a position
• .delete(position, length)
  • Delete text
• select(from, to, attrName, attrValue)
  • Assign meaning to a selection of text (application depending to what you bind, this can assign text to be bold, italic, ..). Set null to remove selection.
• toString()
  • Get the string representation of this type (without selections)
• toDelta()
  • Convert internal structure to a Quill delta https://quilljs.com/docs/delta/
• applyDelta()
  • Apply a Quill delta https://quilljs.com/docs/delta/

Contribution

We thank Linagora who sponsored this work, and agreed to publish it as Open Source.

Changelog

8.2.1

• support for Quill@^1.0.0-rc.2
• relies on Yjs@^12.0.0

License

Yjs and the RichText type are licensed under the MIT License.

• Corentin Cadiou [email protected]
• Kevin Jahns [email protected]