Adopt the experimental Markdown code block editor API
VS Code is adding an experimental extension contribution for replacing fenced Markdown code blocks with iframe-backed custom editors. We should adopt it so that a fenced drawio block opens as a resizable inline Draw.io editor in the Markdown editor.
The current extension-author documentation is here: https://github.com/microsoft/vscode/blob/ce08adaa88f8a0e6e34355dfd56ad7f40f236cd0/extensions/markdown-language-features/markdown-code-block-editor-extensions.md
Stability
This API is experimental and currently quite unstable. The contribution schema, exported API, and host behavior may change before stabilization. The integration should therefore remain isolated, version-gated, and easy to update or remove. It should initially target VS Code Insiders/development builds that contain the API rather than assume broad stable availability.
Suggested implementation
- Contribute a
markdown.codeBlockEditorProvidersentry with an exact{ "language": "drawio" }selector. - Use an
exportApisource withapiVersion: 1so the extension can generate the editor HTML and configuration dynamically. - Export
markdownCodeBlockEditors.apiV1.getProvider(providerId)fromactivate. - Implement the provider's required
onDidChangeevent and fire it whenever Draw.io settings, theme-dependent HTML, or another resource changes a previously resolved descriptor. - Resolve the editor using the Markdown document URI and complete fence info string. The host caches successful resolutions by provider, document URI, and complete info string; the extension does not provide a cache key.
- Keep the code block content as text containing the Draw.io XML.
- Build a self-contained browser guest using
@vscode/web-editorsand bridge it to the embedded Draw.io frame:- initialize Draw.io from
WebEditorClient.getContent(); - apply Draw.io edits back to the fenced block with
applyEdits; - react to host content changes without echoing identical local updates;
- honor initial and changed read-only state;
- call
reportSizeso the editor is resizable and preserves its layout; - tolerate disposal and recreation because Markdown virtualizes embedded editors.
- initialize Draw.io from
- Use Draw.io's compact/inline presentation instead of the full application chrome.
- Keep the normal textual fenced block as the fallback when the host does not support the contribution or the editor cannot be resolved.
The fence itself and its info string stay in the Markdown document; only the body is edited by the embedded Draw.io guest.
Source: hediet/vscode-drawio