Add RTL Support (#1135)

src/components/common/Audio.scss

@@ -74,6 +74,7 @@
     align-self: center;
     min-width: 0;
     flex-grow: 1;
+    text-align: initial;
   }
 
   .content-row {

src/components/common/Audio.tsx

@@ -237,7 +237,7 @@ const Audio: FC<OwnProps & StateProps> = ({
       <>
         <div className={contentClassName}>
           <div className="content-row">
-            <p className="title">{renderText(getFirstLine())}</p>
+            <p className="title" dir="auto">{renderText(getFirstLine())}</p>
 
             <div className="message-date">
               {date && (
@@ -253,7 +253,7 @@ const Audio: FC<OwnProps & StateProps> = ({
 
           {showSeekline && renderSeekline(playProgress, bufferedProgress, seekHandlers)}
           {!showSeekline && (
-            <p className="duration">
+            <p className="duration" dir="auto">
               {playProgress > 0 ? `${formatMediaDuration(duration * playProgress)} / ` : undefined}
               {getSecondLine()}
             </p>
@@ -318,10 +318,10 @@ function renderAudio(
 
   return (
     <div className="content">
-      <p className="title">{renderText(title || fileName)}</p>
+      <p className="title" dir="auto">{renderText(title || fileName)}</p>
       {showSeekline && renderSeekline(playProgress, bufferedProgress, seekHandlers)}
       {!showSeekline && (
-        <div className="meta">
+        <div className="meta" dir="auto">
           <span className="performer">{renderText(performer || 'Unknown')}</span>
           {date && (
             <>
@@ -333,7 +333,7 @@ function renderAudio(
           )}
         </div>
       )}
-      <p className="duration">
+      <p className="duration" dir="auto">
         {playProgress > 0 ? `${formatMediaDuration(duration * playProgress)} / ` : undefined}
         {formatMediaDuration(duration)}
       </p>
@@ -345,7 +345,7 @@ function renderVoice(voice: ApiVoice, renderedWaveform: any, isMediaUnread?: boo
   return (
     <div className="content">
       {renderedWaveform}
-      <p className="voice-duration">
+      <p className="voice-duration" dir="auto">
         {formatMediaDuration(voice.duration)}
         {isMediaUnread && <span>&bull;</span>}
       </p>

src/components/common/EmbeddedMessage.tsx

@@ -63,8 +63,8 @@ const EmbeddedMessage: FC<OwnProps> = ({
     >
       {mediaThumbnail && renderPictogram(pictogramId, mediaThumbnail, mediaBlobUrl, isRoundVideo)}
       <div className="message-text">
-        <div className="message-title">{renderText(senderTitle || title || NBSP)}</div>
+        <div className="message-title" dir="auto">{renderText(senderTitle || title || NBSP)}</div>
-        <p>
+        <p dir="auto">
           {!message ? (
             customText || NBSP
           ) : isActionMessage(message) ? (

src/components/common/File.tsx

@@ -113,7 +113,7 @@ const File: FC<OwnProps> = ({
         ) : (
           <div className={`file-icon ${color}`}>
             {extension.length <= 4 && (
-              <span className="file-ext">{extension}</span>
+              <span className="file-ext" dir="auto">{extension}</span>
             )}
           </div>
         )}
@@ -129,8 +129,8 @@ const File: FC<OwnProps> = ({
         {onClick && <i className={buildClassName('icon-download', shouldSpinnerRender && 'hidden')} />}
       </div>
       <div className="file-info">
-        <div className="file-title">{renderText(name)}</div>
+        <div className="file-title" dir="auto">{renderText(name)}</div>
-        <div className="file-subtitle">
+        <div className="file-subtitle" dir="auto">
           <span>
             {isTransferring && transferProgress ? `${Math.round(transferProgress * 100)}%` : sizeString}
           </span>

src/components/common/GroupChatInfo.tsx

@@ -84,7 +84,7 @@ const GroupChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
   function renderStatusOrTyping() {
     if (withUpdatingStatus && !areMessagesLoaded && !isRestricted) {
       return (
-        <span className="status">{lang('Updating')}</span>
+        <span className="status" dir="auto">{lang('Updating')}</span>
       );
     }
 
@@ -98,7 +98,7 @@ const GroupChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
 
     if (withChatType) {
       return (
-        <div className="status">{lang(getChatTypeString(chat))}</div>
+        <div className="status" dir="auto">{lang(getChatTypeString(chat))}</div>
       );
     }
 
@@ -125,7 +125,7 @@ const GroupChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
       />
       <div className="info">
         <div className="title">
-          <h3>{renderText(getChatTitle(lang, chat))}</h3>
+          <h3 dir="auto">{renderText(getChatTitle(lang, chat))}</h3>
           {chat.isVerified && <VerifiedIcon />}
         </div>
         {renderStatusOrTyping()}

src/components/common/PickerSelectedItem.tsx

@@ -85,7 +85,7 @@ const PickerSelectedItem: FC<OwnProps & StateProps> = ({
     >
       {iconElement}
       {!isMinimized && (
-        <div className="item-name">
+        <div className="item-name" dir="auto">
           {titleText}
         </div>
       )}

src/components/common/PrivateChatInfo.tsx

@@ -83,13 +83,13 @@ const PrivateChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
   function renderStatusOrTyping() {
     if (status) {
       return (
-        <span className="status">{status}</span>
+        <span className="status" dir="auto">{status}</span>
       );
     }
 
     if (withUpdatingStatus && !areMessagesLoaded) {
       return (
-        <span className="status">{lang('Updating')}</span>
+        <span className="status" dir="auto">{lang('Updating')}</span>
       );
     }
 
@@ -104,7 +104,7 @@ const PrivateChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
     return (
       <div className={`status ${isUserOnline(user) ? 'online' : ''}`}>
         {withUsername && user.username && <span className="handle">{user.username}</span>}
-        <span className="user-status">{getUserStatus(lang, user)}</span>
+        <span className="user-status" dir="auto">{getUserStatus(lang, user)}</span>
       </div>
     );
   }
@@ -125,7 +125,7 @@ const PrivateChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
           </div>
         ) : (
           <div className="title">
-            <h3>{fullName && renderText(fullName)}</h3>
+            <h3 dir="auto">{fullName && renderText(fullName)}</h3>
             {user && user.isVerified && <VerifiedIcon />}
           </div>
         )}

src/components/common/TypingStatus.tsx

@@ -23,7 +23,7 @@ const TypingStatus: FC<OwnProps & StateProps> = ({ typingStatus, typingUser }) =
   return (
     <p className="typing-status">
       {typingUserName && (
-        <span className="sender-name">{renderText(typingUserName)}</span>
+        <span className="sender-name" dir="auto">{renderText(typingUserName)}</span>
       )}
       {typingStatus.action}
       <span className="ellipsis" />

src/components/common/helpers/renderMessageText.tsx

@@ -229,6 +229,7 @@ function processEntity(
         <a
           onClick={handleBotCommandClick}
           className="text-entity-link"
+          dir="auto"
         >
           {renderMessagePart(renderedContent)}
         </a>
@@ -238,6 +239,7 @@ function processEntity(
         <a
           onClick={handleHashtagClick}
           className="text-entity-link"
+          dir="auto"
         >
           {renderMessagePart(renderedContent)}
         </a>
@@ -247,6 +249,7 @@ function processEntity(
         <a
           onClick={handleHashtagClick}
           className="text-entity-link"
+          dir="auto"
         >
           {renderMessagePart(renderedContent)}
         </a>
@@ -260,6 +263,7 @@ function processEntity(
           target="_blank"
           rel="noopener noreferrer"
           className="text-entity-link"
+          dir="auto"
         >
           {renderMessagePart(renderedContent)}
         </a>
@@ -385,6 +389,7 @@ function processEntityAsHtml(
         data-entity-type="${ApiMessageEntityTypes.MentionName}"
         data-user-id="${entity.userId}"
         contenteditable="false"
+        dir="auto"
       >${renderedContent}</a>`;
     case ApiMessageEntityTypes.Url:
     case ApiMessageEntityTypes.TextUrl:
@@ -392,6 +397,7 @@ function processEntityAsHtml(
         class="text-entity-link"
         href=${getLinkUrl(rawEntityText, entity)}
         data-entity-type="${entity.type}"
+        dir="auto"
       >${renderedContent}</a>`;
     default:
       return renderedContent;

src/components/left/main/Chat.scss

@@ -82,6 +82,7 @@
       padding-right: 0.25rem;
       flex-grow: 1;
       color: var(--color-text-secondary);
+      unicode-bidi: plaintext;
 
       .sender-name {
         color: var(--color-text);

src/components/left/main/Chat.tsx

@@ -193,7 +193,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
 
     if (draft && draft.text.length) {
       return (
-        <p className="last-message">
+        <p className="last-message" dir="auto">
           <span className="draft">{lang('Draft')}</span>
           {renderText(draft.text)}
         </p>
@@ -210,7 +210,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
         : lastMessageSender;
 
       return (
-        <p className="last-message">
+        <p className="last-message" dir="auto">
           {renderText(renderActionMessageText(
             lang,
             lastMessage,
@@ -227,7 +227,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
     const senderName = getMessageSenderName(lang, chatId, lastMessageSender);
 
     return (
-      <p className="last-message">
+      <p className="last-message" dir="auto">
         {senderName && (
           <span className="sender-name">{renderText(senderName)}</span>
         )}

src/components/left/main/ContactList.tsx

@@ -82,7 +82,7 @@ const ContactList: FC<OwnProps & StateProps & DispatchProps> = ({
           </ListItem>
         ))
       ) : viewportIds && !viewportIds.length ? (
-        <p className="no-results" key="no-results">
+        <p className="no-results" key="no-results" dir="auto">
           {filter.length ? 'No contacts matched your search.' : 'Contact list is empty.'}
         </p>
       ) : (

src/components/left/search/ChatMessage.tsx

@@ -86,7 +86,7 @@ const ChatMessage: FC<OwnProps & StateProps & DispatchProps> = ({
       <div className="info">
         <div className="info-row">
           <div className="title">
-            <h3>{renderText(getChatTitle(lang, chat, privateChatUser))}</h3>
+            <h3 dir="auto">{renderText(getChatTitle(lang, chat, privateChatUser))}</h3>
             {chat.isVerified && <VerifiedIcon />}
           </div>
           <div className="message-date">
@@ -97,7 +97,7 @@ const ChatMessage: FC<OwnProps & StateProps & DispatchProps> = ({
 
         </div>
         <div className="subtitle">
-          <div className="message">
+          <div className="message" dir="auto">
             {renderMessageSummary(lang, message, mediaBlobUrl || mediaThumbnail, searchQuery, isRoundVideo)}
           </div>
         </div>

src/components/left/search/LeftSearch.scss

@@ -95,15 +95,24 @@
   .ListItem.search-result {
     .ChatInfo {
       .handle {
+        unicode-bidi: plaintext;
         color: var(--color-primary);
 
         &::before {
           content: '@';
+          html[lang=ar] & {
+            content: ' ،@';
+            margin-inline-end: .25rem;
+          }
         }
 
         &::after {
           content: ', ';
           color: var(--color-text-secondary);
+
+          html[lang=ar] & {
+            content: '';
+          }
         }
       }
     }

src/components/left/settings/SettingsPrivacy.tsx

@@ -74,7 +74,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
           <div className="multiline-menu-item">
             <span className="title">{lang('BlockedUsers')}</span>
             {blockedCount > 0 && (
-              <span className="subtitle">
+              <span className="subtitle" dir="auto">
                 {lang('Users', blockedCount)}
               </span>
             )}
@@ -89,7 +89,9 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         >
           <div className="multiline-menu-item">
             <span className="title">{lang('TwoStepVerification')}</span>
-            <span className="subtitle">{lang(hasPassword ? 'PasswordOn' : 'PasswordOff')}</span>
+            <span className="subtitle" dir="auto">
+              {lang(hasPassword ? 'PasswordOn' : 'PasswordOff')}
+            </span>
           </div>
         </ListItem>
         <ListItem
@@ -100,7 +102,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
           <div className="multiline-menu-item">
             <span className="title">{lang('SessionsTitle')}</span>
             {sessionsCount > 0 && (
-              <span className="subtitle">
+              <span className="subtitle" dir="auto">
                 {sessionsCount === 1 ? '1 session' : `${sessionsCount} sessions`}
               </span>
             )}
@@ -117,7 +119,9 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         >
           <div className="multiline-menu-item">
             <span className="title">{lang('PrivacyPhoneTitle')}</span>
-            <span className="subtitle">{getVisibilityValue(visibilityPrivacyPhoneNumber)}</span>
+            <span className="subtitle" dir="auto">
+              {getVisibilityValue(visibilityPrivacyPhoneNumber)}
+            </span>
           </div>
         </ListItem>
         <ListItem
@@ -126,7 +130,9 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         >
           <div className="multiline-menu-item">
             <span className="title">{lang('LastSeenTitle')}</span>
-            <span className="subtitle">{getVisibilityValue(visibilityPrivacyLastSeen)}</span>
+            <span className="subtitle" dir="auto">
+              {getVisibilityValue(visibilityPrivacyLastSeen)}
+            </span>
           </div>
         </ListItem>
         <ListItem
@@ -135,7 +141,9 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         >
           <div className="multiline-menu-item">
             <span className="title">{lang('PrivacyProfilePhotoTitle')}</span>
-            <span className="subtitle">{getVisibilityValue(visibilityPrivacyProfilePhoto)}</span>
+            <span className="subtitle" dir="auto">
+              {getVisibilityValue(visibilityPrivacyProfilePhoto)}
+            </span>
           </div>
         </ListItem>
         <ListItem
@@ -144,7 +152,9 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         >
           <div className="multiline-menu-item">
             <span className="title">{lang('PrivacyForwardsTitle')}</span>
-            <span className="subtitle">{getVisibilityValue(visibilityPrivacyForwarding)}</span>
+            <span className="subtitle" dir="auto">
+              {getVisibilityValue(visibilityPrivacyForwarding)}
+            </span>
           </div>
         </ListItem>
         <ListItem
@@ -153,7 +163,9 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         >
           <div className="multiline-menu-item">
             <span className="title">{lang('WhoCanAddMe')}</span>
-            <span className="subtitle">{getVisibilityValue(visibilityPrivacyGroupChats)}</span>
+            <span className="subtitle" dir="auto">
+              {getVisibilityValue(visibilityPrivacyGroupChats)}
+            </span>
           </div>
         </ListItem>
       </div>

src/components/left/settings/SettingsPrivacyBlockedUsers.tsx

@@ -67,13 +67,13 @@ const SettingsPrivacyBlockedUsers: FC<StateProps & DispatchProps> = ({
         style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
       >
         <Avatar size="medium" user={user} chat={chat} />
-        <div className="contact-info">
+        <div className="contact-info" dir="auto">
-          <h3>{renderText((isPrivate ? getUserFullName(user) : getChatTitle(lang, chat!)) || '')}</h3>
+          <h3 dir="auto">{renderText((isPrivate ? getUserFullName(user) : getChatTitle(lang, chat!)) || '')}</h3>
           {user && user.phoneNumber && (
-            <div className="contact-phone">{formatPhoneNumberWithCode(user.phoneNumber)}</div>
+            <div className="contact-phone" dir="auto">{formatPhoneNumberWithCode(user.phoneNumber)}</div>
           )}
           {user && !user.phoneNumber && user.username && (
-            <div className="contact-username">@{user.username}</div>
+            <div className="contact-username" dir="auto">@{user.username}</div>
           )}
         </div>
       </ListItem>

src/components/left/settings/folders/SettingsFoldersChatsPicker.tsx

@@ -121,7 +121,7 @@ const SettingsFoldersChatsPicker: FC<OwnProps> = ({
         ripple
       >
         <i className={`icon-${type.icon}`} />
-        <h3 className="chat-type">{lang(type.title)}</h3>
+        <h3 className="chat-type" dir="auto">{lang(type.title)}</h3>
         <Checkbox
           label=""
           checked={selectedChatTypes.includes(type.key)}
@@ -179,7 +179,9 @@ const SettingsFoldersChatsPicker: FC<OwnProps> = ({
             placeholder={lang('Search')}
           />
         ) : (
-          <p className="max-items-reached">{`Sorry, you can't add more than ${MAX_CHATS} chats.`}</p>
+          <p className="max-items-reached" dir="auto">
+            {`Sorry, you can't add more than ${MAX_CHATS} chats.`}
+          </p>
         )}
       </div>
       <InfiniteScroll

src/components/left/settings/folders/SettingsFoldersMain.tsx

@@ -139,7 +139,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps & DispatchProps> = ({
           )}
         </div>
 
-        <p className="settings-item-description mb-3">
+        <p className="settings-item-description mb-3" dir="auto">
           {lang('CreateNewFilterInfo')}
         </p>
 

src/components/left/settings/twoFa/SettingsTwoFaCongratulations.tsx

@@ -32,7 +32,7 @@ const SettingsTwoFaCongratulations: FC<OwnProps & StateProps> = ({
       <div className="settings-content-header">
         <AnimatedEmoji sticker={animatedEmoji} />
 
-        <p className="settings-item-description mb-3">
+        <p className="settings-item-description mb-3" dir="auto">
           {lang('TwoStepVerificationPasswordSetInfo')}
         </p>
       </div>

src/components/left/settings/twoFa/SettingsTwoFaEnabled.tsx

@@ -29,7 +29,7 @@ const SettingsTwoFaEnabled: FC<OwnProps & StateProps> = ({
       <div className="settings-content-header">
         <AnimatedEmoji sticker={animatedEmoji} />
 
-        <p className="settings-item-description mb-3">
+        <p className="settings-item-description mb-3" dir="auto">
           {renderText(lang('EnabledPasswordText'), ['br'])}
         </p>
       </div>

src/components/left/settings/twoFa/SettingsTwoFaStart.tsx

@@ -25,7 +25,7 @@ const SettingsTwoFaStart: FC<OwnProps & StateProps> = ({ animatedEmoji, onStart
       <div className="settings-content-header">
         <AnimatedEmoji sticker={animatedEmoji} />
 
-        <p className="settings-item-description mb-3">
+        <p className="settings-item-description mb-3" dir="auto">
           {lang('SetAdditionalPasswordInfo')}
         </p>
       </div>

src/components/main/ForwardPicker.scss

@@ -31,6 +31,7 @@
       padding: 0.5rem;
       font-size: 1.25rem;
       line-height: 1.75rem;
+      unicode-bidi: plaintext;
     }
   }
 

src/components/mediaViewer/MediaViewerFooter.tsx

@@ -46,7 +46,7 @@ const MediaViewerFooter: FC<OwnProps> = ({ text = '', isHideable, onClick }) =>
     <div className={`MediaViewerFooter ${isHideable ? 'hideable' : ''}`} onClick={stopEvent}>
       {text && (
         <div className="media-viewer-footer-content" onClick={onClick}>
-          <p className={`media-text custom-scroll ${isMultiline ? 'multiline' : ''}`}>{text}</p>
+          <p className={`media-text custom-scroll ${isMultiline ? 'multiline' : ''}`} dir="auto">{text}</p>
         </div>
       )}
     </div>

src/components/mediaViewer/SenderInfo.tsx

@@ -58,10 +58,10 @@ const SenderInfo: FC<OwnProps & StateProps & DispatchProps> = ({
         <Avatar key={sender.id} size="medium" user={sender as ApiUser} />
       )}
       <div className="meta">
-        <div className="title">
+        <div className="title" dir="auto">
           {senderTitle && renderText(senderTitle)}
         </div>
-        <div className="date">
+        <div className="date" dir="auto">
           {isAvatar ? lang('lng_mediaview_profile_photo') : formatMediaDateTime(lang, message!.date * 1000)}
         </div>
       </div>

src/components/middle/AudioPlayer.tsx

@@ -102,9 +102,9 @@ function renderAudio(audio: ApiAudio) {
 
   return (
     <>
-      <div className="title">{renderText(title || fileName)}</div>
+      <div className="title" dir="auto">{renderText(title || fileName)}</div>
       {performer && (
-        <div className="subtitle">{renderText(performer)}</div>
+        <div className="subtitle" dir="auto">{renderText(performer)}</div>
       )}
     </>
   );
@@ -113,8 +113,8 @@ function renderAudio(audio: ApiAudio) {
 function renderVoice(subtitle: string, senderName?: string) {
   return (
     <>
-      <div className="title">{senderName && renderText(senderName)}</div>
+      <div className="title" dir="auto">{senderName && renderText(senderName)}</div>
-      <div className="subtitle">{subtitle}</div>
+      <div className="subtitle" dir="auto">{subtitle}</div>
     </>
   );
 }

src/components/middle/HeaderPinnedMessage.tsx

@@ -86,10 +86,10 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
         />
         {mediaThumbnail && renderPictogram(mediaThumbnail, mediaBlobUrl)}
         <div className="message-text">
-          <div className="title">
+          <div className="title" dir="auto">
             {customTitle || `${lang('PinnedMessage')} ${index > 0 ? `#${count - index}` : ''}`}
           </div>
-          <p>{renderText(text)}</p>
+          <p dir="auto">{renderText(text)}</p>
         </div>
 
         <RippleEffect />

src/components/middle/MessageList.tsx

@@ -702,7 +702,7 @@ function renderMessages(
         teactFastList
       >
         <div className="sticky-date" key="date-header">
-          <span>
+          <span dir="auto">
             {isSchedule && dateGroup.originalDate === SCHEDULED_WHEN_ONLINE && (
               lang('MessageScheduledUntilOnline')
             )}

src/components/middle/MiddleHeader.scss

@@ -226,6 +226,7 @@
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    unicode-bidi: plaintext;
 
     @media (max-width: 600px) {
       display: block;
@@ -264,6 +265,10 @@
         margin-top: 0.05rem;
       }
     }
+
+    .user-status, .status {
+      unicode-bidi: plaintext;
+    }
   }
 
   .Avatar {

src/components/middle/composer/Composer.scss

@@ -256,6 +256,8 @@
     overflow: hidden;
     line-height: 1.375rem;
     font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif;
+    unicode-bidi: plaintext;
+    text-align: initial;
 
     &.overflown {
       overflow-y: auto;
@@ -278,6 +280,8 @@
     bottom: .9375rem;
     color: var(--color-placeholders);
     pointer-events: none;
+    unicode-bidi: plaintext;
+    text-align: initial;
 
     @media (max-width: 600px) {
       bottom: 0.6875rem;
@@ -301,6 +305,8 @@
     opacity: 0;
     pointer-events: none;
     z-index: -10;
+    unicode-bidi: plaintext;
+    text-align: initial;
   }
 }
 

src/components/middle/composer/EmojiCategory.tsx

@@ -47,7 +47,9 @@ const EmojiCategory: FC<OwnProps> = ({
       id={`emoji-category-${index}`}
       className="symbol-set"
     >
-      <p className="symbol-set-name">{lang(category.id === 'recent' ? 'RecentStickers' : `Emoji${index}`)}</p>
+      <p className="symbol-set-name" dir="auto">
+        {lang(category.id === 'recent' ? 'RecentStickers' : `Emoji${index}`)}
+      </p>
       <div
         className={buildClassName('symbol-set-container', transitionClassNames)}
         // @ts-ignore

src/components/middle/composer/MessageInput.tsx

@@ -356,6 +356,7 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
         ref={inputRef}
         id={editableInputId || EDITABLE_INPUT_ID}
         className={className}
+        dir="auto"
         contentEditable
         onClick={focusInput}
         onChange={handleChange}
@@ -364,8 +365,8 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
         onContextMenu={stopEvent}
         onTouchCancel={handleTouchSelection}
       />
-      <div ref={cloneRef} className={buildClassName(className, 'clone')} />
+      <div ref={cloneRef} className={buildClassName(className, 'clone')} dir="auto" />
-      <span className="placeholder-text">{placeholder}</span>
+      <span className="placeholder-text" dir="auto">{placeholder}</span>
       <TextFormatter
         isOpen={isTextFormatterOpen}
         anchorPosition={textFormatterAnchorPosition}

src/components/middle/composer/PollModal.scss

@@ -44,6 +44,10 @@
   .option-wrapper {
     position: relative;
 
+    .form-control {
+      padding-right: 3rem;
+    }
+
     .option-remove-button {
       position: absolute;
       top: 0.3125rem;

src/components/middle/composer/PollModal.tsx

@@ -337,6 +337,7 @@ const PollModal: FC<OwnProps> = ({ isOpen, onSend, onClear }) => {
               ref={solutionRef}
               className="form-control"
               contentEditable
+              dir="auto"
               onChange={(e) => setSolution(e.currentTarget.innerHTML)}
             />
             <div className="note">{lang('CreatePoll.ExplanationInfo')}</div>

src/components/middle/composer/SymbolMenu.scss

@@ -122,6 +122,12 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    text-align: initial;
+    unicode-bidi: plaintext;
+  }
+
+  &-container {
+    text-align: initial;
   }
 
   &-button {

src/components/middle/composer/TextFormatter.tsx

@@ -258,7 +258,7 @@ const TextFormatter: FC<OwnProps> = ({
     }
 
     const text = getSelectedText();
-    document.execCommand('insertHTML', false, `<code class="text-entity-code">${text}</code>`);
+    document.execCommand('insertHTML', false, `<code class="text-entity-code" dir="auto">${text}</code>`);
     onClose();
   }, [
     getSelectedElement, getSelectedText, onClose,
@@ -282,7 +282,11 @@ const TextFormatter: FC<OwnProps> = ({
 
     const text = getSelectedText();
     restoreSelection();
-    document.execCommand('insertHTML', false, `<a href=${formattedLinkUrl} class="text-entity-link">${text}</a>`);
+    document.execCommand(
+      'insertHTML',
+      false,
+      `<a href=${formattedLinkUrl} class="text-entity-link" dir="auto">${text}</a>`,
+    );
     onClose();
   }
 
@@ -424,6 +428,7 @@ const TextFormatter: FC<OwnProps> = ({
               placeholder="Enter URL..."
               autoComplete="off"
               inputMode="url"
+              dir="auto"
               onChange={handleLinkUrlChange}
               onScroll={updateInputStyles}
             />

src/components/middle/composer/hooks/useMentionTooltip.ts

@@ -73,6 +73,7 @@ export default function useMentionTooltip(
           data-entity-type="${ApiMessageEntityTypes.MentionName}"
           data-user-id="${user.id}"
           contenteditable="false"
+          dir="auto"
         >${getUserFirstOrLastName(user)}</a>`;
 
     const atIndex = html.lastIndexOf('@');

src/components/middle/message/CommentButton.tsx

@@ -78,7 +78,7 @@ const CommentButton: FC<OwnProps & StateProps & DispatchProps> = ({
       <i className="icon-comments-sticker" />
       {(!recentRepliers || recentRepliers.length === 0) && <i className="icon-comments" />}
       {renderRecentRepliers()}
-      <div className="label">
+      <div className="label" dir="auto">
         {messagesCount ? lang('Comments', messagesCount, 'i') : lang('LeaveAComment')}
       </div>
       <i className="icon-next" />

src/components/middle/message/MentionLink.tsx

@@ -35,7 +35,7 @@ const MentionLink: FC<OwnProps & StateProps & DispatchProps> = ({
   };
 
   return (
-    <a onClick={handleClick} className="text-entity-link">
+    <a onClick={handleClick} className="text-entity-link" dir="auto">
       {children}
     </a>
   );

src/components/middle/message/Message.tsx

@@ -503,9 +503,10 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
       noMediaCorners && 'no-media-corners',
     );
     const hasCustomAppendix = isLastInGroup && !textParts && !asForwarded && !hasThread;
+    const shouldInlineMeta = !webPage && !animatedEmoji && textParts;
 
     return (
-      <div className={className} onDoubleClick={handleContentDoubleClick}>
+      <div className={className} onDoubleClick={handleContentDoubleClick} dir="auto">
         {renderSenderName()}
         {hasReply && (
           <EmbeddedMessage
@@ -605,7 +606,19 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
         {poll && (
           <Poll message={message} poll={poll} onSendVote={handleVoteSend} />
         )}
-        {!animatedEmoji && textParts && <p className="text-content">{textParts}</p>}
+        {!animatedEmoji && textParts && (
+          <p className={`text-content ${shouldInlineMeta ? 'with-meta' : ''}`} dir="auto">
+            {textParts}
+            {shouldInlineMeta && (
+              <MessageMeta
+                message={message}
+                outgoingStatus={outgoingStatus}
+                signature={signature}
+                onClick={handleMessageSelect}
+              />
+            )}
+          </p>
+        )}
         {webPage && (
           <WebPage
             message={message}
@@ -737,13 +750,14 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
           className={contentClassName}
           // @ts-ignore
           style={style}
+          dir="auto"
         >
           {withAppendix && (<div className="svg-appendix" ref={appendixRef} />)}
           {asForwarded && !customShape && (!isInDocumentGroup || isFirstInDocumentGroup) && (
             <div className="message-title">{lang('ForwardedMessage')}</div>
           )}
           {renderContent()}
-          {(!isInDocumentGroup || isLastInDocumentGroup) && (
+          {(!isInDocumentGroup || isLastInDocumentGroup) && !(!webPage && !animatedEmoji && textParts) && (
             <MessageMeta
               message={message}
               outgoingStatus={outgoingStatus}

src/components/middle/message/MessageMeta.scss

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   background: rgba(#999999, 0.6);
-  border-radius: .65rem;
+  border-radius: .625rem;
   padding: 0 .25rem;
   color: white;
   cursor: pointer;
@@ -64,9 +64,21 @@
     }
   }
 
+  .media:not(.text):dir(rtl) &,
+  .Message .custom-shape:dir(rtl) & {
+    right: auto !important;
+    left: .25rem;
+    padding: 0 .375rem 0 .3125rem;
+  }
+
+  .is-forwarded.media:not(.text):dir(rtl) &,
+  .Message .is-forwarded.custom-shape:dir(rtl) & {
+    left: .8125rem;
+  }
+
   .is-forwarded.media:not(.text) & {
-    bottom: 0.9rem;
+    bottom: 0.935rem;
-    right: 0.8rem;
+    right: 0.8125rem;
   }
 
   .emoji-only & {
@@ -80,6 +92,8 @@
   .MessageOutgoingStatus {
     margin-left: -.1875rem;
     font-size: 1.1875rem;
+    border-radius: .625rem;
+
     .Message.own & {
       color: var(--color-accent-own);
     }

src/components/middle/message/Poll.scss

@@ -1,5 +1,6 @@
 .Poll {
   min-width: 15rem;
+  text-align: initial;
 
   @media (max-width: 600px) {
     min-width: 50vw;

src/components/middle/message/Poll.tsx

@@ -256,7 +256,7 @@ const Poll: FC<OwnProps & StateProps & DispatchProps> = ({
   }
 
   return (
-    <div className="Poll">
+    <div className="Poll" dir="auto">
       {renderSolution()}
       <div className="poll-question">{renderText(summary.question)}</div>
       <div className="poll-type">

src/components/middle/message/WebPage.tsx

@@ -72,6 +72,7 @@ const WebPage: FC<OwnProps> = ({
     <div
       className={className}
       data-initial={(siteName || displayUrl)[0]}
+      dir="auto"
     >
       {photo && (
         <Photo

src/components/middle/message/_message-content.scss

@@ -10,6 +10,34 @@
     margin: 0;
     word-break: break-word;
     line-height: 1.3125;
+    text-align: initial;
+    display: flow-root;
+    unicode-bidi: plaintext;
+  }
+
+  .text-entity-link {
+    unicode-bidi: plaintext;
+  }
+
+  .text-content,
+  &.document {
+    & > .MessageMeta {
+      position: relative;
+      top: .4375rem;
+      bottom: auto !important;
+      float: right;
+      line-height: 1;
+      margin-left: .4375rem;
+      margin-right: -.5rem;
+    }
+
+    &:dir(rtl) {
+      & > .MessageMeta {
+        float: left;
+        margin-left: -.25rem;
+        margin-right: .4375rem;
+      }
+    }
   }
 
   .theme-dark .Message.own & {
@@ -24,6 +52,10 @@
 
   &:not(.custom-shape) {
     font-size: var(--message-text-size, 1rem);
+
+    & > .content-inner {
+      min-width: 0;
+    }
   }
 
   .matching-text-highlight {
@@ -40,6 +72,7 @@
     font-weight: 500;
     line-height: 1.25rem;
     color: var(--accent-color);
+    unicode-bidi: plaintext;
     display: flex;
 
     & > .interactive {
@@ -94,8 +127,8 @@
 
     .admin-title {
       flex: 1;
-      margin-left: 1rem;
+      margin-inline-start: 1rem;
-      text-align: right;
+      text-align: end;
       font-weight: 400;
       font-size: 0.75rem;
       margin-top: -0.1rem;
@@ -118,7 +151,7 @@
   &.has-solid-background {
     padding: .3125rem .5rem .375rem;
 
-    .text-content:last-child::after {
+    .forwarded-message > .text-content:not(.with-meta):last-child::after {
       content: '';
       display: inline-block;
       width: var(--meta-safe-area-size);
@@ -210,7 +243,7 @@
     width: 1.25rem;
     background-size: 1.25rem;
     color: transparent;
-    margin-right: 1px;
+    margin-inline-end: 1px;
     vertical-align: text-bottom;
 
     &::selection {
@@ -531,8 +564,9 @@
 .text-entity-link {
   color: var(--color-links) !important;
   text-decoration: none;
-  word-break: none;
+  word-break: break-word;
   cursor: pointer;
+  unicode-bidi: initial;
 
   &:hover, &:active, &:visited {
     color: var(--color-links-hover) !important;

src/components/right/ChatExtra.tsx

@@ -86,7 +86,7 @@ const ChatExtra: FC<OwnProps & StateProps & DispatchProps> = ({
     <div className="ChatExtra">
       {formattedNumber && !!formattedNumber.length && (
         <ListItem icon="phone" multiline narrow ripple onClick={() => copy(formattedNumber, lang('Phone'))}>
-          <span className="title">{formattedNumber}</span>
+          <span className="title" dir="auto">{formattedNumber}</span>
           <span className="subtitle">{lang('Phone')}</span>
         </ListItem>
       )}
@@ -98,7 +98,7 @@ const ChatExtra: FC<OwnProps & StateProps & DispatchProps> = ({
           ripple
           onClick={() => copy(`@${printedUsername}`, lang('Username'))}
         >
-          <span className="title">{renderText(printedUsername)}</span>
+          <span className="title" dir="auto">{renderText(printedUsername)}</span>
           <span className="subtitle">{lang('Username')}</span>
         </ListItem>
       )}
@@ -109,7 +109,9 @@ const ChatExtra: FC<OwnProps & StateProps & DispatchProps> = ({
           narrow
           isStatic
         >
-          <span className="title">{renderText(description, ['br', 'links', 'emoji'])}</span>
+          <span className="title" dir="auto">
+            {renderText(description, ['br', 'links', 'emoji'])}
+          </span>
           <span className="subtitle">{lang(userId ? 'UserBio' : 'Info')}</span>
         </ListItem>
       )}

src/components/right/GifSearch.tsx

@@ -80,7 +80,7 @@ const GifSearch: FC<StateProps & DispatchProps> = ({
 
     if (!results.length) {
       return (
-        <p className="helper-text">{lang('NoGIFsFound')}</p>
+        <p className="helper-text" dir="auto">{lang('NoGIFsFound')}</p>
       );
     }
 

src/components/right/PollAnswerResults.tsx

@@ -116,7 +116,7 @@ const PollAnswerResults: FC<OwnProps & StateProps & DispatchProps> = ({
         {voters && renderViewMoreButton()}
       </div>
       <div className="answer-head">
-        <span className="answer-title">{text}</span>
+        <span className="answer-title" dir="auto">{text}</span>
         <span className="answer-percent">{getPercentage(answerVote.votersCount, totalVoters)}%</span>
       </div>
     </div>

src/components/right/PollResults.tsx

@@ -35,7 +35,7 @@ const PollResults: FC<StateProps> = ({
 
   return (
     <div className="PollResults">
-      <h3 className="poll-question">{summary.question}</h3>
+      <h3 className="poll-question" dir="auto">{summary.question}</h3>
       <div className="poll-results-list custom-scroll">
         {lastSyncTime && summary.answers.map((answer) => (
           <PollAnswerResults

src/components/right/ProfileInfo.tsx

@@ -157,13 +157,13 @@ const PrivateChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
     if (user) {
       return (
         <div className={`status ${isUserOnline(user) ? 'online' : ''}`}>
-          <span className="user-status">{getUserStatus(lang, user)}</span>
+          <span className="user-status" dir="auto">{getUserStatus(lang, user)}</span>
         </div>
       );
     }
 
     return (
-      <span className="status">{
+      <span className="status" dir="auto">{
         isChatChannel(chat!)
           ? lang('Subscribers', chat!.membersCount, 'i')
           : lang('Members', chat!.membersCount, 'i')
@@ -203,11 +203,11 @@ const PrivateChatInfo: FC<OwnProps & StateProps & DispatchProps> = ({
       <div className="info">
         {isSavedMessages ? (
           <div className="title">
-            <h3>{lang('SavedMessages')}</h3>
+            <h3 dir="auto">{lang('SavedMessages')}</h3>
           </div>
         ) : (
           <div className="title">
-            <h3>{fullName && renderText(fullName)}</h3>
+            <h3 dir="auto">{fullName && renderText(fullName)}</h3>
             {isVerifiedIconShown && <VerifiedIcon />}
           </div>
         )}

src/components/right/RightSearch.scss

@@ -8,5 +8,7 @@
     margin-bottom: 0.125rem;
     font-weight: 500;
     color: var(--color-text-secondary);
+    unicode-bidi: plaintext;
+    text-align: initial;
   }
 }

src/components/right/RightSearch.tsx

@@ -108,10 +108,10 @@ const RightSearch: FC<OwnProps & StateProps & DispatchProps> = ({
         <Avatar chat={senderChat} user={senderUser} />
         <div className="info">
           <div className="title">
-            <h3>{title && renderText(title)}</h3>
+            <h3 dir="auto">{title && renderText(title)}</h3>
             <LastMessageMeta message={message} />
           </div>
-          <div className="subtitle">
+          <div className="subtitle" dir="auto">
             {renderText(text, ['emoji', 'highlight'], { highlight: query })}
           </div>
         </div>
@@ -127,13 +127,15 @@ const RightSearch: FC<OwnProps & StateProps & DispatchProps> = ({
       onLoadMore={searchTextMessagesLocal}
       noFastList
     >
-      <p className="helper-text">
+      <p className="helper-text" dir="auto">
         {!query ? (
-          'Search messages'
+          lang('lng_dlg_search_for_messages')
+        ) : (totalCount === 0 || !foundResults.length) ? (
+          lang('lng_search_no_results')
         ) : totalCount === 1 ? (
           '1 message found'
         ) : (
-          `${(foundResults.length && (totalCount || foundResults.length)) || 'No'} messages found`
+          `${(foundResults.length && (totalCount || foundResults.length))} messages found`
         )}
       </p>
       {foundResults.map(renderSearchResult)}

src/components/right/StickerSetResult.tsx

@@ -80,8 +80,8 @@ const StickerSetResult: FC<OwnProps & StateProps & DispatchProps> = ({
     <div key={set.id} className="sticker-set">
       <div className="sticker-set-header">
         <div className="title-wrapper">
-          <h3 className="title">{set.title}</h3>
+          <h3 className="title" dir="auto">{set.title}</h3>
-          <p className="count">{lang('Stickers', set.count, 'i')}</p>
+          <p className="count" dir="auto">{lang('Stickers', set.count, 'i')}</p>
         </div>
         <Button
           className={isAdded ? 'is-added' : undefined}

src/components/right/management/ManageChannel.tsx

@@ -200,8 +200,8 @@ const ManageChannel: FC<OwnProps & StateProps & DispatchProps> = ({
         </div>
         <div className="section">
           <ListItem icon="group" multiline ripple onClick={handleClickSubscribers}>
-            <span className="title">{lang('ChannelSubscribers')}</span>
+            <span className="title" dir="auto">{lang('ChannelSubscribers')}</span>
-            <span className="subtitle">{lang('Subscribers', chat.membersCount!, 'i')}</span>
+            <span className="subtitle" dir="auto">{lang('Subscribers', chat.membersCount!, 'i')}</span>
           </ListItem>
         </div>
         <div className="section">

src/components/right/management/ManageChatAdministrators.tsx

@@ -86,7 +86,7 @@ const ManageChatAdministrators: FC<OwnProps & StateProps> = ({
         </div>
 
         <div className="section">
-          <p className="text-muted">
+          <p className="text-muted" dir="auto">
             {isChannel
               ? 'You can add administrators to help you manage your channel.'
               : 'You can add administrators to help you manage your group.'}

src/components/right/management/ManageChatPrivacyType.tsx

@@ -135,7 +135,7 @@ const ManageChatPrivacyType: FC<OwnProps & StateProps & DispatchProps> = ({
               checkUsername={checkPublicLink}
               onChange={setUsername}
             />
-            <p className="section-info">
+            <p className="section-info" dir="auto">
               {lang(`${langPrefix2}.Username.CreatePublicLinkHelp`)}
             </p>
           </div>

src/components/right/management/ManageDiscussion.tsx

@@ -185,7 +185,7 @@ const ManageDiscussion: FC<OwnProps & StateProps & DispatchProps> = ({
   function renderDiscussionGroups() {
     return (
       <div>
-        <p className="section-help">{lang('DiscussionChannelHelp')}</p>
+        <p className="section-help" dir="auto">{lang('DiscussionChannelHelp')}</p>
 
         <div teactFastList>
           <ListItem
@@ -212,7 +212,7 @@ const ManageDiscussion: FC<OwnProps & StateProps & DispatchProps> = ({
             <NothingFound key="nothing-found" teactOrderKey={0} text="No discussion groups found" />
           )}
         </div>
-        <p className="mt-4 mb-0 section-help">{lang('DiscussionChannelHelp2')}</p>
+        <p className="mt-4 mb-0 section-help" dir="auto">{lang('DiscussionChannelHelp2')}</p>
         <ConfirmDialog
           isOpen={isConfirmLinkGroupDialogOpen}
           onClose={closeConfirmLinkGroupDialog}

src/components/ui/Checkbox.tsx

@@ -67,8 +67,8 @@ const Checkbox: FC<OwnProps> = ({
         onChange={handleChange}
       />
       <div className="Checkbox-main">
-        <span className="label">{label}</span>
+        <span className="label" dir="auto">{label}</span>
-        {subLabel && <span className="subLabel">{subLabel}</span>}
+        {subLabel && <span className="subLabel" dir="auto">{subLabel}</span>}
       </div>
       {isLoading && <Spinner />}
     </label>

src/components/ui/InputText.tsx

@@ -62,6 +62,7 @@ const InputText: FC<OwnProps> = ({
         className="form-control"
         type="text"
         id={id}
+        dir="auto"
         value={value || ''}
         placeholder={placeholder}
         maxLength={maxLength}

src/components/ui/Link.tsx

@@ -20,6 +20,7 @@ const Link: FC<OwnProps> = ({ children, className, onClick }) => {
     <a
       href="#"
       className={buildClassName('Link', className)}
+      dir="auto"
       onClick={onClick ? handleClick : undefined}
     >
       {children}

src/components/ui/MenuItem.scss

@@ -13,6 +13,7 @@
   color: var(--color-text);
   --ripple-color: rgba(0, 0, 0, .08);
   cursor: pointer;
+  unicode-bidi: plaintext;
 
   &:hover, &:focus {
     background-color: var(--color-chat-hover);

src/components/ui/SearchInput.tsx

@@ -93,6 +93,7 @@ const SearchInput: FC<OwnProps> = ({
         ref={inputRef}
         id={inputId}
         type="text"
+        dir="auto"
         placeholder={placeholder || lang('Search')}
         className="form-control"
         value={value}

src/lib/teact/teact-dom.ts

@@ -22,6 +22,7 @@ type VirtualDomHead = {
 };
 
 const FILTERED_ATTRIBUTES = new Set(['key', 'ref', 'teactFastList', 'teactOrderKey']);
+const HTML_ATTRIBUTES = new Set(['dir']);
 const MAPPED_ATTRIBUTES: { [k: string]: string } = {
   autoPlay: 'autoplay',
   autoComplete: 'autocomplete',
@@ -428,7 +429,7 @@ function addAttribute(element: HTMLElement, key: string, value: any) {
     element.style.cssText = value;
   } else if (key.startsWith('on')) {
     addEventListener(element, key, value);
-  } else if (key.startsWith('data-')) {
+  } else if (key.startsWith('data-') || HTML_ATTRIBUTES.has(key)) {
     element.setAttribute(key, value);
   } else if (!FILTERED_ATTRIBUTES.has(key)) {
     (element as any)[MAPPED_ATTRIBUTES[key] || key] = value;
@@ -444,7 +445,7 @@ function removeAttribute(element: HTMLElement, key: string, value: any) {
     element.style.cssText = '';
   } else if (key.startsWith('on')) {
     removeEventListener(element, key, value);
-  } else if (key.startsWith('data-')) {
+  } else if (key.startsWith('data-') || HTML_ATTRIBUTES.has(key)) {
     element.removeAttribute(key);
   } else if (!FILTERED_ATTRIBUTES.has(key)) {
     delete (element as any)[MAPPED_ATTRIBUTES[key] || key];

src/modules/actions/api/initial.ts

@@ -120,6 +120,12 @@ addReducer('reset', () => {
   cacheApi.clear(CUSTOM_BG_CACHE_NAME);
   cacheApi.clear(LANG_CACHE_NAME);
 
+  const langChachePrefix = LANG_CACHE_NAME.replace(/\d+$/, '');
+  const langCacheVersion = (LANG_CACHE_NAME.match(/\d+$/) || [0])[0];
+  for (let i = 0; i < langCacheVersion; i++) {
+    cacheApi.clear(`${langChachePrefix}${i === 0 ? '' : i}`);
+  }
+
   getDispatch().init();
 });