A better version of regex 101

using effects

huncholaneauthored 3 years ago

parent 447ece9commit 4c3747819478d6c11ea7f29bfe95ef486226ec28Browse files

1 file changed, +55 -48

+55-48src/App.jsx

		@@ -1,4 +1,4 @@
1		-import { useState } from "react";
	1	+import { useState, useEffect } from "react";
2	2	import parseBuilder from "./builder";
3	3
4	4	const placeholder = `Enter your variables here like below.
		@@ -10,64 +10,71 @@ group1Delim:\\n
10	10	\t\tvar4:\\d`;
11	11
12	12	function App() {
13		- const [state, setState] = useState({
14		- valid: true,
15		- build: [],
16		- });
	13	+ const [valid, setValid] = useState(false);
	14	+ const [build, setBuild] = useState("");
	15	+ const [edited, setEdited] = useState(false);
	16	+ const [target, setTarget] = useState(null);
17	17	const regexInput = document.querySelector(
18	18	"#regex-app > div > div.QtZzw > div > div.AUc0W > div.rjodX > div.cO83v > div.h9z_E.T886D > div > div > div:nth-child(1) > textarea"
19	19	);
20	20	const regexValue = document.querySelector(
21	21	"#regex-app > div > div.QtZzw > div > div.AUc0W > div.rjodX > div.cO83v > div.h9z_E.T886D > div > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code"
22	22	);
	23	+ const builder = (
	24	+ <textarea
	25	+ rows="10"
	26	+ className={
	27	+ "w-full p-2 rounded-sm font-re101-input text-input" +
	28	+ (valid ? "" : " text-red-500")
	29	+ }
	30	+ placeholder={placeholder}
	31	+ spellCheck="off"
	32	+ onKeyDown={(e) => {
	33	+ switch (e.key) {
	34	+ case "Enter":
	35	+ break;
	36	+ case "Tab":
	37	+ e.preventDefault();
	38	+ const index = e.target.selectionStart;
	39	+ e.target.value =
	40	+ e.target.value.substring(0, index) +
	41	+ "\t" +
	42	+ e.target.value.substring(index);
	43	+ e.target.selectionStart = e.target.selectionEnd = index + 1;
	44	+ break;
	45	+ }
	46	+ }}
	47	+ onChangeCapture={(e) => {
	48	+ const parseBuild = parseBuilder(e.target.value);
	49	+ if (!parseBuild) setValid(false);
	50	+ else setValid(true);
	51	+ setBuild(parseBuild);
	52	+ setTarget(e.target);
	53	+ }}
	54	+ ></textarea>
	55	+ );
	56	+
	57	+ const updateRegex = () => {
	58	+ const length = regexValue.textContent.length;
	59	+ for (let i = 0; i < length; i++)
	60	+ regexInput.dispatchEvent(
	61	+ new KeyboardEvent("keydown", {
	62	+ key: "Backspace",
	63	+ code: "Backspace",
	64	+ keyCode: 8,
	65	+ })
	66	+ );
	67	+ regexInput.value = build;
	68	+ setTimeout(() => target?.focus(), 100);
	69	+ };
	70	+
	71	+ useEffect(updateRegex, [build]);
23	72
24	73	return (
25	74	<div>
26	75	<div className="w-full">
27	76	<div className="w-full text-lg text-center">Build Variables</div>
28		- <textarea
29		- rows="10"
30		- className={
31		- "w-full p-2 rounded-sm font-re101-input text-input" +
32		- (state.valid ? "" : " text-red-500")
33		- }
34		- placeholder={placeholder}
35		- onKeyDown={(e) => {
36		- switch (e.key) {
37		- case "Enter":
38		- break;
39		- case "Tab":
40		- e.preventDefault();
41		- const index = e.target.selectionStart;
42		- e.target.value =
43		- e.target.value.substring(0, index) +
44		- "\t" +
45		- e.target.value.substring(index);
46		- e.target.selectionStart = e.target.selectionEnd = index + 1;
47		- break;
48		- }
49		- }}
50		- onChangeCapture={(e) => {
51		- state.build = [];
52		- setState({ ...state });
53		- const parseBuild = parseBuilder(e.target.value);
54		- console.log(parseBuild);
55		- if (!parseBuild) setState({ valid: false });
56		- else setState({ valid: true });
57		- //regexInput.focus();
58		- const length = regexValue.textContent.length;
59		- for (let i = 0; i < length; i++)
60		- regexInput.dispatchEvent(
61		- new KeyboardEvent("keydown", {
62		- key: "Backspace",
63		- code: "Backspace",
64		- keyCode: 8,
65		- })
66		- );
67		- regexInput.value = parseBuild;
68		- setTimeout(() => e.target.focus(), 100);
69		- }}
70		- ></textarea>
	77	+ {builder}
71	78	</div>
72	79	</div>
73	80	);