monaco编辑器动态设置viewzone的高度

Question

我使用摩纳哥编辑器的 OverlayWidget 和 Viewzone api 在摩纳哥编辑器中插入内联文本，如摩纳哥编辑器示例 https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening -到鼠标事件。

但是当我更改 OverlayWidget 的高度时，Viewzone 的高度并没有改变。

我尝试使用layoutZone api来重置viewzone的高度，但似乎不起作用。

editor.changeViewZones((accessor => {
       accessor.layoutZone(viewZoneId);
       this.doLayout(host, layoutInfo);
}))

那么动态设置viewzone高度的正确方法是什么呢？

谢谢！

Answer 1

我解决了这个问题。

是的，accessor.layoutZone(viewZoneId);将重新渲染视区。

关键是使用 viewzone 的 heightInPx 属性的 getter 方法，如下所示；

const viewZone = {
    afterLineNumber: lineNumber,
    get heightInPx() {
        return host.offsetHeight;
    },
    domNode,
    onDomNodeTop: (top) => {
        host.style.top = top + "px";
    },
};