securingsincity/react-ace

Editor not working when defining a function based on editor text in the onChange function

FGP310592 opened this issue · 0 comments

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