RTL document support (#2263)

* Basic RTL support in documents

* fix: DocumentListItem and ReferenceListItem for RTL content

app/scenes/Document/components/Editor.js

@@ -33,6 +33,7 @@ type Props = {|
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
+  @observable ref = React.createRef<HTMLDivElement | HTMLInputElement>();
 
   focusAtStart = () => {
     if (this.props.innerRef.current) {
@@ -109,13 +110,17 @@ class DocumentEditor extends React.Component<Props> {
     const normalizedTitle =
       !title && readOnly ? document.titleWithDefault : title;
 
+    console.log(this.ref.current);
+
     return (
       <Flex auto column>
         {readOnly ? (
           <Title
             as="div"
+            ref={this.ref}
             $startsWithEmojiAndSpace={startsWithEmojiAndSpace}
             $isStarred={document.isStarred}
+            dir="auto"
           >
             <span>{normalizedTitle}</span>{" "}
             {!shareId && <StarButton document={document} size={32} />}
@@ -123,6 +128,7 @@ class DocumentEditor extends React.Component<Props> {
         ) : (
           <Title
             type="text"
+            ref={this.ref}
             onChange={onChangeTitle}
             onKeyDown={this.handleTitleKeyDown}
             placeholder={document.placeholder}
@@ -130,6 +136,7 @@ class DocumentEditor extends React.Component<Props> {
             $startsWithEmojiAndSpace={startsWithEmojiAndSpace}
             autoFocus={!title}
             maxLength={MAX_TITLE_LENGTH}
+            dir="auto"
           />
         )}
         {!shareId && (
@@ -137,6 +144,11 @@ class DocumentEditor extends React.Component<Props> {
             isDraft={isDraft}
             document={document}
             to={documentHistoryUrl(document)}
+            rtl={
+              this.ref.current
+                ? window.getComputedStyle(this.ref.current).direction === "rtl"
+                : false
+            }
           />
         )}
         <Editor

app/scenes/Document/components/ReferenceListItem.js

@@ -35,7 +35,6 @@ const DocumentLink = styled(Link)`
 const Title = styled.h3`
   display: flex;
   align-items: center;
-  max-width: 90%;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
@@ -78,7 +77,7 @@ function ReferenceListItem({
       }}
       {...rest}
     >
-      <Title>
+      <Title dir="auto">
         {document.emoji ? (
           <Emoji>{document.emoji}</Emoji>
         ) : (