Overlapping lines decorations

[Jyrki Keisala]

We are using your component extensively for marking license hits in the editor gutter with decorations. Each detected license gets its own colour, and we are passing this colour in linesDecorationsClassName. The result is this:

Currently, the lines are shown with

const className = compound
    ? "bg-gray-400"
    : `bg-${expression} w-3 ml-3`;
    ...
const decoration = {
    range: range,
    options: {
        isWholeLine: true,
        linesDecorationsClassName: `${className}`,
    },
};

As some of these "license hits" overlap each other, we'd need a way to show "overlapping but offset" lines in the editor gutter, as described in this picture:

The problem is, lines decorations in the gutter always seem to stick to the rightmost end of the gutter, and setting the right margin for shifting some lines to the left does nothing. So, for example, this doesn't work at all:

const className = compound
    ? "bg-gray-400"
    : `bg-${expression} w-3 mr-3`;

Is this a limitation of the Monaco Editor component itself, and any ideas to circumvent it or implement some support for shifting the decorations horizontally in the editor gutter?

[Suren Atoyan]

This issue should be referred to microsoft/monaco-editor