Added plantuml embedding (#10379)

* Added plantuml embedding

* Added plantUML icon

* Updated alt of plantuml icon

* Removed edit button, fixed plantuml placeholder and replaced image url

* tweaks

---------

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

shared/editor/embeds/PlantUml.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import Frame from "../components/Frame";
+import Image from "../components/Img";
+import { EmbedProps as Props } from ".";
+import { useTheme } from "styled-components";
+
+function PlantUmlDiagrams({ matches, ...props }: Props) {
+  const theme = useTheme();
+  const mode = theme.isDark ? "dsvg" : "svg";
+  const title = props.attrs.href.split("/uml/")[1];
+  const finalUrl = `https://www.plantuml.com/plantuml/${mode}/${title}`;
+
+  return (
+    <Frame
+      {...props}
+      src={finalUrl}
+      icon={
+        <Image
+          src="/images/plantuml.png"
+          alt="PlantUml"
+          width={16}
+          height={16}
+        />
+      }
+      canonicalUrl={props.attrs.href}
+      border
+    />
+  );
+}
+
+export default PlantUmlDiagrams;

shared/editor/embeds/index.tsx

@@ -20,6 +20,7 @@ import Spotify from "./Spotify";
 import Trello from "./Trello";
 import Vimeo from "./Vimeo";
 import YouTube from "./YouTube";
+import PlantUmlDiagrams from "./PlantUml";
 
 export type EmbedProps = {
   isSelected: boolean;
@@ -677,6 +678,15 @@ const embeds: EmbedDescriptor[] = [
     icon: <Img src="/images/youtube.png" alt="YouTube" />,
     component: YouTube,
   }),
+  new EmbedDescriptor({
+    title: "Plant UML",
+    keywords: "plant plantuml uml",
+    regexMatch: [
+      /(?:https?:\/\/)?(?:www\.)?editor\.plantuml\.com\/uml\/([a-zA-Z0-9\-_]+)([\&\?].*)?$/i,
+    ],
+    icon: <Img src="/images/plantuml.png" alt="PlantUml" />,
+    component: PlantUmlDiagrams,
+  }),
   /* The generic iframe embed should always be the last one */
   new EmbedDescriptor({
     title: "Embed",