fix: Display of videos in revision history

closes #6176

shared/editor/components/Styles.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-irregular-whitespace */
 import { lighten, transparentize } from "polished";
 import styled, { DefaultTheme, css, keyframes } from "styled-components";
+import { videoStyle } from "./Video";
 
 export type Props = {
   rtl: boolean;
@@ -418,6 +419,11 @@ li {
     max-width: 100%;
   }
 
+  video {
+    pointer-events: initial;
+    ${videoStyle}
+  }
+
   .ProseMirror-selectednode img {
     pointer-events: initial;
   }

shared/editor/components/Video.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { sanitizeUrl } from "../../utils/urls";
 import { ComponentProps } from "../types";
 import { ResizeLeft, ResizeRight } from "./ResizeHandle";
@@ -76,8 +76,9 @@ export default function Video(props: Props) {
   );
 }
 
-const StyledVideo = styled.video`
+export const videoStyle = css`
   max-width: 100%;
+  height: auto;
   background: ${(props) => props.theme.background};
   color: ${(props) => props.theme.text} !important;
   margin: -2px;
@@ -86,6 +87,10 @@ const StyledVideo = styled.video`
   box-shadow: 0 0 0 1px ${(props) => props.theme.divider};
 `;
 
+const StyledVideo = styled.video`
+  ${videoStyle}
+`;
+
 const VideoWrapper = styled.div`
   line-height: 0;
   position: relative;

shared/editor/nodes/Video.tsx

@@ -55,15 +55,21 @@ export default class Video extends Node {
         },
       ],
       toDOM: (node) => [
-        "video",
+        "div",
         {
-          id: node.attrs.id,
-          src: sanitizeUrl(node.attrs.src),
-          controls: true,
-          width: node.attrs.width,
-          height: node.attrs.height,
+          class: "video",
         },
-        node.attrs.title,
+        [
+          "video",
+          {
+            id: node.attrs.id,
+            src: sanitizeUrl(node.attrs.src),
+            controls: true,
+            width: node.attrs.width,
+            height: node.attrs.height,
+          },
+          node.attrs.title,
+        ],
       ],
       toPlainText: (node) => node.attrs.title,
     };