feat: Show diff when navigating revision history (#4069)

* tidy

* Add title to HTML export

* fix: Add compatability for documents without collab state

* Add HTML download option to UI

* docs

* fix nodes that required document to render

* Refactor to allow for styling of HTML export

* div>article for easier programatic content extraction

* Allow DocumentHelper to be used with Revisions

* Add revisions.diff endpoint, first version

* Allow arbitrary revisions to be compared

* test

* HTML driven revision viewer

* fix: Dark mode styles for document diffs

* Add revision restore button to header

* test

* Support RTL languages in revision history viewer

* fix: RTL support
Remove unneccessary API requests

* Prefetch revision data

* Animate history sidebar

* fix: Cannot toggle history from timestamp
fix: Animation on each revision click

* Clarify currently editing history item

app/models/Document.ts

@@ -2,6 +2,7 @@ import { addDays, differenceInDays } from "date-fns";
 import { floor } from "lodash";
 import { action, autorun, computed, observable, set } from "mobx";
 import parseTitle from "@shared/utils/parseTitle";
+import { isRTL } from "@shared/utils/rtl";
 import DocumentsStore from "~/stores/DocumentsStore";
 import User from "~/models/User";
 import type { NavigationNode } from "~/types";
@@ -106,23 +107,19 @@ export default class Document extends ParanoidModel {
   }
 
   /**
-   * Best-guess the text direction of the document based on the language the
-   * title is written in. Note: wrapping as a computed getter means that it will
-   * only be called directly when the title changes.
+   * Returns the direction of the document text, either "rtl" or "ltr"
    */
   @computed
   get dir(): "rtl" | "ltr" {
-    const element = document.createElement("p");
-    element.innerText = this.title;
-    element.style.visibility = "hidden";
-    element.dir = "auto";
+    return this.rtl ? "rtl" : "ltr";
+  }
 
-    // element must appear in body for direction to be computed
-    document.body?.appendChild(element);
-    const direction = window.getComputedStyle(element).direction;
-    document.body?.removeChild(element);
-
-    return direction === "rtl" ? "rtl" : "ltr";
+  /**
+   * Returns true if the document text is right-to-left
+   */
+  @computed
+  get rtl() {
+    return isRTL(this.title);
   }
 
   @computed

app/models/Revision.ts

@@ -1,3 +1,5 @@
+import { computed } from "mobx";
+import { isRTL } from "@shared/utils/rtl";
 import BaseModel from "./BaseModel";
 import User from "./User";
 
@@ -6,13 +8,34 @@ class Revision extends BaseModel {
 
   documentId: string;
 
+  /** The document title when the revision was created */
   title: string;
 
+  /** Markdown string of the content when revision was created */
   text: string;
 
+  /** HTML string representing the revision as a diff from the previous version */
+  html: string;
+
   createdAt: string;
 
   createdBy: User;
+
+  /**
+   * Returns the direction of the revision text, either "rtl" or "ltr"
+   */
+  @computed
+  get dir(): "rtl" | "ltr" {
+    return this.rtl ? "rtl" : "ltr";
+  }
+
+  /**
+   * Returns true if the revision text is right-to-left
+   */
+  @computed
+  get rtl() {
+    return isRTL(this.title);
+  }
 }
 
 export default Revision;