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
2022-09-08 11:17:52 +02:00
parent 97f70edd93
commit fa75d5585f
36 changed files with 2075 additions and 1610 deletions
--- a/app/actions/definitions/revisions.tsx
+++ b/app/actions/definitions/revisions.tsx
@@ -0,0 +1,85 @@
+import copy from "copy-to-clipboard";
+import { LinkIcon, RestoreIcon } from "outline-icons";
+import * as React from "react";
+import { matchPath } from "react-router-dom";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { RevisionSection } from "~/actions/sections";
+import history from "~/utils/history";
+import { documentHistoryUrl, matchDocumentHistory } from "~/utils/routeHelpers";
+
+export const restoreRevision = createAction({
+  name: ({ t }) => t("Restore revision"),
+  icon: <RestoreIcon />,
+  section: RevisionSection,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+  perform: async ({ t, event, location, activeDocumentId }) => {
+    event?.preventDefault();
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const match = matchPath<{ revisionId: string }>(location.pathname, {
+      path: matchDocumentHistory,
+    });
+    const revisionId = match?.params.revisionId;
+
+    const { team } = stores.auth;
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    if (team?.collaborativeEditing) {
+      history.push(document.url, {
+        restore: true,
+        revisionId,
+      });
+    } else {
+      await document.restore({
+        revisionId,
+      });
+      stores.toasts.showToast(t("Document restored"), {
+        type: "success",
+      });
+      history.push(document.url);
+    }
+  },
+});
+
+export const copyLinkToRevision = createAction({
+  name: ({ t }) => t("Copy link"),
+  icon: <LinkIcon />,
+  section: RevisionSection,
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const match = matchPath<{ revisionId: string }>(location.pathname, {
+      path: matchDocumentHistory,
+    });
+    const revisionId = match?.params.revisionId;
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    const url = `${window.location.origin}${documentHistoryUrl(
+      document,
+      revisionId
+    )}`;
+
+    copy(url, {
+      format: "text/plain",
+      onCopy: () => {
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
+      },
+    });
+  },
+});
+
+export const rootRevisionActions = [];
--- a/app/actions/root.ts
+++ b/app/actions/root.ts
@@ -2,6 +2,7 @@ import { rootCollectionActions } from "./definitions/collections";
 import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
+import { rootRevisionActions } from "./definitions/revisions";
 import { rootSettingsActions } from "./definitions/settings";
 import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";
