List layout bug in RTL mode

[amitm02]

Steps for Reproduction

Create numbered list with text in RTL mode. see for example: Quill example

Expected behavior:
Wrap lines should start after the numbered index position, right below the first letter of the list item. see example of native css: CSS example

Actual behavior:

English text works fine. But with Hebrew text (RTL mode), the wrap line text starts under the list item index number. Quill example

Platforms:

Chrome & Safari

Version:
1.2.6

[benbro]

Need to decrease the window width to cause the lines to wrap and see the issue.

This fixes the indentation but it's not possible to style the ol element based on ql-direction-rtl class in the li child.

.ql-editor ol, .ql-editor ul {
    padding-right: 1.5em;
}

.ql-editor li.ql-direction-rtl::before {
    margin-right: -1.5em;
}

@jhchen why do we need padding on the ol element and negative margin on the li element?
Removing both doesn't seem to change the layout but fixes the rtl issue.

.ql-editor ol, .ql-editor ul {
    padding-left: 1.5em;
}

.ql-editor li::before {
    margin-left: -1.5em;
}

[jhchen]

I believe the padding is due to two reasons:

1. Users like some space between the numbers and the left boundary of the page
2. Aligns with indents/tabs that are not lists

The negative margin left makes the aligning easier to implement with variable with numbers, since you want to right align the numbers themselves in left aligned text. I believe 67cd065 fixes the issue. Let me know if it doesn't work.

[benbro]

Your fix works great.
Thanks.