refactor!: update to Quill v2.0 and use getSemanticHTML #9007

web-padawan · 2025-04-25T13:01:09Z

Description

Upgraded Quill to v2, branch in the fork: https://github.com/vaadin/quill/tree/vaadin-quill-v2
Replaced shadow selection polyfill with getComposedRanges() API available since Safari 17+
- Based on the prototype from Quill misbehaves inside of Shadow DOM slab/quill#4250 (comment)
Updated the htmlValue logic to use getSemanticHTML() API instead of innerHTML
- This has some known issues e.g. I had to add a hack for restoring spellcheck="false" on <pre> tag
- It also strips <code> tags e.g. when using dangerouslySetHtmlValue('<pre><code>123</code></pre>');
- Several issues with getSemanticHTML not preserving html represented in editor slab/quill#4289
Updated some tests where htmlValue contains   instead of regular whitespace
- This was implemented in Handle consecutive spaces when copying and pasting slab/quill#4502
- Affected a lot of users, see [2.0.3] getSemanticHTML is broken slab/quill#4509
- UPD: applied a workaround to the Quill fork - see the comment below.
Added styles for lists from Quill core (still missing indentation styles, could consider adding them later)
- Quill uses li[data-list='bullet'] > .ql-ui::before with content: '\\2022'; for bullets - replaced those with native list-style-type for now (didn't manage to get custom bullets use correct vertical alignment).

Type of change

Breaking change

TatuLund · 2025-04-25T13:20:35Z

Updated some tests where htmlValue contains instead of regular whitespace (is this a bug?)

@web-padawan Not a bug, but by design how some Quill internal tags were removed to clean the html value: #6434 So I think change is valid as Quill has now method to get html value instead of our own hack.

web-padawan · 2025-04-25T13:50:16Z

Not a bug, but by design how some Quill internal tags were removed to clean the html value: #6434

I'm talking about a different logic added in #6651 and #6652 as a fix for vaadin/flow-components#5533.
So the following test now fails as getSemanticHTML() returns ' ' for preserved whitespaces.

web-components/packages/rich-text-editor/test/basic.test.js

Lines 318 to 323 in 76a7f05

    
           it('should not lose extra space characters from the resulting htmlValue', () => { 
        
             const htmlWithExtraSpaces = '<p>Extra   spaces</p>'; 
        
             rte.dangerouslySetHtmlValue(htmlWithExtraSpaces); 
        
             flushValueDebouncer(); 
        
             expect(rte.htmlValue).to.equal(htmlWithExtraSpaces); 
        
           });

UPD: this was introduced in slab/quill#4502 which landed in v2.0.3 patch release and a number of users were upset and had to pin to v2.0.2 - see discussion at slab/quill#4502 (comment) and this issue: slab/quill#4509

web-padawan · 2025-04-26T10:19:02Z

Updated the Quill fork to apply the workaround from slab/quill#4509 (comment), see vaadin/quill@76a4568.
This replaces all but one consecutive space character with  , which should be less intrusive.

sonarqubecloud · 2025-04-26T14:38:22Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

web-padawan · 2025-06-04T12:21:28Z

Updated Quill fork branch with support for ES module distribution: https://github.com/vaadin/quill/tree/vaadin-quill-v2

Tested and it works fine in dev page (and all web component tests are passing). This would enable us to do the following:

-import '../vendor/vaadin-quill.js';
+import Quill from '@vaadin/quill/vaadin-quill.js';

-const Quill = window.Quill;
+// For backwards compatibility
+window.Quill = Quill;

And then we can publish the fork to npm as @vaadin/quill instead of having to copy a minified version for every change.

sonarqubecloud · 2025-06-04T12:37:20Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

web-padawan · 2025-08-07T06:57:26Z

Created a PR to hide caret in visual test (I noticed one of screenshots has it): #9924

The Quill 2.0 semantic HTML does not seem to output any "ql-*" classes except alignment.

The code tag seems to be still present in the semantic HTML output.

The workarounds are not necessary anymore since the Quill 2.0 semantic HTML does not contain them. The alignment class transformation is left intact.

sonarqubecloud · 2025-08-07T20:50:47Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

web-padawan force-pushed the proto/quill-v2 branch 3 times, most recently from a4ebd07 to d025045 Compare April 25, 2025 13:44

web-padawan force-pushed the proto/quill-v2 branch 5 times, most recently from a93b758 to 59f4891 Compare April 26, 2025 07:53

web-padawan force-pushed the proto/quill-v2 branch from d73579d to 8f1e173 Compare June 4, 2025 08:50

web-padawan changed the title ~~refactor!: update to Quill v2, drop outdated Firefox patch~~ refactor!: update to Quill v2.0 and use getSemanticHTML Jun 4, 2025

web-padawan force-pushed the proto/quill-v2 branch from 8f1e173 to 0b371ba Compare June 4, 2025 11:08

web-padawan marked this pull request as ready for review June 4, 2025 12:21

web-padawan mentioned this pull request Jun 5, 2025

feat: add nested lists styles, allow using Tab to modify indentation #9399

Merged

ugur-vaadin force-pushed the proto/quill-v2 branch from 1cc348a to 36d31e9 Compare August 6, 2025 05:37

ugur-vaadin marked this pull request as draft August 6, 2025 06:51

web-padawan force-pushed the proto/quill-v2 branch 3 times, most recently from 7cbb390 to bbf4d36 Compare August 6, 2025 10:17

web-padawan marked this pull request as ready for review August 6, 2025 10:17

web-padawan force-pushed the proto/quill-v2 branch 4 times, most recently from 3a91293 to c80fbdf Compare August 7, 2025 08:03

web-padawan force-pushed the proto/quill-v2 branch 2 times, most recently from 5cac4d9 to b3e61e9 Compare August 7, 2025 11:47

web-padawan and others added 10 commits August 7, 2025 23:26

refactor!: update to Quill v2 and use getSemanticHTML

c986ced

refactor: update Quill build to handle whitespace characters

9a12100

refactor: remove logic no longer needed with getSemanticHTML

3957553

chore: update Quill build to fix Chrome selection issue

b0e5899

chore: update Quill build to version using quill-delta-es

14ffa6e

chore: update Quill build to version with lodash-es replaced

9abbd03

test: update visual test screenshots for lists

ef90e2f

test: remove unused test

a5aeb1e

The Quill 2.0 semantic HTML does not seem to output any "ql-*" classes except alignment.

chore: remove todo

dc34c0c

The code tag seems to be still present in the semantic HTML output.

refactor: remove ql class replacing workarounds

2fa845f

The workarounds are not necessary anymore since the Quill 2.0 semantic HTML does not contain them. The alignment class transformation is left intact.

ugur-vaadin force-pushed the proto/quill-v2 branch from 12df0ce to 2fa845f Compare August 7, 2025 20:27

test: update baseline images

6785561

ugur-vaadin approved these changes Aug 11, 2025

View reviewed changes

ugur-vaadin merged commit 9bf3931 into main Aug 11, 2025
9 checks passed

ugur-vaadin deleted the proto/quill-v2 branch August 11, 2025 06:21

web-padawan mentioned this pull request Aug 11, 2025

test: update rich-text-editor snapshot after Quill bump #9965

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor!: update to Quill v2.0 and use getSemanticHTML #9007

refactor!: update to Quill v2.0 and use getSemanticHTML #9007

Uh oh!

web-padawan commented Apr 25, 2025 •

edited

Loading

Uh oh!

TatuLund commented Apr 25, 2025 •

edited

Loading

Uh oh!

web-padawan commented Apr 25, 2025 •

edited

Loading

Uh oh!

web-padawan commented Apr 26, 2025

Uh oh!

sonarqubecloud bot commented Apr 26, 2025

Uh oh!

web-padawan commented Jun 4, 2025

Uh oh!

sonarqubecloud bot commented Jun 4, 2025

Uh oh!

web-padawan commented Aug 7, 2025

Uh oh!

sonarqubecloud bot commented Aug 7, 2025

Uh oh!

Uh oh!

Uh oh!

refactor!: update to Quill v2.0 and use getSemanticHTML #9007

refactor!: update to Quill v2.0 and use getSemanticHTML #9007

Uh oh!

Conversation

web-padawan commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Uh oh!

TatuLund commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

web-padawan commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

web-padawan commented Apr 26, 2025

Uh oh!

sonarqubecloud bot commented Apr 26, 2025

Quality Gate passed

Uh oh!

web-padawan commented Jun 4, 2025

Uh oh!

sonarqubecloud bot commented Jun 4, 2025

Quality Gate passed

Uh oh!

web-padawan commented Aug 7, 2025

Uh oh!

sonarqubecloud bot commented Aug 7, 2025

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

web-padawan commented Apr 25, 2025 •

edited

Loading

TatuLund commented Apr 25, 2025 •

edited

Loading

web-padawan commented Apr 25, 2025 •

edited

Loading