Closed anitaleung closed 1 year ago
@anitaleung I do not understand what you mean
For example, in this screencast the scrollbar is only shown when the user actively scrolls horizontally, and then disappears when the user stops scrolling. However sometimes it's not always apparent that there's more code that can be scrolled into view. Is there a way to always show a scrollbar when there's a horizontal overflow in the code editor?
https://user-images.githubusercontent.com/3052871/227698616-5e588784-deb3-4e6e-af05-f6d9f7136694.mov
@anitaleung Example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-forked-ptx2xw?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { EditorView } from "@codemirror/view";
const scrollStyle = EditorView.theme({
".cm-scroller": {
overflowX: "scroll"
},
".cm-scroller::-webkit-scrollbar": {
background: "transparent",
width: "8px",
height: "8px"
},
".cm-scroller::-webkit-scrollbar-thumb": {
background: "red",
borderRadius: "10px"
// webkitAppearance: 'none'
}
});
export default function App() {
const onChange = React.useCallback((value, viewUpdate) => {
console.log("value:", value);
}, []);
return (
<div>
<CodeMirror
value="console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');"
height="200px"
theme="dark"
extensions={[javascript({ jsx: true }), scrollStyle]}
onChange={onChange}
/>
</div>
);
}
Perfect, thank you!
Currently I only see an option to enable word wrap, but I want a scrollbar to automatically show if the editor is horizontally scrollable. How can we do this?