Support RTL in the Preview pane

[tareefdev]

Writing RTL text in the markdown editor works well. The text appears from right to left:

However, when pressing on the Preview button, the text rendered without direction: rtl property and appears from left to right:

This is different from #1769 issue where the layout of the CMS itself was requested to support RTL.

Also, I would be happy to solve this issue if there is some info about where/how that work should be done.

netlify-cms-app 2.9.1 netlify-cms-core 2.11.0

[erquhart]

Hmm so you start typing in an RTL language and the markdown widget automatically formats it right to left? If so we'll need to see if Slate outputs anything indicating that the content is RTL, maybe the preview can key off of that.

[tareefdev]

Hmm so you start typing in an RTL language and the markdown widget automatically formats it right to left?

Exactly

[yoavniran]

@tareefdev, For the editor I use this code. (havent gotten around to PRing it yet) and its a little crude but it works: https://gist.github.com/yoavniran/771085beb35ac0ab4b700e7b8b2f8199

The preview itself I render with an dir="rtl" wrapper so it looks right in the editor and in the preview:

I have a <PreviewLayout> component I wrap all of my preview templates. This way i can also inject my custom css styles and control the direction

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ShahriarKh]

Any updates on this? A direction button will be really helpful for the text editor.

[erezrokah]

Hi @ShahriarKh, the best way to move this forward is by contributing. We'd happily accept a PR for this. We use slate for the editor, so we would need to dig into slate for a solution.

[Xadoy]

Additionally, when typing in other locales(e.g. Chinese), the input direction get changed to RTL incorrectly. I guess this would be the same fix.