Monaco editor dynamically resizable

Question

I have been searching for a discussion about if it's possible to mimic the html tag textarea's resizing when using Monaco Editor's field all over the Internet but I couldn't find one answering my question.

I'm using the monaco-editor npm package in a React application. Do you have any idea if this is easy to implement?

Thank you in advance!

SOLUTION
With pure css I selected the target html element and just added these properties:

div {
  resize: vertical;
  overflow: auto;
}

Answer 1

TL;DR: add automaticLayout: true to your editor's configuration.

NL;PR:

Monaco has a built-in auto resize to parent container functionality:

React >= 16.3.0 (Recommended)

constructor(props){super(props); this.editorDiv = React.createRef();}

render(){
 return <div ref={this.editorDiv} className="editor" ></div>
}

componentDidMount(){
 let editor = monaco.editor.create(this.editorDiv.current, {
        value: "var x = 0;",
        language: 'javascript',
        automaticLayout: true // the important part
      });
}

React<16.3.0

render(){
 return <div ref={el=>{this.editorDiv = el}} className="editor" ></div>
}
 // I use this configuration in the editor:
componentDidMount(){
 let editor = monaco.editor.create(this.editorDiv, {
        value: "var x = 0;",
        language: 'javascript',
        automaticLayout: true // the important part
      });
}

And the CSS for the editor (it avoids rendering the editor for the first time with like 10px height):

.editor{
 height: 100%;
} 

Monaco Version: ^0.10.1, last tested: 0.20.0

Note: < Version 0.20.0: The mechanism does not listen to its container size changes, it polls them.

@nrayburn-tech (Monaco Editor's contributor): Version 0.20 uses MutationObserver for all browsers. Version 0.21 and later uses ResizeObserver on supported browsers, otherwise, it uses polling as a fallback.