Nested ordered (numbered) lists use the same numerals at each level

[bennettrogers]

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
Nesting ordered lists uses the same set of numerals at each nesting level.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. GIFs and screenshots are very helpful too.
Create an ordered list. Add one item. Press enter, then press tab to indent one level and add another item. Both items will be labeled with 1.

What is the expected behavior?
I would expect the nested levels to use different characters, for example the way draft.js does it (the first level uses 1., the second level uses a., the third level uses i., etc.

Which versions of Draftail + Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draftail or Draft.js?
I'm not sure if this has ever worked, but I couldn't find a related issue. I'm testing on the Demo page for Draftail which seems to be using version 1.2.1, and on the demo page for draft.js which is probably using a recent version (I can't see a version string on the page though).

Screenshots below.

draft.js

Draftail

[thibaudcolas]

Hey @bennettrogers 👋 thanks for the detailed report. I think this is the following change from Draft.js v0.11.0, released a couple of weeks ago:

Add different counter-style for ordered lists based on their depth (Noam Elboim in d2a3ae8)

Draftail (and the live demo on draftail.org) is still using the previous release, v0.10.5. Looking at the Draft.js implementation,

• List level 1 uses the browser default (decimal)
• List level 2 is lower alphabetical (lower-alpha)
• List level 3 is lower roman numerals (lower-roman)
• List level 4 is back to decimal
• List level 5 is lower alphabetical (lower-alpha)
• Then all list levels from 6 and beyond are using the browser default

I’m not entirely sure what to think of this – at the same time it feels good to use different numerals for different nesting levels, but then it breaking down after level 6 would be quite jarring. The default browser styles also display all list items as decimal 1. regardless of nesting – it feels like using something else in Draftail would create a discrepancy between the editor and the published content that could be distracting, and for sites that do customise how nested lists are displayed – then they probably should customise it in the editor as well.

What do you think? Do you have a specific use case to have ordered lists with that much nesting?

[bennettrogers]

I definitely don't need to do more than a few levels of nesting, so for my use case going with the draft.js implementation is fine. It sounds like this could end up being a complicated niche feature to have to spend time tweaking, so perhaps it would make sense to let the upstream project decide what is best?

[thibaudcolas]

Reviewing this again, using the same numerals for all nesting levels matches default styling of nested lists in HTML. Draftail generally aims for a "WYSIWYG" experience, so we won’t be implementing this without it being configurable, and it’s very much a feature to have this list numerals customizability rather than a bug.

If/when we implement this, the defaults will be to keep the current behavior matching the HTML defaults.