Regex tester (#6)

* Regex tester

* Fixes

* Release 0.0.3

Author: manhtai

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
 

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: <FontAwesomeIcon icon="registered" />,
+      path: '/regex-tester',
+      name: 'Regex Tester',
+      Component: RegexTester,
+    },
     {
       icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
       path: '/markdown-to-html',

src/components/base64/Base64.tsx

@@ -112,7 +112,7 @@ const Base64 = () => {
           </div>
           <button
             type="button"
-            className="btn"
+            className="w-16 btn"
             onClick={handleCopyOutput}
             disabled={copied}
           >

src/components/markdown/MarkdownToHtml.tsx

@@ -58,7 +58,7 @@ const Md2Html = () => {
           </button>
           <button
             type="button"
-            className="btn"
+            className="w-16 btn"
             onClick={handleCopy}
             disabled={copied}
           >

src/components/qrcode/QrCodeReader.tsx

@@ -59,7 +59,7 @@ const QRCodeReader = () => {
 
         <button
           type="button"
-          className="btn"
+          className="w-16 btn"
           onClick={handleCopy}
           disabled={copied}
         >

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) => `<span class='text-blue-500'>${str}</span>`
+      );
+      setMatch(input.match(regex)?.length || 0);
+      setOutput(out);
+    } catch (e) {
+      setOutput(e.message);
+    }
+  }, [search, input, flag]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <section className="flex flex-col flex-1 w-full h-full space-y-4">
+        <section className="flex flex-col">
+          <div className="flex justify-between mb-1">
+            <button
+              type="button"
+              className="btn"
+              onClick={handleClipboardSearch}
+            >
+              Clipboard
+            </button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              onChange={handleChangeSearch}
+              className="flex-1 px-4 py-1 bg-white rounded-md"
+              value={search}
+            />
+            <input
+              onChange={handleChangeFlag}
+              className="w-1/12 px-4 py-1 bg-white rounded-md"
+              value={flag}
+            />
+          </div>
+        </section>
+
+        <section className="flex flex-col flex-1 h-1/3">
+          <div className="flex justify-between mb-1">
+            <span className="flex space-x-2">
+              <button
+                type="button"
+                className="btn"
+                onClick={handleClipboardInput}
+              >
+                Clipboard
+              </button>
+            </span>
+          </div>
+          <textarea
+            onChange={handleChangeInput}
+            className="flex-1 p-4 bg-white rounded-md"
+            value={input}
+          />
+        </section>
+
+        <section className="flex flex-col flex-1 h-1/3">
+          <div className="flex justify-between mb-1">
+            <div className="flex items-center my-1 space-x-1">
+              <span>Search for:</span>
+              <span className="font-mono text-gray-400">
+                /<span className="text-gray-700">{search}</span>/{flag}
+              </span>
+            </div>
+            <span className="flex space-x-2">
+              {match} match{match === 1 ? '' : 'es'}
+            </span>
+          </div>
+          <section
+            className="flex-1 w-full p-4 whitespace-pre bg-gray-100 rounded-md"
+            dangerouslySetInnerHTML={{ __html: output }}
+          />
+        </section>
+      </section>
+    </div>
+  );
+};
+
+export default RegexTester;

src/components/sql/SqlFormatter.tsx

@@ -51,7 +51,7 @@ const SqlFormatter = () => {
         <span className="flex space-x-4">
           <button
             type="button"
-            className="btn"
+            className="w-16 btn"
             onClick={handleCopyOutput}
             disabled={copied}
           >

src/components/timestamp/UnixTimestamp.tsx

@@ -179,7 +179,7 @@ const UnixTimestampConverter = () => {
         </span>
         <button
           type="button"
-          className="btn"
+          className="w-16 btn"
           onClick={handleCopy}
           disabled={copied}
         >

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
 );

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": {