yonote/yjs
14
0
Fork 0
Code Pull Requests 1 Releases Activity

separate dom binding

Browse Source
This commit is contained in:
Kevin Jahns
2018-03-23 01:55:47 +01:00
parent acf443aacb
commit 026675b438
28 changed files with 1802 additions and 1212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/Bindings/QuillBinding/QuillBinding.js
View File

@@ -1,11 +1,14 @@
import Binding from './Binding.js'
import Binding from '../Binding.js'
function typeObserver (event) {
const quill = this.target
// Force flush Quill changes.
quill.update('yjs')
this._mutualExclude(function () {
// Apply computed delta.
quill.updateContents(event.delta, 'yjs')
quill.update('yjs') // ignore applied changes
// Force flush Quill changes. Ignore applied changes.
quill.update('yjs')
})
}
@@ -16,12 +19,14 @@ function quillObserver (delta) {
}
/**
* A Binding that binds a YText type to a Quill editor
* A Binding that binds a YText type to a Quill editor.
*
* @example
* const quill = new Quill(document.createElement('div'))
* const type = y.define('quill', Y.Text)
* const binding = new Y.QuillBinding(quill, type)
* const quill = new Quill(document.createElement('div'))
* const type = y.define('quill', Y.Text)
* const binding = new Y.QuillBinding(quill, type)
* // Now modifications on the DOM will be reflected in the Type, and the other
* // way around!
*/
export default class QuillBinding extends Binding {
/**
@@ -29,18 +34,18 @@ export default class QuillBinding extends Binding {
* @param {Quill} quill
*/
constructor (textType, quill) {
// Binding handles textType as this.type and quill as this.target
// Binding handles textType as this.type and quill as this.target.
super(textType, quill)
// set initial value
// Set initial value.
quill.setContents(textType.toDelta(), 'yjs')
// Observers are handled by this class
// Observers are handled by this class.
this._typeObserver = typeObserver.bind(this)
this._quillObserver = quillObserver.bind(this)
textType.observe(this._typeObserver)
quill.on('text-change', this._quillObserver)
}
destroy () {
// Remove everything that is handled by this class
// Remove everything that is handled by this class.
this.type.unobserve(this._typeObserver)
this.target.off('text-change', this._quillObserver)
super.destroy()