fix Arabic punctuation & alignment (#12655)

* fix Arabic punctuation & alignment

* fix Arabic punctuation & alignment - 2

* add rtl support for all rtl languages

* add auto direction to chat cards

* fix alignment: use automatic alignment based on dir attribute

* restore package-lock.json

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/chat/chatCard.vue

@@ -34,6 +34,7 @@
       <div
         ref="markdownContainer"
         class="text markdown"
+        dir="auto"
         v-html="parseMarkdown(msg.text)"
       ></div>
       <hr>
@@ -164,7 +165,7 @@
     .text {
       font-size: 14px;
       color: #4e4a57;
-      text-align: left !important;
+      text-align: initial;
       min-height: 0rem;
     }
   }

website/client/src/components/groups/chat.vue

@@ -18,6 +18,7 @@
         <textarea
           ref="user-entry"
           v-model="newMessage"
+          dir="auto"
           :placeholder="placeholder"
           :class="{'user-entry': newMessage}"
           :maxlength="MAX_MESSAGE_LENGTH"

website/client/src/components/messages/messageCard.vue

@@ -21,6 +21,7 @@
     </p>
     <div
       class="text markdown"
+      dir="auto"
       v-html="parseMarkdown(msg.text)"
     ></div>
     <div
@@ -118,7 +119,7 @@
     .text {
       font-size: 14px;
       color: $gray-50;
-      text-align: left !important;
+      text-align: initial;
       min-height: 0rem;
     }
   }

website/client/src/pages/private-messages.vue

@@ -152,6 +152,7 @@
             <textarea
               ref="textarea"
               v-model="newMessage"
+              dir="auto"
               class="flex-fill"
               :placeholder="$t('needsTextPlaceholder')"
               :maxlength="MAX_MESSAGE_LENGTH"