[rich-text-editor] Add support for indentation and nested lists

[niiyeboah]

Support Ticket #3431

Enable indent functionality and add buttons to toolbar:

This will require new Lumo icons?

Will need to consider how this works with RTL.

[web-padawan]

The main problem is that indentation in Quill is achieved using class name: <li class="ql-indent-1">.
This isn’t acceptable for us, because it’s purely visual and does not reflect structure of nested lists.

[mhosio]

Indentation does not apply only to lists though but can be used with normal text as well. In those cases the same indent class name is used. Also if I am reading the sources of the current version of VaadinRTE correctly, text alignment is also a css class which is converted to inline style in html conversion. Would the same approach work here as well and if not, why?

[web-padawan]

Would the same approach work here as well and if not, why?

With normal text, indentation can be represented using tabulation characters \t.
In case of nested lists, ideally we would have structure like this:

<ul>
  <li>
  <li>
    <ul>
      <li>
      <li>

See slab/quill#979 where this feature is requested.

[niiyeboah]

More info from customer that requested feature:

We've made tests with tabs (represented in html as a nbsp), but there was a problem with exporting / importing values to / from html. Native indentations support (represented by CSS) work more stable.

RTE must provide way to make indentations, export content to html (with the same look & feel like in component) which is stored (not delta value) and later use this value as a source (and all must look the same as before saving).

[web-padawan]

Native indentations support (represented by CSS) work more stable.

Which is the "native indentations support" they are referring to? Is that using <li class="ql-indent"> mentioned above?

[web-padawan]

Please note that Quill classes are replaced with the HTML tags here:

https://github.com/vaadin/vaadin-rich-text-editor/blob/b63800185b4aa44ce03f69d8110b3cebd3f303f6/src/vaadin-rich-text-editor.html#L853-L861