feat: support RTL text (#6)

Author: josStorer

build.mjs

@@ -246,6 +246,7 @@ async function build() {
       true,
       generateWebpackCallback(() => finishOutput('-without-katex')),
     )
+  await new Promise((r) => setTimeout(r, 2000))
   await runWebpack(
     false,
     generateWebpackCallback(() => finishOutput('')),

src/components/InputBox/index.jsx

@@ -21,6 +21,7 @@ export function InputBox({ onSubmit, enabled }) {
 
   return (
     <textarea
+      dir="auto"
       ref={inputRef}
       disabled={!enabled}
       className="interact-input"

src/components/MarkdownRender/markdown-without-katex.jsx

@@ -32,30 +32,32 @@ export function MarkdownRender(props) {
     rel: 'nofollow noopener noreferrer',
   }
   return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[
-        rehypeRaw,
-        [
-          rehypeHighlight,
-          {
-            detect: true,
-            ignoreMissing: true,
-          },
-        ],
-      ]}
-      components={{
-        a: (props) => (
-          <a href={props.href} {...linkProperties}>
-            {props.children}
-          </a>
-        ),
-        pre: Pre,
-      }}
-      {...props}
-    >
-      {props.children}
-    </ReactMarkdown>
+    <div dir="auto">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[
+          rehypeRaw,
+          [
+            rehypeHighlight,
+            {
+              detect: true,
+              ignoreMissing: true,
+            },
+          ],
+        ]}
+        components={{
+          a: (props) => (
+            <a href={props.href} {...linkProperties}>
+              {props.children}
+            </a>
+          ),
+          pre: Pre,
+        }}
+        {...props}
+      >
+        {props.children}
+      </ReactMarkdown>
+    </div>
   )
 }
 

src/components/MarkdownRender/markdown.jsx

@@ -35,31 +35,33 @@ export function MarkdownRender(props) {
     rel: 'nofollow noopener noreferrer',
   }
   return (
-    <ReactMarkdown
-      remarkPlugins={[remarkMath, remarkGfm]}
-      rehypePlugins={[
-        rehypeKatex,
-        rehypeRaw,
-        [
-          rehypeHighlight,
-          {
-            detect: true,
-            ignoreMissing: true,
-          },
-        ],
-      ]}
-      components={{
-        a: (props) => (
-          <a href={props.href} {...linkProperties}>
-            {props.children}
-          </a>
-        ),
-        pre: Pre,
-      }}
-      {...props}
-    >
-      {props.children}
-    </ReactMarkdown>
+    <div dir="auto">
+      <ReactMarkdown
+        remarkPlugins={[remarkMath, remarkGfm]}
+        rehypePlugins={[
+          rehypeKatex,
+          rehypeRaw,
+          [
+            rehypeHighlight,
+            {
+              detect: true,
+              ignoreMissing: true,
+            },
+          ],
+        ]}
+        components={{
+          a: (props) => (
+            <a href={props.href} {...linkProperties}>
+              {props.children}
+            </a>
+          ),
+          pre: Pre,
+        }}
+        {...props}
+      >
+        {props.children}
+      </ReactMarkdown>
+    </div>
   )
 }