Inline Results Widget

[mikeball]

The ability to add inline blocks of html and have the editor display and not overlay other lines allows extensions to build very rich and interactive experiences, versus just writing something to a console.

An issue for this feature was created in the main vscode project (microsoft/vscode#3220) but I suspect that the functionality to add this feature would need to be added to Monaco, so I've created an issue here. Please see the comments on vscode issue for additional discussion.

Here's an example of what the inline results might look like

• https://cloud.githubusercontent.com/assets/3878949/13206676/8e2dcb02-d90b-11e5-829a-bab589bdbb8c.png

Atom has also implemented a similar feature called Block Decorations which appears to be used by a plugin already.

• http://blog.atom.io/2016/02/03/introducing-block-decorations.html
• https://github.com/nteract/hydrogen

[alexdima]

The editor has the view zone API: editor.changeViewZones((accessor) => { ... })

[mattgodbolt]

I'd be interested in this too. I can't see how changeViewZones works (there doesn't appear to be much documentation on what this function does or how it could allow placement of inline blocks).

It's not clear if ContentWidgets could cover this use case either.

My use case: implementing inline error widgets much like these: https://godbolt.org/g/6Y90j3 (I'm currently using the CodeMirror editor but am considering moving to Monaco).

[alexdima]

@mattgodbolt
You can set error/warning markers on a model and the editor's built-in Error widget can kick in via F8:

That widget is implemented by using both a view zone and an overlay widget. The trick is to listen to the view zone's callbacks in order to align the overlay widget on top of the view zone.

[mattgodbolt]

That's fantastic: thanks @alexandrudima