search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
466 stars 83 forks source link

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

Open niiyeboah opened 4 years ago

niiyeboah commented 4 years ago

Support Ticket #3431

Enable indent functionality and add buttons to toolbar:

Screenshot 2020-07-13 at 14 04 36

This will require new Lumo icons?

Will need to consider how this works with RTL.

web-padawan commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 https://github.com/quilljs/quill/issues/979 where this feature is requested.

niiyeboah commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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