Quill: The order of attributes changes after setting html content

[KwintenP]

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

[benbro]

You generally shouldn't rely on the order of HTML attributes like you shouldn't rely on key order in a Javascript object.
When working with Quill you should use the Delta format.

[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.

[GrimaceOfDespair]

Suffering from a similar issue while trying to use quill editor in an Angular 5 context. Within the same style attribute, the style properties order keeps switching and puts the application in an infinite change detection loop. In my case it toggles between:

<p><span style="background-color: rgb(254, 254, 254); color: rgb(0, 0, 0);">...</span></p>
<p><span style="color: rgb(0, 0, 0); background-color: rgb(254, 254, 254);">...</span></p>

The effect is that the (Chrome) browser window seems to be freezing, but not in a "browser not responding" way, where the browser would pro-actively ask you to kill the script - since it's not a tight loop. It just starts hogging CPU.

Using [email protected] here with [email protected].

[amkoehler]

@GrimaceOfDespair @mix3d ran into the same issue, which led me here. Did either of you find a workaround for this? I was considering overriding the background-color and color styles to use be classes instead of inline: https://quilljs.com/playground/#class-vs-inline-style.

[jchatel]

Same problem here. Isn't the fix in quill library to just add attributes in the opposite order that they are parsed? Is that so hard to create the same order in which the HTML adds? It's nice to say you should use quill content, but reality is that quill is a tool in a toolchain and storing quill format in the database because push instead of insert was used makes no sense.

[amatiash]

Why has this issue been closed??? I have the same issue @mix3d mentioned.
Did anybody found a walk-around?

[amatiash]

Ended up with retrieving and getting Delta diff.