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/menus/RevisionMenu.tsx

@@ -1,19 +1,18 @@
 import { observer } from "mobx-react";
-import { RestoreIcon, LinkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import { useMenuState } from "reakit/Menu";
 import Document from "~/models/Document";
 import ContextMenu from "~/components/ContextMenu";
-import MenuItem from "~/components/ContextMenu/MenuItem";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
-import Separator from "~/components/ContextMenu/Separator";
-import CopyToClipboard from "~/components/CopyToClipboard";
-import MenuIconWrapper from "~/components/MenuIconWrapper";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useToasts from "~/hooks/useToasts";
-import { documentHistoryUrl } from "~/utils/routeHelpers";
+import Template from "~/components/ContextMenu/Template";
+import { actionToMenuItem } from "~/actions";
+import {
+  copyLinkToRevision,
+  restoreRevision,
+} from "~/actions/definitions/revisions";
+import useActionContext from "~/hooks/useActionContext";
+import separator from "./separator";
 
 type Props = {
   document: Document;
@@ -21,47 +20,14 @@ type Props = {
   className?: string;
 };
 
-function RevisionMenu({ document, revisionId, className }: Props) {
-  const { showToast } = useToasts();
-  const team = useCurrentTeam();
+function RevisionMenu({ document, className }: Props) {
   const menu = useMenuState({
     modal: true,
   });
   const { t } = useTranslation();
-  const history = useHistory();
-
-  const handleRestore = React.useCallback(
-    async (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-
-      if (team.collaborativeEditing) {
-        history.push(document.url, {
-          restore: true,
-          revisionId,
-        });
-      } else {
-        await document.restore({
-          revisionId,
-        });
-        showToast(t("Document restored"), {
-          type: "success",
-        });
-        history.push(document.url);
-      }
-    },
-    [history, showToast, t, team.collaborativeEditing, document, revisionId]
-  );
-
-  const handleCopy = React.useCallback(() => {
-    showToast(t("Link copied"), {
-      type: "info",
-    });
-  }, [showToast, t]);
-
-  const url = `${window.location.origin}${documentHistoryUrl(
-    document,
-    revisionId
-  )}`;
+  const context = useActionContext({
+    activeDocumentId: document.id,
+  });
 
   return (
     <>
@@ -72,21 +38,13 @@ function RevisionMenu({ document, revisionId, className }: Props) {
         {...menu}
       />
       <ContextMenu {...menu} aria-label={t("Revision options")}>
-        <MenuItem {...menu} onClick={handleRestore}>
-          <MenuIconWrapper>
-            <RestoreIcon />
-          </MenuIconWrapper>
-          {t("Restore version")}
-        </MenuItem>
-        <Separator />
-        <CopyToClipboard text={url} onCopy={handleCopy}>
-          <MenuItem {...menu}>
-            <MenuIconWrapper>
-              <LinkIcon />
-            </MenuIconWrapper>
-            {t("Copy link")}
-          </MenuItem>
-        </CopyToClipboard>
+        <Template
+          items={[
+            actionToMenuItem(restoreRevision, context),
+            separator(),
+            actionToMenuItem(copyLinkToRevision, context),
+          ]}
+        />
       </ContextMenu>
     </>
   );