From 31cde43278f6497aa72443b68f30c08ae1e09696 Mon Sep 17 00:00:00 2001
From: Ahmed Rowaihi <ahmedrowaihi1@gmail.com>
Date: Mon, 13 Feb 2023 08:52:32 +0300
Subject: [PATCH] HTML auto direction for specific textual content

---
 src/Element/Text.tsx      |  2 +-
 src/Element/Textarea.tsx  |  1 +
 src/Pages/ProfilePage.tsx | 12 +++++++-----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/Element/Text.tsx b/src/Element/Text.tsx
index a7ab2c4d..a460b674 100644
--- a/src/Element/Text.tsx
+++ b/src/Element/Text.tsx
@@ -128,7 +128,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
   function transformParagraph(frag: TextFragment) {
     const fragments = transformText(frag);
     if (fragments.every(f => typeof f === "string")) {
-      return <p>{fragments}</p>;
+      return <p dir="auto">{fragments}</p>;
     }
     return <>{fragments}</>;
   }
diff --git a/src/Element/Textarea.tsx b/src/Element/Textarea.tsx
index 7d5923e2..0c012758 100644
--- a/src/Element/Textarea.tsx
+++ b/src/Element/Textarea.tsx
@@ -72,6 +72,7 @@ const Textarea = (props: TextareaProps) => {
   return (
     // @ts-expect-error If anybody can figure out how to type this, please do
     <ReactTextareaAutocomplete
+      dir="auto"
       {...props}
       loadingComponent={() => <span>Loading...</span>}
       placeholder={formatMessage(messages.NotePlaceholder)}
diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index 26bce38f..a4a85ba5 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -1,5 +1,5 @@
 import "./ProfilePage.css";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
@@ -150,10 +150,12 @@ export default function ProfilePage() {
 
   function bio() {
     return (
-      aboutText.length > 0 && (
-        <>
-          <div className="details">{about}</div>
-        </>
+      aboutText.length && (
+        <React.Fragment>
+          <div dir="auto" className="details">
+            {about}
+          </div>
+        </React.Fragment>
       )
     );
   }