Merge pull request #81 from bocan/feature/mermaid2

Add Mermaid diagramming and PDF export feature

Author: bocan

client/package.json

@@ -16,6 +16,7 @@
     "diff": "^8.0.3",
     "github-slugger": "^2.0.0",
     "html-docx-js-typescript": "^0.1.5",
+    "mermaid": "^11.4.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",

client/src/components/Preview.css

@@ -245,6 +245,61 @@
   line-height: 1.6;
 }
 
+.mermaid-diagram-wrapper {
+  position: relative;
+  margin: 1.25em 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  overflow-x: auto;
+}
+
+.mermaid-diagram {
+  /* Mermaid outputs inline SVG; keep it responsive where possible */
+  width: 100%;
+}
+
+.mermaid-diagram svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.mermaid-download-btn {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.mermaid-download-btn:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
+.mermaid-download-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.mermaid-error {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
 /* Remove default pre/code styling inside code block wrapper - SyntaxHighlighter handles this */
 .code-block-wrapper pre,
 .code-block-wrapper code {

client/src/components/Preview.test.tsx

@@ -1,6 +1,16 @@
 import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Preview } from "../components/Preview";
 import { api } from "../services/api";
+import { useEditorStore } from "../store/editorStore";
+import mermaid from "mermaid";
+
+vi.mock("mermaid", () => ({
+  default: {
+    initialize: vi.fn(),
+    render: vi.fn(),
+  },
+}));
 
 // Mock the api module
 vi.mock("../services/api", () => ({
@@ -13,6 +23,22 @@ describe("Preview", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(api.getPage).mockResolvedValue({ path: "test.md", content: "" });
+
+    // Ensure the preview uses deterministic content in tests.
+    useEditorStore.setState({
+      content: "",
+      scrollSource: null,
+      editorScrollPercent: 0,
+      previewScrollPercent: 0,
+    });
+
+    // Provide CSS variables used by Mermaid theme initialization in jsdom.
+    document.documentElement.style.setProperty("--bg-primary", "#18181b");
+    document.documentElement.style.setProperty("--bg-secondary", "#27272a");
+    document.documentElement.style.setProperty("--bg-tertiary", "#1f1f23");
+    document.documentElement.style.setProperty("--text-primary", "#fafaf9");
+    document.documentElement.style.setProperty("--border-color", "#3f3f46");
+    document.documentElement.style.setProperty("--accent-color", "#818cf8");
   });
 
   it("shows empty state when no page is selected", () => {
@@ -32,4 +58,52 @@ describe("Preview", () => {
       expect(screen.queryByLabelText(/loading/i)).not.toBeInTheDocument(),
     );
   });
+
+  it("shows Export to PDF in export menu", async () => {
+    vi.mocked(api.getPage).mockResolvedValueOnce({ path: "test.md", content: "Hello" });
+    render(<Preview pagePath="test.md" />);
+
+    await waitFor(() => expect(api.getPage).toHaveBeenCalledWith("test.md"));
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: /export options/i }));
+    expect(screen.getByRole("menuitem", { name: /export to pdf/i })).toBeInTheDocument();
+  });
+
+  it("renders Mermaid code fences and avoids rerender when code is unchanged", async () => {
+    vi.mocked(mermaid.render).mockResolvedValue({
+      svg: '<svg data-testid="mmd"><g><text>OK</text></g></svg>',
+      bindFunctions: undefined,
+      diagramType: "flowchart",
+    } as unknown as {
+      svg: string;
+      bindFunctions?: (element: Element) => void;
+      diagramType: string;
+    });
+
+    document.documentElement.setAttribute("data-theme", "dark");
+
+    const markdown = [
+      "```mermaid",
+      "flowchart LR",
+      "  A --> B",
+      "```",
+    ].join("\n");
+
+    // Prevent the async API load from overwriting the live editor content during the test.
+    vi.mocked(api.getPage).mockResolvedValueOnce({ path: "test.md", content: markdown });
+
+    useEditorStore.setState({ content: markdown });
+
+    const { rerender } = render(<Preview pagePath="test.md" />);
+
+    await waitFor(() => expect(vi.mocked(mermaid.render)).toHaveBeenCalledTimes(1));
+    expect(
+      await screen.findByRole("button", { name: /download diagram as svg/i }),
+    ).toBeInTheDocument();
+
+    // Rerender parent with same content: Mermaid should not redraw.
+    rerender(<Preview pagePath="test.md" />);
+    await waitFor(() => expect(vi.mocked(mermaid.render)).toHaveBeenCalledTimes(1));
+  });
 });