Monaco-editor: Can't resize the editor correctly

[jefflevinson]

I’ve looked at the playground.js file to see how to resize the editor but I can’t figure it out after 3 hours of playing with it. I can’t find an interface on the editor to allow the resizing or an explanation of all the layout elements of the container.

Using this snippet of code itself doesn’t seem to work:
if (editor) {
editor.layout({
width: HALF_WIDTH - 2,
height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
});
}

I seem to be running into an issue with the overflow container size versus the editor size versus the container size and getting the three of them to be in alignment with each other in a way that works is stumping me.

[alexdima]

normally, you can do:

var editor = monaco.editor.create(container, {});
...


function setSize(w, h) {
  container.style.width = w + 'px';
  container.style.height = h + 'px';

  // A. When the dimension is not specified explicitly, 
  // the editor will scan the container for the container's 
  // new size, causing a forced layout, which is possibly undersirable
  editor.layout();

  // B. The editor does not need to scan the container, 
  // avoiding a forced layout
  editor.layout({ width: w, height: h});
}

[cancerberoSgx]

just in case , my needs are different: I want the user to resize it the container - in a standard way and cheap (both on code and performance) on libraries and performance. This is what I did:

css container : resize: vertical; overflow: auto

and this js :

function installResizeWatcher(el, fn, interval){
  let offset = {width: el.offsetWidth, height: el.offsetHeight}
  setInterval(()=>{
    let newOffset = {width: el.offsetWidth, height: el.offsetHeight}
    if(offset.height!=newOffset.height||offset.width!=newOffset.width){
      offset = newOffset
      fn()
    }
  }, interval)
}
  const typeScriptCodeContainer = document.getElementById('typeScriptCodeContainer')
  typeScriptCodeEditor = monaco.editor.create(typeScriptCodeContainer, Object.assign(editorOptions, {value: example.codeValue}))
  installResizeWatcher(typeScriptCodeContainer, typeScriptCodeEditor.layout.bind(typeScriptCodeEditor), 2000)

yes, 2 seconds interval and make sure it registers only once. I see there is / was a resize interval on 100ms for the automatic relayout in monaco - IMHO that's too much.

See it in action: https://typescript-api-playground.glitch.me/?example=2