feat: Add embed compatability for Excalidraw share links

app/embeds/Excalidraw.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from "react";
+import Frame from "./components/Frame";
+
+const URL_REGEX = new RegExp("https://excalidraw.com/#json=(.*)");
+
+type Props = {|
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+export default class Excalidraw extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        title="Excalidraw"
+        src={this.props.attrs.href}
+        border
+      />
+    );
+  }
+}

app/embeds/Excalidraw.test.js

@@ -0,0 +1,20 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import Excalidraw from "./Excalidraw";
+
+describe("Excalidraw", () => {
+  const match = Excalidraw.ENABLED[0];
+  test("to be enabled on shared link", () => {
+    expect(
+      "https://excalidraw.com/#json=4852506454654976,baUz3ykua6CQZ13UE9dO1A".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://excalidraw.com/#json".match(match)).toBe(null);
+    expect("https://excalidraw.com".match(match)).toBe(null);
+    expect("https://excalidraw.com/blog".match(match)).toBe(null);
+    expect("http://excalidraw.com".match(match)).toBe(null);
+  });
+});

app/embeds/components/Frame.js

@@ -59,13 +59,13 @@ class Frame extends React.Component<PropsWithRef> {
       <Rounded
         width={width}
         height={height}
-        withBar={withBar}
+        $withBar={withBar}
         className={isSelected ? "ProseMirror-selectednode" : ""}
       >
         {this.isLoaded && (
           <Component
             ref={forwardedRef}
-            withBar={withBar}
+            $withBar={withBar}
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
             width={width}
             height={height}
@@ -97,10 +97,10 @@ class Frame extends React.Component<PropsWithRef> {
 }
 
 const Rounded = styled.div`
-  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
+  border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
   overflow: hidden;
   width: ${(props) => props.width};
-  height: ${(props) => (props.withBar ? props.height + 28 : props.height)};
+  height: ${(props) => (props.$withBar ? props.height + 28 : props.height)};
 `;
 
 const Open = styled.a`
@@ -134,9 +134,10 @@ const Bar = styled(Flex)`
 const Iframe = (props) => <iframe {...props} />;
 
 const StyledIframe = styled(Iframe)`
+  box-sizing: border-box !important;
   border: 1px solid;
   border-color: ${(props) => props.theme.embedBorder};
-  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
+  border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
   display: block;
 `;
 

app/embeds/index.js

@@ -5,6 +5,7 @@ import Abstract from "./Abstract";
 import Airtable from "./Airtable";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
+import Excalidraw from "./Excalidraw";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
@@ -72,6 +73,13 @@ export default [
     component: Codepen,
     matcher: matcher(Codepen),
   },
+  {
+    title: "Excalidraw",
+    keywords: "design svg vector",
+    icon: () => <Img src="/images/excalidraw.png" />,
+    component: Excalidraw,
+    matcher: matcher(Excalidraw),
+  },
   {
     title: "Figma",
     keywords: "design svg vector",