diff --git a/app/embeds/Diagrams.js b/app/embeds/Diagrams.js new file mode 100644 index 00000000..0669ed78 --- /dev/null +++ b/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 { + 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 ( + + } + /> + ); + } +} diff --git a/app/embeds/Diagrams.test.js b/app/embeds/Diagrams.test.js new file mode 100644 index 00000000..7051a5ff --- /dev/null +++ b/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 + ); + }); +}); diff --git a/app/embeds/index.js b/app/embeds/index.js index 7e359806..007cd962 100644 --- a/app/embeds/index.js +++ b/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: () => , + component: Diagrams, + matcher: matcher(Diagrams), + }, { title: "Google Drawings", keywords: "drawings", diff --git a/public/images/diagrams.png b/public/images/diagrams.png new file mode 100644 index 00000000..fe954918 Binary files /dev/null and b/public/images/diagrams.png differ