Closed pratham15541 closed 12 months ago
i find solution by using module css instead of styled component
/ Editor.module.css /
.editor {
width: 96.5vw !important;
margin: 0 auto !important;
}
.editor,
.editor * {
font-family: consolas !important;
line-height: 1 !important;
}
@media (max-width: 600px) {
.editor {
width: 100%;
}
}
and my react code
import React, { useState, useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCodeForStore } from "../../../store/slices/codeSlice";
import { styled } from "@mui/system";
import AceEditor from "react-ace";
// import "ace-builds/src-noconflict/ace";
import * as modes from "../../../constants/language";
import * as themes from "../../../constants/themes";
import * as snippets from "../../../constants/snippets";
import * as workers from "../../../constants/workers";
import * as ext from "../../../constants/ext";
import * as keybindings from "../../../constants/keybinding";
import styles from "../../../assets/css/Editor.module.css";
const CodeEditor = () => {
const selectedTheme = useSelector(
(state) => state.themeSelector.selectedTheme
);
// console.log(selectedTheme);
const selectedLanguage = useSelector(
(state) => state.languageSelector.langSelected
);
const dispatch = useDispatch();
const [code, setCode] = useState('console.log("Hello World")');
const handleCodeChange = (newCode) => {
try {
console.log(newCode);
// Perform any necessary operations on 'newCode'
setCode(newCode); // Update the 'code' state with the new value
} catch (error) {
console.log(error);
}
};
return (
<>
<AceEditor
placeholder="Placeholder Text"
mode={selectedLanguage}
style={{
marginTop: "-9px",
height: "87.5vh",
width: "100%",
fontFamily: "consolas !important",
lineHeight: "1 !important",
}}
theme={selectedTheme}
className={styles.editor}
name="blah2"
fontSize={16}
showPrintMargin={false}
wrapEnabled={true}
showGutter={true}
highlightActiveLine={true}
value={code}
onChange={handleCodeChange}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: true,
tabSize: 2,
}}
/>
</>
);
};
export default CodeEditor;
this is finally closing my issue by solving self 😁😂🤣
@securingsincity please resolve solution as early as possible
Problem
My react-ace editor cursor focus or comes out of editor again and again on onchange while setting state
References
Progress on: #