javascript - 如何讓 monaco-editor 像 codemirror 自動調整模式一樣自動適應內容？

Codemirror 編輯器支持一種會根據內容自動調整高度的模式：

http://codemirror.net/demo/resize.html

我們可以讓 Monaco 編輯器自動適應內容嗎？

答案＃1

重點摘要: 在你的編輯器配置中添加 automaticLayout: true:

 monaco.editor.create( domEl, {...options, automaticLayout: true});

你的問題是之前 Stack Overflow 問題的一般問題。

答案＃2

在我的情況下，我使用 Monaco 提供對靜態程式碼片段的良好呈現，這些程式碼片段基本上是在文件中。因此，我不需要 Monaco 編輯器實例隨內容變化而自動調整大小，也不特別關心它們對瀏覽器視窗變化的響應。我只需要它們在首次載入時完整呈現程式碼片段，不多不少，且不出現捲軸；小片段在小的編輯器視窗中，大片段在較大的視窗中。

無論原因為何，我所有嘗試使用 automaticLayout: true 以達到此目的的做法都沒有成功。我對各種呼叫 editor.layout() 的建議也沒有任何運氣。我得到的編輯器高度總是大約 10px。我透過為 monaco-editor/react 創建一個包裝組件來解決這個問題，該組件會在編輯器掛載後根據滾動條高度設置編輯器的高度。

import * as React from "react";
import Editor from "@monaco-editor/react";
import { Monaco } from "@monaco-editor/react";
import { editor } from "monaco-editor";

export interface IMonacoWrapperProps {
  content: string;
  options?: editor.IStandaloneEditorConstructionOptions;
  className?: string;
}

export function MonacoWrapper(props: IMonacoWrapperProps): JSX.Element {
  const [editorHeight, setEditorHeight] = React.useState(0);

  function editorDidMount(
    editor: editor.IStandaloneCodeEditor,
    monaco: Monaco
  ) {
    const scrollHeight = editor.getScrollHeight();
    setEditorHeight(scrollHeight);
  }

  return (
    <div>
      <Editor
        height={editorHeight}
        defaultLanguage="typescript"
        defaultValue={props.content}
        options={props.options}
        onMount={editorDidMount}
        className={props.className}
      />
    </div>
  );
}

這裡是一個在 CodeSandbox 上演示這個功能的連結：https://codesandbox.io/s/autosize-monaco-editor-to-content-on-first-load-dwvxlv?file=/src/MonacoWrapper.tsx