Adopt the experimental Markdown code block editor API

Author: hedietCreated Aug 7, 2026Updated Aug 7, 2026

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.codeBlockEditorProviders entry with an exact { "language": "drawio" } selector.
  • Use an exportApi source with apiVersion: 1 so the extension can generate the editor HTML and configuration dynamically.
  • Export markdownCodeBlockEditors.apiV1.getProvider(providerId) from activate.
  • Implement the provider's required onDidChange event 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-editors and 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 reportSize so the editor is resizable and preserves its layout;
    • tolerate disposal and recreation because Markdown virtualizes embedded editors.
  • 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.