([]);
useEffect(() => {
if (!root.current) return;
return highlightCodeBlocks(root.current, post);
}, [markup, post]);
+ useLayoutEffect(() => {
+ if (!root.current) return;
+ return setupMermaidBlocks(root.current, diagramBlocks.current);
+ }, [markup]);
+
return html` {
/>`;
};
+const setupMermaidBlocks = (root: HTMLElement, diagramBlocks: MermaidBlock[]): (() => void) | undefined => {
+ const blocks = root.querySelectorAll('code[data-code-language="mermaid"]');
+ diagramBlocks.length = blocks.length;
+ if (blocks.length === 0) return;
+ for (const [index, code] of blocks.entries()) {
+ const element = code.closest('.code-block');
+ const pre = code.closest('pre');
+ const copy = element?.querySelector('.code-copy');
+ if (!element || !pre || !copy) continue;
+ const source = code.textContent ?? '';
+ const cached = diagramBlocks[index];
+ if (cached?.source === source) {
+ // Restore the existing diagram and controls before the browser paints the updated Markdown.
+ element.replaceWith(cached.element);
+ cached.update();
+ continue;
+ }
+ const block: MermaidBlock = {
+ source,
+ element,
+ selected: cached?.selected ?? false,
+ update: () => void update(),
+ };
+ diagramBlocks[index] = block;
+ const diagram = document.createElement('div');
+ diagram.className = 'mermaid-diagram';
+ pre.after(diagram);
+ const controls = document.createElement('span');
+ controls.className = 'mermaid-controls';
+ controls.innerHTML = `
+
+
+ `;
+ const zoomButtons = controls.querySelectorAll('button');
+ const toggle = document.createElement('button');
+ toggle.type = 'button';
+ controls.append(toggle);
+ copy.before(controls);
+ let request: { theme: string; error: string } | undefined;
+ let scrollPosition = { left: 0, top: 0 };
+ diagram.onscroll = () => {
+ if (!diagram.isConnected || diagram.hidden) return;
+ scrollPosition = { left: diagram.scrollLeft, top: diagram.scrollTop };
+ };
+ const updateDiagramVisibility = () => {
+ const visible = block.selected && diagram.childElementCount > 0;
+ pre.hidden = visible;
+ diagram.hidden = !visible;
+ for (const button of zoomButtons) button.hidden = !visible;
+ toggle.textContent = visible ? 'Source' : 'Diagram';
+ toggle.title = request?.error || (visible ? 'Show source' : 'Show diagram');
+ toggle.disabled = block.selected && !visible;
+ if (visible) diagram.scrollTo(scrollPosition);
+ };
+ let zoom = 1;
+ const updateZoom = (factor = 0) => {
+ const svgElement = diagram.querySelector('svg');
+ if (!svgElement) return;
+ zoom = factor ? Math.min(4, Math.max(0.25, zoom * factor)) : 1;
+ svgElement.style.width = `${zoom * 100}%`;
+ const width = svgElement.viewBox.baseVal.width;
+ if (width > 0) svgElement.style.maxWidth = `${width * zoom}px`;
+ if (!factor) {
+ scrollPosition = { left: 0, top: 0 };
+ diagram.scrollTo(scrollPosition);
+ }
+ };
+ const update = async () => {
+ const isDark = document.body.matches('.vscode-dark, .vscode-high-contrast:not(.vscode-high-contrast-light)');
+ const theme = isDark ? 'dark' : 'default';
+ if (!block.selected || theme === request?.theme) {
+ updateDiagramVisibility();
+ return;
+ }
+ const currentRequest = (request = { theme, error: '' });
+ updateDiagramVisibility();
+ try {
+ const { default: mermaid } = await import('mermaid');
+ if (!code.isConnected || request !== currentRequest) return;
+ if (theme !== mermaidTheme) {
+ mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true, theme });
+ mermaidTheme = theme;
+ }
+ const { svg, bindFunctions } = await mermaid.render(`mermaid-${++diagramSequence}`, source);
+ if (!code.isConnected || request !== currentRequest) return;
+ diagram.innerHTML = svg;
+ bindFunctions?.(diagram);
+ updateZoom(1);
+ } catch (error) {
+ // Keep the source visible while a diagram is incomplete or invalid.
+ if (!code.isConnected || request !== currentRequest) return;
+ diagram.replaceChildren();
+ block.selected = false;
+ currentRequest.error = `Cannot render diagram: ${error instanceof Error ? error.message : String(error)}`;
+ console.warn('Mermaid render failed', error);
+ }
+ updateDiagramVisibility();
+ };
+ controls.onclick = ({ target }) => {
+ if (!(target instanceof HTMLButtonElement)) return;
+ if (target === toggle) {
+ block.selected = !block.selected;
+ if (block.selected && request?.error) request = undefined;
+ block.update();
+ } else updateZoom(Number(target.value));
+ };
+ if (block.selected) {
+ // The source changed while the diagram was open (streaming). Let it settle before rendering again.
+ updateDiagramVisibility();
+ window.setTimeout(block.update, 150);
+ } else block.update();
+ }
+ const observer = new MutationObserver(() => {
+ diagramBlocks.forEach((block) => block.update());
+ });
+ observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+ return () => observer.disconnect();
+};
+
const copyCodeBlock = async (event: MouseEvent): Promise => {
const target = event.target;
const root = event.currentTarget;
diff --git a/extensions/github1s-ai/src/webview/helpers/markdown.ts b/extensions/github1s-ai/src/webview/helpers/markdown.ts
index a19ee1e74..970e38cbf 100644
--- a/extensions/github1s-ai/src/webview/helpers/markdown.ts
+++ b/extensions/github1s-ai/src/webview/helpers/markdown.ts
@@ -1,7 +1,8 @@
import markdownItKatex from '@vscode/markdown-it-katex';
-import DOMPurify from 'dompurify';
+import createDOMPurify from 'dompurify';
import MarkdownIt from 'markdown-it';
+const DOMPurify = createDOMPurify(window);
const markdown = new MarkdownIt({ html: false, linkify: true, typographer: false });
const LANGUAGE_ALIASES: Record = {
@@ -43,6 +44,7 @@ const LANGUAGE_LABELS: Record = {
json: 'JSON',
markdown: 'Markdown',
md: 'Markdown',
+ mermaid: 'Mermaid',
python: 'Python',
py: 'Python',
plaintext: 'Code',
diff --git a/extensions/github1s-ai/src/webview/index.ts b/extensions/github1s-ai/src/webview/index.ts
index 666aac40e..9e74db2e8 100644
--- a/extensions/github1s-ai/src/webview/index.ts
+++ b/extensions/github1s-ai/src/webview/index.ts
@@ -5,6 +5,10 @@ import type { ViewEvent, ViewMessage } from '@/common/protocol';
import { App } from './App';
import { setiFileIconPresentation } from './helpers/attachments';
+declare let __webpack_nonce__: string;
+// eslint-disable-next-line prefer-const -- Webpack replaces this assignment with its runtime nonce.
+__webpack_nonce__ = document.querySelector('script[nonce]')?.nonce ?? '';
+
const vscode = acquireVsCodeApi();
const root = document.getElementById('app');