RTL - LTR (bidi) text rendering between paragraphs

[adueck]

If you start the markdown text in LTR, but then write a paragraph of RTL, the RTL paragraph doesn't get rendered properly. (And vice versa)

I would suggest the simplest solution to this is to add a dir="auto" attribute to all <p></p> elements that get created. This would take care of things nicely.

If people don't want the extra dir="auto" in every <p> element, perhaps this could be enabled by an option something like enableBidiParagraphs ?

[ChristianMurphy]

@adueck can you share an example of what you are trying and what you expect the output to be?

[adueck]

@ChristianMurphy

Here's an example. Just adding dir="auto" takes care of the rendering problem demonstrated in this example.

http://jspen.co/s/#fefb06115960b1804342c34d6f8c9de3

[ChristianMurphy]

Thanks for sharing!
react-markdown and its underlying markdown handler remark, align to CommonMark.
The current behavior is matching the CommonMark spec.

https://spec.commonmark.org/dingus/?text=English%20Text%20(ltr)%20...%20in%20the%20next%20paragraph%20is%20some%20text%20that%20is%20right%20to%20left%20and%20should%20start%20from%20the%20right.%0A%0A%0A%D9%81%D8%A7%D8%B1%D8%B3%DB%8C.%0A%0A%0AThis%20is%20rendered%20improperly%20because%20the%20text%20should%20start%20at%20the%20right%20and%20the%20period%20should%20come%20at%20the%20left%20hand%20side%20of%20the%20word.%0A

It would be good to get this fixed upstream in CommonMark, then have it make it's way to Remark and React Markdown.
There are a few ongoing discussions in CommonMark on RTL:
https://talk.commonmark.org/t/rtl-languages-support/203
https://talk.commonmark.org/t/explicit-rtl-indication-in-pure-markdown/286

---

In the mean time, this can be achieved through by creating a remark plugin (or rehype plugin if #428 is merged) https://unifiedjs.com/learn, which adds the dir attribute.

[wooorm]

Non-markdown syntax is not something for this project. But indeed, it could be done with plugins.

[simurgh9]

I solved this like so,

<div dir="auto">
  <ReactMarkdown children={'اسلام علیکم'} />
</div>