From 9226b16c72349ebedf5a538c99be226c4e0a8393 Mon Sep 17 00:00:00 2001
From: Ying Zhong <0x00eeee@gmail.com>
Date: Wed, 30 Sep 2026 20:34:04 +0800
Subject: [PATCH] Pin and conditionally load Mermaid in styled HTML exports

Closes #203

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 dist/markedit-preview.js    |  32 +++++-----
 src/render.ts               |  39 ++++++------
 tests/build.test.ts         |   3 +
 tests/render.styles.test.ts | 117 ++++++++++++++++++++++++++++++++++++
 types/env.d.ts              |   5 ++
 vite.config.mts             |   2 +
 vitest.config.ts            |   2 +
 7 files changed, 167 insertions(+), 33 deletions(-)
 create mode 100644 tests/render.styles.test.ts

diff --git a/dist/markedit-preview.js b/dist/markedit-preview.js
index 28b64e9..8b7dc94 100644
--- a/dist/markedit-preview.js
+++ b/dist/markedit-preview.js
@@ -1982,22 +1982,22 @@ ${n}`}function Whe(t="auto"){if(Yhe)return[`:root { color-scheme: ${t==="auto"?"
 ${n}
 </style>`,r=['<!doctype html><html lang="en"><head><meta charset="UTF-8" /></head><body>',`<div class="markdown-body">
 ${t}
-</div>`,e(M$e(zg)),e(Whe(zg)),e(P$e(zg)),e(Xhe()),"</body></html>"];{r.push(e(Khe(zg)));const{default:n}=await Promise.resolve().then(()=>OG);r.push(e(n));const i=`
-    <script type="module">
-      import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
-      if (${zg==="auto"?"true":"false"}) {
-        const darkMode = matchMedia("(prefers-color-scheme: dark)");
-        mermaid.initialize({ theme: darkMode.matches ? "dark" : undefined });
-        darkMode.addEventListener("change", () => {
-          if (document.querySelector(".mermaid") !== null) {
-            location.reload();
-          }
-        });
-      } else {
-        const isDark = ${zg==="dark"?"true":"false"};
-        mermaid.initialize({ theme: isDark ? "dark" : undefined });
-      }
-    <\/script>`;r.push(i)}return r.join(`
+</div>`,e(M$e(zg)),e(Whe(zg)),e(P$e(zg)),e(Xhe()),"</body></html>"];{r.push(e(Khe(zg)));const{default:n}=await Promise.resolve().then(()=>OG);r.push(e(n));const i=document.createElement("template");if(i.innerHTML=t,i.content.querySelector(".mermaid")!==null){const a=`
+      <script type="module">
+        import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11.16.0/dist/mermaid.esm.min.mjs";
+        if (${zg==="auto"?"true":"false"}) {
+          const darkMode = matchMedia("(prefers-color-scheme: dark)");
+          mermaid.initialize({ theme: darkMode.matches ? "dark" : undefined });
+          darkMode.addEventListener("change", () => {
+            if (document.querySelector(".mermaid") !== null) {
+              location.reload();
+            }
+          });
+        } else {
+          const isDark = ${zg==="dark"?"true":"false"};
+          mermaid.initialize({ theme: isDark ? "dark" : undefined });
+        }
+      <\/script>`;r.push(a)}}return r.join(`
 `)}const Jhe=async(t,e,r)=>{await Y5;const i=r?` data-line-from="0" data-line-to="${wr.MarkEdit.editorView.state.doc.lines-1}"`:"";return`<div class="${t}"${i}>${e}</div>`},V$e=()=>Promise.resolve().then(()=>oqe).then(t=>t.default),H$e=()=>Promise.resolve().then(()=>xat).then(t=>t.default);let W$e,Ij,K$e=0;async function efe(){const t=await(W$e??=H$e()),e=matchMedia("(prefers-color-scheme: dark)").matches;return e!==Ij&&(t.initialize({theme:e?"dark":void 0}),Ij=e),t}const xi=Dl(d$e,{html:!0,breaks:!0,linkify:!0,...h$e}),lP=[];xi.use(e$e());xi.use(Um);xi.use(GPe,{matcher:t=>!t.startsWith("#"),attrs:{target:"_blank",rel:"noopener"}});xi.use(QPe);xi.use(eBe,{enabled:xG(),label:!0});xi.use(rBe);lP.push(Promise.resolve().then(()=>oct).then(t=>{xi.use(t.default,{auto:o$e})})),lP.push(Promise.resolve().then(()=>vct).then(t=>{const e=Oj?{delimiters:Oj}:{};xi.use(t.default,e)}));const X$e=new Set(["paragraph_open","heading_open","blockquote_open","list_item_open","bullet_list_open","ordered_list_open","fence","code_block","table_open","html_block","front_matter"]),Y5=Promise.all(lP).then(()=>{for(const t of X$e){const e=xi.renderer.rules[t];xi.renderer.rules[t]=(r,n,i,a,s)=>{const o=r[n];return a.lineInfo&&o.map?.length===2&&(o.attrSet("data-line-from",String(o.map[0])),o.attrSet("data-line-to",String(o.map[1]-1))),e?e(r,n,i,a,s):s.renderToken(r,n,i)}}{const t=xi.renderer.rules.fence;xi.renderer.rules.fence=(e,r,n,i,a)=>{const s=e[r],o=s.content.trim(),l=s.info.trim();s.attrSet("data-code",o+`
 `);const u=a.renderAttrs(s),d=xi.utils.escapeHtml(o);return l==="mermaid"?`<div class="mermaid"${u}>${d}</div>`:t!==void 0?t(e,r,n,i,a):`<pre><code class="language-${l}">${xi.utils.escapeHtml(o)}</code></pre>`}}for(const t of["fence","code_block"]){const e=xi.renderer.rules[t];xi.renderer.rules[t]=(r,n,i,a,s)=>`
       <div class="code-copy-wrapper" onmouseenter="this.querySelector('.code-copy-button').style.opacity='1'" onmouseleave="this.querySelector('.code-copy-button').style.opacity='0'">
diff --git a/src/render.ts b/src/render.ts
index 0b1b67d..f839bef 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -129,23 +129,28 @@ export async function applyStyles(html: string) {
     const { default: katexCss } = await import('../styles/katex.css?raw');
     components.push(stylify(katexCss));
 
-    const mermaid = `
-    <script type="module">
-      import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
-      if (${styledHtmlColorScheme === 'auto' ? 'true' : 'false'}) {
-        const darkMode = matchMedia("(prefers-color-scheme: dark)");
-        mermaid.initialize({ theme: darkMode.matches ? "dark" : undefined });
-        darkMode.addEventListener("change", () => {
-          if (document.querySelector(".mermaid") !== null) {
-            location.reload();
-          }
-        });
-      } else {
-        const isDark = ${styledHtmlColorScheme === 'dark' ? 'true' : 'false'};
-        mermaid.initialize({ theme: isDark ? "dark" : undefined });
-      }
-    </script>`;
-    components.push(mermaid);
+    const template = document.createElement('template');
+    template.innerHTML = html;
+
+    if (template.content.querySelector('.mermaid') !== null) {
+      const mermaid = `
+      <script type="module">
+        import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@${__MERMAID_VERSION__}/dist/mermaid.esm.min.mjs";
+        if (${styledHtmlColorScheme === 'auto' ? 'true' : 'false'}) {
+          const darkMode = matchMedia("(prefers-color-scheme: dark)");
+          mermaid.initialize({ theme: darkMode.matches ? "dark" : undefined });
+          darkMode.addEventListener("change", () => {
+            if (document.querySelector(".mermaid") !== null) {
+              location.reload();
+            }
+          });
+        } else {
+          const isDark = ${styledHtmlColorScheme === 'dark' ? 'true' : 'false'};
+          mermaid.initialize({ theme: isDark ? "dark" : undefined });
+        }
+      </script>`;
+      components.push(mermaid);
+    }
   }
 
   return components.join('\n');
diff --git a/tests/build.test.ts b/tests/build.test.ts
index d53fb36..aee647a 100644
--- a/tests/build.test.ts
+++ b/tests/build.test.ts
@@ -9,6 +9,7 @@ describe('build variants', () => {
       loader: 'ts',
       define: { __FULL_BUILD__: String(fullBuild) },
       treeShaking: true,
+      minifySyntax: true,
     });
 
     const lite = await transformRenderer(false);
@@ -24,6 +25,8 @@ describe('build variants', () => {
       expect(lite.code).not.toMatch(moduleImport);
       expect(full.code).toMatch(moduleImport);
     });
+    expect(lite.code).not.toContain('https://cdn.jsdelivr.net/npm/mermaid@');
+    expect(full.code).toContain('https://cdn.jsdelivr.net/npm/mermaid@');
     expect(lite.code).toMatch(/renderToString:\s*\(\.\.\._args\) => ""/);
     expect(lite.code).toMatch(/render:\s*async \(\) => \(\{\s*svg: ""\s*\}\)/);
   });
