How do you process input events from an IViewZone in the Monaco Editor?

Question

If you try this Monaco playground:

https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events

and add this on line 36 to set the HTML of the light green IViewZone that is inserted:

domNode.innerHTML = '<a href="https://www.microsoft.com/">Microsoft</a>';

You will see that the link is NOT clickable. This is a simplified repro of the more general problem of being unable to get input events on your DOM node. For example, you can call addEventListener() for mousemove . click , etc. on domNode , but your handler will never get called even though you can see it is present in Chrome DevTools.

Note that VS Code itself has very rich implementations of IViewZone , such as the "peek" view for Show References. That view even supports scrolling! Therefore, it seems possible to get these input events, but it it is not immediately obvious from the documentation.

It might be possible to use the editor's own onMouseDown() methods (as shown at the bottom of the playground) and then delegate to the appropriate target, though that does not appear to be what VS Code is doing.

Answer 1

The reason that the link in the view zone is not clickable is the whole view zone is rendered under the view lines (source code), which means the whole view zone is not clickable. To render an element which users can interact with, a contentWidget should be used.

The peek view in VS Code is a view zone (which creates empty whitespace between view lines) and a content widget above it, which you can interact with. They are placed at the same position so users won't see the view zone behind the content widget.

In monaco playground , change line 52 to this.domNode.innerHTML = '<a target="_blank" href="https://www.microsoft.com/">Microsoft</a>'; and run the sample again, you can click the link and a new tab will be opened.