From 0c48227b570f4ef9feb6f6747ca7388b35c51b3b Mon Sep 17 00:00:00 2001 From: Wesley Date: Sat, 21 Aug 2021 20:11:47 +0200 Subject: [PATCH] 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 --- app/embeds/Diagrams.js | 52 ++++++++++++++++++++++++++++++++++++ app/embeds/Diagrams.test.js | 20 ++++++++++++++ app/embeds/index.js | 8 ++++++ public/images/diagrams.png | Bin 0 -> 4325 bytes 4 files changed, 80 insertions(+) create mode 100644 app/embeds/Diagrams.js create mode 100644 app/embeds/Diagrams.test.js create mode 100644 public/images/diagrams.png diff --git a/app/embeds/Diagrams.js b/app/embeds/Diagrams.js new file mode 100644 index 000000000..0669ed780 --- /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 000000000..7051a5ff3 --- /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 7e3598069..007cd9624 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 0000000000000000000000000000000000000000..fe954918475b3908a95cbe07de1b695ad7b800dd GIT binary patch literal 4325 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 NnyR`g4N!~F{{z9WGamo| literal 0 HcmV?d00001