Monaco-editor: How could I add space around content?

[chhpt]

Because of some reasons, I want to add some space around the content(view-lines). I found the way to add space on the left of the content using the API lineDecorationsWidth, but I have no idea how to add space on the other side, top, bottom and right and keep the action work well, such as copy, select all, input...

[chhpt]

I had asked this question on the stackoverflow, but no one have answer me. 😔

[myfoxtail]

@chhpt may be you're looking for the lineHeight?

[chhpt]

@myfoxtail Could the lineHeight change the space on the left or right? I can't find the usage that show it could change the space around the content. It only change the space between the line. I don't think the lineHeight is the proper way.

[myfoxtail]

@chhpt I guess you can try to create a decoration and apply it to the particular range if your content. Every decoration has it's own css class which I guess you can fill with margins and paddings.

const decorationId = this.editor.deltaDecorations([], [
        {
          range: new monaco.Range(
              lineNumberStart
            , columnStart
            , lineNumberEnd
            , columnEnd),
          options: {
            inlineClassName: 'myClass', // use this class to add some paddings
            stickiness     : 1,
            hoverMessage   : {value: 'hello my friend'}
          }
        }
      ]);

[chhpt]

@myfoxtail I have tried it. It seems that it is not working. The inlineClassName has effect on the inline block. But when I add padding on it, it cause the content chaos. And I also have tried the className, it is not work as expect. May the API didn't fit this situation.

[alexdima]

You could try with decorations that use ::before and ::after css selectors, like e.g. beforeContentClassName

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

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

var decorations = editor.deltaDecorations([], [
    { range: new monaco.Range(7,1,7,24), options: { beforeContentClassName: 'myInlineDecoration' }},
]);

.myInlineDecoration::before {
    content: " ";
    background: red;
    width: 100px;
    display: inline-block;
}

[chhpt]

@alexandrudima

Maybe I should show my thoughts more clearly. First please see this pic. If I don't do anything, it look like this. This doesn't look so good.

So I decided to add some space around the content. I add a padding attribute on the parent container, it became like this:

All is well except the scrollbar. I want to find way that could make it work like this but make the scrollbar on the edge. May like this:

The beforeContentClassName API is something else, it make cause like this. it is not what I except.
And if edit the content, such as delete something, it work weird. Is there a way could change the position of the scrollabr?

var decorations = editor.deltaDecorations([], [
    { range: new monaco.Range(1,1,10,24), options: { beforeContentClassName: 'myInlineDecoration' }},
]);

[alexdima]

Thanks for posting screenshots, it makes it clearer for me what you're trying to do.

At this time, the editor doesn't support any form of padding inside the content (such that the scrollbar stays put).

[chhpt]

@alexandrudima Do you have a plan to realize it? I hope the feature could be come ture.