Closed abc444873863 closed 2 years ago
@abc444873863 I don't know how to do it yet.
Example: Zebra Stripes
import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { Facet } from "@codemirror/state";
import { RangeSetBuilder } from "@codemirror/rangeset";
import { ViewPlugin, Decoration, EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
const stripe = Decoration.line({
attributes: { class: "cm-zebraStripe" }
});
const stepSize = Facet.define({
combine: (values) => (values.length ? Math.min(...values) : 2)
});
function stripeDeco(view) {
let step = view.state.facet(stepSize);
let builder = new RangeSetBuilder();
for (let { from, to } of view.visibleRanges) {
for (let pos = from; pos <= to; ) {
let line = view.state.doc.lineAt(pos);
if (line.number % step === 0) builder.add(line.from, line.from, stripe);
pos = line.to + 1;
}
}
return builder.finish();
}
const showStripes = ViewPlugin.fromClass(
class {
constructor(view) {
this.decorations = stripeDeco(view);
}
update(update) {
if (update.docChanged || update.viewportChanged)
this.decorations = stripeDeco(update.view);
}
},
{
decorations: (v) => v.decorations
}
);
function zebraStripes(options = {}) {
return [
options.step == null ? [] : stepSize.of(options.step),
showStripes,
baseTheme
];
}
const baseTheme = EditorView.baseTheme({
"&light .cm-zebraStripe": { backgroundColor: "#d4fafa" },
"&dark .cm-zebraStripe": { backgroundColor: "#1a2727" }
});
let text = [];
for (let i = 1; i <= 100; i++) text.push(`console.log('hello world! ${i}');`);
export default function App() {
return (
<CodeMirror
value={text.join("\n")}
height="200px"
extensions={[javascript({ jsx: true }), zebraStripes()]}
onChange={(value, viewUpdate) => {
console.log("value:", value);
}}
/>
);
}
There is an attribute options in version 3, which can highlight lines.
So how to highlight some lines using version 4 when option attribute is gone. ?