@@ -11,6 +12,7 @@ export default [
  ...rootDocumentActions,
  ...rootUserActions,
  ...rootNavigationActions,
+  ...rootRevisionActions,
  ...rootSettingsActions,
  ...rootDeveloperActions,
  ...rootTeamActions,
--- a/app/actions/sections.ts
+++ b/app/actions/sections.ts
@@ -6,6 +6,8 @@ export const DeveloperSection = ({ t }: ActionContext) => t("Debug");

 export const DocumentSection = ({ t }: ActionContext) => t("Document");

+export const RevisionSection = ({ t }: ActionContext) => t("Revision");
+
 export const SettingsSection = ({ t }: ActionContext) => t("Settings");

 export const NavigationSection = ({ t }: ActionContext) => t("Navigation");
--- a/app/components/AuthenticatedLayout.tsx
+++ b/app/components/AuthenticatedLayout.tsx
@@ -1,23 +1,23 @@
-import { observable } from "mobx";
+import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
-import { Switch, Route } from "react-router-dom";
-import RootStore from "~/stores/RootStore";
+import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
 import SettingsSidebar from "~/components/Sidebar/Settings";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import {
  searchPath,
  matchDocumentSlug as slug,
  newDocumentPath,
  settingsPath,
+  matchDocumentHistory,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
-import withStores from "./withStores";

 const DocumentHistory = React.lazy(
  () =>
@@ -34,16 +34,13 @@ const CommandBar = React.lazy(
    )
 );

-type Props = WithTranslation & RootStore;
+const AuthenticatedLayout: React.FC = ({ children }) => {
+  const { ui, auth } = useStores();
+  const location = useLocation();
+  const can = usePolicy(ui.activeCollectionId);
+  const { user, team } = auth;

-@observer
-class AuthenticatedLayout extends React.Component<Props> {
-  scrollable: HTMLDivElement | null | undefined;
-
-  @observable
-  keyboardShortcutsOpen = false;
-
-  goToSearch = (ev: KeyboardEvent) => {
+  const goToSearch = (ev: KeyboardEvent) => {
    if (!ev.metaKey && !ev.ctrlKey) {
      ev.preventDefault();
      ev.stopPropagation();
@@ -51,60 +48,64 @@ class AuthenticatedLayout extends React.Component<Props> {
    }
  };

-  goToNewDocument = (event: KeyboardEvent) => {
+  const goToNewDocument = (event: KeyboardEvent) => {
    if (event.metaKey || event.altKey) {
      return;
    }
-
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) {
-      return;
-    }
-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) {
+    const { activeCollectionId } = ui;
+    if (!activeCollectionId || !can.update) {
      return;
    }
    history.push(newDocumentPath(activeCollectionId));
  };

-  render() {
-    const { auth } = this.props;
-    const { user, team } = auth;
-    const showSidebar = auth.authenticated && user && team;
-    if (auth.isSuspended) {
-      return <ErrorSuspended />;
-    }
+  if (auth.isSuspended) {
+    return <ErrorSuspended />;
+  }

-    const sidebar = showSidebar ? (
-      <Fade>
-        <Switch>
-          <Route path={settingsPath()} component={SettingsSidebar} />
-          <Route component={Sidebar} />
-        </Switch>
-      </Fade>
-    ) : undefined;
+  const showSidebar = auth.authenticated && user && team;

-    const rightRail = (
-      <React.Suspense fallback={null}>
-        <Switch>
+  const sidebar = showSidebar ? (
+    <Fade>
+      <Switch>
+        <Route path={settingsPath()} component={SettingsSidebar} />
+        <Route component={Sidebar} />
+      </Switch>
+    </Fade>
+  ) : undefined;
+
+  const sidebarRight = (
+    <React.Suspense fallback={null}>
+      <AnimatePresence>
+        <Switch
+          location={location}
+          key={
+            matchPath(location.pathname, {
+              path: matchDocumentHistory,
+            })
+              ? "history"
+              : ""
+          }
+        >
          <Route
+            key="document-history"
            path={`/doc/${slug}/history/:revisionId?`}
            component={DocumentHistory}
          />
        </Switch>
-      </React.Suspense>
-    );
+      </AnimatePresence>
+    </React.Suspense>
+  );

-    return (
-      <Layout title={team?.name} sidebar={sidebar} rightRail={rightRail}>
-        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
-        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
-        {this.props.children}
-        <CommandBar />
-      </Layout>
-    );
-  }
-}
+  return (
+    <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+      <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+      <RegisterKeyDown trigger="t" handler={goToSearch} />
+      <RegisterKeyDown trigger="/" handler={goToSearch} />
+      {children}
+      <CommandBar />
+    </Layout>
+  );
+};

-export default withTranslation()(withStores(AuthenticatedLayout));
+export default observer(AuthenticatedLayout);
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -3,14 +3,19 @@ import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import ActionButton, {
+  Props as ActionButtonProps,
+} from "~/components/ActionButton";

-const RealButton = styled.button<{
+type RealProps = {
  fullwidth?: boolean;
  borderOnHover?: boolean;
  $neutral?: boolean;
  danger?: boolean;
  iconColor?: string;
-}>`
+};
+
+const RealButton = styled(ActionButton)<RealProps>`
  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
  margin: 0;
@@ -146,7 +151,7 @@ export const Inner = styled.span<{
  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;

-export type Props<T> = {
+export type Props<T> = ActionButtonProps & {
  icon?: React.ReactNode;
  iconColor?: string;
  children?: React.ReactNode;
@@ -168,12 +173,19 @@ const Button = <T extends React.ElementType = "button">(
  props: Props<T> & React.ComponentPropsWithoutRef<T>,
  ref: React.Ref<HTMLButtonElement>
 ) => {
-  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
+  const { type, children, value, disclosure, neutral, action, ...rest } = props;
  const hasText = children !== undefined || value !== undefined;
+  const icon = action?.icon ?? rest.icon;
  const hasIcon = icon !== undefined;

  return (
-    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
+    <RealButton
+      type={type || "button"}
+      ref={ref}
+      $neutral={neutral}
+      action={action}
+      {...rest}
+    >
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && icon}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
--- a/app/components/DocumentHistory.tsx
+++ b/app/components/DocumentHistory.tsx
@@ -1,9 +1,10 @@
+import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { CloseIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Event from "~/models/Event";
 import Button from "~/components/Button";
@@ -21,6 +22,7 @@ function DocumentHistory() {
  const { t } = useTranslation();
  const match = useRouteMatch<{ documentSlug: string }>();
  const history = useHistory();
+  const theme = useTheme();
  const document = documents.getByUrl(match.params.documentSlug);

  const eventsInDocument = document
@@ -44,7 +46,8 @@ function DocumentHistory() {
      eventsInDocument.unshift(
        new Event(
          {
-            name: "documents.latest_version",
+            id: "live",
+            name: "documents.live_editing",
            documentId: document.id,
            createdAt: document.updatedAt,
            actor: document.updatedBy,
@@ -58,7 +61,22 @@ function DocumentHistory() {
  }, [eventsInDocument, events, document]);

  return (
-    <Sidebar>
+    <Sidebar
+      initial={{
+        width: 0,
+      }}
+      animate={{
+        transition: {
+          type: "spring",
+          bounce: 0.2,
+          duration: 0.6,
+        },
+        width: theme.sidebarWidth,
+      }}
+      exit={{
+        width: 0,
+      }}
+    >
      {document ? (
        <Position column>
          <Header>
@@ -95,7 +113,7 @@ const Position = styled(Flex)`
  width: ${(props) => props.theme.sidebarWidth}px;
 `;

-const Sidebar = styled(Flex)`
+const Sidebar = styled(m.div)`
  display: none;
  position: relative;
  flex-shrink: 0;
@@ -125,7 +143,7 @@ const Title = styled(Flex)`
 const Header = styled(Flex)`
  align-items: center;
  position: relative;
-  padding: 12px;
+  padding: 16px 12px;
  color: ${(props) => props.theme.text};
  flex-shrink: 0;
 `;
--- a/app/components/DocumentMeta.tsx
+++ b/app/components/DocumentMeta.tsx
@@ -12,24 +12,6 @@ import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

-const Container = styled(Flex)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  color: ${(props) => props.theme.textTertiary};
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-`;
-
-const Viewed = styled.span`
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-const Modified = styled.span<{ highlight?: boolean }>`
-  font-weight: ${(props) => (props.highlight ? "600" : "400")};
-`;
-
 type Props = {
  showCollection?: boolean;
  showPublished?: boolean;
@@ -192,4 +174,22 @@ const DocumentMeta: React.FC<Props> = ({
  );
 };

+const Container = styled(Flex)<{ rtl?: boolean }>`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+`;
+
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const Modified = styled.span<{ highlight?: boolean }>`
+  font-weight: ${(props) => (props.highlight ? "600" : "400")};
+`;
+
 export default observer(DocumentMeta);
--- a/app/components/DocumentMetaWithViews.tsx
+++ b/app/components/DocumentMetaWithViews.tsx
@@ -24,14 +24,6 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  const totalViewers = documentViews.length;
  const onlyYou = totalViewers === 1 && documentViews[0].user.id;

-  React.useEffect(() => {
-    if (!document.isDeleted) {
-      views.fetchPage({
-        documentId: document.id,
-      });
-    }
-  }, [views, document.id, document.isDeleted]);
-
  const popover = usePopoverState({
    gutter: 8,
    placement: "bottom",
--- a/app/components/EventListItem.tsx
+++ b/app/components/EventListItem.tsx
@@ -1,11 +1,12 @@
+import { observer } from "mobx-react";
 import {
  TrashIcon,
  ArchiveIcon,
  EditIcon,
  PublishIcon,
  MoveIcon,
-  CheckboxIcon,
  UnpublishIcon,
+  LightningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -20,7 +21,7 @@ import CompositeItem, {
 } from "~/components/List/CompositeItem";
 import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
-import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
 import { documentHistoryUrl } from "~/utils/routeHelpers";

@@ -32,8 +33,8 @@ type Props = {

 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
  const { t } = useTranslation();
+  const { revisions } = useStores();
  const location = useLocation();
-  const can = usePolicy(document);
  const opts = {
    userName: event.actor.name,
  };
@@ -43,25 +44,28 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
  const ref = React.useRef<HTMLAnchorElement>(null);
  // the time component tends to steal focus when clicked
  // ...so forward the focus back to the parent item
-  const handleTimeClick = React.useCallback(() => {
+  const handleTimeClick = () => {
    ref.current?.focus();
-  }, [ref]);
+  };
+
+  const prefetchRevision = () => {
+    if (event.name === "revisions.create" && event.modelId) {
+      revisions.fetch(event.modelId);
+    }
+  };

  switch (event.name) {
    case "revisions.create":
-    case "documents.latest_version": {
-      if (latest) {
-        icon = <CheckboxIcon color="currentColor" size={16} checked />;
-        meta = t("Latest version");
-        to = documentHistoryUrl(document);
-        break;
-      } else {
-        icon = <EditIcon color="currentColor" size={16} />;
-        meta = t("{{userName}} edited", opts);
-        to = documentHistoryUrl(document, event.modelId || "");
-        break;
-      }
-    }
+      icon = <EditIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} edited", opts);
+      to = documentHistoryUrl(document, event.modelId || "");
+      break;
+
+    case "documents.live_editing":
+      icon = <LightningIcon color="currentColor" size={16} />;
+      meta = t("Live editing");
+      to = documentHistoryUrl(document);
+      break;

    case "documents.archive":
      icon = <ArchiveIcon color="currentColor" size={16} />;
@@ -136,10 +140,11 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
        </Subtitle>
      }
      actions={
-        isRevision && isActive && event.modelId && can.update ? (
+        isRevision && isActive && event.modelId ? (
          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
+      onMouseEnter={prefetchRevision}
      ref={ref}
      {...rest}
    />
@@ -217,4 +222,4 @@ const CompositeListItem = styled(CompositeItem)`
  ${ItemStyle}
 `;

-export default EventListItem;
+export default observer(EventListItem);
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -15,10 +15,15 @@ import { isModKey } from "~/utils/keyboard";
 type Props = {
  title?: string;
  sidebar?: React.ReactNode;
-  rightRail?: React.ReactNode;
+  sidebarRight?: React.ReactNode;
 };

-const Layout: React.FC<Props> = ({ title, children, sidebar, rightRail }) => {
+const Layout: React.FC<Props> = ({
+  title,
+  children,
+  sidebar,
+  sidebarRight,
+}) => {
  const { ui } = useStores();
  const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;

@@ -60,7 +65,7 @@ const Layout: React.FC<Props> = ({ title, children, sidebar, rightRail }) => {
          {children}
        </Content>

-        {rightRail}
+        {sidebarRight}
      </Container>
    </Container>
  );
--- a/app/components/List/Item.tsx
+++ b/app/components/List/Item.tsx
@@ -3,7 +3,7 @@ import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";

-export type Props = {
+export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
  image?: React.ReactNode;
  to?: string;
  exact?: boolean;
--- a/app/components/NudeButton.tsx
+++ b/app/components/NudeButton.tsx
@@ -10,7 +10,7 @@ type Props = ActionButtonProps & {
  type?: "button" | "submit" | "reset";
 };

-const StyledNudeButton = styled(ActionButton).attrs((props: Props) => ({
+const NudeButton = styled(ActionButton).attrs((props: Props) => ({
  type: "type" in props ? props.type : "button",
 }))<Props>`
  width: ${(props) => props.width || props.size || 24}px;
@@ -26,4 +26,4 @@ const StyledNudeButton = styled(ActionButton).attrs((props: Props) => ({
  color: inherit;
 `;

-export default StyledNudeButton;
+export default NudeButton;
--- a/app/components/PaginatedEventList.tsx
+++ b/app/components/PaginatedEventList.tsx
@@ -29,17 +29,15 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
      heading={heading}
      fetch={fetch}
      options={options}
-      renderItem={(item: Event, index, compositeProps) => {
-        return (
-          <EventListItem
-            key={item.id}
-            event={item}
-            document={document}
-            latest={index === 0}
-            {...compositeProps}
-          />
-        );
-      }}
+      renderItem={(item: Event, index, compositeProps) => (
+        <EventListItem
+          key={item.id}
+          event={item}
+          document={document}
+          latest={index === 0}
+          {...compositeProps}
+        />
+      )}
      renderHeading={(name) => <Heading>{name}</Heading>}
      {...rest}
    />
--- a/app/menus/RevisionMenu.tsx
+++ b/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>
    </>
  );
--- a/app/models/Document.ts
+++ b/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
--- a/app/models/Revision.ts
+++ b/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;
--- a/app/routes/authenticated.tsx
+++ b/app/routes/authenticated.tsx
@@ -7,7 +7,7 @@ import Drafts from "~/scenes/Drafts";
 import Error404 from "~/scenes/Error404";
 import Templates from "~/scenes/Templates";
 import Trash from "~/scenes/Trash";
-import Layout from "~/components/AuthenticatedLayout";
+import AuthenticatedLayout from "~/components/AuthenticatedLayout";
 import CenteredContent from "~/components/CenteredContent";
 import PlaceholderDocument from "~/components/PlaceholderDocument";
 import Route from "~/components/ProfiledRoute";
@@ -68,7 +68,7 @@ function AuthenticatedRoutes() {

  return (
    <WebsocketProvider>
-      <Layout>
+      <AuthenticatedLayout>
        <React.Suspense
          fallback={
            <CenteredContent>
@@ -115,7 +115,7 @@ function AuthenticatedRoutes() {
            <Route component={Error404} />
          </Switch>
        </React.Suspense>
-      </Layout>
+      </AuthenticatedLayout>
    </WebsocketProvider>
  );
 }
--- a/app/scenes/Document/components/DataLoader.tsx
+++ b/app/scenes/Document/components/DataLoader.tsx
@@ -42,7 +42,15 @@ type Props = RouteComponentProps<Params, StaticContext, LocationState> & {
 };

 function DataLoader({ match, children }: Props) {
-  const { ui, shares, documents, auth, revisions, subscriptions } = useStores();
+  const {
+    ui,
+    views,
+    shares,
+    documents,
+    auth,
+    revisions,
+    subscriptions,
+  } = useStores();
  const { team } = auth;
  const [error, setError] = React.useState<Error | null>(null);
  const { revisionId, shareId, documentSlug } = match.params;
@@ -89,7 +97,7 @@ function DataLoader({ match, children }: Props) {

  React.useEffect(() => {
    async function fetchSubscription() {
-      if (document?.id) {
+      if (document?.id && !revisionId) {
        try {
          await subscriptions.fetchPage({
            documentId: document.id,
@@ -101,7 +109,22 @@ function DataLoader({ match, children }: Props) {
      }
    }
    fetchSubscription();
-  }, [document?.id, subscriptions]);
+  }, [document?.id, subscriptions, revisionId]);
+
+  React.useEffect(() => {
+    async function fetchViews() {
+      if (document?.id && !document?.isDeleted && !revisionId) {
+        try {
+          await views.fetchPage({
+            documentId: document.id,
+          });
+        } catch (err) {
+          Logger.error("Failed to fetch views", err);
+        }
+      }
+    }
+    fetchViews();
+  }, [document?.id, document?.isDeleted, revisionId, views]);

  const onCreateLink = React.useCallback(
    async (title: string) => {
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -52,6 +52,7 @@ import MarkAsViewed from "./MarkAsViewed";
 import Notices from "./Notices";
 import PublicReferences from "./PublicReferences";
 import References from "./References";
+import RevisionViewer from "./RevisionViewer";

 const AUTOSAVE_DELAY = 3000;

@@ -431,7 +432,6 @@ class DocumentScene extends React.Component<Props> {
    } = this.props;
    const team = auth.team;
    const isShare = !!shareId;
-    const value = revision ? revision.text : document.text;
    const embedsDisabled =
      (team && team.documentEmbeds === false) || document.embedsDisabled;

@@ -563,57 +563,69 @@ class DocumentScene extends React.Component<Props> {
              <Notices document={document} readOnly={readOnly} />
              <React.Suspense fallback={<PlaceholderDocument />}>
                <Flex auto={!readOnly}>
-                  {showContents && (
-                    <Contents
-                      headings={this.headings}
-                      isFullWidth={document.fullWidth}
+                  {revision ? (
+                    <RevisionViewer
+                      isDraft={document.isDraft}
+                      document={document}
+                      revision={revision}
+                      id={revision.id}
                    />
-                  )}
-                  <Editor
-                    id={document.id}
-                    key={embedsDisabled ? "disabled" : "enabled"}
-                    ref={this.editor}
-                    multiplayer={collaborativeEditing}
-                    shareId={shareId}
-                    isDraft={document.isDraft}
-                    template={document.isTemplate}
-                    title={revision ? revision.title : document.title}
-                    document={document}
-                    value={readOnly ? value : undefined}
-                    defaultValue={value}
-                    embedsDisabled={embedsDisabled}
-                    onSynced={this.onSynced}
-                    onFileUploadStart={this.onFileUploadStart}
-                    onFileUploadStop={this.onFileUploadStop}
-                    onSearchLink={this.props.onSearchLink}
-                    onCreateLink={this.props.onCreateLink}
-                    onChangeTitle={this.onChangeTitle}
-                    onChange={this.onChange}
-                    onHeadingsChange={this.onHeadingsChange}
-                    onSave={this.onSave}
-                    onPublish={this.onPublish}
-                    onCancel={this.goBack}
-                    readOnly={readOnly}
-                    readOnlyWriteCheckboxes={readOnly && abilities.update}
-                  >
-                    {shareId && (
-                      <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
-                        <PublicReferences
-                          shareId={shareId}
-                          documentId={document.id}
-                          sharedTree={this.props.sharedTree}
+                  ) : (
+                    <>
+                      {showContents && (
+                        <Contents
+                          headings={this.headings}
+                          isFullWidth={document.fullWidth}
                        />
-                      </ReferencesWrapper>
-                    )}
-                    {!isShare && !revision && (
-                      <>
-                        <MarkAsViewed document={document} />
-                        <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
-                          <References document={document} />
-                        </ReferencesWrapper>
-                      </>
-                    )}
-                  </Editor>
+                      )}
+                      <Editor
+                        id={document.id}
+                        key={embedsDisabled ? "disabled" : "enabled"}
+                        ref={this.editor}
+                        multiplayer={collaborativeEditing}
+                        shareId={shareId}
+                        isDraft={document.isDraft}
+                        template={document.isTemplate}
+                        document={document}
+                        value={readOnly ? document.text : undefined}
+                        defaultValue={document.text}
+                        embedsDisabled={embedsDisabled}
+                        onSynced={this.onSynced}
+                        onFileUploadStart={this.onFileUploadStart}
+                        onFileUploadStop={this.onFileUploadStop}
+                        onSearchLink={this.props.onSearchLink}
+                        onCreateLink={this.props.onCreateLink}
+                        onChangeTitle={this.onChangeTitle}
+                        onChange={this.onChange}
+                        onHeadingsChange={this.onHeadingsChange}
+                        onSave={this.onSave}
+                        onPublish={this.onPublish}
+                        onCancel={this.goBack}
+                        readOnly={readOnly}
+                        readOnlyWriteCheckboxes={readOnly && abilities.update}
+                      >
+                        {shareId && (
+                          <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
+                            <PublicReferences
+                              shareId={shareId}
+                              documentId={document.id}
+                              sharedTree={this.props.sharedTree}
+                            />
+                          </ReferencesWrapper>
+                        )}
+                        {!isShare && !revision && (
+                          <>
+                            <MarkAsViewed document={document} />
+                            <ReferencesWrapper
+                              isOnlyTitle={document.isOnlyTitle}
+                            >
+                              <References document={document} />
+                            </ReferencesWrapper>
+                          </>
+                        )}
+                      </Editor>
+                    </>
+                  )}
                </Flex>
              </React.Suspense>
            </MaxWidth>
--- a/app/scenes/Document/components/EditableTitle.tsx
+++ b/app/scenes/Document/components/EditableTitle.tsx
@@ -16,9 +16,9 @@ import useEmojiWidth from "~/hooks/useEmojiWidth";
 import { isModKey } from "~/utils/keyboard";

 type Props = {
-  value: string;
-  placeholder: string;
  document: Document;
+  /** Placeholder to display when the document has no title */
+  placeholder: string;
  /** Should the title be editable, policies will also be considered separately */
  readOnly?: boolean;
  /** Whether the title show the option to star, policies will also be considered separately (defaults to true) */
@@ -39,7 +39,6 @@ const fontSize = "2.25em";
 const EditableTitle = React.forwardRef(
  (
    {
-      value,
      document,
      readOnly,
      onChange,
@@ -51,9 +50,6 @@ const EditableTitle = React.forwardRef(
    }: Props,
    ref: React.RefObject<RefHandle>
  ) => {
-    const normalizedTitle =
-      !value && readOnly ? document.titleWithDefault : value;
-
    const handleClick = React.useCallback(() => {
      ref.current?.focus();
    }, [ref]);
@@ -128,10 +124,10 @@ const EditableTitle = React.forwardRef(
        onKeyDown={handleKeyDown}
        onBlur={onBlur}
        placeholder={placeholder}
-        value={normalizedTitle}
+        value={document.titleWithDefault}
        $emojiWidth={emojiWidth}
        $isStarred={document.isStarred}
-        autoFocus={!value}
+        autoFocus={!document.title}
        maxLength={DocumentValidation.maxTitleLength}
        readOnly={readOnly}
        dir="auto"
--- a/app/scenes/Document/components/Editor.tsx
+++ b/app/scenes/Document/components/Editor.tsx
@@ -18,7 +18,6 @@ import EditableTitle from "./EditableTitle";

 type Props = Omit<EditorProps, "extensions"> & {
  onChangeTitle: (text: string) => void;
-  title: string;
  id: string;
  document: Document;
  isDraft: boolean;
@@ -41,7 +40,6 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
  const match = useRouteMatch();
  const {
    document,
-    title,
    onChangeTitle,
    isDraft,
    shareId,
@@ -82,7 +80,6 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
    <Flex auto column>
      <EditableTitle
        ref={titleRef}
-        value={title}
        readOnly={readOnly}
        document={document}
        onGoToNextInput={handleGoToNextInput}
@@ -107,7 +104,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
      )}
      <EditorComponent
        ref={ref}
-        autoFocus={!!title && !props.defaultValue}
+        autoFocus={!!document.title && !props.defaultValue}
        placeholder={t("Type '/' to insert, or start writing…")}
        scrollTo={window.location.hash}
        readOnly={readOnly}
--- a/app/scenes/Document/components/Header.tsx
+++ b/app/scenes/Document/components/Header.tsx
@@ -20,6 +20,8 @@ import Collaborators from "~/components/Collaborators";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Header from "~/components/Header";
 import Tooltip from "~/components/Tooltip";
+import { restoreRevision } from "~/actions/definitions/revisions";
+import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -99,6 +101,10 @@ function DocumentHeader({
    });
  }, [onSave]);

+  const context = useActionContext({
+    activeDocumentId: document?.id,
+  });
+
  const { isDeleted, isTemplate } = document;
  const can = usePolicy(document?.id);
  const canToggleEmbeds = team?.documentEmbeds;
@@ -217,7 +223,7 @@ function DocumentHeader({
            {!isPublishing && isSaving && !team?.collaborativeEditing && (
              <Status>{t("Saving")}…</Status>
            )}
-            {!isDeleted && <Collaborators document={document} />}
+            {!isDeleted && !isRevision && <Collaborators document={document} />}
            {(isEditing || team?.collaborativeEditing) && !isTemplate && isNew && (
              <Action>
                <TemplatesMenu
@@ -226,11 +232,14 @@ function DocumentHeader({
                />
              </Action>
            )}
-            {!isEditing && !isDeleted && (!isMobile || !isTemplate) && (
-              <Action>
-                <ShareButton document={document} />
-              </Action>
-            )}
+            {!isEditing &&
+              !isDeleted &&
+              !isRevision &&
+              (!isMobile || !isTemplate) && (
+                <Action>
+                  <ShareButton document={document} />
+                </Action>
+              )}
            {isEditing && (
              <>
                <Action>
@@ -251,8 +260,11 @@ function DocumentHeader({
                </Action>
              </>
            )}
-            {canEdit && !team?.collaborativeEditing && editAction}
-            {canEdit && can.createChildDocument && !isMobile && (
+            {canEdit &&
+              !team?.collaborativeEditing &&
+              !isRevision &&
+              editAction}
+            {canEdit && can.createChildDocument && !isRevision && !isMobile && (
              <Action>
                <NewChildDocumentMenu
                  document={document}
@@ -285,6 +297,24 @@ function DocumentHeader({
                </Button>
              </Action>
            )}
+            {isRevision && (
+              <Action>
+                <Tooltip
+                  tooltip={t("Restore version")}
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    action={restoreRevision}
+                    context={context}
+                    neutral
+                    hideOnActionDisabled
+                  >
+                    {t("Restore")}
+                  </Button>
+                </Tooltip>
+              </Action>
+            )}
            {can.update && isDraft && !isRevision && (
              <Action>
                <Tooltip
--- a/app/scenes/Document/components/RevisionViewer.tsx
+++ b/app/scenes/Document/components/RevisionViewer.tsx
@@ -0,0 +1,46 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import EditorContainer from "@shared/editor/components/Styles";
+import Document from "~/models/Document";
+import Revision from "~/models/Revision";
+import DocumentMetaWithViews from "~/components/DocumentMetaWithViews";
+import { Props as EditorProps } from "~/components/Editor";
+import Flex from "~/components/Flex";
+import { documentUrl } from "~/utils/routeHelpers";
+
+type Props = Omit<EditorProps, "extensions"> & {
+  id: string;
+  document: Document;
+  revision: Revision;
+  isDraft: boolean;
+  children?: React.ReactNode;
+};
+
+/**
+ * Displays revision HTML pre-rendered on the server.
+ */
+function RevisionViewer(props: Props) {
+  const { document, isDraft, shareId, children, revision } = props;
+
+  return (
+    <Flex auto column>
+      <h1 dir={revision.dir}>{revision.title}</h1>
+      {!shareId && (
+        <DocumentMetaWithViews
+          isDraft={isDraft}
+          document={document}
+          to={documentUrl(document)}
+          rtl={revision.rtl}
+        />
+      )}
+      <EditorContainer
+        dangerouslySetInnerHTML={{ __html: revision.html }}
+        dir={revision.dir}
+        rtl={revision.rtl}
+      />
+      {children}
+    </Flex>
+  );
+}
+
+export default observer(RevisionViewer);