Thursday, 6 May 2021

How to change the background color on hover for a Monaco editor delta decoration?

Looking at the playground example, I can create and apply delta decorations just fine:

var editor = monaco.editor.create(document.getElementById("container"), {
    value: "var a = true",
    language: "javascript"
});

var decorations = editor.deltaDecorations([], [
    { range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},
    { range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},
]);

monaco decorations applied

However, the :hover variants of the css aren't respected at all for the decoration className at all.

The :hover variant for inlineClassName is respected, but only for the specific block I hover over, not the entire decoration:

inlineClassName hover on specific block instead of the whole decoration

I know Monaco's dom manipulation is very complex (and it's amazing it works in the browser so well!) so this may be expected.

Is there some way to affect the :hover background color of a Monaco editor delta decoration?



from How to change the background color on hover for a Monaco editor delta decoration?

No comments:

Post a Comment