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>
This commit is contained in:
parent
72da0653cc
commit
0c48227b57
|
@ -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}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -8,6 +8,7 @@ import Cawemo from "./Cawemo";
|
||||||
import ClickUp from "./ClickUp";
|
import ClickUp from "./ClickUp";
|
||||||
import Codepen from "./Codepen";
|
import Codepen from "./Codepen";
|
||||||
import Descript from "./Descript";
|
import Descript from "./Descript";
|
||||||
|
import Diagrams from "./Diagrams";
|
||||||
import Figma from "./Figma";
|
import Figma from "./Figma";
|
||||||
import Framer from "./Framer";
|
import Framer from "./Framer";
|
||||||
import Gist from "./Gist";
|
import Gist from "./Gist";
|
||||||
|
@ -115,6 +116,13 @@ export default [
|
||||||
component: Gist,
|
component: Gist,
|
||||||
matcher: matcher(Gist),
|
matcher: matcher(Gist),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Diagrams.net",
|
||||||
|
keywords: "diagrams drawio",
|
||||||
|
icon: () => <Img src="/images/diagrams.png" />,
|
||||||
|
component: Diagrams,
|
||||||
|
matcher: matcher(Diagrams),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Google Drawings",
|
title: "Google Drawings",
|
||||||
keywords: "drawings",
|
keywords: "drawings",
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
Reference in New Issue