quill integration

[benbro]

quill is an open source rich text editor based on contenteditable.
http://quilljs.com/
https://github.com/quilljs/quill/

The editor normalizes the DOM changes and create a delta with insert and retain ops every time you make a change:
http://quilljs.com/docs/editor/deltas/

Could this be integrated with ot.js?

Thanks

[Tim Baumann]

I've seen quill some days before you opened this issue and I'm very interested in testing it out. Writing a cross-browser rich-text editor that produces semantic html, looks good, has a nice programming and user interface, etc. is a hard problem. As far as I know, quill is the first library that supports all of this. The main reason why I haven't implemented a collaborative rich-text editor yet is that I didn't know this libary existed. If quill is as good as promised, implementing an operations type for it shouldn't be too hard. I'll have some time to try this in about two weeks.

[benbro]

Did you have a chance experimenting with quill?

I'm trying to understand it's delta and ops representation and it's a bit confusing.
They only have insert and retain ops. Delete ops are inferred.
The delta indexes are off by one compared to the ops indexes.

I don't understand where they store line attributes like list. Do they put it on the first char in a line? Do they update move the attributes to a different char if the previous char is not the first in the line any more?
FirePad adds a dummy hidden char to each line holding line attributes.

How do you suggest representing attributes on the wire protocol?
Maybe [["a", {bold: true}]] for inserting bold "a" and [5, {bold: true}] for retaining 5 chars and marking them as bold?

I'm attaching several examples of edits in quill and the resulting delta:

Insert "1" after ""

Delta{startLength=1, endLength=2, ops=[
    InsertOp{value="1", attributes={}},
    RetainOp{start=0, end=1, attributes={}}]

Insert "2" after "1"

Delta{startLength=2, endLength=3, ops=[
    RetainOp{start=0, end=1, attributes={}},
    InsertOp{value="2", attributes={}},
    RetainOp{start=1, end=2, attributes={}}]

Add "3" after "12"

Delta{startLength=3, endLength=4, ops=[
    RetainOp{start=0, end=2, attributes={}},
    InsertOp{value="3", attributes={}},
    RetainOp{start=2, end=3, attributes={}}]

Mark "1" as Bold

Delta{startLength=2, endLength=2, ops=[
    RetainOp{start=0, end=1, attributes={bold=true}},
    RetainOp{start=1, end=2, attributes={}}]

Remove Bold from "1"

Delta{startLength=2, endLength=2, ops=[
    RetainOp{start=0, end=1, attributes={bold=null}},
    RetainOp{start=1, end=2, attributes={}}]

Insert Bold "1" after ""

Delta{startLength=1, endLength=2, ops=[
    InsertOp{value="1", attributes={bold=true}},
    RetainOp{start=0, end=1, attributes={}}]

Click list in ""

Delta{startLength=1, endLength=1, ops=[
    RetainOp{start=0, end=1, attributes={list=true}}]

Remove list from "1. a"

Delta{startLength=2, endLength=2, ops=[
    RetainOp{start=0, end=1, attributes={}},
    RetainOp{start=1, end=2, attributes={list=null}}]

Remove list in "1."

Delta{startLength=2, endLength=2, ops=[
    RetainOp{start=0, end=1, attributes={list=null}}}]

[benbro]

An empty document starts with "\n".
Line attributes are saved on the "\n" character.

I couldn't find where the editor handles ack messages.
Is it possible that it just composes self messages?

[Blair MacNeil]

I'm interested in helping on quill.js integration. How can I help?

[✨ Kathryn Gonzalez ✨]

Any research done on this recently?

[benbro]

Are there plans for Quill support?
The new Delta in Quill is much nicer to work with.
http://quilljs.com/blog/a-new-delta/
They are removing trailing retains (not sure why) so this need to be taken into account.