How do I integrate the Monaco text editor in a webview?

[Tommycore]

I'm working on an extension that uses a webview as a GUI editor for a JSON file. Those JSONs are meant to include markdown texts and I would like to leverage the full power of Visual Studio Code's text editor. Basically this:

• Editor receives a plain text input & language id (support for JSON language schema's as well) from the extension
• User edits like any other file (with snippets, language server, color scheme/theme, etc)
• Extension is given updated plain text output on save.

from: microsoft/vscode#87282 (comment)

Problem is: I have no idea how to implement that. The Issue talks about including worker in a webview, but I'm not sure how that relates or would translate to the functionality mentioned above. Any pointers on how to achieve that would be highly appreciated.

[r3m0t]

What's the reason for using a webview?

If you want to edit "like any other file" then you can create a new filesystem scheme and call openTextDocument to open a normal editor. Your filesystem is told when the user asks VS Code to save the file. (VS Code calls writeFile)

The only thing is this editor will be a normal tab. There's limited options for displaying information above or below the editor content in a normal tab. You could make sure the tab opens to the side of your webview instead of on top of it.

You could also implement a notebook, that way there will be one tab with multiple cells, each "cell" is a full JSON editor.

Using Monaco in a webview will be a completely separate inclusion of the text editor library, meaning it will not have the theme of VS Code, the settings won't match up, the snippets and intelligence won't match up, etc.

[Tommycore]

The only thing is this editor will be a normal tab.

I'm absolutely fine with that. But: If I keep a tab with such a "file" that was opened via my custom file system open and restart the VS Code, it appears that my extension isn't starting up fast enough to provide VS Code with the scheme. The tab just shows something like this:

Do you have any idea how to fix that? Some way to tell VS Code "Hey, my extension is loading up, give it a few seconds and you can access this scheme"? I haven't found any contribution points for that in the samples.

[Tommycore]

Nvm, see below. Thank you!

[Andarist]

I'm a different user who looks for a similar thing 😉

What's the reason for using a webview?

We visualize a schema-like object that acts as a state machine on the canvas in a webview. The object itself can contain (or reference) some expressions. It would be great to have a way to edit real in-code expressions in our webview and for those edits to feel "native".

We can display only parts of the real file in Monaco and sync back edits correctly to the real file. It's still lacking a lot of features though - I'm thinking right now about proxying all LSP methods to the "real" language server, mapping positions, and stuff. I really wish that I wouldn't have to embed a copy of Monaco for this but I guess there is no other way around this right now.

[gjsjohnmurray]

@Tommycore have you listed onFileSystem:node as one of your activation events?

[Tommycore]

Ah, yes, found it a minute before I read this post. That works. Thank you =)