feat: add activity bar, toggle editor, i18n support, and SVG export fix#500
feat: add activity bar, toggle editor, i18n support, and SVG export fix#500FrankSAURET wants to merge 2 commits intohediet:mainfrom
Conversation
…o update - Add Draw.io activity bar panel with icon, New Diagram and Open Diagram buttons - Add toggle buttons in editor title to switch between diagram and source code (side-by-side) - Add Open Diagram command with file picker (handles files outside workspace) - Add i18n support with package.nls.json (English) and package.nls.fr.json (French) - Fix SVG export text rendering by using xml-formatter collapseContent option - Update bundled draw.io from v26.0.2 to v29.6.10 (major SVG rendering improvements)
There was a problem hiding this comment.
Pull request overview
This PR enhances the Draw.io VS Code extension’s usability by adding an Activity Bar entry point, editor toggle actions, and localization for manifest strings, and it fixes SVG export formatting to preserve text rendering.
Changes:
- Added an Activity Bar “Draw.io” container with a welcome view and “New/Open Diagram” entry points.
- Added editor title actions + commands to open a diagram as text (and vice versa) beside the current editor.
- Updated SVG XML formatting to avoid whitespace injection that breaks
<text>/<tspan>/<foreignObject>rendering.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/features/ToggleEditorFeature.ts |
New feature registering “open as text/diagram beside” commands using the tab API to resolve URIs. |
src/features/ActivityBarFeature.ts |
New Activity Bar view wiring via a tree data provider for the welcome panel. |
src/Extension.ts |
Wires new features and adds the openDiagram command that can add an external file’s folder to the workspace and open it. |
src/DrawioEditorProviderText.ts |
Adjusts xml-formatter options for SVG output to preserve inline text nodes. |
package.nls.json |
Adds English NLS strings for manifest localization. |
package.nls.fr.json |
Adds French NLS strings for manifest localization. |
package.json |
Adds contributions (views/activity bar, new commands, editor/title menus) and switches manifest strings to NLS placeholders. |
media/drawio-activity-bar.svg |
Adds the Activity Bar icon asset. |
.vscode/launch.json |
Reorders debug configurations. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| class EmptyTreeDataProvider implements vscode.TreeDataProvider<never> { | ||
| getTreeItem(): vscode.TreeItem { | ||
| throw new Error("No items"); |
There was a problem hiding this comment.
getTreeItem throws an error. Even if the tree is intended to be empty, VS Code can still call getTreeItem in some scenarios (e.g., reveal/refresh), which would surface as an extension error. Return a valid TreeItem (or avoid throwing by making it unreachable in a way that doesn't crash) instead of throwing.
| throw new Error("No items"); | |
| return new vscode.TreeItem(""); |
| "editor/title": [ | ||
| { | ||
| "command": "hediet.vscode-drawio.openAsText", | ||
| "when": "activeCustomEditorId == 'hediet.vscode-drawio-text' || activeCustomEditorId == 'hediet.vscode-drawio'", |
There was a problem hiding this comment.
Open Source Code Beside is currently shown for both custom editors, including the binary PNG editor (activeCustomEditorId == 'hediet.vscode-drawio'). For *.drawio.png/*.dio.png there isn't a meaningful text source to open, so this action will either open unreadable binary in a text editor or reopen the image preview, which doesn't match the command name. Consider restricting the when clause to the text-based editor (or adjusting the command/title to reflect what actually opens for PNG).
| "when": "activeCustomEditorId == 'hediet.vscode-drawio-text' || activeCustomEditorId == 'hediet.vscode-drawio'", | |
| "when": "activeCustomEditorId == 'hediet.vscode-drawio-text'", |
Summary
This PR adds several usability features and fixes to the Draw.io VS Code extension:
New Features
1. Activity Bar Panel
.drawio,.dio,.drawio.svg,.dio.svg,.drawio.png,.dio.pngfiles — including files outside the current workspace (auto-adds folder to workspace)2. Toggle Editor Buttons
TabInputCustom/TabInputTextAPI for proper URI detection3. Internationalization (i18n)
package.nls.json(English) andpackage.nls.fr.json(French) with 63 translated keyspackage.jsonreplaced with%key%NLS placeholdersBug Fixes
4. SVG Export Text Rendering
.drawio.svgfiles: added{ collapseContent: true }option to prevent the formatter from injecting whitespace inside<text>,<tspan>, and<foreignObject>elements, which broke SVG text renderingFiles Changed
package.json— new contribution points (activity bar, views, commands, menus)package.nls.json— English NLS strings (new)package.nls.fr.json— French NLS strings (new)media/drawio-activity-bar.svg— activity bar icon (new)src/Extension.ts— wiring for new features + Open Diagram commandsrc/features/ActivityBarFeature.ts— activity bar panel (new)src/features/ToggleEditorFeature.ts— toggle code/diagram buttons (new)src/DrawioEditorProviderText.ts— SVG formatter fixdrawio— submodule updated to v29.6.10.vscode/launch.json— reordered debug configsTesting
yarn build-extension+yarn build-plugins)