List numbering is broken on the editor

[lbarrous]

It seems Quill is messing with ordered/unordered lists, so basically, if we create a ordered list in which each item does not have any item below it (any other hierarchy or other elements below) the list is rendered properly, as for example in this:

However, if we add something between an ordered element, and the next one, it reset the count, as you can see here:

The issue was submitted for a draft output sent with this format:

Caro/a {{customer}},

Sono Alvaro Garcia di Maestro Travels. Eccovi delle opzioni di viaggio da {{departing_city}} a {{arrival_city}} con partenza il {{dep_date}}.

Opzioni di volo per la partenza:

1. Compagnia aerea: XYZ
   • Ora e data di partenza: 08:00, {{dep_date}}
   • Tempo di viaggio totale: 6 ore
   • Prezzo: 350€
2. Compagnia aerea: ABC
   • Ora e data di partenza: 13:00, {{dep_date}}
   • Tempo di viaggio totale: 7 ore
   • Prezzo: 300€

Nel caso in cui sia stata fornita una data di ritorno {{ret_date}}, ecco le opzioni di volo per il ritorno:

It should appear like this:

However quill editor is messing with format and displaying this:

[Fi2zz]

Haha, I have also encountered this problem, but I encountered it when reading the source code, but I don’t remember how to solve it now. This question is not very common

[lbarrous]

Thanks for your comment! Let me know if you are able to find it again, it would be so useful, I can even have a look to the source to check it, if you find something I would appreciate so much :) @Fi2zz

[Fi2zz]

Caro/a {{customer}},

Sono Alvaro Garcia di Maestro Travels. Eccovi delle opzioni di viaggio da {{departing_city}} a {{arrival_city}} con partenza il {{dep_date}}.

Opzioni di volo per la partenza:

1. Compagnia aerea: XYZ

   • Ora e data di partenza: 08:00, {{dep_date}}
   • Tempo di viaggio totale: 6 ore
   • Prezzo: 350€

2. Compagnia aerea: ABC

   • Ora e data di partenza: 13:00, {{dep_date}}
   • Tempo di viaggio totale: 7 ore
   • Prezzo: 300€

Nel caso in cui sia stata fornita una data di ritorno {{ret_date}}, ecco le opzioni di volo per il ritorno:

Oh, I found your problem. You can solve it by rewriting the css you need. It is different from the problem I encountered.

[lbarrous]

Which CSS you mean exactly mate? CSS from the quill code you mean, do you know which exact part? It would be so useful if you can let me know on this please :) @Fi2zz

[Fi2zz]

Customize your Quill css, like the screenshot shows

[lbarrous]

Mmmm I see, but the thing is that, I still want to have the number order, not the "circle", could I customize it to have the correct number? I mean, I see every li element has a ql-indent-1 class, should I maybe change that somehow to add the proper number just in case, or change the class style? What do you suggest? Thanks for your time mate @Fi2zz

[Fi2zz]

You want to nest an ordered list inside an ordered list, not an unordered list, like the screenshots below,am I right?

[ksmithut]

@Fi2zz The issue is when you have an ordered list nested inside. For example, if I have the following data I want to input into Quill:

1. test
   • cool
2. another
   • thing

This will generate the following html:

<ol>
  <li>test</li>
</ol>
<ul>
  <li class="ql-indent-1">cool</li>
</ul>
<ol>
  <li>another</li>
</ol>
<ul>
  <li class="ql-indent-1">thing</li>
</ul>

For some reason, Quill keeps the <ul /> on the same level as it's "parent" list, thus breaking the numbers, so it actually renders like this with two number 1s:

1. test
   - cool
1. another
   - thing

[ludejun]

You can use quill-react-commercial.

It can support your demands like below gif.

It can start with any number in order list and can save this number in delta.