feat: moved html direction logic into i18n util

updated Flex component with RTL support, create getWritingDirection selector

ts/components/basic/Flex.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { HTMLDirection } from '../../util/i18n';
 
 export interface FlexProps {
   children?: any;
@@ -36,6 +37,8 @@ export interface FlexProps {
   maxWidth?: string;
   minWidth?: string;
   maxHeight?: string;
+  /****** RTL support ********/
+  dir?: HTMLDirection;
 }
 
 export const Flex = styled.div<FlexProps>`
@@ -53,4 +56,5 @@ export const Flex = styled.div<FlexProps>`
   height: ${props => props.height || 'auto'};
   max-width: ${props => props.maxWidth || 'none'};
   min-width: ${props => props.minWidth || 'none'};
+  dir: ${props => props.dir || undefined};
 `;

ts/components/menu/Menu.tsx

@@ -373,12 +373,6 @@ export const MarkAllReadMenuItem = (): JSX.Element | null => {
   }
 };
 
-export function isRtlBody(): boolean {
-  const body = document.getElementsByTagName('body').item(0);
-
-  return body?.classList.contains('rtl') || false;
-}
-
 export const BlockMenuItem = (): JSX.Element | null => {
   const convoId = useConvoIdFromContext();
   const isMe = useIsMe(convoId);
@@ -577,7 +571,7 @@ export const NotificationForConvoMenuItem = (): JSX.Element | null => {
     return null;
   }
 
-  // const isRtlMode = isRtlBody();'
+  // const isRtlMode = isRtlBody();
 
   // exclude mentions_only settings for private chats as this does not make much sense
   const notificationForConvoOptions = ConversationNotificationSetting.filter(n =>

ts/state/selectors/user.ts

@@ -4,7 +4,7 @@ import { LocalizerType } from '../../types/Util';
 
 import { StateType } from '../reducer';
 import { UserStateType } from '../ducks/user';
-import { isRtlBody } from '../../components/menu/Menu';
+import { HTMLDirection, getHTMLDirection } from '../../util/i18n';
 
 export const getUser = (state: StateType): UserStateType => state.user;
 
@@ -15,6 +15,4 @@ export const getOurNumber = createSelector(
 
 export const getIntl = createSelector(getUser, (): LocalizerType => window.i18n);
 
-export const getWritingDirection = createSelector(getUser, (): string =>
-  isRtlBody() ? 'rtl' : 'ltr'
-);
+export const getWritingDirection = createSelector(getUser, (): HTMLDirection => getHTMLDirection());

ts/util/i18n.ts

@@ -63,3 +63,17 @@ export const loadEmojiPanelI18n = async () => {
     }
   }
 };
+
+// RTL Support
+
+export type HTMLDirection = 'ltr' | 'rtl';
+
+export function isRtlBody(): boolean {
+  const body = document.getElementsByTagName('body').item(0);
+
+  return body?.classList.contains('rtl') || false;
+}
+
+export function getHTMLDirection(): HTMLDirection {
+  return isRtlBody() ? 'rtl' : 'ltr';
+}