How to flatten Quill delta output? - quill

Question

Quill seems to present data output as deltas to build up the document incrementally. This is useful for Undo purpose or while the document is being edited. But after the document is saved, this deltas output is not helpful at all, has high overhead to store and hard to traverse the document structurally.
Example, the content of a single code block would be:
while (1) {
i++;
j++;
}
And the delta outputs
ops: Array(8)
0: {insert: "↵while (1) {"}
1: {attributes: {…}, insert: "↵"}
2: {insert: " i++;"}
3: {attributes: {…}, insert: "↵"}
4: {insert: " j++;"}
5: {attributes: {…}, insert: "↵"}
6: {insert: "}"}
7: {attributes: {…}, insert: "↵"}
length: 8
How do I flatten delta outputs to a simpler output that presents the document structurally. In this case, a single insert with "code block" attribute ?

Answer 1

You can use the Delta.compose method to flatten changes.
Here's an example from the documentation:
const a = new Delta().insert('abc');
const b = new Delta().retain(1).delete(1);
const composed = a.compose(b); // composed == new Delta().insert('ac');
There is another example of how to use this in the Autosave playground sample.