-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide straight-forward zoneWidget API #373
Comments
The go to error widget does two things:
The trick is that when inserting a view zone, it is possible to provide two callbacks: Internally, we have something called a |
Until the // Create a zone over the margin. Uses the trick explained
// at https://github.com/Microsoft/monaco-editor/issues/373
// overlay that will be placed over the zone.
let overlayDom = document.createElement('div');
overlayDom.id = 'overlayId';
overlayDom.style.width = '100%';
overlayDom.style.background = '#ffb275';
// https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ioverlaywidget.html
let overlayWidget = {
getId: () => 'overlay.zone.widget',
getDomNode: () => overlayDom,
getPosition: () => null
};
editor.addOverlayWidget(overlayWidget);
// Used only to compute the position.
let zoneNode = document.createElement('div');
zoneNode.style.background = '#8effc9';
zoneNode.id = "zoneId";
// Can be used to fill the margin
let marginDomNode = document.createElement('div');
marginDomNode.style.background = '#ff696e';
marginDomNode.id = "zoneMarginId";
editor.changeViewZones(function(changeAccessor) {
changeAccessor.addZone({
afterLineNumber: 3,
heightInLines: 3,
domNode: zoneNode,
marginDomNode: marginDomNode,
onDomNodeTop: top => {
overlayDom.style.top = top "px";
},
onComputedHeight: height => {
overlayDom.style.height = height "px";
}
});
}); |
If anyone wants another example of how to use changeViewZones, check this out: https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events |
Sorry for resurrecting this old issue. Was just wondering, is there a way to add view zones through VS Code's APIs? |
Thank you very much for your Demo, it solved my problem |
I'm trying to create a view zone similar to the one which shows up while displaying errors:
I used
changeViewZones
to insert a viewzone but it creates a zone which spans from the end of line gutter to the end of the editor. I want it to start from the start of the line gutter.Is there any way I can reuse what is being used in the error viewzone. If not, how can I mimic it.
The text was updated successfully, but these errors were encountered: