RTL config using MDX code block breaks formatting

[d-henn]

Describe the bug

Not sure if this is intended or not, but when using RTL and MDX code blocks—the formatting within the <pre /> tag becomes jumbled.

Reproduction

I reproduced this with a very minimal install of Ladle and React, see the below StackBlitz environment:

1. Open StackBlitz ladle-t5xsz3.
2. Navigate to Docs -> Readme story.
3. Toggle Right to left on.
4. See the code block shuffle the semi-colons and parts of the string.

   const greeting = 'Hello, ladle!';

   becomes

;'!const greeting = 'Hello, ladle

Note: When I copy and paste with my clipboard, the code comes out proper even though it displays incorrectly.

Thank you for the awesome work!

Environment

• OS: Windows 11 & Mac OS 14.2.1
• Browser [Firefox, Edge, Brave]
• Version @ladle/react: 4.0.2

[tajo]

What is the correct behavior? Should rtl not change formatting/directon of code blocks?

It seems we could just achieve that by adding

<pre dir="ltr">

to fix this.