Closed 18888628835 closed 1 year ago
@18888628835
<CodeMirror
+ height="200px"
import React, { useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
const data = JSON.stringify(
[
{
id: 1,
name: "tonny",
age: 40,
email: "tonny@dashcomb.com"
},
{
id: 2,
name: "arai",
age: 30,
email: "arai@dashcomb.com"
},
{
id: 3,
name: "collin",
age: 50,
email: "collin@dashcomb.com"
}
],
null,
2
);
export default function App() {
const [visable, setVisable] = useState(false);
const onChange = React.useCallback((value, viewUpdate) => {
console.log("value:", value);
}, []);
return (
<div>
<button onClick={() => setVisable(!visable)}>展示</button>
{visable && (
<CodeMirror
// value="console.log('hello world!');"
value={data}
height="200px"
theme="dark"
extensions={[javascript({ jsx: true })]}
onChange={onChange}
/>
)}
</div>
);
}
@jaywcjlove Thank you... I know it's not react-codeMirror's bug...
@jaywcjlove but if content is short, setting height doesn't work. the reason why this demo works is triggering 'scroll' event
this is demo:https://codesandbox.io/s/react-codemirror-linenumber-bug-n0l0ff?file=/src/app.tsx
when open Modal (once or twice ), you can see LineNumber is misaligned. If mouse move in ,it will be normal.
how can I fix it ?