Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-25 11:08:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Polishing mermaid rendering

Browse Source
This commit is contained in:
Matt Bierner
2026-01-26 16:32:55 -08:00
parent 67655b30f5
commit 5fde6cdf3e
6 changed files with 309 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
extensions/mermaid-chat-features/src/extension.ts
View File

@@ -15,8 +15,20 @@ const viewType = 'vscode.chatMermaidDiagram';
*/
const mime = 'text/vnd.mermaid';
// Track active webviews for reset command
let activeWebview: vscode.Webview | undefined;
export function activate(context: vscode.ExtensionContext) {
// Register the reset pan/zoom command
context.subscriptions.push(
vscode.commands.registerCommand('mermaid-chat.resetPanZoom', () => {
if (activeWebview) {
activeWebview.postMessage({ type: 'resetPanZoom' });
}
})
);
// Register tools
context.subscriptions.push(
vscode.lm.registerTool<{ markup: string }>('renderMermaidDiagram', {
@@ -35,6 +47,9 @@ export function activate(context: vscode.ExtensionContext) {
async renderChatOutput({ value }, webview, _ctx, _token) {
const mermaidSource = new TextDecoder().decode(value);
// Track this webview for the reset command
activeWebview = webview;
// Set the options for the webview
const mediaRoot = vscode.Uri.joinPath(context.extensionUri, 'chat-webview-out');
webview.options = {
@@ -54,10 +69,16 @@ export function activate(context: vscode.ExtensionContext) {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid Diagram</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src ${webview.cspSource} 'nonce-${nonce}'; style-src 'self' 'unsafe-inline';" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src 'self' 'unsafe-inline';" />
<style>
body {
padding: 0;
}
</style>
</head>
<body>
<body data-vscode-context='${JSON.stringify({ webviewSection: 'mermaid-diagram', preventDefaultContextMenuItems: true })}'>
<pre class="mermaid">
${escapeHtmlText(mermaidSource)}
</pre>