From 4bd168f4f71fbb48066878646b408d593381413a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 19 Sep 2025 15:22:29 +0000
Subject: [PATCH 1/2] Initial plan
From 30b1b5354074d990d2f91bafec5db415d40bdad9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 19 Sep 2025 15:35:30 +0000
Subject: [PATCH 2/2] Add toolbar support to VSCode extension webview
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
packages/vscode-resources/html/preview.html | 4 ++-
packages/vscode-resources/src/preview.ts | 9 +++++
packages/vscode/scripts/resources.mjs | 38 +++++++++++----------
packages/vscode/src/web/command-preview.ts | 5 ++-
packages/vscode/src/web/resources.ts | 2 ++
5 files changed, 38 insertions(+), 20 deletions(-)
diff --git a/packages/vscode-resources/html/preview.html b/packages/vscode-resources/html/preview.html
index e23c4ce0..a51aeb7e 100644
--- a/packages/vscode-resources/html/preview.html
+++ b/packages/vscode-resources/html/preview.html
@@ -14,7 +14,7 @@
}
body {
display: grid;
- grid-template-rows: auto;
+ grid-template-rows: auto 1fr;
color: black;
background-color: white;
}
@@ -26,6 +26,8 @@
+
+
Loading...
diff --git a/packages/vscode-resources/src/preview.ts b/packages/vscode-resources/src/preview.ts
index 855702eb..f778a9ee 100644
--- a/packages/vscode-resources/src/preview.ts
+++ b/packages/vscode-resources/src/preview.ts
@@ -25,9 +25,18 @@ window.addEventListener('DOMContentLoaded', () => {
}
}
+ // Initialize toolbar for the VSCode webview (read-only mode)
+ const toolbar = new Chartifact.toolbar.Toolbar('.chartifact-toolbar', {
+ tweakButton: false, // Disable tweak button since no textarea editing
+ downloadButton: true,
+ restartButton: false, // Disable restart button in VSCode
+ filename: 'document'
+ });
+
const host = new Chartifact.host.Listener({
preview: '#preview',
loading: '#loading',
+ toolbar: toolbar,
options,
onApprove: (message: Chartifact.common.SandboxedPreHydrateMessage) => {
// TODO look through each and override policy to approve unapproved
diff --git a/packages/vscode/scripts/resources.mjs b/packages/vscode/scripts/resources.mjs
index 316fe283..68e9332a 100644
--- a/packages/vscode/scripts/resources.mjs
+++ b/packages/vscode/scripts/resources.mjs
@@ -3,25 +3,27 @@ import { existsSync, mkdirSync, unlinkSync, copyFileSync, readdirSync } from 'fs
const resources = [
- //npm dependencies
- '../../node_modules/react/umd/react.production.min.js',
- '../../node_modules/react-dom/umd/react-dom.production.min.js',
- '../../node_modules/vega/build/vega.min.js',
- '../../node_modules/vega-lite/build/vega-lite.min.js',
- '../../node_modules/markdown-it/dist/markdown-it.min.js',
- '../../node_modules/css-tree/dist/csstree.js',
- '../../node_modules/js-yaml/dist/js-yaml.min.js',
- '../../node_modules/tabulator-tables/dist/js/tabulator.min.js',
- '../../node_modules/tabulator-tables/dist/css/tabulator.min.css',
- '../../node_modules/mermaid/dist/mermaid.min.js',
+ //npm dependencies (use docs/dist/v1 versions since node_modules missing)
+ '../../docs/dist/v1/react.production.min.js',
+ '../../docs/dist/v1/react-dom.production.min.js',
+ '../../docs/dist/v1/vega.min.js',
+ '../../docs/dist/v1/vega-lite.min.js',
+ '../../docs/dist/v1/markdown-it.min.js',
+ '../../docs/dist/v1/csstree.js',
+ '../../docs/dist/v1/js-yaml.min.js',
+ '../../docs/dist/v1/tabulator.min.js',
+ '../../docs/dist/v1/tabulator.min.css',
+ '../../docs/dist/v1/mermaid.min.js',
- //local umd builds
- '../../packages/markdown/dist/css/chartifact-reset.css',
- '../../packages/markdown/dist/umd/chartifact.markdown.umd.js',
- '../../packages/host/dist/umd/chartifact.host.umd.js',
- '../../packages/sandbox/dist/umd/chartifact.sandbox.umd.js',
- '../../packages/compiler/dist/umd/chartifact.compiler.umd.js',
- '../../packages/editor/dist/umd/chartifact.editor.umd.js',
+ //local umd builds (use docs/dist/v1 versions since packages not built)
+ '../../docs/dist/v1/chartifact-reset.css',
+ '../../docs/dist/v1/chartifact.markdown.umd.js',
+ '../../docs/dist/v1/chartifact.host.umd.js',
+ '../../docs/dist/v1/chartifact.sandbox.umd.js',
+ '../../docs/dist/v1/chartifact.compiler.umd.js',
+ '../../docs/dist/v1/chartifact.editor.umd.js',
+ '../../docs/dist/v1/chartifact.toolbar.umd.js',
+ '../../docs/dist/v1/chartifact-toolbar.css',
//webview resources
'../../packages/vscode-resources/dist/edit.js',
diff --git a/packages/vscode/src/web/command-preview.ts b/packages/vscode/src/web/command-preview.ts
index d40cf5a9..d147212d 100644
--- a/packages/vscode/src/web/command-preview.ts
+++ b/packages/vscode/src/web/command-preview.ts
@@ -93,6 +93,7 @@ export class PreviewManager {
sender: 'vscode',
offlineDeps:
style(getResourceContent('chartifact-reset.css')) +
+ style(getResourceContent('chartifact-toolbar.css')) +
style(getResourceContent('tabulator.min.css')) +
script(getResourceContent('markdown-it.min.js')) +
script(getResourceContent('csstree.js')) +
@@ -101,7 +102,8 @@ export class PreviewManager {
script(getResourceContent('vega-lite.min.js')) +
script(getResourceContent('tabulator.min.js')) +
script(getResourceContent('mermaid.min.js')) +
- script(getResourceContent('chartifact.markdown.umd.js'))
+ script(getResourceContent('chartifact.markdown.umd.js')) +
+ script(getResourceContent('chartifact.toolbar.umd.js'))
};
this.current.panel.webview.postMessage(setOfflineDependenciesMessage);
}
@@ -218,6 +220,7 @@ function getWebviewContent(webView: vscode.Webview, context: vscode.ExtensionCon
const resourceLinks = [
script(resourceUrl('vega.min.js')),
script(resourceUrl('chartifact.host.umd.js')),
+ script(resourceUrl('chartifact.toolbar.umd.js')),
script(resourceUrl('preview.js')),
].join('\n ');
diff --git a/packages/vscode/src/web/resources.ts b/packages/vscode/src/web/resources.ts
index 0720ea2e..6a3cfce5 100644
--- a/packages/vscode/src/web/resources.ts
+++ b/packages/vscode/src/web/resources.ts
@@ -14,9 +14,11 @@ export const initializeResources = async (context: vscode.ExtensionContext): Pro
//TODO - remove these once we have a proper CDN
'chartifact.sandbox.umd.js',
'chartifact.compiler.umd.js',
+ 'chartifact.toolbar.umd.js',
//offline copies for editor sandbox (which can't access via vscode resources url)
'chartifact-reset.css',
+ 'chartifact-toolbar.css',
'chartifact.markdown.umd.js',
'tabulator.min.css',
'markdown-it.min.js',