RTL document support (#2263)

* Basic RTL support in documents

* fix: DocumentListItem and ReferenceListItem for RTL content

app/components/ContextMenu/index.js

@@ -46,7 +46,7 @@ export default function ContextMenu({
       <Menu hideOnClickOutside preventBodyScroll {...rest}>
         {(props) => (
           <Position {...props}>
-            <Background>
+            <Background dir="auto">
               {rest.visible || rest.animating ? children : null}
             </Background>
           </Position>

app/components/DocumentListItem.js

@@ -69,6 +69,7 @@ function DocumentListItem(props: Props, ref) {
   return (
     <DocumentLink
       ref={ref}
+      dir={document.dir}
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
@@ -77,8 +78,12 @@ function DocumentListItem(props: Props, ref) {
       }}
     >
       <Content>
-        <Heading>
-          <Title text={document.titleWithDefault} highlight={highlight} />
+        <Heading dir={document.dir}>
+          <Title
+            text={document.titleWithDefault}
+            highlight={highlight}
+            dir={document.dir}
+          />
           {document.isNew && document.createdBy.id !== currentUser.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
@@ -222,6 +227,7 @@ const DocumentLink = styled(Link)`
 
 const Heading = styled.h3`
   display: flex;
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   align-items: center;
   height: 24px;
   margin-top: 0;

app/components/DocumentMeta.js

@@ -11,6 +11,7 @@ import Time from "components/Time";
 import useStores from "hooks/useStores";
 
 const Container = styled(Flex)`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   color: ${(props) => props.theme.textTertiary};
   font-size: 13px;
   white-space: nowrap;
@@ -135,7 +136,7 @@ function DocumentMeta({
     : 0;
 
   return (
-    <Container align="center" {...rest}>
+    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
       {updatedByMe ? t("You") : updatedBy.name}&nbsp;
       {to ? <Link to={to}>{content}</Link> : content}
       {showCollection && collection && (

app/components/DocumentMetaWithViews.js

@@ -14,6 +14,7 @@ type Props = {|
   document: Document,
   isDraft: boolean,
   to?: string,
+  rtl?: boolean,
 |};
 
 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
@@ -62,6 +63,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
 }
 
 const Meta = styled(DocumentMeta)`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   margin: -12px 0 2em 0;
   font-size: 14px;
   position: relative;

app/components/Sidebar/components/SidebarLink.js

@@ -84,7 +84,7 @@ function SidebarLink(
         ref={ref}
       >
         {icon && <IconWrapper>{icon}</IconWrapper>}
-        <Label>{label}</Label>
+        <Label dir="auto">{label}</Label>
       </Link>
       {menu && <Actions showActions={showActions}>{menu}</Actions>}
     </>