From 1f1dd23e18454df72c9642a289510c3ef235a01e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 23 Oct 2022 13:28:01 -0400 Subject: [PATCH] feat: Add block command to create Mermaid diagram closes #4272 --- app/editor/menus/{block.ts => block.tsx} | 22 ++++++++++++++++++++++ public/images/mermaidjs.png | Bin 0 -> 3204 bytes 2 files changed, 22 insertions(+) rename app/editor/menus/{block.ts => block.tsx} (87%) create mode 100644 public/images/mermaidjs.png diff --git a/app/editor/menus/block.ts b/app/editor/menus/block.tsx similarity index 87% rename from app/editor/menus/block.ts rename to app/editor/menus/block.tsx index 9a6fbe7d8..143c28309 100644 --- a/app/editor/menus/block.ts +++ b/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: () => Mermaid Diagram, + keywords: "diagram flowchart", + attrs: { language: "mermaidjs" }, + }, ]; } diff --git a/public/images/mermaidjs.png b/public/images/mermaidjs.png new file mode 100644 index 0000000000000000000000000000000000000000..3f872df23b728f6e81db76c0a3aa1570e906736f GIT binary patch literal 3204 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 literal 0 HcmV?d00001