App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import React, { useState } from "react"; import AceEditor from "react-ace"; // Import a mode (language) and a theme for the editor import "ace-builds/src-noconflict/mode-javascript"; import "ace-builds/src-noconflict/theme-monokai"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-solarized_dark"; import "ace-builds/src-noconflict/ext-language_tools"; // Enable autocomplete tools const CodeEditor = () => { const [code, setCode] = useState("// Write your JavaScript code here..."); const [theme, setTheme] = useState("monokai"); const handleChange = (newValue) => { setCode(newValue); console.log("Editor content changed:", newValue); }; return ( <div style={{ padding: "20px" }}> <h2 style={{ textAlign: "center" }}>React Ace Editor</h2> <div style={{ marginBottom: "10px", textAlign: "center" }}> <label> Select Theme:{" "} <select value={theme} onChange={(e) => setTheme(e.target.value)} style={{ padding: "5px", borderRadius: "4px" }} > <option value="monokai">Monokai</option> <option value="github">GitHub</option> <option value="solarized_dark">Solarized Dark</option> </select> </label> </div> <AceEditor mode="javascript" // Specify the language mode theme={theme} // Apply the selected theme onChange={handleChange} // Handle code changes name="code_editor" // Unique identifier for the editor editorProps={{ $blockScrolling: true }} value={code} // Bind the state to the editor fontSize={16} width="100%" height="400px" setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2, }} /> </div> ); }; export default CodeEditor; |
