fix: Document titles in RTL script not correctly aligned

app/components/ContentEditable.tsx

@@ -20,7 +20,9 @@ type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
  * Defines a content editable component with the same interface as a native
  * HTMLInputElement (or, as close as we can get).
  */
-function ContentEditable({
+const ContentEditable = React.forwardRef(
+  (
+    {
       disabled,
       onChange,
       onInput,
@@ -33,9 +35,13 @@ function ContentEditable({
       autoFocus,
       placeholder,
       readOnly,
+      dir,
       ...rest
-}: Props) {
-  const ref = React.useRef<HTMLSpanElement>(null);
+    }: Props,
+    forwardedRef: React.RefObject<HTMLSpanElement>
+  ) => {
+    const innerRef = React.useRef<HTMLSpanElement>(null);
+    const ref = forwardedRef || innerRef;
     const [innerHTML, setInnerHTML] = React.useState<string>(value);
     const lastValue = React.useRef("");
 
@@ -71,10 +77,10 @@ function ContentEditable({
       if (value !== ref.current?.innerText) {
         setInnerHTML(value);
       }
-  }, [value]);
+    }, [value, ref]);
 
     return (
-    <div className={className}>
+      <div className={className} dir={dir}>
         <Content
           ref={ref}
           contentEditable={!disabled && !readOnly}
@@ -92,6 +98,7 @@ function ContentEditable({
       </div>
     );
   }
+);
 
 const Content = styled.span`
   &:empty {
@@ -108,4 +115,4 @@ const Content = styled.span`
   }
 `;
 
-export default React.memo<Props>(ContentEditable);
+export default ContentEditable;

app/scenes/Document/components/EditableTitle.tsx

@@ -27,7 +27,9 @@ type Props = {
   onSave?: (options: { publish?: boolean; done?: boolean }) => void;
 };
 
-function EditableTitle({
+const EditableTitle = React.forwardRef(
+  (
+    {
       value,
       document,
       readOnly,
@@ -35,7 +37,9 @@ function EditableTitle({
       onSave,
       onGoToNextInput,
       starrable,
-}: Props) {
+    }: Props,
+    ref: React.RefObject<HTMLSpanElement>
+  ) => {
     const { policies } = useStores();
     const { t } = useTranslation();
     const can = policies.abilities(document.id);
@@ -100,6 +104,7 @@ function EditableTitle({
         maxLength={MAX_TITLE_LENGTH}
         readOnly={readOnly}
         dir="auto"
+        ref={ref}
       >
         {(can.star || can.unstar) && starrable !== false && (
           <StarButton document={document} size={32} />
@@ -107,6 +112,7 @@ function EditableTitle({
       </Title>
     );
   }
+);
 
 const StarButton = styled(Star)`
   position: relative;

app/scenes/Document/components/Editor.tsx

@@ -37,6 +37,7 @@ class DocumentEditor extends React.Component<Props> {
   activeLinkEvent: MouseEvent | null | undefined;
 
   ref = React.createRef<HTMLDivElement | HTMLInputElement>();
+  titleRef = React.createRef<HTMLSpanElement>();
 
   focusAtStart = () => {
     if (this.props.innerRef.current) {
@@ -94,6 +95,7 @@ class DocumentEditor extends React.Component<Props> {
     return (
       <Flex auto column>
         <EditableTitle
+          ref={this.titleRef}
           value={title}
           readOnly={readOnly}
           document={document}
@@ -107,8 +109,9 @@ class DocumentEditor extends React.Component<Props> {
             document={document}
             to={documentHistoryUrl(document)}
             rtl={
-              this.ref.current
-                ? window.getComputedStyle(this.ref.current).direction === "rtl"
+              this.titleRef.current
+                ? window.getComputedStyle(this.titleRef.current).direction ===
+                  "rtl"
                 : false
             }
           />