The order of attributes changes after setting html content

Steps for Reproduction

1. Open this codepen: https://codepen.io/kwintenp/pen/bZwXPd?=true (with some minimal config)
2. Fill in the word ‘test’
3. Select the word and make it red first
4. Make it ‘small’
5. Open the console and see the following logged out (because of the text-change event listener): <p><span style="color: rgb(230, 0, 0);" class="ql-size-small">test</span></p> The style attribute stands before the class attribute.
6. Scroll to the bottom of the javascript in codepen
7. Fill in the string that was logged to the console inside the quill.clipboard.dangerouslyPasteHTML function.
8. Check the console and see the following logged out (because of the text-change event) <p><span class="ql-size-small" style="color: rgb(230, 0, 0);">test</span></p>

Expected behavior: The order of the class and style attributes is kept as passed to quill.clipboard.dangerouslyPasteHTML OR The order generated in step 5 is already first ‘class’ then ‘style’ attribute.

Actual behavior: The order of class and style has changed. Platforms: Chrome Version 72.0.3626.109 (Official Build) (64-bit), OS X 10.13.6 (17G2112)

Version: 1.3.6

[mix3d]

@benbro I disagree with your response. I am in a project where I need to know if the value has changed. Pasting the html input with one attribute order, (the output of a different instance of Quill) causes the order to be different, which means I can’t equality check further up the chain.

Quill’s dangerouslyPasteHTML should be deterministic. Instead, I get the following:

Paste: <p><span style="color: rgb(0, 0, 0); font-size: 9pt;">content</span></p>
Output: <p><span style="font-size: 9pt; color: rgb(0, 0, 0);">content</span></p>

since they are different, the input has changed, so I need to update the value of the Quill component.

Paste: <p><span style="font-size: 9pt; color: rgb(0, 0, 0);">content</span></p>
Output: <p><span style="color: rgb(0, 0, 0); font-size: 9pt;">content</span></p>

Creates an infinite loop.

Since I need to store the value as HTML in our database, working with the Deltas does not work. I cannot check just the text value, since we need to capture formatting only changes.

Noticing that the output is consistently switching the order of the values, I wonder if there is an issue in the parser looping through the attribute array in a backwards order. Even if the output was “we sort them alphabetically”, SOME kind of deterministic output is very much needed.

[amatiash]

@lardissone

const delta = this.textEditor.quill.getContents()
const diff  = delta.diff(this.initialDelta)

if(!diff.ops.length)
    isPushAllowed = false