Y-richtext NPM

Rich Text type for Yjs

The fabolous 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 http://quilljs.com/docs/deltas/
applyDelta()
- Apply a Quill delta http://quilljs.com/docs/deltas/