12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- 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 type="button" className="close mr-4 " aria-label="Close" onClick={onDelete} style={{fontSize:"40px", backgroundColor:"black"}}>
- <span className="text-danger" aria-hidden="true">
- ×
- </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 type="text" className="form-control w-25" 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;
|