Avoiding Monaco decorations being clipped?

Viewed 180

Monaco editor has several interfaces for creating decorations or overlays. These appear to be rendered into one of two places in the DOM:

  1. .monaco-editor > .overflow-guard > .overlayWidgets > .monaco-editor-hover
  2. .monaco-editor > .overflowingContentWidgets

I am finding that using the line decorations API, the overlays are rendered into location (1), and that's a problem:

Clipped line decoration

This happens because .overflow-guard has overflow (surprise!) set to 'hidden'.

Sample code:

editorInstance.getModel().deltaDecorations(decorations.current, [
  {
    range: new monaco.Range(err.line, err.pos, err.line, err.pos + err.str.length),
    options: {
      className: 'error',
      glyphMarginClassName: 'error_line',
      glyphMarginHoverMessage: { value: err.message },
      overviewRuler: { color: '#ff0000', position: monaco.editor.OverviewRulerLane.Full }
    }
  }
]);

This is an instance of an IModelDecorationOptions.

Questions:

  • Is it possible to modify my code to do this in a way that renders the decoration outside of overflow-guard?
  • Is there a monaco bug here? (I couldn't find a way to test it on the playground)
0 Answers
Related