feat: Collaborative revision restore (#2721)

app/scenes/Document/components/DataLoader.js

@@ -24,6 +24,7 @@ import { type LocationWithState, type NavigationNode } from "types";
 import { NotFoundError, OfflineError } from "utils/errors";
 import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
 import { isInternalUrl } from "utils/urls";
+
 type Props = {|
   match: Match,
   auth: AuthStore,
@@ -45,6 +46,7 @@ class DataLoader extends React.Component<Props> {
   sharedTree: ?NavigationNode;
   @observable document: ?Document;
   @observable revision: ?Revision;
+  @observable shapshot: ?Blob;
   @observable error: ?Error;
 
   componentDidMount() {
@@ -223,7 +225,8 @@ class DataLoader extends React.Component<Props> {
   };
 
   render() {
-    const { location, policies, auth, ui } = this.props;
+    const { location, policies, auth, match, ui } = this.props;
+    const { revisionId } = match.params;
 
     if (this.error) {
       return this.error instanceof OfflineError ? (
@@ -237,7 +240,7 @@ class DataLoader extends React.Component<Props> {
     const document = this.document;
     const revision = this.revision;
 
-    if (!document || !team) {
+    if (!document || !team || (revisionId && !revision)) {
       return (
         <>
           <Loading location={location} />

app/scenes/Document/components/Document.js

@@ -37,6 +37,7 @@ import MarkAsViewed from "./MarkAsViewed";
 import PublicReferences from "./PublicReferences";
 import References from "./References";
 import { type LocationWithState, type NavigationNode, type Theme } from "types";
+import { client } from "utils/ApiClient";
 import { isCustomDomain } from "utils/domains";
 import { emojiToUrl } from "utils/emoji";
 import { isModKey } from "utils/keyboard";
@@ -125,7 +126,7 @@ class DocumentScene extends React.Component<Props> {
     }
   }
 
-  onSelectTemplate = (template: Document) => {
+  replaceDocument = (template: Document | Revision) => {
     this.title = template.title;
     this.isDirty = true;
 
@@ -141,13 +142,36 @@ class DocumentScene extends React.Component<Props> {
         .replaceSelectionWith(parser.parse(template.text))
     );
 
-    this.props.document.templateId = template.id;
+    if (template instanceof Document) {
+      this.props.document.templateId = template.id;
+    }
     this.props.document.title = template.title;
     this.props.document.text = template.text;
 
     this.updateIsDirty();
   };
 
+  onSynced = async () => {
+    const { toasts, history, location, t } = this.props;
+    const restore = location.state?.restore;
+    const revisionId = location.state?.revisionId;
+
+    const editorRef = this.editor.current;
+    if (!editorRef || !restore) {
+      return;
+    }
+
+    const response = await client.post("/revisions.info", {
+      id: revisionId,
+    });
+
+    if (response) {
+      this.replaceDocument(response.data);
+      toasts.showToast(t("Document restored"));
+      history.replace(this.props.document.url);
+    }
+  };
+
   goToMove = (ev) => {
     if (!this.props.readOnly) return;
 
@@ -457,7 +481,7 @@ class DocumentScene extends React.Component<Props> {
               savingIsDisabled={document.isSaving || this.isEmpty}
               sharedTree={this.props.sharedTree}
               goBack={this.goBack}
-              onSelectTemplate={this.onSelectTemplate}
+              onSelectTemplate={this.replaceDocument}
               onSave={this.onSave}
               headings={headings}
             />
@@ -530,6 +554,7 @@ class DocumentScene extends React.Component<Props> {
                     value={readOnly ? value : undefined}
                     defaultValue={value}
                     disableEmbeds={disableEmbeds}
+                    onSynced={this.onSynced}
                     onImageUploadStart={this.onImageUploadStart}
                     onImageUploadStop={this.onImageUploadStop}
                     onSearchLink={this.props.onSearchLink}

app/scenes/Document/components/MultiplayerEditor.js

@@ -20,9 +20,10 @@ import { homePath } from "utils/routeHelpers";
 type Props = {|
   ...EditorProps,
   id: string,
+  onSynced?: () => void,
 |};
 
-function MultiplayerEditor({ ...props }: Props, ref: any) {
+function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
   const documentId = props.id;
   const history = useHistory();
   const { t } = useTranslation();
@@ -154,6 +155,12 @@ function MultiplayerEditor({ ...props }: Props, ref: any) {
     ];
   }, [remoteProvider, user, ydoc]);
 
+  React.useEffect(() => {
+    if (isLocalSynced && isRemoteSynced) {
+      onSynced?.();
+    }
+  }, [onSynced, isLocalSynced, isRemoteSynced]);
+
   // Disconnect the realtime connection while idle. `isIdle` also checks for
   // page visibility and will immediately disconnect when a tab is hidden.
   React.useEffect(() => {