Quill: 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.