-
-
Notifications
You must be signed in to change notification settings - Fork 603
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
editor focus comes out again and agian on onChange() while setState #1836
Comments
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 😁😂🤣 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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: #
The text was updated successfully, but these errors were encountered: