Enhancement/rtl UI support

client/components/Menubar/Menubar.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import useModalClose from '../../common/useModalClose';
 import { MenuOpenContext, MenubarContext } from './contexts';
 
@@ -62,9 +63,14 @@ function Menubar({ children, className }) {
     [setMenuOpen, toggleMenuOpen, clearHideTimeout, handleBlur]
   );
 
+  // change menu direction to rtl for rtl languages like [urdo, persian, arabic, ...]
+  let newClassName = className;
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') newClassName = 'rtl-nav';
+
   return (
     <MenubarContext.Provider value={contextValue}>
-      <div className={className} ref={nodeRef}>
+      <div className={newClassName} ref={nodeRef}>
         <MenuOpenContext.Provider value={menuOpen}>
           {children}
         </MenuOpenContext.Provider>

client/components/Menubar/MenubarItem.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import ButtonOrLink from '../../common/ButtonOrLink';
 import { MenubarContext, ParentMenuContext } from './contexts';
 
@@ -26,8 +27,13 @@ function MenubarItem({
   const role = customRole || 'menuitem';
   const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};
 
+  // change sub menu direction
+  let newClassName = 'nav__dropdown-item';
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') newClassName = 'rtl-nav__dropdown-item';
+
   return (
-    <li className={className}>
+    <li className={newClassName}>
       <ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
     </li>
   );

client/components/Menubar/MenubarSubmenu.jsx

@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, MenubarContext, ParentMenuContext } from './contexts';
 
@@ -28,6 +29,19 @@ export function useMenuProps(id) {
 function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
   const { isOpen, handlers } = useMenuProps(id);
 
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+  let selectedClassNames = {
+    nav__item_header: 'nav__item-header',
+    nav__item_header_triangle: 'nav__item-header-triangle'
+  };
+  if (direction === 'rtl') {
+    selectedClassNames = {
+      nav__item_header: 'rtl-nav__item-header',
+      nav__item_header_triangle: 'rtl-nav__item-header-triangle'
+    };
+  }
+
   return (
     <button
       {...handlers}
@@ -36,9 +50,9 @@ function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
       aria-haspopup={hasPopup}
       aria-expanded={isOpen}
     >
-      <span className="nav__item-header">{title}</span>
+      <span className={selectedClassNames.nav__item_header}>{title}</span>
       <TriangleIcon
-        className="nav__item-header-triangle"
+        className={selectedClassNames.nav__item_header_triangle}
         focusable="false"
         aria-hidden="true"
       />
@@ -63,8 +77,13 @@ MenubarTrigger.defaultProps = {
  * -----------------------------------------------------------------------------------------------*/
 
 function MenubarList({ id, children, role, ...props }) {
+  // change sub menu direction
+  let newClassName = 'nav__dropdown';
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') newClassName = 'rtl-nav__dropdown';
+
   return (
-    <ul className="nav__dropdown" role={role} {...props}>
+    <ul className={newClassName} role={role} {...props}>
       <ParentMenuContext.Provider value={id}>
         {children}
       </ParentMenuContext.Provider>
@@ -102,8 +121,14 @@ function MenubarSubmenu({
 
   const hasPopup = listRole === 'listbox' ? 'listbox' : 'menu';
 
+  // change sub menu direction
+  let newClassName = classNames('nav__item', isOpen && 'nav__item--open');
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl')
+    newClassName = classNames('rtl-nav__item', isOpen && 'rtl-nav__item--open');
+
   return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+    <li className={newClassName}>
       <MenubarTrigger
         id={id}
         title={title}

client/constants.js

@@ -90,6 +90,7 @@ export const HIDE_TOAST = 'HIDE_TOAST';
 export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
 export const SET_THEME = 'SET_THEME';
 export const SET_LANGUAGE = 'SET_LANGUAGE';
+export const SET_DIRECTION = 'SET_DIRECTION';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';

client/i18n.js

@@ -23,6 +23,18 @@ import {
 
 const fallbackLng = ['en-US'];
 
+export const rtlLanguageList = [
+  'ar', // Arabic (Standard)
+  'fa', // Persian (Farsi)
+  'ur', // Urdu
+  'he', // Hebrew
+  'ckb', // Kurdish (Sorani)
+  'ps', // Pashto
+  'sd', // Sindhi
+  'ug', // Uyghur
+  'dv' // Divehi (Dhivehi)
+];
+
 export const availableLanguages = [
   'be',
   'de',

client/modules/App/components/Overlay.jsx

@@ -20,6 +20,9 @@ const Overlay = ({
 
   const previousPath = useSelector((state) => state.ide.previousPath);
 
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+
   const ref = useRef(null);
 
   const browserHistory = useHistory();
@@ -41,23 +44,49 @@ const Overlay = ({
 
   useModalClose(close, ref);
 
+  // for better ui in rtl
+  let classNames = {
+    overlay__is_fixed_height: 'overlay--is-fixed-height',
+    overlay__content: 'overlay__content',
+    overlay__body: 'overlay__body',
+    overlay__header: 'overlay__header',
+    overlay__title: 'overlay__title',
+    overlay__actions: 'overlay__actions',
+    overlay__close_button: 'overlay__close-button',
+    overlay__actions_mobile: 'overlay__actions-mobile'
+  };
+  if (direction === 'rtl') {
+    classNames = {
+      overlay__is_fixed_height: 'rtl-overlay--is-fixed-height',
+      overlay__content: 'rtl-overlay__content',
+      overlay__body: 'rtl-overlay__body',
+      overlay__header: 'rtl-overlay__header',
+      overlay__title: 'rtl-overlay__title',
+      overlay__actions: 'rtl-overlay__actions',
+      overlay__close_button: 'rtl-overlay__close-button',
+      overlay__actions_mobile: 'rtl-overlay__actions-mobile'
+    };
+  }
+
   return (
     <div
-      className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}
+      className={`overlay ${
+        isFixedHeight ? classNames.overlay__is_fixed_height : ''
+      }`}
     >
-      <div className="overlay__content">
+      <div className={classNames.overlay__content}>
         <section
           role="main"
-          aria-label={ariaLabel}
+          aria-label={classNames.ariaLabel}
           ref={ref}
-          className="overlay__body"
+          className={classNames.overlay__body}
         >
-          <header className="overlay__header">
-            <h2 className="overlay__title">{title}</h2>
-            <div className="overlay__actions">
+          <header className={classNames.overlay__header}>
+            <h2 className={classNames.overlay__title}>{title}</h2>
+            <div className={classNames.overlay__actions}>
               <MediaQuery minWidth={770}>{actions}</MediaQuery>
               <button
-                className="overlay__close-button"
+                className={classNames.overlay__close_button}
                 onClick={close}
                 aria-label={t('Overlay.AriaLabel', { title })}
               >
@@ -67,7 +96,9 @@ const Overlay = ({
           </header>
           <MediaQuery maxWidth={769}>
             {actions && (
-              <div className="overlay__actions-mobile">{actions}</div>
+              <div className={classNames.overlay__actions_mobile}>
+                {actions}
+              </div>
             )}
           </MediaQuery>
           {children}

client/modules/IDE/actions/preferences.js

@@ -1,6 +1,7 @@
 import i18next from 'i18next';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
+import { rtlLanguageList } from '../../../i18n';
 
 function updatePreferences(formParams, dispatch) {
   apiClient
@@ -235,6 +236,14 @@ export function setLanguage(value, { persistPreference = true } = {}) {
       type: ActionTypes.SET_LANGUAGE,
       language: value
     });
+    // change direction base on language
+    dispatch({
+      type: ActionTypes.SET_DIRECTION,
+      direction:
+        Array.isArray(rtlLanguageList) && rtlLanguageList.includes(value)
+          ? 'rtl'
+          : 'ltr'
+    });
     const state = getState();
     if (persistPreference && state.user.authenticated) {
       const formParams = {

client/modules/IDE/components/Editor/index.jsx

@@ -532,37 +532,75 @@ class Editor extends React.Component {
 
     const { currentLine } = this.state;
 
+    // for better ui in rtl
+    const { direction } = this.props; // Access direction from props
+    let editorHeader = 'editor__header';
+    let editorHeaderContent = (
+      <>
+        <button
+          aria-label={this.props.t('Editor.OpenSketchARIA')}
+          className="sidebar__contract"
+          onClick={() => {
+            this.props.collapseSidebar();
+            this.props.closeProjectOptions();
+          }}
+        >
+          <LeftArrowIcon focusable="false" aria-hidden="true" />
+        </button>
+        <button
+          aria-label={this.props.t('Editor.CloseSketchARIA')}
+          className="sidebar__expand"
+          onClick={this.props.expandSidebar}
+        >
+          <RightArrowIcon focusable="false" aria-hidden="true" />
+        </button>
+        <div className="editor__file-name">
+          <span>
+            {this.props.file.name}
+            <UnsavedChangesIndicator />
+          </span>
+          <Timer />
+        </div>
+      </>
+    );
+    if (direction === 'rtl') {
+      editorHeader = 'editor__header-rtl';
+      editorHeaderContent = (
+        <>
+          <div className="editor__file-name-rtl">
+            <span>
+              {this.props.file.name}
+              <UnsavedChangesIndicator />
+            </span>
+            <Timer />
+          </div>
+          <button
+            aria-label={this.props.t('Editor.CloseSketchARIA')}
+            className="sidebar__expand"
+            onClick={this.props.expandSidebar}
+          >
+            <LeftArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+          <button
+            aria-label={this.props.t('Editor.OpenSketchARIA')}
+            className="sidebar__contract"
+            onClick={() => {
+              this.props.collapseSidebar();
+              this.props.closeProjectOptions();
+            }}
+          >
+            <RightArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+        </>
+      );
+    }
+
     return (
       <MediaQuery minWidth={770}>
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <div className="editor__header">
-                <button
-                  aria-label={this.props.t('Editor.OpenSketchARIA')}
-                  className="sidebar__contract"
-                  onClick={() => {
-                    this.props.collapseSidebar();
-                    this.props.closeProjectOptions();
-                  }}
-                >
-                  <LeftArrowIcon focusable="false" aria-hidden="true" />
-                </button>
-                <button
-                  aria-label={this.props.t('Editor.CloseSketchARIA')}
-                  className="sidebar__expand"
-                  onClick={this.props.expandSidebar}
-                >
-                  <RightArrowIcon focusable="false" aria-hidden="true" />
-                </button>
-                <div className="editor__file-name">
-                  <span>
-                    {this.props.file.name}
-                    <UnsavedChangesIndicator />
-                  </span>
-                  <Timer />
-                </div>
-              </div>
+              <div className={editorHeader}>{editorHeaderContent}</div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -672,7 +710,8 @@ Editor.propTypes = {
   provideController: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   setSelectedFile: PropTypes.func.isRequired,
-  expandConsole: PropTypes.func.isRequired
+  expandConsole: PropTypes.func.isRequired,
+  direction: PropTypes.string.isRequired // Add direction to propTypes
 };
 
 function mapStateToProps(state) {
@@ -686,7 +725,7 @@ function mapStateToProps(state) {
     user: state.user,
     project: state.project,
     consoleEvents: state.console,
-
+    direction: state.preferences.direction, // Map direction to props
     ...state.preferences,
     ...state.ide,
     ...state.project,