Merge pull request #61 from jbouder/copilot/fix-syntax-error-mermaid-box

Fix mermaid preview showing syntax error on empty input

Author: jbouder

__tests__/mermaid-preview.test.tsx

@@ -109,6 +109,55 @@ describe('Mermaid Preview Page', () => {
     expect(toast.info).toHaveBeenCalledWith('Cleared all content');
   });
 
+  it('does not attempt to render when mermaid code is empty', async () => {
+    const mermaid = jest.mocked((await import('mermaid')).default);
+
+    render(<MermaidViewerPage />);
+
+    const textarea = screen.getByPlaceholderText(
+      'Type your Mermaid code here...',
+    );
+    const clearButton = screen.getByText('Clear');
+
+    // Clear the initial content
+    fireEvent.click(clearButton);
+
+    // Wait a bit for any potential render attempts
+    await waitFor(() => {
+      expect(textarea).toHaveValue('');
+    });
+
+    // Check that mermaid.render was not called with empty string
+    const renderCalls = mermaid.render.mock.calls;
+    const emptyRenderCalls = renderCalls.filter((call) => !call[1]?.trim());
+    expect(emptyRenderCalls.length).toBe(0);
+  });
+
+  it('does not attempt to render when mermaid code is only whitespace', async () => {
+    const mermaid = jest.mocked((await import('mermaid')).default);
+
+    render(<MermaidViewerPage />);
+
+    const textarea = screen.getByPlaceholderText(
+      'Type your Mermaid code here...',
+    );
+
+    // Set to whitespace only
+    fireEvent.change(textarea, { target: { value: '   \n  \n  ' } });
+
+    // Wait a bit for any potential render attempts
+    await waitFor(() => {
+      expect(textarea).toHaveValue('   \n  \n  ');
+    });
+
+    // Check that mermaid.render was not called with whitespace-only string
+    const renderCalls = mermaid.render.mock.calls;
+    const whitespaceRenderCalls = renderCalls.filter(
+      (call) => call[1] && !call[1].trim(),
+    );
+    expect(whitespaceRenderCalls.length).toBe(0);
+  });
+
   it('handles file upload correctly', async () => {
     const toast = jest.mocked((await import('sonner')).toast);
 

app/mermaid-preview/page.tsx

@@ -42,6 +42,12 @@ export default function MermaidViewerPage() {
     const renderDiagram = async () => {
       if (!previewRef.current) return;
 
+      // Don't attempt to render if mermaidCode is empty or only whitespace
+      if (!mermaidCode.trim()) {
+        previewRef.current.innerHTML = '';
+        return;
+      }
+
       try {
         previewRef.current.innerHTML = '';
         const { svg } = await mermaid.render(