From 90a19df56e252565a9df649e3345fbaf801fe80e Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Sat, 18 Mar 2023 23:42:31 +0800
Subject: [PATCH] feat: support RTL text (#6)

---
 build.mjs                                     |  1 +
 src/components/InputBox/index.jsx             |  1 +
 .../MarkdownRender/markdown-without-katex.jsx | 50 +++++++++---------
 src/components/MarkdownRender/markdown.jsx    | 52 ++++++++++---------
 4 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/build.mjs b/build.mjs
index d118bed..5e20e70 100644
--- a/build.mjs
+++ b/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('')),
diff --git a/src/components/InputBox/index.jsx b/src/components/InputBox/index.jsx
index ff3502c..1227628 100644
--- a/src/components/InputBox/index.jsx
+++ b/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"
diff --git a/src/components/MarkdownRender/markdown-without-katex.jsx b/src/components/MarkdownRender/markdown-without-katex.jsx
index e68ae61..046bc55 100644
--- a/src/components/MarkdownRender/markdown-without-katex.jsx
+++ b/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>
   )
 }
 
diff --git a/src/components/MarkdownRender/markdown.jsx b/src/components/MarkdownRender/markdown.jsx
index be195eb..90640c6 100644
--- a/src/components/MarkdownRender/markdown.jsx
+++ b/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>
   )
 }