Richtext does not allow nesting unordered and ordered lists #11178
Description
What you were expecting:
Nesting an ordered list within a bullet list by indenting and then switching the list type via the toolbar button.
Nesting a bullet list within an ordered list by indenting and then switching the list type via the toolbar button.
What happened instead:
Trying to nest an ordered list within a bullet list switches the parent list to ordered format instead.
Trying to nest a bullet list within an ordered list does nothing.
Steps to reproduce:
Reproducible in the react-admin-demo
Related code:
The list buttons of the ra-input-rich-text module have logic that seem to depend on the specific order
of the ListValues array.
- handleUpdate
ListValues.reduce((acc, value) => {
if (editor && editor.isActive(value)) {
return value;
}
return acc;
}
always returns the last element in ListValues ("orderedList") if both are active.
- handleChange
ListValues.forEach(format => {
const shouldBeDeactivated =
editor && editor.isActive(format) && newFormat !== format;
const shouldBeActivated =
editor && !editor.isActive(format) && newFormat === format;
if (shouldBeDeactivated || shouldBeActivated) {
ListActions[format](editor);
}
})
equally does not look for the innermost list, leading to strange toggling behavior for nested lists.
Environment
- React-admin version: >=5.0.0
- React version: >= 19.0.0
- Browser: Chrome 145.0 / Firefox 148.0