RTL Draft.js input problems

[IreneStr]

Set your language to a RTL language, for example Hebrew, to witness the following issues:

Typing between variables moves variable and typed text:

It's not possible to move your cursor to before (from an RTL perspective) the first entity by using the arrow keys:

When you click before the first entity, you can't move past that entity when using the arrow keys:

This 'being stuck' behavior also happens in some specific other situations. Pushing the left arrow on time, while you actually want to go right, 'solves' it (i.e. the cursor will jump out of the infinite select-deselect loop):

[IreneStr]

Related #10208

[afercia]

I've tested a bit also in Firefox and there are similar issues, sometimes a bit different (for example I wasn't able to reproduce the select/deselect loop in Firefox). Regardless, I'd suggest a couple things:

• this should be tested with a fully translated UI, also the entities should be translated; I remember Chrome especially, doing weird things with strings that are a mix of RTL and LTR
• see this draft.js page; to my understanding, they ignore the dir attribute and use some algorithm to automatically detect the language direction: https://draftjs.org/docs/advanced-topics-text-direction.html while this may be smart, it's not standard and to my understanding assumes the whole content (entities included) should be in RTL fo work correctly
• draft.js has a textAlignment prop worth trying

[atimmer]

this should be tested with a fully translated UI, also the entities should be translated; I remember Chrome especially, doing weird things with strings that are a mix of RTL and LTR

I think this is the main issue. The issue doesn't occur when all snippet variables are translated.

My thinking is that this is caused by the mismatch between the text direction of the element outside the snippet variable and the text direction inside the snippet variable. I am not entirely sure if it possible to fix this, because the DraftJS state wouldn't 'know' anything about right-to-left or left-to-right. The state works independently of text direction because it works with the offset within the text.

• see this draft.js page; to my understanding, they ignore the dir attribute and use some algorithm to automatically detect the language direction: https://draftjs.org/docs/advanced-topics-text-direction.html while this may be smart, it's not standard and to my understanding assumes the whole content (entities included) should be in RTL fo work correctly
• draft.js has a textAlignment prop worth trying

In the latest version, we set the textDirectionality prop explicitly on the DraftJS editor based on the value we know from WordPress.