javascript - Hur får man monaco-editor att automatiskt anpassa innehållet som codemirror auto resize-läge?

Codemirror-redigeraren stödjer ett läge som automatiskt anpassar höjden efter dess innehåll:

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

Kan vi få Monaco-editor att automatiskt anpassa innehållet också?

Svar #1

TL;DR: lägg till automaticLayout: true i din redigerarkonfiguration:

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

Din fråga är den allmänna frågan från en tidigare SO-fråga.

Svar #2

I mitt fall använder jag Monaco för att tillhandahålla en snyggt renderad vy av statiska kodexempel i det som i princip är dokumentation. Så jag behöver inte att mina Monaco-editorinstanser anpassar sig och ändrar storlek efter förändrat innehåll, och jag är inte särskilt oroad över att de ska vara responsiva för förändrade webbläsarfönster. Jag behöver bara att de renderar sina exempel helt, varken mer eller mindre, vid första laddning och utan rullningslister; små exempel i små editorfönster och större exempel i större.

Av vilken anledning som helst fungerade aldrig alla mina försök att använda automaticLayout: true för detta ändamål. Jag hade heller ingen framgång med de olika förslagen att anropa editor.layout(). Jag fick bara editorn att vara runt 10px hög. Jag löste detta genom att skapa en wrapper-komponent för monaco-editor/react som satte redigerarens höjd baserat på rullningslistens höjd efter att editorn hade monterats.

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>
  );
}

Här är en länk till en demo av detta i CodeSandbox: https://codesandbox.io/s/autosize-monaco-editor-to-content-on-first-load-dwvxlv?file=/src/MonacoWrapper.tsx