fix: Timestamp under doc title should toggle history sidebar, closes #3120

app/components/Editor.tsx

@@ -103,4 +103,4 @@ function Editor(props: Props, ref: React.Ref<any>) {
   );
 }
 
-export default React.forwardRef<typeof Editor, Props>(Editor);
+export default React.forwardRef(Editor);

app/scenes/Document/components/Document.tsx

@@ -591,7 +591,7 @@ class DocumentScene extends React.Component<Props> {
                   <Editor
                     id={document.id}
                     key={embedsDisabled ? "disabled" : "enabled"}
-                    innerRef={this.editor}
+                    ref={this.editor}
                     multiplayer={collaborativeEditing}
                     shareId={shareId}
                     isDraft={document.isDraft}

app/scenes/Document/components/Editor.tsx

@@ -1,144 +1,145 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { useRouteMatch } from "react-router-dom";
 import Document from "~/models/Document";
 import ClickablePadding from "~/components/ClickablePadding";
 import DocumentMetaWithViews from "~/components/DocumentMetaWithViews";
 import Editor, { Props as EditorProps } from "~/components/Editor";
 import Flex from "~/components/Flex";
 import HoverPreview from "~/components/HoverPreview";
-import { documentHistoryUrl } from "~/utils/routeHelpers";
+import {
+  documentHistoryUrl,
+  documentUrl,
+  matchDocumentHistory,
+} from "~/utils/routeHelpers";
 import MultiplayerEditor from "./AsyncMultiplayerEditor";
 import EditableTitle from "./EditableTitle";
 
-type Props = EditorProps &
-  WithTranslation & {
-    onChangeTitle: (text: string) => void;
-    title: string;
-    id: string;
-    document: Document;
-    isDraft: boolean;
-    multiplayer?: boolean;
-    onSave: (arg0: {
-      done?: boolean;
-      autosave?: boolean;
-      publish?: boolean;
-    }) => any;
-    innerRef: {
-      current: any;
-    };
-    children: React.ReactNode;
-  };
+type Props = EditorProps & {
+  onChangeTitle: (text: string) => void;
+  title: string;
+  id: string;
+  document: Document;
+  isDraft: boolean;
+  multiplayer?: boolean;
+  onSave: (options: {
+    done?: boolean;
+    autosave?: boolean;
+    publish?: boolean;
+  }) => void;
+  children: React.ReactNode;
+};
 
-@observer
-class DocumentEditor extends React.Component<Props> {
-  @observable
-  activeLinkEvent: MouseEvent | null | undefined;
+/**
+ * The main document editor includes an editable title with metadata below it,
+ * and support for hover previews of internal links.
+ */
+function DocumentEditor(props: Props, ref: React.RefObject<any>) {
+  const [
+    activeLinkEvent,
+    setActiveLinkEvent,
+  ] = React.useState<MouseEvent | null>(null);
+  const titleRef = React.useRef<HTMLSpanElement>(null);
+  const { t } = useTranslation();
+  const match = useRouteMatch();
 
-  ref = React.createRef<HTMLDivElement | HTMLInputElement>();
-  titleRef = React.createRef<HTMLSpanElement>();
-
-  focusAtStart = () => {
-    if (this.props.innerRef.current) {
-      this.props.innerRef.current.focusAtStart();
+  const focusAtStart = React.useCallback(() => {
+    if (ref.current) {
+      ref.current.focusAtStart();
     }
-  };
+  }, [ref]);
 
-  focusAtEnd = () => {
-    if (this.props.innerRef.current) {
-      this.props.innerRef.current.focusAtEnd();
+  const focusAtEnd = React.useCallback(() => {
+    if (ref.current) {
+      ref.current.focusAtEnd();
     }
-  };
+  }, [ref]);
 
-  insertParagraph = () => {
-    if (this.props.innerRef.current) {
-      const { view } = this.props.innerRef.current;
-      const { dispatch, state } = view;
-      dispatch(state.tr.insert(0, state.schema.nodes.paragraph.create()));
-    }
-  };
-
-  handleLinkActive = (event: MouseEvent) => {
-    this.activeLinkEvent = event;
+  const handleLinkActive = React.useCallback((event: MouseEvent) => {
+    setActiveLinkEvent(event);
     return false;
-  };
+  }, []);
 
-  handleLinkInactive = () => {
-    this.activeLinkEvent = null;
-  };
+  const handleLinkInactive = React.useCallback(() => {
+    setActiveLinkEvent(null);
+  }, []);
 
-  handleGoToNextInput = (insertParagraph: boolean) => {
-    if (insertParagraph) {
-      this.insertParagraph();
-    }
+  const handleGoToNextInput = React.useCallback(
+    (insertParagraph: boolean) => {
+      if (insertParagraph && ref.current) {
+        const { view } = ref.current;
+        const { dispatch, state } = view;
+        dispatch(state.tr.insert(0, state.schema.nodes.paragraph.create()));
+      }
 
-    this.focusAtStart();
-  };
+      focusAtStart();
+    },
+    [focusAtStart, ref]
+  );
 
-  render() {
-    const {
-      document,
-      title,
-      onChangeTitle,
-      isDraft,
-      shareId,
-      readOnly,
-      innerRef,
-      children,
-      multiplayer,
-      t,
-      ...rest
-    } = this.props;
-    const EditorComponent = multiplayer ? MultiplayerEditor : Editor;
+  const {
+    document,
+    title,
+    onChangeTitle,
+    isDraft,
+    shareId,
+    readOnly,
+    children,
+    multiplayer,
+    ...rest
+  } = props;
+  const EditorComponent = multiplayer ? MultiplayerEditor : Editor;
 
-    return (
-      <Flex auto column>
-        <EditableTitle
-          ref={this.titleRef}
-          value={title}
-          readOnly={readOnly}
+  return (
+    <Flex auto column>
+      <EditableTitle
+        ref={titleRef}
+        value={title}
+        readOnly={readOnly}
+        document={document}
+        onGoToNextInput={handleGoToNextInput}
+        onChange={onChangeTitle}
+        starrable={!shareId}
+      />
+      {!shareId && (
+        <DocumentMetaWithViews
+          isDraft={isDraft}
           document={document}
-          onGoToNextInput={this.handleGoToNextInput}
-          onChange={onChangeTitle}
-          starrable={!shareId}
+          to={
+            match.path === matchDocumentHistory
+              ? documentUrl(document)
+              : documentHistoryUrl(document)
+          }
+          rtl={
+            titleRef.current
+              ? window.getComputedStyle(titleRef.current).direction === "rtl"
+              : false
+          }
         />
-        {!shareId && (
-          <DocumentMetaWithViews
-            isDraft={isDraft}
-            document={document}
-            to={documentHistoryUrl(document)}
-            rtl={
-              this.titleRef.current
-                ? window.getComputedStyle(this.titleRef.current).direction ===
-                  "rtl"
-                : false
-            }
-          />
-        )}
-        <EditorComponent
-          ref={innerRef}
-          autoFocus={!!title && !this.props.defaultValue}
-          placeholder={t("…the rest is up to you")}
-          onHoverLink={this.handleLinkActive}
-          scrollTo={window.location.hash}
-          readOnly={readOnly}
-          shareId={shareId}
-          grow
-          {...rest}
+      )}
+      <EditorComponent
+        ref={ref}
+        autoFocus={!!title && !props.defaultValue}
+        placeholder={t("…the rest is up to you")}
+        onHoverLink={handleLinkActive}
+        scrollTo={window.location.hash}
+        readOnly={readOnly}
+        shareId={shareId}
+        grow
+        {...rest}
+      />
+      {!readOnly && <ClickablePadding onClick={focusAtEnd} grow />}
+      {activeLinkEvent && !shareId && (
+        <HoverPreview
+          node={activeLinkEvent.target as HTMLAnchorElement}
+          event={activeLinkEvent}
+          onClose={handleLinkInactive}
         />
-        {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
-        {this.activeLinkEvent && !shareId && (
-          <HoverPreview
-            node={this.activeLinkEvent.target as HTMLAnchorElement}
-            event={this.activeLinkEvent}
-            onClose={this.handleLinkInactive}
-          />
-        )}
-        {children}
-      </Flex>
-    );
-  }
+      )}
+      {children}
+    </Flex>
+  );
 }
 
-export default withTranslation()(DocumentEditor);
+export default observer(React.forwardRef(DocumentEditor));

app/utils/routeHelpers.ts

@@ -117,3 +117,5 @@ export const matchDocumentSlug =
   ":documentSlug([0-9a-zA-Z-_~]*-[a-zA-z0-9]{10,15})";
 
 export const matchDocumentEdit = `/doc/${matchDocumentSlug}/edit`;
+
+export const matchDocumentHistory = `/doc/${matchDocumentSlug}/history/:revisionId?`;