问React摩纳哥-编辑打字稿整合

EN

import { useState, useRef } from 'react';
import Editor from '@monaco-editor/react';
import styles from '../Code.module.css';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
type Language = {
  languageName: string;
  languageID: number;
};

type EditorProps = {
  language: Language;
  onCodeChange: Function;
};
type Monaco = typeof monaco // to use it as a type for the monaco variable in handleEditorDidMount function

const CodeEditor = ({ language, onCodeChange }: EditorProps) => {
  console.log('language is ', language);

  const [editorValue, setEditorValue] = useState('//some comment');

  const editorRef = useRef(null);

  const monacoRef = useRef(null);

  const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => {
    editorRef.current = editor;
    monacoRef.current = monaco;
    
    console.log(monaco.languages.getLanguages());
    console.log('editor', editor.getModel().getLanguageIdentifier().language);
  };

  const handleEditorValueChange = (value: string|undefined) => {
    //console.log('event is ', event);
    setEditorValue(value);
  };
  const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
    fontSize: 15,
    minimap: {
      enabled: true,
    },
  };
  return (
    <div className={styles.editorBlock}>
      <div className={styles.editorNav}>
        <button>Submit</button>
        <button>Change Language</button>
      </div>
      <Editor
        height="90vh"
        language={language.languageName}
        defaultValue={editorValue}
        onMount={handleEditorDidMount}
        onChange={handleEditorValueChange}
        options={editorOptions}
      />
    </div>
  );
};