Comments (2)
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;
from react-ace.
this is finally closing my issue by solving self 😁😂🤣
from react-ace.
Related Issues (20)
- Horizontal scrollbar is not visible
- 指定mode时出现network报错
- Merge PR
- Move to React 17/18?
- Changing editor sessions causes session/selection listeners to stop firing
- Unable to fully display content when line length is too long HOT 1
- ace在多个微应用间,通过组件渲染切换,css样式丢失 HOT 3
- expected expression, got '<' HOT 1
- No System Verilog Support
- import 'ace-builds/src-noconflict/mode-javascript';
- State is equal to it's default value on commands exec function call HOT 2
- Are mode and theme imports required for react-ace?
- Problem with so many lines of code (10k lines of JSON)
- Textarea has not attr "name"
- How to dynamically import modes and themes ?
- ace is not defined in production only
- Missing spaces in auto-complete
- SplitEditor not showing annotations HOT 1
- react-ace 11.0.1 Ace editor giving console error UNTRUSTED_TYPES_CHECK_STACK_BELOW
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-ace.