decaporg / decap-cms

A Git-based CMS for Static Site Generators
https://decapcms.org
MIT License
17.94k stars 3.04k forks source link

Support RTL in the Preview pane #2524

Open tareefdev opened 5 years ago

tareefdev commented 5 years ago

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

Screenshot_20190808_141727

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

Screenshot_20190808_141930

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 commented 5 years ago

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 commented 5 years ago

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

Exactly

yoavniran commented 5 years ago

@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 component I wrap all of my preview templates. This way i can also inject my custom css styles and control the direction

stale[bot] commented 5 years ago

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 commented 3 years ago

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

erezrokah commented 3 years ago

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 commented 6 months ago

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.