Monaco-editor: Add margin above first line?

[trevorade]

monaco-editor version: 0.15.6

Note: I realize this is a question that could have been asked at StackOverflow but I'm fairly certain this is just not possible presently.

I'd like the ability to specify the height of a top-margin that is only visible when scrolled to the top of the file. After scrolling down, the margin will disappear. Here's a visual demonstration of what I need to accomplish:

Starts with top-margin/gutter:
┏━━┳━━━┓
┃  ┃   ┃
┃ 1┃ A ┃
┃ 2┃ B ┃
┗━━┻━━━┛

After scrolling, top-margin/gutter is gone:
┏━━┳━━━┓
┃ 2┃ B ┃
┃ 3┃ C ┃
┃ 4┃ D ┃
┗━━┻━━━┛

I suspect this sort of change will require code changes because, as far as I can tell, the line numbers and text lines are scrolled separately via code as opposed to CSS.

[alexdima]

You can use view zones and add a view zone with afterLineNumber: 0.

[pomber]

Took some time to find an example with view zones. Leaving this here for others:

const editor = monaco.editor.create(document.getElementById("container"))
editor.changeViewZones((changeAccessor) => {
  const domNode = document.createElement("div");
  const viewZoneId = changeAccessor.addZone({
    afterLineNumber: 0,
    heightInLines: 3,
    domNode: domNode
  });
});

Couldn't find a way to set the height of the view zone as a percentage of the editor height tho'.

[trevorade]

Thanks. Unfortunately, zones are destroyed when setting the model. I ended up adding the following code to the one location where I set the model:

    this.editor.setModel(model);
    if (this.marginTopPx > 0) {
      this.editor.changeViewZones(accessor => {
        accessor.addZone({
          afterLineNumber: 0,
          heightInPx: this.marginTopPx,
          domNode: document.createElement('SPAN'),
        });
      });
    }

[trevorade]

Closing the issue as I don't think there is a real issue. It's unfortunate that the zone does not stick around but this can be worked around without too much trouble.