feat: use new methods in composition box for html direction

use dir in flexbox instead of row-reverse

ts/components/conversation/SessionEmojiPanel.tsx

@@ -16,10 +16,8 @@ import {
 import { hexColorToRGB } from '../../util/hexColorToRGB';
 import { getPrimaryColor } from '../../state/selectors/primaryColor';
 import { i18nEmojiData } from '../../util/emoji';
-import { getWritingDirection } from '../../state/selectors/user';
 
 export const StyledEmojiPanel = styled.div<{
-  dir: string;
   isModal: boolean;
   primaryColor: PrimaryColorStateType;
   theme: ThemeStateType;
@@ -70,7 +68,7 @@ export const StyledEmojiPanel = styled.div<{
         content: '';
         position: absolute;
         top: calc(100% - 40px);
-        left: ${props.dir === 'rtl' ? '75px' : 'calc(100% - 106px)'};
+        left: calc(100% - 106px);
         width: 22px;
         height: 22px;
         transform: rotate(45deg);
@@ -79,6 +77,10 @@ export const StyledEmojiPanel = styled.div<{
         border: 0.7px solid var(--border-color);
         clip-path: polygon(100% 100%, 7.2px 100%, 100% 7.2px);
         ${props.panelBackgroundRGB && `background-color: rgb(${props.panelBackgroundRGB})`};
+
+        [dir='rtl'] & {
+          left: 75px;
+        }
       }
     `};
   }
@@ -104,7 +106,6 @@ export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props
   const primaryColor = useSelector(getPrimaryColor);
   const theme = useSelector(getTheme);
   const isDarkMode = useSelector(isDarkTheme);
-  const writingDirection = useSelector(getWritingDirection);
 
   let panelBackgroundRGB = hexColorToRGB(THEMES.CLASSIC_DARK.COLOR1);
   let panelTextRGB = hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6);
@@ -137,7 +138,6 @@ export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props
       theme={theme}
       panelBackgroundRGB={panelBackgroundRGB}
       panelTextRGB={panelTextRGB}
-      dir={writingDirection}
       className={classNames(show && 'show')}
       ref={ref}
     >

ts/components/conversation/composition/CompositionBox.tsx

@@ -57,7 +57,7 @@ import {
   getSelectedConversationKey,
 } from '../../../state/selectors/selectedConversation';
 import { SettingsKey } from '../../../data/settings-key';
-import { isRtlBody } from '../../menu/Menu';
+import { getHTMLDirection } from '../../../util/i18n';
 
 export interface ReplyingToMessageProps {
   convoId: string;
@@ -411,13 +411,13 @@ class CompositionBoxInner extends React.Component<Props, State> {
     const { showEmojiPanel } = this.state;
     const { typingEnabled } = this.props;
 
-    const rtl = isRtlBody();
-    const writingDirection = rtl ? 'rtl' : 'ltr';
+    const htmlDirection = getHTMLDirection();
 
     return (
       <Flex
+        dir={htmlDirection}
         container={true}
-        flexDirection={rtl ? 'row-reverse' : 'row'}
+        flexDirection={'row'}
         alignItems={'center'}
         width={'100%'}
       >
@@ -436,14 +436,14 @@ class CompositionBoxInner extends React.Component<Props, State> {
 
         <StyledSendMessageInput
           role="main"
-          dir={writingDirection}
+          dir={htmlDirection}
           onClick={this.focusCompositionBox} // used to focus on the textarea when clicking in its container
           ref={el => {
             this.container = el;
           }}
           data-testid="message-input"
         >
-          {this.renderTextArea(writingDirection)}
+          {this.renderTextArea(htmlDirection)}
         </StyledSendMessageInput>
 
         {typingEnabled && (
@@ -452,7 +452,7 @@ class CompositionBoxInner extends React.Component<Props, State> {
         <SendMessageButton onClick={this.onSendMessage} />
 
         {typingEnabled && showEmojiPanel && (
-          <StyledEmojiPanelContainer role="button" dir={writingDirection}>
+          <StyledEmojiPanelContainer role="button" dir={htmlDirection}>
             <SessionEmojiPanel
               ref={this.emojiPanel}
               show={showEmojiPanel}