0

I'm trying to integrate react-ace into my code. The goal is to use the text contained into the code editor to create a function. For this, I'm defining a AceEditor, and everytime a change occurs I take the text into the editor and define the function in the handleChange function.

The problem is that, when adding the code line necessary to define the function, the editor starts working strangely: writing some symbols like = and the space, it types automatically different things. Taking the same code, and commenting the line of code let B = new Function("X","ObjFun",Fun_ObjFunText); // HERE THE ISSUE, the strange behaviour described above is not shown.

Below the code. How can I solve this kind of issue? Is this known?

/* 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";


function CodeEditor() {

    const [Fun_ObjFunText, setFun_ObjFunText] = useState("Fun[0] = Math.pow(X[0] + X[1]*X[1],2);");

    function handleChange(ChangeEvent) {
        setFun_ObjFunText(ChangeEvent);
        let B = new Function("X","ObjFun",Fun_ObjFunText); // HERE THE 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;
FGP92
  • 43
  • 6

0 Answers0