import ReactAce from 'react-ace-editor';
import React, {useState} from 'react';

export default function CodeEditor() {
    const [ace, setAce] = useState(null)

    const onChange = (newValue, e) =>  {
        console.log(newValue, e);

        console.log(ace.getValue()); // Outputs the value of the editor
    }

    return (
        <ReactAce
            mode="javascript"
            theme="eclipse"
            setReadOnly={false}
            onChange={onChange}
            style={{ height: '400px' }}
            ref={instance => { setAce(instance) }} // Let's put things into scope
        />
    );
}