feat: Add DBdiagram (dbdiagram.io) embed (#3124)

* Add dbdiagram embed

* clean variable name

shared/editor/embeds/DBDiagram.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+export default class DBDiagram extends React.Component<Props> {
+  static ENABLED = [new RegExp("https://dbdiagram.io/(embed|d)/(\\w+)$")];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[2];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://dbdiagram.io/embed/${shareId}`}
+        title={`DBDiagram (${shareId})`}
+        width="100%"
+        height="400px"
+      />
+    );
+  }
+}

shared/editor/embeds/index.tsx

@@ -7,6 +7,7 @@ import Bilibili from "./Bilibili";
 import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
+import DBDiagram from "./DBDiagram";
 import Descript from "./Descript";
 import Diagrams from "./Diagrams";
 import Figma from "./Figma";
@@ -115,6 +116,13 @@ const embeds: EmbedDescriptor[] = [
     component: Codepen,
     matcher: matcher(Codepen),
   },
+  {
+    title: "DBDiagram",
+    keywords: "diagrams database",
+    icon: () => <Img src="/images/dbdiagram.png" alt="DBDiagram" />,
+    component: DBDiagram,
+    matcher: matcher(DBDiagram),
+  },
   {
     title: "Descript",
     keywords: "audio",