HomeWork1/React/CodePen/src/components/editor.js

import Langs     from "./select";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-css";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/mode-xml";
import "ace-builds/src-noconflict/mode-sass";
import "ace-builds/src-noconflict/mode-ruby";
import "ace-builds/src-noconflict/mode-markdown";
import "ace-builds/src-noconflict/mode-mysql";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/mode-handlebars";
import "ace-builds/src-noconflict/mode-golang";
import "ace-builds/src-noconflict/mode-csharp";
import "ace-builds/src-noconflict/mode-elixir";
import "ace-builds/src-noconflict/mode-typescript";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/snippets/javascript";
import "ace-builds/src-noconflict/snippets/html";
import "ace-builds/src-noconflict/snippets/css";
import "ace-builds/src-noconflict/snippets/json";
import "ace-builds/src-noconflict/worker-javascript";
import "ace-builds/src-noconflict/worker-html";
import "ace-builds/src-noconflict/worker-css";


const Editor = ({data = {type: "html", text: "", name: ""}, onChange, onDelete}) => {
    return (
        <div style={{display: "inline-block", width: "calc(95%/3)", 
                     marginBottom: "10px", marginTop: "40px", 
                     backgroundColor: "#FFE8DB", marginLeft:"1%", 
                     border:"1px solid #FF5A00", borderRadius: "30px 15px 90px 15px"
                    }}>
            <button className="close mr-4 " 
                    type="button" 
                    aria-label="Close" 
                    onClick={onDelete} 
                    style={{fontSize:"40px", backgroundColor:"black"}}>  
                <span className="text-danger" aria-hidden="true">
                    &times;
                </span>
            </button>
            <AceEditor className="editor" width="calc(100%)" height="300px" value={data.text} 
                       onChange={(text) => onChange({type: data.type, text, name: data.name })}
                       placeholder="Your Code" mode={data.type} theme="monokai" name="blah2" 
                       fontSize={13} showPrintMargin={true}
                       showGutter={true} highlightActiveLine={true} wrapEnabled={true} 
                       enableBasicAutocompletion={true} enableLiveAutocompletion={true} 
                       enableSnippets={true} showLineNumbers={true}/>
            <br/> 
            <div className="input-group ml-4" style={{paddingBottom: "10px"}}>
                <div className="input-group-prepend">
                    <span className="input-group-text" id="basic-addon1">Name of file</span>
                </div>
                <input  className="form-control w-25" 
                        type="text" 
                        placeholder="Name of file" 
                        aria-label="Name of file"
                        aria-describedby="basic-addon1" 
                        value={data.name} 
                        onChange={(e) => onChange({type: data.type, text: data.text, name: e.target.value})}/>
                <Langs onChange={(type)=> onChange({type, text: data.text, name: data.name})} value={data.type}/>{" "}
            </div>
        </div>
    );
};

export default Editor;