feat: Add block command to create Mermaid diagram

closes #4272

app/editor/menus/block.tsx

@@ -19,10 +19,22 @@ import {
   ClockIcon,
   CalendarIcon,
 } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import Image from "@shared/editor/components/Image";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 import { metaDisplay } from "~/utils/keyboard";
 
+const Img = styled(Image)`
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: 0 0 0 1px #fff;
+  margin: 4px;
+  width: 18px;
+  height: 18px;
+`;
+
 export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
   return [
     {
@@ -168,5 +180,15 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       keywords: "notice card suggestion",
       attrs: { style: "tip" },
     },
+    {
+      name: "separator",
+    },
+    {
+      name: "code_block",
+      title: "Mermaid Diagram",
+      icon: () => <Img src="/images/mermaidjs.png" alt="Mermaid Diagram" />,
+      keywords: "diagram flowchart",
+      attrs: { language: "mermaidjs" },
+    },
   ];
 }