diff --git a/tests/render.styles.test.ts b/tests/render.styles.test.ts
new file mode 100644
index 0000000..a96f2bb
--- /dev/null
+++ b/tests/render.styles.test.ts
@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import mermaidPackage from 'mermaid/package.json';
+import type * as Settings from '../src/support/settings';
+import { applyStyles, renderMarkdown } from '../src/render';
+import { generateStaticHtml, renderStaticHtml, saveStyledHtml } from '../src/view';
+
+const mocks = vi.hoisted(() => ({
+  getText: vi.fn(() => '# Hello'),
+  getFileInfo: vi.fn(async () => ({ filePath: '/example.md' })),
+  showSavePanel: vi.fn(),
+  settings: { styledHtmlColorScheme: 'auto' },
+}));
+
+vi.mock('markedit-api', () => ({
+  MarkEdit: {
+    editorAPI: { getText: mocks.getText },
+    getFileInfo: mocks.getFileInfo,
+    showSavePanel: mocks.showSavePanel,
+  },
+}));
+
+vi.mock('../src/support/settings', async importOriginal => ({
+  ...await importOriginal<typeof Settings>(),
+  get styledHtmlColorScheme() { return mocks.settings.styledHtmlColorScheme; },
+}));
+
+const mermaidMarkdown = '```mermaid\ngraph TD\n  A --> B\n```';
+const mermaidURL = `https://cdn.jsdelivr.net/npm/mermaid@${mermaidPackage.version}/dist/mermaid.esm.min.mjs`;
+
+function scripts(html: string) {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content.querySelectorAll('script');
+}
+
+beforeEach(() => {
+  mocks.getText.mockReturnValue('# Hello');
+  mocks.getFileInfo.mockResolvedValue({ filePath: '/example.md' });
+  mocks.showSavePanel.mockClear();
+  mocks.settings.styledHtmlColorScheme = 'auto';
+});
+
+describe('styled HTML remote scripts', () => {
+  it.each([
+    '# Hello',
+    'The word mermaid is ordinary text.',
+    '```html\n<div class="mermaid">graph TD</div>\n```',
+    '<!-- <div class="mermaid">graph TD</div> -->',
+    '<div class="not-mermaid">Plain content</div>',
+    '$E = mc^2$',
+  ])('does not add scripts when no Mermaid element is present: %s', async markdown => {
+    const html = await applyStyles(await renderMarkdown(markdown));
+    expect(scripts(html)).toHaveLength(0);
+    expect(html).not.toContain(mermaidURL);
+    expect(html).toContain('<style>');
+  });
+
+  it.each([
+    mermaidMarkdown,
+    "<div class='diagram mermaid'>graph TD\nA --> B</div>",
+    `${mermaidMarkdown}\n\n${mermaidMarkdown}`,
+  ])('adds one exact-version module import for Mermaid elements: %s', async markdown => {
+    const html = await applyStyles(await renderMarkdown(markdown));
+    const modules = scripts(html);
+    expect(modules).toHaveLength(1);
+    expect(modules[0].type).toBe('module');
+    expect(modules[0].textContent).toContain(`import mermaid from "${mermaidURL}"`);
+    expect(html).not.toContain('mermaid@11/');
+  });
+
+  it.each(['auto', 'light', 'dark'])('preserves %s color scheme initialization', async scheme => {
+    mocks.settings.styledHtmlColorScheme = scheme;
+    const html = await applyStyles(await renderMarkdown(mermaidMarkdown));
+    const script = scripts(html)[0].textContent;
+    expect(script).toContain(`if (${scheme === 'auto'})`);
+    expect(script).toContain(`const isDark = ${scheme === 'dark'}`);
+    expect(script).toContain('darkMode.addEventListener("change"');
+    expect(script).toContain('mermaid.initialize');
+  });
+});
+
+describe('HTML export entry points', () => {
+  it('applies conditional loading to both HTML-generation APIs', async () => {
+    expect(scripts(await generateStaticHtml(true))).toHaveLength(0);
+    expect(scripts(await renderStaticHtml('# Hello', true))).toHaveLength(0);
+
+    mocks.getText.mockReturnValue(mermaidMarkdown);
+    expect(await generateStaticHtml(true)).toContain(mermaidURL);
+    expect(await renderStaticHtml(mermaidMarkdown, true)).toContain(mermaidURL);
+    expect(scripts(await generateStaticHtml(false))).toHaveLength(0);
+    expect(scripts(await renderStaticHtml(mermaidMarkdown, false))).toHaveLength(0);
+  });
+
+  it.each(['mmd', 'mermaid'])('includes the loader for standalone .%s exports', async extension => {
+    mocks.getText.mockReturnValue('graph TD\nA --> B');
+    mocks.getFileInfo.mockResolvedValue({ filePath: `/example.${extension}` });
+    expect(await generateStaticHtml(true)).toContain(mermaidURL);
+  });
+
+  it('does not add scripts to standalone math exports', async () => {
+    mocks.getText.mockReturnValue('E = mc^2');
+    mocks.getFileInfo.mockResolvedValue({ filePath: '/example.tex' });
+    const html = await generateStaticHtml(true);
+    expect(html).toContain('class="katex"');
+    expect(scripts(html)).toHaveLength(0);
+  });
+
+  it('saves the same pinned loader in styled HTML', async () => {
+    mocks.getText.mockReturnValue(mermaidMarkdown);
+    saveStyledHtml();
+    await vi.waitFor(() => expect(mocks.showSavePanel).toHaveBeenCalledWith({
+      fileName: 'example.html',
+      string: expect.stringContaining(mermaidURL),
+    }));
+  });
+});
diff --git a/types/env.d.ts b/types/env.d.ts
index 4b93bfe..a4f0769 100644
--- a/types/env.d.ts
+++ b/types/env.d.ts
@@ -9,3 +9,8 @@ declare const __PKG_VERSION__: string;
  * Whether to include all extensions, such as `mermaid`, `katex`, and `highlight.js`.
  */
 declare const __FULL_BUILD__: boolean;
