nested lists are not WYSIWYG

[luisrudge]

WYSIWYG stands for what you see is what you get.
When you create nested lists, instead of actually creating html nested lists, quill creates juts regular lists and adds a ql-indent-* class to the items.

expected:

<ul>
  <li>test</li>
  <li>
    <ul>
      <li>second level list</li>
    </ul>
  </li>
</ul>

actual:

<ul>
  <li>test</li>
  <li class"ql-indent-1">second level list</li>
</ul>

[JoshuaDoshua]

#979

[jhchen]

Issues is not the place for philosophical debates of existentialism or purpose. Please include practical reasons, or indulge elsewhere. And remove the attitude or assumption that just because an implementation surprised you, it must be wrong or lazy.

[luisrudge]

@jhchen I'm truly sorry with the approach I used. I could make up some crazy story about it, but the truth is that I was an idiot. Again, sorry! I'll follow up in #979

[jhchen]

All good thank you.

[tuancaraballo]

It seems that Quill works just fine, it gives you the right html and each list element posses its own class eg: ql-indent-4, or ql-indent-1 depending on the level of indentation.

My issue was the following:
I was saving the html returned by the onChange handler and displaying it into a different component. Everything was showing fine inside Quill's textarea and my component's as well. However, despite nested lists being rendered properly inside Quill's textarea, they were not in my component. What I ended up doing was importing quill's css into my component or at the root level and that fixed the issue with.

import 'react-quill/dist/quill.core.css' import 'react-quill/dist/quill.bubble.css' import 'react-quill/dist/quill.snow.css'

Also make sure that you wrap your custom component where you display the html markup with the "ql-editor" class. If you take a look at the stylesheets the indentation selectors are defined as
".ql-editor .ql-index-1"

[rbonomo]

@jhchen

Using css to indent conveys the nesting of the list item to people using eyes to read the content.

Using css to indent does not convey the nesting of the list item to people using accessibility devices such as screen readers.

Using css to indent does not convey the indenting of the list item when the HTML markup from the editor is taken out of the QuillJS CSS context (rendered elsewhere).

[Micheal-Prisila-Fernando]

1. d
   d

• [ ]

[twickstrom]

1. d
   d

• [ ]

I am running across exactly this issue

[ajj-siraj]

@jhchen

Using css to indent conveys the nesting of the list item to people using eyes to read the content.

Using css to indent does not convey the nesting of the list item to people using accessibility devices such as screen readers.

Using css to indent does not convey the indenting of the list item when the HTML markup from the editor is taken out of the QuillJS CSS context (rendered elsewhere).

I was about to say the same thing. I'm using quill as the editor in the CMS but now it seems I need to add the quill stylesheets to get the actual WYSIWYG content I added on the website that is fetching data from the CMS. Not to mention like you said it's not conveyable to screen readers.

Is there a reason quill doesn't simply use HTML markup for nested lists? If there's a reason then it's alright I suppose, but I don't agree that it's not an issue.

[JoshuaAYoung]

@jhchen I love Quill and am appreciative of the time and effort that must go into something like this, so take my comment with a grain of salt. Just wanted to +1 to @rbonomo 's comment about accessibility. Flat lists styled with a margin to make them appear nested work for sighted users. For non-sighted users, all of the semantics you're trying to impart by nesting list items disappears. So all other things being equal, seems like actually nesting the html elements would be the way to go. But that's probably a large change with a lot of work for a feature that many people may never use... so yeah. Grain of salt.

[Haegin]

We've just run into this issue when trying to use the rich text data in an email. Unfortunately while emails support nested lists just fine, they don't support the CSS counters Quill uses to control the numbering so with the Quill CSS added to the email all the numbers and bullets are lost.

[rbonomo]

We've just run into this issue when trying to use the rich text data in an email. Unfortunately while emails support nested lists just fine, they don't support the CSS counters Quill uses to control the numbering so with the Quill CSS added to the email all the numbers and bullets are lost.

As a workaround, I disabled TAB within Quill so that nested lists are not possible to create within the editor.

[boulledogue]

I use Quill to save some datas that I export in OpenXML using https://github.com/ffmad/HTMLtoOpenXML
The fact that the lists are not nested make some troubles, i'll try to figure them out and to fix the problem by myself

[ghost]

Also copy pasting from quill to anyother word processor / notes breaks the nested lists.

[ggaidelevicius]

6 years on and this is still an issue. This is not semantically correct usage of HTML, nor is it WYSIWYG.

[Sliffcak]

Any updates on this? Interested in this also.

[jeygeethan]

6.5 years...

[Sliffcak]

6.5 years...

@jeygeethan I had to switch to TipTap. A LOT less pain.

[RichMatthews]

still waiting here...

[milelo]

I've just replaced my google editor with Quill. It was looking great however I've just come across this issue in testing, unfortunately, not being able to have true nested lists is a deal breaker for me. Its back to google or find a better alternative.

[jeygeethan]

@milelo Can you give me a link to the google editor? I am looking for a quill replacement. TIA

[milelo]

@milelo Can you give me a link to the google editor? I am looking for a quill replacement. TIA

Its in the google closure library goog.editor. It still works fine but unfortunately its being phased out:

Closure Library is in Maintenance Mode · Issue #1214 · google/closure-library (github.com)

The online demo no longer functions.