Vscode: Question: How does one make a custom tab view (something like preview markdown)

[pmkary]

I have a couple of extension ideas and apps that I want to port to vscode and I need this. By this I mean: For example I wanna make a dependency-graph view for the typescript like the one in Atom:

Or far example I have a custom visual language based on Blockly so I can't use the monaco environment but I also wanted to have it in vscode around my other tools. How can I make it? I found no good documentations or sample codes for that.

Also another question is that how can I open this "custom-view" for a certain format instead of the monaco?

Thanks for all you kind answers as always.

[octref]

Take a look at previewHTML: https://code.visualstudio.com/docs/extensionAPI/vscode-api-commands.

This is also what the built-in Markdown extension is using:
https://github.com/Microsoft/vscode/blob/master/extensions/markdown/src/extension.ts#L89

[pmkary]

@octref thanks a lot. Just a question @octref @bpasero why javascript and css are not supported in the <webview>? There is a force CSS of VSCode that I can't override and also dynamic sizes won't work ( vm / vh... ). Why is that so? I can make an iframe inside of the web view but then communication with out world is a problem...

[bpasero]

@jrieken can chime in for webview specific questions

[pmkary]

@bpasero thanks a lot!

[jrieken]

why javascript and css are not supported in the ?

There should be full support for JavaScript and CSS - that's the reason we put things into a web view. Tho you cannot access the extension API because you run in a separate process. For styling we define a few variables (color, background, font) and by default set that but it's overridable, see: https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/parts/html/browser/webview.ts#L136

[pmkary]

@jrieken oh thanks a lot! I think I'm finding my way around. Thanks a lot.

[DonJayamanne]

@jrieken , is JavaScript supported in the html returned by TextDocumentContentProvider?
I've found that JavaScript just doesn't work, I was under the impression this was by design (script tags being deliberately stripped off)

[DonJayamanne]

@jrieken , nope I'm wrong it works.
I'm certain this didn't work a month ago.

[jrieken]

@DonJayamanne The text content provider is just there to feed _virtual_ resources into the system. That's useful for a many scenarios - like opening generated source from a dll, generating a preview from markdown etc. Virtual documents are treated like 'normal' documents whenever possible. Now, a second thing is the previewHtml command which allows to render content (instead of rendering text). The combination of virtual documents and preview html is where the power comes from

[pmkary]

@DonJayamanne the virtual doc idea is pretty cool!!

[62316e]

Any plans for exposing API? This is must have feature and for many cases previewHTML is not enough.
I would like to have custom editor with buttons etc and be able to access API from inside.

[DonJayamanne]

@62316e please have a look at the Jupyter extension. I'm using ReactJs inside the HTML content displayed using previewHTML. There's a websocket bridge -socket.io between the html content and the hosting process with full access to the VS Code api).

[62316e]

@DonJayamanne Thanks for answer.
What i'm actually need is to have a custom editor without code editor open. For example image editor.

Besides that i dont think that your way with sockets is how things should work by design.