ReactQuill triggers onChange events on initialization when text contains both font-size and background-color styles

[leon-plackal]

The issue appears to be related to CSS property reordering during Quill's internal HTML normalization. When Quill processes the initial content, it may reorder CSS properties (e.g., from style="font-size: 16px; background-color: yellow;" to style="background-color: yellow; font-size: 16px;"), which triggers the onChange detection mechanism.

I had the options of font size and font backgrounds being applied in my editor (both applied to the span's style), but when both were applied together to some text, i noticed the onChange gets triggered on load.

A solution that worked for me was instead of registering the font size as a style, make it class instead:

replace: const Size = Quill.import('attributors/style/size');
with: const Size = Quill.import('attributors/class/size');

and register as usual:

Size.whitelist = ['8px', '10px', '12px', '14px', '16px'];
Quill.register(Size, true);

and in your css file you should define your classes:

.ql-size-8px { font-size: 8px !important; }
.ql-size-10px { font-size: 10px !important; }
.ql-size-12px { font-size: 12px !important; }
.ql-size-14px { font-size: 14px !important; }
.ql-size-16px { font-size: 16px !important; }

This works because now the span will not contain 2 styles together in the style attribute but one in style and one inside the class:
<span style="background-color: rgb(204, 232, 204);" class="ql-size-10px">text</span>

I assume this issue extends to all cases where more that 1 style gets applied to the style attribute so this solution may not always be possible, so perhaps some permanent fix is needed.