Skip to content

feat: add activity bar, toggle editor, i18n support, and SVG export fix#500

Open
FrankSAURET wants to merge 2 commits intohediet:mainfrom
FrankSAURET:feature/activity-bar-toggle-i18n
Open

feat: add activity bar, toggle editor, i18n support, and SVG export fix#500
FrankSAURET wants to merge 2 commits intohediet:mainfrom
FrankSAURET:feature/activity-bar-toggle-i18n

Conversation

@FrankSAURET
Copy link
Copy Markdown

Summary

This PR adds several usability features and fixes to the Draw.io VS Code extension:

New Features

1. Activity Bar Panel

  • Adds a Draw.io panel in the VS Code activity bar with a dedicated icon
  • Welcome view with "New Diagram" and "Open Diagram" buttons
  • "Open Diagram" supports opening .drawio, .dio, .drawio.svg, .dio.svg, .drawio.png, .dio.png files — including files outside the current workspace (auto-adds folder to workspace)

2. Toggle Editor Buttons

  • "Open as Text" button in the editor title bar when viewing a diagram → opens the source code side-by-side
  • "Open as Diagram" button when viewing a drawio source file → opens the visual editor side-by-side
  • Uses TabInputCustom/TabInputText API for proper URI detection

3. Internationalization (i18n)

  • Adds package.nls.json (English) and package.nls.fr.json (French) with 63 translated keys
  • All hardcoded display strings in package.json replaced with %key% NLS placeholders
  • Covers: extension name/description, all commands, all configuration titles and descriptions, view names, welcome content

Bug Fixes

4. SVG Export Text Rendering

  • Updated bundled draw.io from v26.0.2 to v29.6.10 — 3 major versions of SVG rendering improvements including HTML-to-SVG text conversion (v28+) and enhanced text block rendering (v29.6.7)
  • Fixed xml-formatter for .drawio.svg files: added { collapseContent: true } option to prevent the formatter from injecting whitespace inside <text>, <tspan>, and <foreignObject> elements, which broke SVG text rendering

Files 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 command
  • src/features/ActivityBarFeature.ts — activity bar panel (new)
  • src/features/ToggleEditorFeature.ts — toggle code/diagram buttons (new)
  • src/DrawioEditorProviderText.ts — SVG formatter fix
  • drawio — submodule updated to v29.6.10
  • .vscode/launch.json — reordered debug configs

Testing

  • Build passes (yarn build-extension + yarn build-plugins)
  • Tested with F5 debug launch on Windows
  • Verified activity bar, toggle buttons, Open Diagram (local + remote folders), and SVG export

…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)
Copilot AI review requested due to automatic review settings April 8, 2026 09:32
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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");
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
throw new Error("No items");
return new vscode.TreeItem("");

Copilot uses AI. Check for mistakes.
Comment thread package.json
"editor/title": [
{
"command": "hediet.vscode-drawio.openAsText",
"when": "activeCustomEditorId == 'hediet.vscode-drawio-text' || activeCustomEditorId == 'hediet.vscode-drawio'",
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Suggested change
"when": "activeCustomEditorId == 'hediet.vscode-drawio-text' || activeCustomEditorId == 'hediet.vscode-drawio'",
"when": "activeCustomEditorId == 'hediet.vscode-drawio-text'",

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants