react-ace
react-ace copied to clipboard
Editor not working when defining a function based on editor text in the onChange function
Hello all,
I'm trying to define a function based on the code editor text. For this, I created a handleChange function that takes as input the event, and defines a function based on the new value.
Unfortunately, when I try to add the line let B = let B = new Function("X","ObjFun",Fun_ObjFunText);
, the editor start not working anymore. With "not working" I mean that when I write in the editor some symbols like the =, or the space, or the brackets, the editor starts writing strange things. Removing that single line of code it works.
Can someone help me?
Below the complete code,
`/* Input components */ // React import { useState, useContext } from "react"; // Material.ui import { Box } from "@mui/system"; // ACE import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-javascript"; import "ace-builds/src-noconflict/theme-tomorrow"; import "ace-builds/src-noconflict/ext-language_tools";
/* Input contexts */ import ContextChartData from "../contexts/ContextChartData";
function CodeEditor() {
const [Fun_ObjFunText, setFun_ObjFunText] = useState("ObjFun[0] = Math.pow(X[0] + X[1]*X[1],2);");
const {Opt, setOpt} = useContext(ContextChartData);
function handleChange(ChangeEvent) {
setFun_ObjFunText(ChangeEvent);
//let OptTemp = Opt;
let B = new Function("X","ObjFun",Fun_ObjFunText); // ISSUE
}
return(
<Box>
<AceEditor
placeholder="Text"
mode="javascript"
theme="tomorrow"
name="blah2"
fontsize={18}
showPrintMargin={false}
showGutter={true}
highlightActiveLine={true}
value={Fun_ObjFunText}
editorProps={{$blockScrolling: true}}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: true,
tabSize:2
}}
onChange={handleChange}
/>
{Fun_ObjFunText}
</Box>
);
}
export default CodeEditor;`
Thank you very much in advance