y-richtext

    9.0.8 • Public • Published

    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()
    • applyDelta()

    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.

    Install

    npm i y-richtext

    DownloadsWeekly Downloads

    16

    Version

    9.0.8

    License

    MIT

    Homepage

    y-js.org

    Last publish

    Collaborators

    • avatar