From 2ae3484363d539c47b09a283a17dc4937f55cce0 Mon Sep 17 00:00:00 2001
From: sanabhass <sana.benhassouna@ensi-uma.tn>
Date: Thu, 20 Aug 2020 13:27:28 +0200
Subject: [PATCH] Support for auto-detection of direction for component with
 varying content

---
 ui/component/button/view.jsx             | 4 ++--
 ui/component/common/markdown-preview.jsx | 4 ++--
 ui/component/uriIndicator/view.jsx       | 4 ++--
 ui/page/report/view.jsx                  | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index bb2501957..47e74225f 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -94,11 +94,11 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     <span className="button__content">
       {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
 
-      {!largestLabel && label && <span className="button__label">{label}</span>}
+      {!largestLabel && label && <span dir="auto" className="button__label">{label}</span>}
 
       {/* largestLabel is used when a single button has two different labels based on hover state */}
       {largestLabel && (
-        <div className="button__label" style={{ position: 'relative' }}>
+        <div dir="auto" className="button__label" style={{ position: 'relative' }}>
           <div
             style={{
               position: 'relative',
diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index edf751fc4..eebdf1a45 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@@ -128,7 +128,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     // Remove new lines and extra space
     remarkOptions.remarkReactComponents.p = SimpleText;
     return (
-      <span className="markdown-preview">
+      <span dir="auto" className="markdown-preview">
         {
           remark()
             .use(remarkStrip)
@@ -140,7 +140,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
   }
 
   return (
-    <div className="markdown-preview">
+    <div dir="auto" className="markdown-preview">
       {
         remark()
           .use(remarkAttr, remarkAttrOpts)
diff --git a/ui/component/uriIndicator/view.jsx b/ui/component/uriIndicator/view.jsx
index e7487f2e6..ca85d5e34 100644
--- a/ui/component/uriIndicator/view.jsx
+++ b/ui/component/uriIndicator/view.jsx
@@ -57,7 +57,7 @@ class UriIndicator extends React.PureComponent<Props> {
         return null;
       }
 
-      return <span className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>;
+      return <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>;
     }
 
     const channelClaim = isChannelClaim ? claim : claim.signing_channel;
@@ -66,7 +66,7 @@ class UriIndicator extends React.PureComponent<Props> {
       const { name } = channelClaim;
       const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
 
-      const inner = <span className={classnames('channel-name', { 'channel-name--inline': inline })}>{name}</span>;
+      const inner = <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>{name}</span>;
 
       if (!channelLink) {
         return inner;
diff --git a/ui/page/report/view.jsx b/ui/page/report/view.jsx
index 53f219d4f..20479bada 100644
--- a/ui/page/report/view.jsx
+++ b/ui/page/report/view.jsx
@@ -87,7 +87,7 @@ class ReportPage extends React.Component {
             title={__('Developer?')}
             actions={
               <Fragment>
-                <div className="markdown-preview">
+                <div dir="auto" className="markdown-preview">
                   <p>{__('You can also:')}</p>
                   <ul>
                     <li>