import React, { useRef, useEffect } from "react";
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { MonacoEditor } from "@tencent/tea-component";

const code = `function hello() {
	alert('Hello world!');
}
`;

export default function Editor() {
  const ref = useRef(null);

  useEffect(() => {
    console.log(ref);
  }, []);

  return (
    <MonacoEditor
      ref={ref}
      monaco={monaco}
      height={400}
      language="javascript"
      defaultValue={code}
    />
  );
}