JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17
  • Score
    100M100P100Q54576F
  • License MIT

RichText Type for Yjs

Package Exports

  • y-richtext

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (y-richtext) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.