From 795fe37bd671c903210f08ce7f7febcd8ea44b92 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 5 Sep 2023 07:53:07 -0400
Subject: [PATCH] fix: Emoji picker should be on right hand side for RTL
 languages

---
 app/scenes/Document/components/DocumentTitle.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/scenes/Document/components/DocumentTitle.tsx b/app/scenes/Document/components/DocumentTitle.tsx
index a0f0f2208..f22cdec72 100644
--- a/app/scenes/Document/components/DocumentTitle.tsx
+++ b/app/scenes/Document/components/DocumentTitle.tsx
@@ -231,6 +231,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
     [emoji, onChangeEmoji, restoreFocus]
   );
 
+  const dir = ref.current?.getComputedDirection();
   const emojiIcon = <Emoji size={32}>{emoji}</Emoji>;
 
   return (
@@ -251,7 +252,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
       ref={ref}
     >
       {can.update && !readOnly ? (
-        <EmojiWrapper align="center" justify="center">
+        <EmojiWrapper align="center" justify="center" dir={dir}>
           <React.Suspense fallback={emojiIcon}>
             <StyledEmojiPicker
               value={emoji}
@@ -264,7 +265,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
           </React.Suspense>
         </EmojiWrapper>
       ) : emoji ? (
-        <EmojiWrapper align="center" justify="center">
+        <EmojiWrapper align="center" justify="center" dir={dir}>
           {emojiIcon}
         </EmojiWrapper>
       ) : null}
@@ -276,10 +277,10 @@ const StyledEmojiPicker = styled(EmojiPicker)`
   ${extraArea(8)}
 `;
 
-const EmojiWrapper = styled(Flex)`
+const EmojiWrapper = styled(Flex)<{ dir?: string }>`
   position: absolute;
   top: 8px;
-  left: -40px;
+  ${(props) => (props.dir === "rtl" ? "right: -40px" : "left: -40px")};
   height: 32px;
   width: 32px;
 `;