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/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>}