48 lines
1.0 KiB
TypeScript
48 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import MonacoEditor from 'react-monaco-editor';
|
|
|
|
export interface CodeEditorProps {
|
|
code: string
|
|
}
|
|
|
|
export interface CodeEditorState {
|
|
code: string
|
|
}
|
|
|
|
class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
code: '// type your code...',
|
|
}
|
|
}
|
|
editorDidMount(editor, monaco) {
|
|
console.log('editorDidMount', editor);
|
|
editor.focus();
|
|
}
|
|
onChange(newValue, e) {
|
|
console.log('onChange', newValue, e);
|
|
}
|
|
render() {
|
|
const code = this.state.code;
|
|
const options = {
|
|
selectOnLineNumbers: true
|
|
};
|
|
|
|
const _this = this;
|
|
return (
|
|
<MonacoEditor
|
|
width="800"
|
|
height="600"
|
|
language="javascript"
|
|
theme="vs-dark"
|
|
value={code}
|
|
options={options}
|
|
onChange={(...args) => _this.onChange(...args)}
|
|
editorDidMount={(...args) => _this.editorDidMount(...args)}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CodeEditor; |