getContentHeight in @monaco-editor/react does not look correct

[MatrixFun]

I'm trying to use https://github.com/suren-atoyan/monaco-react. But I realize that its getContentHeight does not match the behavior described here.

Here is an example: https://stackblitz.com/edit/react-ts-en8wpm?file=EditorBasic.tsx,App.tsx,index.html. It starts with 500px, once we enter a newline, it becomes 518px, then another newline leads to 536px, etc. From what I understand, getContentHeight should not include the height of the editor.

import * as React from 'react';
import MonacoEditor from '@monaco-editor/react';

export default class EditorBasic extends React.Component<{}, {}> {
  editor: any;

  _handleEditorDidMount(editor, monaco) {
    this.editor = editor;
    this.editor.onDidContentSizeChange(this.handleResize.bind(this));
  }

  updateHeight = () => {
    console.log(
      'this.editor.getContentHeight()',
      this.editor.getContentHeight()
    );
  };

  handleResize() {
    if (this.editor && this.editor !== undefined) {
      this.updateHeight();
    }
  }

  render() {
    return (
      <MonacoEditor
        width="400px"
        height="500px"
        options={{ minimap: { enabled: false }, lineNumbers: 'off' }}
        defaultLanguage="javascript"
        defaultValue="content"
        onMount={this._handleEditorDidMount.bind(this)}
        theme="vs-dark"
      />
    );
  }
}

Does anyone know if it's a bug of @monaco-editor/react? Is there any other API to get the real content height?

(* Link in StackOverflow: https://stackoverflow.com/questions/75105858/getcontentheight-in-monaco-editor-react-does-not-look-correct *)

[danbtl]

@MatrixFun did you ever find a workaround for this?

[trm217]

same issue here, the value getContentHeight seems to increment whenever you enter a new line, no matter if you delete lines…

[fredgig]

I encountered the same issue. I needed to use getContentHeight in order to set the editor's height dynamically.

In my case the function returns the correct value when I set the editor's scrollBeyondLastLine option to false:

// ...

const minHeight = 100;

const [height, setHeight] = useState(minHeight);

const updateHeight = (editor: editor.IStandaloneCodeEditor) => setHeight(Math.max(minHeight, editor.getContentHeight()));

return (
  <Editor
    // ...
    options={{
      scrollBeyondLastLine: false,
      // ...
    }}
    height={height}
    onMount={(editor) => editor.onDidContentSizeChange(() => updateHeight(editor))}
    // ...
  />
);

// ...