+
+/**
+ * Installed Mermaid version used by styled HTML exports.
+ */
+declare const __MERMAID_VERSION__: string;
diff --git a/vite.config.mts b/vite.config.mts
index f157b3e..5df47a1 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -7,6 +7,7 @@ import { fileURLToPath } from 'node:url';
 
 import mainPackage from './package.json' with { type: 'json' };
 import katexPackage from 'katex/package.json' with { type: 'json' };
+import mermaidPackage from 'mermaid/package.json' with { type: 'json' };
 
 const liteBuild = process.env.LITE_BUILD === 'true';
 const outDir = liteBuild ? 'dist/lite' : 'dist';
@@ -28,6 +29,7 @@ export default defineConfig(mergeConfig(defaultViteConfig({ outDir }), {
   define: {
     __PKG_VERSION__: JSON.stringify(mainPackage.version),
     __FULL_BUILD__: JSON.stringify(!liteBuild),
+    __MERMAID_VERSION__: JSON.stringify(mermaidPackage.version),
   },
   build: {
     rollupOptions: {
diff --git a/vitest.config.ts b/vitest.config.ts
index 1359d31..7344ea5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitest/config';
+import mermaidPackage from 'mermaid/package.json' with { type: 'json' };
 
 export default defineConfig({
   test: {
@@ -9,5 +10,6 @@ export default defineConfig({
   define: {
     __PKG_VERSION__: JSON.stringify('test'),
     __FULL_BUILD__: JSON.stringify(true),
+    __MERMAID_VERSION__: JSON.stringify(mermaidPackage.version),
   },
 });