diff --git a/README.md b/README.md index 6fa3644..272acb4 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,12 @@ ## Features +- [x] Multiple plain text tools +- [ ] Clipboard auto detection +- [ ] Tray icon for quick action + +## Tools list + - [x] Unix Timestamp Converter - [x] Markdown to HTML Converter - [x] HTML Preview @@ -15,11 +21,11 @@ - [x] Text Diff - [x] JSON Formatter - [x] SQL Formatter +- [x] Regex Tester - [ ] JWT Debugger - [ ] Number Base Converter - [ ] URL Encode/Decode - [ ] HTML Entity Encode/Decode -- [ ] Regex Tester ## Installation diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 1848731..9e9b094 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -12,6 +12,7 @@ import DiffText from './diff/TextDiff'; import SqlFormatter from './sql/SqlFormatter'; import JsonFormatter from './json/JsonFormatter'; import QRCodeReader from './qrcode/QrCodeReader'; +import RegexTester from './regex/RegexTester'; const Main = () => { const routes = [ @@ -21,6 +22,12 @@ const Main = () => { name: 'Unix Time Converter', Component: UnixTimestamp, }, + { + icon: , + path: '/regex-tester', + name: 'Regex Tester', + Component: RegexTester, + }, { icon: , path: '/markdown-to-html', diff --git a/src/components/base64/Base64.tsx b/src/components/base64/Base64.tsx index db9fff5..11e2723 100644 --- a/src/components/base64/Base64.tsx +++ b/src/components/base64/Base64.tsx @@ -112,7 +112,7 @@ const Base64 = () => { diff --git a/src/components/markdown/MarkdownToHtml.tsx b/src/components/markdown/MarkdownToHtml.tsx index 7844ba4..c7a0d77 100644 --- a/src/components/markdown/MarkdownToHtml.tsx +++ b/src/components/markdown/MarkdownToHtml.tsx @@ -58,7 +58,7 @@ const Md2Html = () => { diff --git a/src/components/qrcode/QrCodeReader.tsx b/src/components/qrcode/QrCodeReader.tsx index 1ce572f..a0a296e 100644 --- a/src/components/qrcode/QrCodeReader.tsx +++ b/src/components/qrcode/QrCodeReader.tsx @@ -59,7 +59,7 @@ const QRCodeReader = () => { diff --git a/src/components/regex/RegexTester.tsx b/src/components/regex/RegexTester.tsx new file mode 100644 index 0000000..a41dd2b --- /dev/null +++ b/src/components/regex/RegexTester.tsx @@ -0,0 +1,113 @@ +/* eslint-disable react/no-danger */ +import React, { useEffect, useState } from 'react'; +import { clipboard } from 'electron'; + +const RegexTester = () => { + const [search, setSearch] = useState('plai*'); + const [flag, setFlag] = useState('gi'); + const [input, setInput] = useState( + 'PlainBelt - A toolbelt for your plain text' + ); + const [output, setOutput] = useState(''); + const [match, setMatch] = useState(0); + + const handleChangeSearch = (evt: { target: { value: string } }) => + setSearch(evt.target.value); + + const handleChangeFlag = (evt: { target: { value: string } }) => + setFlag(evt.target.value); + + const handleChangeInput = (evt: { target: { value: string } }) => + setInput(evt.target.value); + + const handleClipboardInput = () => { + setInput(clipboard.readText()); + }; + + const handleClipboardSearch = () => { + setSearch(clipboard.readText()); + }; + + useEffect(() => { + try { + const regex = new RegExp(search, flag); + const out = input.replace( + regex, + (str: string) => `${str}` + ); + setMatch(input.match(regex)?.length || 0); + setOutput(out); + } catch (e) { + setOutput(e.message); + } + }, [search, input, flag]); + + return ( + + + + + + Clipboard + + + + + + + + + + + + + Clipboard + + + + + + + + + + Search for: + + /{search}/{flag} + + + + {match} match{match === 1 ? '' : 'es'} + + + + + + + ); +}; + +export default RegexTester; diff --git a/src/components/sql/SqlFormatter.tsx b/src/components/sql/SqlFormatter.tsx index 159dee8..7480f05 100644 --- a/src/components/sql/SqlFormatter.tsx +++ b/src/components/sql/SqlFormatter.tsx @@ -51,7 +51,7 @@ const SqlFormatter = () => { diff --git a/src/components/timestamp/UnixTimestamp.tsx b/src/components/timestamp/UnixTimestamp.tsx index b1c0d9a..22d74c9 100644 --- a/src/components/timestamp/UnixTimestamp.tsx +++ b/src/components/timestamp/UnixTimestamp.tsx @@ -179,7 +179,7 @@ const UnixTimestampConverter = () => { diff --git a/src/helpers/fontAwesome.ts b/src/helpers/fontAwesome.ts index 8c07f7a..c897b20 100644 --- a/src/helpers/fontAwesome.ts +++ b/src/helpers/fontAwesome.ts @@ -8,6 +8,7 @@ import { import { faCamera, faClock, + faRegistered, faCode, faCopy, faDatabase, @@ -26,5 +27,6 @@ library.add( faExchangeAlt, faDatabase, faJsSquare, + faRegistered, faCamera ); diff --git a/src/package.json b/src/package.json index 828a38c..10f7c6f 100644 --- a/src/package.json +++ b/src/package.json @@ -1,7 +1,7 @@ { "name": "plainbelt", "productName": "plainbelt", - "version": "0.0.2", + "version": "0.0.3", "description": "A toolbelt for all your plain text", "main": "./main.prod.js", "author": {