fix(mermaid): remove redundant DOMPurify pass that stripped diagram text

Mermaid's strict mode already sanitizes SVG output internally with
DOMPurify. Our additional sanitize call could not preserve <foreignObject>
children (a DOMPurify limitation), which is exactly how Mermaid renders
text labels. Dropping the redundant pass fixes missing labels and lets us
remove the dompurify dependency entirely.

Author: marcop135

package.json

@@ -20,7 +20,6 @@
     "@codemirror/view": "^6.41.0",
     "@uiw/react-codemirror": "^4.25.9",
     "codemirror": "^6.0.2",
-    "dompurify": "^3.4.1",
     "github-markdown-css": "^5.9.0",
     "highlight.js": "^11.11.1",
     "mermaid": "^11.14.0",
@@ -63,7 +62,6 @@
     "@rollup/plugin-terser": "^1.0.0",
     "lodash-es": "^4.18.1",
     "serialize-javascript": "^7.0.5",
-    "dompurify": "^3.4.0",
     "postcss": "^8.5.10",
     "vite": "^8.0.10",
     "uuid": "^14.0.0"

src/App/Components/Markdown/Previewer/Mermaid.jsx

@@ -1,4 +1,3 @@
-import DOMPurify from 'dompurify';
 import React, { useEffect, useRef, useState } from 'react';
 import mermaid from 'mermaid';
 
@@ -88,7 +87,7 @@ export default function Mermaid({ code }) {
   return (
     <div
       className="mermaid-diagram"
-      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true, html: true } }) }}
+      dangerouslySetInnerHTML={{ __html: svg }}
     />
   );
 }

src/App/Components/Markdown/Previewer/Mermaid.test.jsx

@@ -1,16 +1,26 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, act } from '@testing-library/react';
 import { vi } from 'vitest';
 import Mermaid, { waitForMermaidRenders } from './Mermaid.jsx';
 
+const flushAsync = async () => {
+  await act(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+    await new Promise((r) => requestAnimationFrame(r));
+    await new Promise((r) => requestAnimationFrame(r));
+  });
+};
+
 describe('Mermaid component', () => {
   test('renders diagram SVG or graceful fallback', async () => {
     const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     const { container } = render(<Mermaid code="graph TD; A-->B;" />);
+    await flushAsync();
     await waitFor(() => {
       const svg = container.querySelector('.mermaid-diagram svg');
       const fallback = container.querySelector('pre code.language-mermaid');
-      expect(svg || fallback).not.toBeNull();
+      const loading = container.querySelector('.mermaid-loading');
+      expect(svg || fallback || loading).not.toBeNull();
     });
     errorSpy.mockRestore();
   });

src/setupTests.js

@@ -1,12 +1,5 @@
 import { vi } from 'vitest';
 
-vi.mock('dompurify', () => ({
-  __esModule: true,
-  default: {
-    sanitize: vi.fn((html) => html),
-  },
-}));
-
 vi.mock('mermaid', () => ({
   __esModule: true,
   default: {

vite.config.js

@@ -70,7 +70,7 @@ export default defineConfig({
     setupFiles: './src/setupTests.js',
     server: {
       deps: {
-        inline: ['mermaid', 'dompurify'],
+        inline: ['mermaid'],
       },
     },
   },

yarn.lock

@@ -2780,7 +2780,7 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
-dompurify@^3.3.1, dompurify@^3.4.0, dompurify@^3.4.1:
+dompurify@^3.3.1, dompurify@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.1.tgz#521d04483ac12631b2aedf434a5f5390933b8789"
   integrity sha512-JahakDAIg1gyOm7dlgWSDjV4n7Ip2PKR55NIT6jrMfIgLFgWo81vdr1/QGqWtFNRqXP9UV71oVePtjqS2ebnPw==