Custom VSCode extension: embed native editor in webview

Question

Goal

I want to have a webview, that embeds the native editor (see image). The embedded part does not need to have a tabbing-feature. It would be enough to have the editor object, that I fill and update manually per Javascript.

Question

Is that possible? How would I do that?

Background

I want to show various file contents within my own webview. These contents should be editable and have all functionality, that the vscode editor has (e.g. syntax highlighting, multiple cursors, intellisense,...). At best, also 3rd party extensions should work within them.

I don't want to start implementing the whole editor again, so I'm searching for a way to embed the editor.

Answer 1

It is not possible to embed the native editor that comes with VS Code. The extension API simply does not support it.

The closest you can get is to import the code of the editor into your webview. The editor is called Monaco and is available via the npm package monaco-editor. It supports most (or all?) of the features offered by VS Code editor, such as IntelliSense.

However, since this editor would be unaware of the installed VS Code extensions, themes and configuration options, it will behave differently than native editors. You might be able to improve the user experience by manually propagating configuration options and themes, but this would require a significant amount of work and might not be possible for other things, such as support for language servers or third party extensions.