search

slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.13k stars 3.35k forks source link

`getSemanticHTML` outputs HTML with a `ql-` class #4156

Open Kostia-K opened 4 months ago

Kostia-K commented 4 months ago

When using indentation tools, getSemanticHTML produces HTML where indented text has class="ql-indent-1" which requires quill CSS to render correctly. This means, indentation will not be preserved when you export HTML somewhere else.

Steps for Reproduction

  1. Playground link
  2. Enter any text
  3. Press button to increase indent

Expected behavior:

Semantic HTML should contain style that allows rendering without the Quill stylesheet (e.g. style="padding-left: 3em")

Actual behavior:

Semantic HTML contains ql-indent-1 class which is meaningless outside the Quill editor.

Platforms:

Include browser, operating system and respective versions MacOS Sonoma 14.4.1, Firefox 125, Safari 17, Chrome 124

Version:

2.0.0

luin commented 4 months ago

I'm seeing the correct nested <ul> structure: https://share.slab.com/3LzpmqCc. Did I miss anything?

Kostia-K commented 4 months ago

How did you get list items with the bullet characters?

This is what I'm seeing

Screenshot from 2024-04-30 20-32-22

luin commented 4 months ago

Okay I got you. I thought it was about lists. This is a bit tricky as there's no standard way to express the indentation of a block in HTML so one would argue that padding-left: 3em is harder to parse than ql-indent-2. At least Quill doesn't recognize padding-left when you paste HTML into the editor

Kostia-K commented 4 months ago

For what it's worth, Outlook and Gmail use multiples of margin-left: 40px inline for indentation. Regardless of whether Quill intends to support emails, this could be a valid approach to this problem.

amyasmith commented 4 months ago

This also seems to be the case by default with align. It will output the ql-align- class unless the align style attributor is imported and then registered over the align format. This isn't mentioned in the docs anywhere from what I can see.

chaitanya1248 commented 2 months ago

having an inline style instead of classs name helps when exporting it to html