tidy

server/services/web.ts

@@ -104,6 +104,7 @@ export default function init(app: Koa = new Koa()): Koa {
         defaultSrc,
         scriptSrc,
         styleSrc: ["'self'", "'unsafe-inline'", "github.githubassets.com"],
+        mediaSrc: ["*", "data:", "blob:"],
         imgSrc: ["*", "data:", "blob:"],
         frameSrc: ["*", "data:"],
         connectSrc: ["*"], // Do not use connect-src: because self + websockets does not work in

shared/editor/components/Video.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import styled, { DefaultTheme, ThemeProps } from "styled-components";
+
+type Props = {
+  title: string;
+  href: string;
+  isSelected: boolean;
+};
+
+export default function Video(props: Props & ThemeProps<DefaultTheme>) {
+  return (
+    <Wrapper className={props.isSelected ? "ProseMirror-selectednode" : ""}>
+      <NativeVideo src={props.href} title={props.title} controls />
+    </Wrapper>
+  );
+}
+
+const NativeVideo = styled.video`
+  max-width: 100%;
+  border-radius: 8px;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-shadow: 0 0 0 1px ${(props) => props.theme.divider};
+  background: ${(props) => props.theme.background};
+  color: ${(props) => props.theme.text} !important;
+  white-space: nowrap;
+  border-radius: 8px;
+  max-width: 840px;
+  cursor: default;
+
+  user-select: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;

shared/editor/nodes/Attachment.tsx

@@ -7,6 +7,7 @@ import { bytesToHumanReadable } from "../../utils/files";
 import { sanitizeHref } from "../../utils/urls";
 import toggleWrap from "../commands/toggleWrap";
 import FileExtension from "../components/FileExtension";
+import Video from "../components/Video";
 import Widget from "../components/Widget";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import attachmentsRule from "../rules/attachments";
@@ -69,6 +70,17 @@ export default class Attachment extends Node {
   }
 
   component({ isSelected, theme, node }: ComponentProps) {
+    if (node.attrs.title.includes(".mov")) {
+      return (
+        <Video
+          href={node.attrs.href}
+          title={node.attrs.title}
+          isSelected={isSelected}
+          theme={theme}
+        />
+      );
+    }
+
     return (
       <Widget
         icon={<FileExtension title={node.attrs.title} />}