How to use webview with monaco-languageclient?

[MangoIV]

Hi - I would like to ask whether or not it is possible to use the vscode webview with monaco-languageclient or if there's an example for that around? I see that there's some code for it but I don't understand how to use it.

I'm also wondering if I'm missing some place for documentation of this project? All I could find were the examples and they are all kind of incomplete if one is trying to implement all of an extension without actually loading up the bundled extension.

Thank you so much in advance, an answer is much appreciated!

[CGNonofr]

Hello,

monaco-languageclient is based on monaco-vscode-api, which supports everything that VSCode support in web mode, including webviews.

The proper service-overrides need to be loaded, then you'll be able to load your extension using webviews. Either by calling the registerExtension function by hands, or loading your vsix using the rollup-vsix-loader, or even installing the extension from the marketplace

[MangoIV]

Thank you for your answer @CGNonofr, if I may ask, is there any way to find out which one is the correct override?

Additionally it would be nice if I could just mount the webview onto a container already reserved on the webpage that monaco is running on to, instead of loading the complete vscode extension - is there support for that?

[MangoIV]

More specifically, there’s this function acquireVsCodeApi which is supplied by some magic to webviews. My question basically amounts to where I can find that magic and how to use it to pass that function to the component that would be running in the webview

[CGNonofr]

Thank you for your answer @CGNonofr, if I may ask, is there any way to find out which one is the correct override?

Not really, you can start by adding the obvious ones then add the missing ones when you notice an issue or a missing feature

Additionally it would be nice if I could just mount the webview onto a container already reserved on the webpage that monaco is running on to, instead of loading the complete vscode extension - is there support for that?

It doesn't work that way, the point of webview is to let the user manipulate them, move them or close them. If you just want to render an iframe in your container, why aren't you doing it yourself?

More specifically, there’s this function acquireVsCodeApi which is supplied by some magic to webviews. My question basically amounts to where I can find that magic and how to use it to pass that function to the component that would be running in the webview

acquireVsCodeApi just provides 3 methods (getState, setState and postMessage), all relying on postmessages, so it can probably easily be implemented by hands though, depending on what you're trying to do

[MangoIV]

why aren't you doing it yourself

I try to, the issue is that the webview loses the ability to talk to vscode, i.e. the webview tries to use vscode-messenger to talk to the editor and that needs the acquireVsCodeApi function to supply the necessary context.

I would be happy to implement that part myself, however I don't know enough about vscode to know what should go there. vscode-messenger basically says nothing about what is supposed to go there and the types aren't helpful either, it just says "this is passed in by vscode"

[CGNonofr]

I'm sorry, that's too advanced for me to be able to help you. The best documentation is the code itself though :)

[MangoIV]

The best documentation is the code itself though

if you're speaking in terms of this code, then I'm willing to believe you, if you're speaking in absolute terms, perhaps you can tell that the knowledge of an interface having three methods isn't quite enough to implement it ;)

Thank you for your help though. I will try to use an actual webview for now.

[kaisalmen]

I will convert this into a discussion. because it is not an issue.