Non-deterministic order of formats applied results in inconsistent HTML

[thomsbg]

Adding multiple formats to a range of text requires looping through the attributes object. The order of key/value pairs yielded from a for in loop is not defined, which means that the resulting HTML can have different nesting of tags.

e.g. quill.setContents([ insert: 'abc', attributes: { bold: true, italic: true } })

can result in: <b><i>abc</i></b> or <i><b>abc</b></i>, depending on the weather.

This inconsistent behavior can also be observed by just using the toolbar or hotkeys. Select a range of text, and then apply 'bold', then 'italic'. You will see <b><i>abc</i></b>. Then, select a different range, and apply 'italic', then 'bold'. You will see <i><b>def</b></i>.

Ideally, the order in which you apply formats should not affect the resulting HTML. This is not such a big deal when it's just bold and italic, but I would always like the link format applied last, so that a document like

[
{ insert: 'abc', attributes: { link: 'x' } },
{ insert: 'def', attributes: { link: 'x', bold: true } },
{ insert: 'xyz', attributes: { link: 'x' } }
]

always results in HTML like: <a href="x">abc<b>def</b>xyz</a>,
instead of <a href="x">abc</a><b><a href="x">def</a></b><a href="x">xyz</a>.

The normalizer should be able to rearrange the resulting HTML to nest tags in a specific order.

[jhchen]

Related #61

[jhchen]

This has been fixed in the 1.0 beta release.