RTL support in message input

src/components/chat/input.ts

@@ -21,6 +21,7 @@ import { ripple } from '../ripple';
 import Scrollable from "../scrollable";
 import { toast } from "../toast";
 import { wrapReply } from "../wrappers";
+import { checkRTL } from '../../helpers/string';
 
 const RECORD_MIN_TIME = 500;
 const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@@ -182,6 +183,7 @@ export class ChatInput {
 
     this.messageInput.addEventListener('input', (e) => {
       //console.log('messageInput input', this.messageInput.innerText, this.serializeNodes(Array.from(this.messageInput.childNodes)));
+      this.setDirection();
   
       const value = this.messageInput.innerText;
   
@@ -585,6 +587,17 @@ export class ChatInput {
     }
 
     this.updateSendBtn();
+    this.setDirection();
+  }
+
+  public setDirection() {
+    const char = this.messageInput.innerText[0];
+    let direction = 'ltr';
+    if(char && checkRTL(char)) {
+      direction = 'rtl';
+    }
+
+    this.messageInput.style.direction = direction;
   }
 
   public sendMessage() {
@@ -695,6 +708,7 @@ export class ChatInput {
     this.editMsgID = 0;
     this.helperType = this.helperFunc = undefined;
     this.chatInput.parentElement.classList.remove('is-helper-active');
+    this.setDirection();
   }
 
   public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) {
@@ -721,6 +735,7 @@ export class ChatInput {
 
     setTimeout(() => {
       this.updateSendBtn();
+      this.setDirection();
     }, 0);
   }
 

src/helpers/string.ts

@@ -75,3 +75,12 @@ export function splitStringByLength(str: string, maxLength: number) {
 
   return out;
 }
+
+// https://stackoverflow.com/a/14824756
+export const checkRTL = (s: string) => {           
+  const ltrChars  = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
+    rtlChars      = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
+    rtlDirCheck   = new RegExp('^[^'+ltrChars+']*['+rtlChars+']');
+
+  return rtlDirCheck.test(s);
+};

src/scss/partials/_chatBubble.scss

@@ -62,6 +62,7 @@ $bubble-margin: .25rem;
   position: relative;
   z-index: 1;
   margin: 0 auto;
+  user-select: none;
 
   &.is-highlighted, &.is-selected, /* #bubbles.is-selecting */ & {
     &:after {
@@ -238,6 +239,7 @@ $bubble-margin: .25rem;
     height: fit-content;
     z-index: 2;
     transition: .2s transform;
+    user-select: text;
 
     @include respond-to(not-handhelds) {
       max-width: 85%;
@@ -1037,7 +1039,7 @@ $bubble-margin: .25rem;
     line-height: 1;
     vertical-align: middle;
     pointer-events: none; // do not show title
-    display: inline-block;
+    display: inline-flex;
     /* display: inline-flex;
     align-items: center; */