Editor does not resize

[peteboothroyd]

The monaco-editor component does not update to match the dimensions of the container it is within
when the container resizes. This only affects when a percentage height or width is supplied.
I believe this may be accomplished by calling editor.layout() but have not been able to make it work yet.

[ThomasBrekelmans]

You are on the right track with calling editor.layout().

You'll need a reference to the 'editor', which can be obtained by implementing the 'editorDidMount' prop on your instance.

Then you need to listen for resize events, and call (this.)editor.layout() in your event handler.

Here's a very basic ResizableMonacoEditor component which illustrates this:

class ResizableMonacoEditor extends Component {
	editor = null;

	handleEditorDidMount = editor => this.editor = editor;

	render() {
		return (
			<MonacoEditor
				{ ...this.props }
				editorDidMount={this.handleEditorDidMount}
			/>
		);
	}

	handleResize = () => this.editor.layout();

	componentDidMount() {
		window.addEventListener('resize', this.handleResize);
	}
}

Of course you are free to 'listen for resize events' in a more elegant way. For example by using one of the many community example React components for detecting resizes for individual elements/components.
But I think that's outside the scope of your question so I opted for a simpler / more straightforward example.

Note: by spreading { ...this.props } on <MonacoEditor /> you can set any prop on <ResizableMonacoEditor /> intended for <MonacoEditor />.

Hope this helps.

[domoritz]

You can also set monaco to autosize.

[ThomasBrekelmans]

Which might cause performance problems as outlined in this issue from the monaco project:
microsoft/monaco-editor#28

So if that might be a concern, I'd agree with the recommendation (in that issue) of handling resizes manually and use something like I suggested.

[expobrain]

So shall we close this issue?

[expobrain]

Closing this issue for now, please feel free to open it again if necessary

[DaxChen]

I tried using 'react-resize-detector' and seems to work well!

import React from 'react';
import MonacoEditor from 'react-monaco-editor';
import ReactResizeDetector from 'react-resize-detector';

export default class Editor extends React.Component {
  state = {
    code: ['function x() {', "  console.log('Hello world!');", '}'].join('\n'),
  };

  onChange = (newValue, e) => {
    console.log('onChange', newValue, e);
    this.setState({ code: newValue });
  };

  editorDidMount = (editor, monaco) => {
    console.log('editorDidMount', editor, monaco);
    this.editor = editor;
    editor.focus();
  };

  render() {
    const { code } = this.state;
    const options = {
      selectOnLineNumbers: true,
    };
    return (
      <ReactResizeDetector
        handleWidth
        handleHeight
        onResize={() => {
          if (this.editor) {
            this.editor.layout();
          }
        }}
      >
        <MonacoEditor
          language="javascript"
          theme="vs-dark"
          value={code}
          options={options}
          onChange={this.onChange}
          editorDidMount={this.editorDidMount}
        />
      </ReactResizeDetector>
    );
  }
}

[miquelvir]

This is not working for me when calling .layout() without parameters. Calling .layout({}) happens to work.

Source: https://stackoverflow.com/a/64485730/9415337