Yoast
Use a real RTL language to test RTL in the standalone app examples
#664 is a first step to introduce a way to test the standalone app examples with RTL languages. For now, it just switches the isRtl state property that is then passed to the styled-components theme
This is enough to switch the replacement variable editors to RTL (Draft.js has a custom way to support language direction) but it's not a real switch to RTL.
At the very least, we should find a way to set a dir="rtl" attribute on the <html> element in the index.html file. Ideally, also the language used for all the text in the components should be a RTL language.
Currently, a few other components react to the RTL switch because of getRtlStyle() but they don't render properly because of the missing dir="rtl" attribute. For example:
ModeSwitcher
TriggerReplacementVariableSuggestionsButton
HelpTextWrapper
EditSnippetButton
the "caret" arrows
StyledHeading
Switching the dir="rtl" attribute is added in #685
To properly render in RTL, what is left here is:
- the language used for all the text in the components should be a RTL language
- change the
langattribute on the<html>accordingly
Of course this is a bit challenging but I think it's worth considering we do need a test environment to test in RTL.