facebook
Bug: Version 0.35.0 broke CheckList in RTL
Lexical version: 0.35.0
Steps To Reproduce
- Go to https://playground.lexical.dev/
- Enter a paragraph with "RTL" or start typing with RTL language characters on a blank line.
- Convert it to a CheckList item and see how the CheckBox appears on the left side.
Here are the breaking change notes for v0.35.0.
The migration guide states that you should change the theme class from rtl to [dir='rtl], however, I noticed that the PR that made the change simply removed those lines of CSS instead of replacing them.
I have a PR WIP that makes that change, and it actually works. But it's a partial solution. While it does make the CheckList appear on the right side, the click logic in the CheckListPlugin still expects the click to happen on the left side.
I've been thinking for a while now that the CheckListItem node seems like a good use case for web components. Using a pseudo-element and faking a click by calculating the position is a very fragile solution, and I've seen it break in many ways with a little CSS.
Just to fantasize a bit, I've also occasionally considered an alternative to @lexical/list but with a flat model, achieving accessibility with web components and aria attributes. I think it's possible. See this related issue.
Either way, I know this issue can be solved with very few lines of code, and I wouldn't expect this alternative solution in the short or medium term. I just wanted to share these ideas for cross-reference.
The current behavior
CheckList appears on the left side
The expected behavior
CheckList appears on the right side
