import React, {useEffect, useRef, useState} from 'react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import './Component.scss';

function Monaco(props) {
  const {
    style = { // dom节点样式
      height: '400px',
    },
    value = '', // 代码文本
    onChange = () => { // 改变的事件
    },
    fontSize = 14, // 代码字体大小
    monacoOptions = {
      scrollBeyondLastLine: false,
      lineNumbers: "off",
      wordWrap: true,
      overviewRulerBorder: true,
      lineHeight: 24,
      readOnly:true
    }, // monaco 自定义属性
    language = 'html', // 语言 支持 js ts sql css json html等
  } = props;
  const editOrRef = useRef();
  const ThisEditor = useRef();
  useEffect(() => {
    ThisEditor.current = monaco.editor.create(editOrRef.current, {
      value: value || '',
      language,
      theme: "vs-grey",
      fontSize: fontSize + 'px',
      minimap: { // 关闭代码缩略图
        enabled: false,
      },
      ...monacoOptions,
    });
 
    ThisEditor.current.onDidChangeModelContent((e) => {
      let newValue = ThisEditor.current.getValue();
      onChange(newValue);
    });
    return () => {
      ThisEditor.current.dispose();
      ThisEditor.current = undefined; // 清除编辑器对象
    }
  }, []);
  useEffect(() => {
    if (ThisEditor.current) {
      ThisEditor.current.updateOptions({
        fontSize: fontSize + 'px',
      })
    }
  }, [fontSize]);
 
  return (
    <div style={style} ref={editOrRef}>
 
    </div>
  );
}
 
export default Monaco;