-
-
Notifications
You must be signed in to change notification settings - Fork 130
/
index.ts
99 lines (88 loc) · 2.96 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { Extension } from '@codemirror/state';
import { Facet, RangeSetBuilder } from '@codemirror/state';
import { EditorView, Decoration, ViewPlugin, DecorationSet, ViewUpdate } from '@codemirror/view';
const lineNumber = Facet.define({
combine: (values) => {
return values.length && Array.isArray(values) ? values.flat() : [];
},
});
const stepSize = Facet.define({
combine: (values) => {
return values.length && Array.isArray(values) ? Math.min(...values) : 2;
},
});
const stripe = Decoration.line({
attributes: { class: 'cm-zebra-stripe' },
});
function stripeDeco(view: EditorView) {
const step = view.state.facet(stepSize);
const num = view.state.facet(lineNumber);
const builder = new RangeSetBuilder<Decoration>();
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 && num.length === 0) {
builder.add(line.from, line.from, stripe);
}
if (num.length > 0 && num.flat().includes(line.number)) {
builder.add(line.from, line.from, stripe);
}
pos = line.to + 1;
}
}
return builder.finish();
}
const showStripes = ViewPlugin.fromClass(
class {
decorations: DecorationSet;
constructor(view: EditorView) {
this.decorations = stripeDeco(view);
}
update(update: ViewUpdate) {
this.decorations = stripeDeco(update.view);
// if (update.docChanged || update.viewportChanged) {
// this.decorations = stripeDeco(update.view);
// }
}
},
{
decorations: (v) => v.decorations,
},
);
const baseTheme = (opt: Pick<Partial<ZebraStripesOptions>, 'lightColor' | 'darkColor'> = {}) => {
return EditorView.baseTheme({
'&light .cm-zebra-stripe': { backgroundColor: opt.lightColor || '#eef6ff' },
'&dark .cm-zebra-stripe': { backgroundColor: opt.darkColor || '#3a404d' },
});
};
export type ZebraStripesOptions = {
step?: number | null;
lightColor?: string;
darkColor?: string;
/**
* @example `[1,[2,6], 10]`
*/
lineNumber?: (number | number[])[] | null;
};
const range = (start: number, stop: number, step: number) =>
Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
export function zebraStripes(options: ZebraStripesOptions = {}): Extension {
const zebraStripeTheme = baseTheme({ lightColor: options.lightColor, darkColor: options.darkColor });
if (options.lineNumber && Array.isArray(options.lineNumber)) {
options.step = null;
options.lineNumber = options.lineNumber.map((item) => {
if (Array.isArray(item) && typeof item[0] === 'number' && typeof item[1] === 'number') {
return range(item[0], item[1], 1);
}
return item;
});
} else {
options.lineNumber = null;
}
return [
options.lineNumber === null ? [] : lineNumber.of(options.lineNumber || []),
options.step === null ? [] : stepSize.of(options.step || 2),
showStripes,
zebraStripeTheme,
];
}