A Regex file extension that makes it way easier to edit large regex.

added hover text to decorations

huncholaneauthored 1 year ago

parent 11370f6commit 34f6d9988d480c4f3d57682a7602bd7d45428d1bBrowse files

2 files changed, +67 -41

+31-30src/decorationGenerator.ts

		@@ -1,36 +1,36 @@
1	1	import * as vscode from "vscode";
2	2
3	3	const BACKGROUND_COLORS = [
4		- "#FF0000",
5		- "#00FF00",
6		- "#0000FF",
7		- "#FFFF00",
8		- "#FF00FF",
9		- "#00FFFF",
10		- "#FFA500",
11		- "#FF1493",
12		- "#4B0082",
13		- "#EE82EE",
14		- "#8A2BE2",
15		- "#5F9EA0",
16		- "#7FFF00",
17		- "#D2691E",
18		- "#FF7F50",
19		- "#6495ED",
20		- "#DC143C",
21		- "#00CED1",
22		- "#9400D3",
23		- "#FFD700",
24		- "#ADFF2F",
25		- "#FF69B4",
26		- "#CD5C5C",
27		- "#F0E68C",
28		- "#E6E6FA",
29		- "#7CFC00",
30		- "#20B2AA",
31		- "#87CEFA",
32		- "#778899",
33		- "#FF6347",
	4	+ "#FF0000", // Red
	5	+ "#00FF00", // Lime
	6	+ "#0000FF", // Blue
	7	+ "#FFFF00", // Yellow
	8	+ "#FF00FF", // Magenta
	9	+ "#00FFFF", // Cyan
	10	+ "#FFA500", // Orange
	11	+ "#FF1493", // Deep Pink
	12	+ "#4B0082", // Indigo
	13	+ "#EE82EE", // Violet
	14	+ "#8A2BE2", // Blue Violet
	15	+ "#5F9EA0", // Cadet Blue
	16	+ "#7FFF00", // Chartreuse
	17	+ "#D2691E", // Chocolate
	18	+ "#FF7F50", // Coral
	19	+ "#6495ED", // Cornflower Blue
	20	+ "#DC143C", // Crimson
	21	+ "#00CED1", // Dark Turquoise
	22	+ "#9400D3", // Dark Violet
	23	+ "#FFD700", // Gold
	24	+ "#ADFF2F", // Green Yellow
	25	+ "#FF69B4", // Hot Pink
	26	+ "#CD5C5C", // Indian Red
	27	+ "#F0E68C", // Khaki
	28	+ "#E6E6FA", // Lavender
	29	+ "#7CFC00", // Lawn Green
	30	+ "#20B2AA", // Light Sea Green
	31	+ "#87CEFA", // Light Sky Blue
	32	+ "#FF6347", // Tomato
	33	+ "#32CD32", // Lime Green
34	34	];
35	35
36	36	class DecorationGenerator {
		@@ -51,6 +51,7 @@ class DecorationGenerator {
51	51	generate(options?: vscode.DecorationRenderOptions) {
52	52	return vscode.window.createTextEditorDecorationType({
53	53	backgroundColor: this.getColor(),
	54	+ color: "black",
54	55	...options,
55	56	});
56	57	}

+36-11src/highlighter.ts

		@@ -6,8 +6,8 @@ import decorationGenerator from "./decorationGenerator";
6	6	import { getConfig } from "./global";
7	7
8	8	type HighlightGroup = {
9		- ranges: vscode.Range[];
10		- decoration: vscode.TextEditorDecorationType;
	9	+ decorations: vscode.DecorationOptions[];
	10	+ decorationType: vscode.TextEditorDecorationType;
11	11	};
12	12
13	13	class Highlighter {
		@@ -35,17 +35,24 @@ class Highlighter {
35	35
36	36	clearRanges() {
37	37	for (const key of Object.keys(this.highlightGroups)) {
38		- this.highlightGroups[key].ranges = [];
	38	+ this.highlightGroups[key].decorations = [];
39	39	}
40	40	}
41	41
42		- updateOrCreateHighlightGroup(key: string, range: vscode.Range) {
	42	+ updateOrCreateHighlightGroup(
	43	+ key: string,
	44	+ range: vscode.Range,
	45	+ options: vscode.DecorationRenderOptions = {}
	46	+ ) {
43	47	if (this.highlightGroups[key]) {
44		- this.highlightGroups[key].ranges.push(range);
	48	+ this.highlightGroups[key].decorations.push({
	49	+ range,
	50	+ hoverMessage: key,
	51	+ });
45	52	} else {
46	53	this.highlightGroups[key] = {
47		- ranges: [range],
48		- decoration: decorationGenerator.generate(),
	54	+ decorations: [{ range, hoverMessage: key }],
	55	+ decorationType: decorationGenerator.generate(options),
49	56	};
50	57	}
51	58	}
		@@ -73,16 +80,33 @@ class Highlighter {
73	80	if (i >= maxMatches) {
74	81	break;
75	82	}
	83	+ if (match.index === undefined) {
	84	+ continue;
	85	+ }
76	86	const start = document.positionAt(match.index);
77	87	const end = document.positionAt(match.index + match[0].length);
78	88	this.updateOrCreateHighlightGroup("outer", new vscode.Range(start, end));
	89	+ for (const groupName in match.groups) {
	90	+ output.log(`Match: ${groupName}`);
	91	+ const group = match.groups[groupName];
	92	+ const start = document.positionAt(
	93	+ match.index + match[0].indexOf(group)
	94	+ );
	95	+ const end = document.positionAt(
	96	+ match.index + match[0].indexOf(group) + group.length
	97	+ );
	98	+ this.updateOrCreateHighlightGroup(
	99	+ groupName,
	100	+ new vscode.Range(start, end)
	101	+ );
	102	+ }
79	103	i++;
80	104	}
81	105	output.log(`Found ${i} matches`);
82	106	}
83	107
84	108	matchRegexGroups(document: vscode.TextDocument) {
85		- const re = /(?<=$).+?(?=$)/g;
	109	+ const re = /(?<=\<).+?(?=\>)/g;
86	110	const matches = document.getText().matchAll(re);
87	111	let i = 0;
88	112	const maxMatches = getConfig().get("maxMatches") as number;
		@@ -92,16 +116,16 @@ class Highlighter {
92	116	}
93	117	const start = document.positionAt(match.index);
94	118	const end = document.positionAt(match.index + match[0].length);
95		- this.updateOrCreateHighlightGroup("inner", new vscode.Range(start, end));
	119	+ this.updateOrCreateHighlightGroup(match[0], new vscode.Range(start, end));
96	120	i++;
97	121	}
98	122	}
99	123
100	124	highlightMatches(editor: vscode.TextEditor) {
101		- // output.log(`Highlighting matches in ${editor.document.fileName}`);
	125	+ // Apply other decorations first
102	126	for (const key of Object.keys(this.highlightGroups)) {
103	127	const group = this.highlightGroups[key];
104		- editor.setDecorations(group.decoration, group.ranges);
	128	+ editor.setDecorations(group.decorationType, group.decorations);
105	129	}
106	130	}
107	131
		@@ -113,6 +137,7 @@ class Highlighter {
113	137	}
114	138	this.matchRegexGroups(regexEditor.document);
115	139	this.highlightMatches(regexEditor);
	140	+ this.clearRanges();
116	141	const nonRegexEditors = getNonRegexEditors();
117	142	for (const editor of nonRegexEditors) {
118	143	this.matchOnEditor(regexEditor.document.getText(), editor.document);