huncholaneA better version of regex 101
autosave optional
huncholane3 files changed, +60 -12
+15-0package-lock.json
| @@ -10,6 +10,7 @@ | ||
| 10 | 10 | "dependencies": { |
| 11 | 11 | "react": "^18.2.0", |
| 12 | 12 | "react-dom": "^18.2.0", |
| 13 | + "react-icons": "^4.7.1", | |
| 13 | 14 | "react-json-editor-ajrm": "^2.5.13" |
| 14 | 15 | }, |
| 15 | 16 | "devDependencies": { |
| @@ -1805,6 +1806,14 @@ | ||
| 1805 | 1806 | "react": "^18.2.0" |
| 1806 | 1807 | } |
| 1807 | 1808 | }, |
| 1809 | + "node_modules/react-icons": { | |
| 1810 | + "version": "4.7.1", | |
| 1811 | + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", | |
| 1812 | + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", | |
| 1813 | + "peerDependencies": { | |
| 1814 | + "react": "*" | |
| 1815 | + } | |
| 1816 | + }, | |
| 1808 | 1817 | "node_modules/react-json-editor-ajrm": { |
| 1809 | 1818 | "version": "2.5.13", |
| 1810 | 1819 | "resolved": "https://registry.npmjs.org/react-json-editor-ajrm/-/react-json-editor-ajrm-2.5.13.tgz", |
| @@ -3297,6 +3306,12 @@ | ||
| 3297 | 3306 | "scheduler": "^0.23.0" |
| 3298 | 3307 | } |
| 3299 | 3308 | }, |
| 3309 | + "react-icons": { | |
| 3310 | + "version": "4.7.1", | |
| 3311 | + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", | |
| 3312 | + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", | |
| 3313 | + "requires": {} | |
| 3314 | + }, | |
| 3300 | 3315 | "react-json-editor-ajrm": { |
| 3301 | 3316 | "version": "2.5.13", |
| 3302 | 3317 | "resolved": "https://registry.npmjs.org/react-json-editor-ajrm/-/react-json-editor-ajrm-2.5.13.tgz", |
+1-0package.json
| @@ -11,6 +11,7 @@ | ||
| 11 | 11 | "dependencies": { |
| 12 | 12 | "react": "^18.2.0", |
| 13 | 13 | "react-dom": "^18.2.0", |
| 14 | + "react-icons": "^4.7.1", | |
| 14 | 15 | "react-json-editor-ajrm": "^2.5.13" |
| 15 | 16 | }, |
| 16 | 17 | "devDependencies": { |
+44-12src/App.jsx
| @@ -1,5 +1,6 @@ | ||
| 1 | 1 | import { useState, useEffect } from "react"; |
| 2 | 2 | import parseBuilder from "./builder"; |
| 3 | +import { AiFillSave } from "react-icons/ai"; | |
| 3 | 4 | |
| 4 | 5 | const placeholder = `Enter your variables here like below. |
| 5 | 6 | group1Delim:\\n |
| @@ -14,6 +15,7 @@ function App() { | ||
| 14 | 15 | const [build, setBuild] = useState(""); |
| 15 | 16 | const [edited, setEdited] = useState(0); |
| 16 | 17 | const [target, setTarget] = useState(null); |
| 18 | + const [save, setSave] = useState(true); | |
| 17 | 19 | const regexInput = document.querySelector( |
| 18 | 20 | "#regex-app > div > div.QtZzw > div > div.AUc0W > div.rjodX > div.cO83v > div.h9z_E.T886D > div > div > div:nth-child(1) > textarea" |
| 19 | 21 | ); |
| @@ -64,7 +66,31 @@ function App() { | ||
| 64 | 66 | ); |
| 65 | 67 | |
| 66 | 68 | const updateRegex = () => { |
| 67 | - if (edited !== 1) return; | |
| 69 | + if (edited !== 0 || !save) return; | |
| 70 | + saveBuild(); | |
| 71 | + }; | |
| 72 | + | |
| 73 | + useEffect(updateRegex, [edited]); | |
| 74 | + | |
| 75 | + useEffect(() => { | |
| 76 | + if (save) saveBuild(); | |
| 77 | + }, [save]); | |
| 78 | + | |
| 79 | + return ( | |
| 80 | + <div> | |
| 81 | + <div className="w-full"> | |
| 82 | + <div className="w-full text-lg text-center relative"> | |
| 83 | + <div>Build Variables</div> | |
| 84 | + <div className="absolute right-2 top-8"> | |
| 85 | + {saveButton(setSave, save)} | |
| 86 | + </div> | |
| 87 | + </div> | |
| 88 | + {builder} | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + ); | |
| 92 | + | |
| 93 | + function saveBuild() { | |
| 68 | 94 | const length = regexValue.textContent.length; |
| 69 | 95 | for (let i = 0; i < length; i++) |
| 70 | 96 | regexInput.dispatchEvent( |
| @@ -76,18 +102,24 @@ function App() { | ||
| 76 | 102 | ); |
| 77 | 103 | regexInput.value = build; |
| 78 | 104 | setTimeout(() => target?.focus(), 100); |
| 79 | - }; | |
| 80 | - | |
| 81 | - useEffect(updateRegex, [edited]); | |
| 105 | + } | |
| 106 | +} | |
| 82 | 107 | |
| 108 | +export default App; | |
| 109 | +function saveButton(setSave, save) { | |
| 110 | + const active = "bg-blue-500 h-10 p-1 rounded-sm hover:bg-blue-100"; | |
| 111 | + const inactive = "bg-blue-100 h-10 p-1 rounded-sm hover:bg-blue-500"; | |
| 112 | + const activeSave = <AiFillSave size="100%" color="white" />; | |
| 113 | + const inactiveSave = <AiFillSave size="100%" color="white" />; | |
| 83 | 114 | return ( |
| 84 | - <div> | |
| 85 | - <div className="w-full"> | |
| 86 | - <div className="w-full text-lg text-center">Build Variables</div> | |
| 87 | - {builder} | |
| 88 | - </div> | |
| 89 | - </div> | |
| 115 | + <button | |
| 116 | + className={save ? active : inactive} | |
| 117 | + onClick={(e) => { | |
| 118 | + e.preventDefault(); | |
| 119 | + setSave(!save); | |
| 120 | + }} | |
| 121 | + > | |
| 122 | + {save ? activeSave : inactiveSave} | |
| 123 | + </button> | |
| 90 | 124 | ); |
| 91 | 125 | } |
| 92 | - | |
| 93 | -export default App; |