Closed ImTheCodeFarmer closed 1 year ago
Yes, it is possible to disable a single line or many in CodeMirror v6
by using the rangeset API. Here's an example of how to do it:
import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { EditorView, highlightLineRange } from "@codemirror/view";
import { RangeSet } from "@codemirror/rangeset";
const lineToDisable = 5; // Replace with the line number you want to disable
// Create a RangeSet that disables the specified line
const rangeSet = RangeSet.of([{
from: lineToDisable,
to: lineToDisable + 1,
mode: "disabled" // Disable the line
}]);
function App() {
const onChange = React.useCallback((value, viewUpdate) => {
console.log('value:', value);
}, []);
const ref = useRef();
const update = () => {
// Alternatively, you can update the RangeSet of an existing EditorView:
ref.current.view.dispatch({
effects: rangeSet.addEffect(),
});
}
return (
<CodeMirror
value="console.log('hello world!');"
height="200px"
ref={ref}
extensions={[
javascript({ jsx: true }),
// Add other extensions here
rangeSet
]}
onChange={onChange}
/>
);
}
@jhammond2012
@jaywcjlove wow, thanks for the quick reply. I am getting a new error:
This is my code:
import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { rust } from "@codemirror/lang-rust";
import { EditorView } from "codemirror";
import { RangeSet } from "@codemirror/rangeset";
const lineToDisable = 1;
const rangeSet = RangeSet.of([
{
from: lineToDisable,
to: lineToDisable + 1,
mode: "disabled", // Disable the line
},
]);
function Learn() {
const code = `[package]
name = "hello-world"
version = "0.1.0"
edition = "2021"`;
const onChange = React.useCallback((value, viewUpdate) => {
console.log("value:", value);
}, []);
return (
<div>
<CodeMirror
value={code}
className="rounded-tl-lg rounded-bl-lg"
height="100%"
theme="dark"
extensions={[EditorView.lineWrapping, rust(), rangeSet]}
onChange={onChange}
/>
</div>
);
}
export default Learn;
Thanks so much for your help!
Maybe it has been deprecated: https://www.npmjs.com/package/@codemirror/rangeset/v/0.19.2
Has anyone tried to disable a single line or many instead of the whole file?
I tried creating a "ViewPlugin" but I caused more issues than I started with.