rtl in sandbox preview

AhmedBaset · AhmedBaset · commit 229425969730 · 2025-05-23T19:33:20.000+03:00
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
@@ -14,7 +14,8 @@ function InlineCode({
 }: JSX.IntrinsicElements['code'] & InlineCodeProps) {
   return (
     <code
-      dir="ltr" // This is needed to prevent the code from inheriting the RTL direction of <html> in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()`
+      // dir="ltr" // This is needed to prevent the code from inheriting the RTL direction of <html> in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()`
+      dir={typeof props.children !== "string" ? "ltr" : ["[", "]"].includes(props.children) ? "rtl" : "ltr"}
       className={cn(
         'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
         {
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
@@ -40,13 +40,13 @@ root.render(
   '/public/index.html': {
     hidden: true,
     code: `<!DOCTYPE html>
-<html lang="en">
+<html lang="ar">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
 </head>
-<body>
+<body dir="rtl">
   <div id="root"></div>
 </body>
 </html>`,
