From 0bc85a6ff6aabc34d7443ceaa3904cfc78329a6a Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Thu, 25 Jul 2024 21:55:22 -0400
Subject: [PATCH] added RTL support

---
 frontend/apps/remark42/app/components/auth/auth.tsx            | 2 ++
 .../apps/remark42/app/components/comment-form/comment-form.tsx | 2 ++
 frontend/apps/remark42/app/components/comment/comment.tsx      | 3 ++-
 frontend/apps/remark42/app/components/textarea-autosize.tsx    | 2 +-
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/apps/remark42/app/components/auth/auth.tsx b/frontend/apps/remark42/app/components/auth/auth.tsx
index 1de4b8a2..8843e2f3 100644
--- a/frontend/apps/remark42/app/components/auth/auth.tsx
+++ b/frontend/apps/remark42/app/components/auth/auth.tsx
@@ -334,6 +334,7 @@ export function Auth() {
                           const element = evt.target as HTMLInputElement;
                           element.value = element.value.trim();
                         }}
+                        dir="auto"
                       />
                     </div>
                     {view === 'email' && (
@@ -345,6 +346,7 @@ export function Auth() {
                           type="email"
                           placeholder={intl.formatMessage(messages.emailAddress)}
                           disabled={isLoading}
+                          dir="auto"
                         />
                       </div>
                     )}
diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx
index f0ec23b6..494e0ebc 100644
--- a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx
+++ b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx
@@ -461,6 +461,7 @@ export class CommentForm extends Component<Props, State> {
               disabled={isDisabled}
               autofocus={!!autofocus}
               spellcheck={true}
+              dir="auto"
             />
           </TextExpander>
           {charactersLeft < 100 && <span className="comment-form__counter">{charactersLeft}</span>}
@@ -518,6 +519,7 @@ export class CommentForm extends Component<Props, State> {
                 className="comment-form__preview raw-content"
                 // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{ __html: preview }}
+                dir="auto"
               />
             </div>
           )
diff --git a/frontend/apps/remark42/app/components/comment/comment.tsx b/frontend/apps/remark42/app/components/comment/comment.tsx
index ac2081ec..8e8d552a 100644
--- a/frontend/apps/remark42/app/components/comment/comment.tsx
+++ b/frontend/apps/remark42/app/components/comment/comment.tsx
@@ -336,7 +336,7 @@ export class Comment extends Component<CommentProps, State> {
     if (props.view === 'preview') {
       return (
         <article className={b('comment', { mix: props.mix }, defaultMods)}>
-          <div className="comment__body">
+          <div className="comment__body" dir="auto">
             {!!o.title && (
               <div className="comment__title">
                 <a className="comment__title-link" href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
@@ -477,6 +477,7 @@ export class Comment extends Component<CommentProps, State> {
               ref={this.textNode}
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: o.text }}
+              dir="auto"
             />
           )}
 
diff --git a/frontend/apps/remark42/app/components/textarea-autosize.tsx b/frontend/apps/remark42/app/components/textarea-autosize.tsx
index e0da9b47..e8c82437 100644
--- a/frontend/apps/remark42/app/components/textarea-autosize.tsx
+++ b/frontend/apps/remark42/app/components/textarea-autosize.tsx
@@ -33,5 +33,5 @@ export const TextareaAutosize = forwardRef<HTMLTextAreaElement, Props>(({ onInpu
     }
   }, [value, ref]);
 
-  return <textarea {...props} data-testid={props.id} onInput={handleInput} value={value} ref={ref} />;
+  return <textarea {...props} data-testid={props.id} onInput={handleInput} value={value} ref={ref} dir="auto" />;
 });