Mermaid block support

Author: ajha-dev

.gitignore

@@ -35,3 +35,5 @@ markdoc-*.tar
 npm-debug.log
 /assets/node_modules/
 
+/node_modules
+/storage

frontend/package-lock.json

@@ -13,10 +13,13 @@
     "@blocknote/core": "^0.44.0",
     "@blocknote/mantine": "^0.44.0",
     "@blocknote/react": "^0.44.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "mermaid": "^11.12.2",
     "nanoid": "^5.1.6",
     "phoenix": "^1.8.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-syntax-highlighter": "^16.1.0",
     "shiki": "^3.19.0",
     "yjs": "^13.6.27"
   },

frontend/package.json

@@ -76,10 +76,37 @@ const insertChatBlockItem = (editor: BlockNoteEditor<any, any, any>) => ({
   subtext: "Start a collaborative chat discussion",
 });
 
-// Get all slash menu items including chat block
+// Custom slash menu item for Mermaid block
+const insertMermaidBlockItem = (editor: BlockNoteEditor<any, any, any>) => ({
+  title: "Mermaid Diagram",
+  onItemClick: () => {
+    const currentBlock = editor.getTextCursorPosition().block;
+    editor.insertBlocks(
+      [{
+        type: "mermaid" as any,
+        props: {
+          diagramId: nanoid(),
+          title: "Mermaid Diagram",
+          minimized: false,
+          height: 400,
+          width: 600,
+        }
+      }],
+      currentBlock.id,
+      "after"
+    );
+  },
+  aliases: ["mermaid", "diagram", "flowchart", "chart", "graph"],
+  group: "Other",
+  icon: "📊" as any,
+  subtext: "Create a Mermaid flowchart or diagram",
+});
+
+// Get all slash menu items including custom blocks
 const getCustomSlashMenuItems = (editor: BlockNoteEditor<any, any, any>) => [
   ...getDefaultReactSlashMenuItems(editor),
   insertChatBlockItem(editor),
+  insertMermaidBlockItem(editor),
 ];
 
 // Filter slash menu items based on query
@@ -401,6 +428,7 @@ export function Editor({ docId }: EditorProps) {
                   editor={editor}
                   docId={docId}
                   onNewDocument={handleNewDocument}
+                  yDoc={doc}
                 />
               )}
             </div>

frontend/src/components/Editor.tsx

@@ -7,6 +7,7 @@
 
 import { useState } from "react";
 import type { BlockNoteEditor } from "@blocknote/core";
+import type * as Y from "yjs";
 import {
   exportToMarkdown,
   exportToHTML,
@@ -17,9 +18,10 @@ interface ExportMenuProps {
   editor: BlockNoteEditor<any, any, any>;
   docId: string;
   onNewDocument: () => void;
+  yDoc?: Y.Doc;
 }
 
-export function ExportMenu({ editor, docId, onNewDocument }: ExportMenuProps) {
+export function ExportMenu({ editor, docId, onNewDocument, yDoc }: ExportMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleNewDocument = () => {
@@ -32,7 +34,7 @@ export function ExportMenu({ editor, docId, onNewDocument }: ExportMenuProps) {
 
     switch (format) {
       case "markdown":
-        await exportToMarkdown(editor, docId);
+        await exportToMarkdown(editor, docId, yDoc);
         break;
       case "html":
         await exportToHTML(editor, docId);

frontend/src/components/ExportMenu.tsx

@@ -30,6 +30,7 @@ export interface EditorContextData {
   userName: string;
   userColor: string;
   presenceUsers: Record<string, UserPresence>;
+  awareness?: any; // Optional awareness for collaborative features
 }
 
 export const EditorContext = createContext<EditorContextData | null>(null);