Feat: add diagrams.net/draw.io embed (#2464)

* feat: Add diagrams.net/draw.io embed

* Rename Diagrams integration to include .net

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/embeds/Diagrams.js

@@ -0,0 +1,52 @@
+// @flow
+import * as React from "react";
+import Image from "components/Image";
+import Frame from "./components/Frame";
+
+const URL_REGEX = new RegExp("^https://viewer.diagrams.net/.*(title=\\w+)?");
+
+type Props = {|
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+export default class Diagrams extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  get embedUrl() {
+    return this.props.attrs.matches[0];
+  }
+
+  get title() {
+    let title = "Diagrams.net";
+    const url = new URL(this.embedUrl);
+    const documentTitle = url.searchParams.get("title");
+
+    if (documentTitle) {
+      title += ` (${documentTitle})`;
+    }
+
+    return title;
+  }
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.embedUrl}
+        title={this.title}
+        border
+        icon={
+          <Image
+            src="/images/diagrams.png"
+            alt="Diagrams.net"
+            width={16}
+            height={16}
+          />
+        }
+      />
+    );
+  }
+}

app/embeds/Diagrams.test.js

@@ -0,0 +1,20 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import Diagrams from "./Diagrams";
+
+describe("Diagrams", () => {
+  const match = Diagrams.ENABLED[0];
+
+  test("to be enabled on viewer link", () => {
+    expect(
+      "https://viewer.diagrams.net/?target=blank&nav=1#ABCDefgh_A12345-6789".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://app.diagrams.net/#ABCDefgh_A12345-6789".match(match)).toBe(
+      null
+    );
+  });
+});

app/embeds/index.js

@@ -8,6 +8,7 @@ import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
 import Descript from "./Descript";
+import Diagrams from "./Diagrams";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
@@ -115,6 +116,13 @@ export default [
     component: Gist,
     matcher: matcher(Gist),
   },
+  {
+    title: "Diagrams.net",
+    keywords: "diagrams drawio",
+    icon: () => <Img src="/images/diagrams.png" />,
+    component: Diagrams,
+    matcher: matcher(Diagrams),
+  },
   {
     title: "Google Drawings",
     keywords: "drawings",