From a693c6ee346b0761b0c91005c227571d6217fd6f Mon Sep 17 00:00:00 2001
From: manhtai <vo@manhtai.com>
Date: Sun, 25 Jul 2021 18:27:28 +0700
Subject: [PATCH 1/3] Regex tester

---
 README.md                                  |   2 +-
 src/components/Main.tsx                    |   7 ++
 src/components/base64/Base64.tsx           |   2 +-
 src/components/markdown/MarkdownToHtml.tsx |   2 +-
 src/components/qrcode/QrCodeReader.tsx     |   2 +-
 src/components/regex/RegexTester.tsx       | 107 +++++++++++++++++++++
 src/components/sql/SqlFormatter.tsx        |   2 +-
 src/components/timestamp/UnixTimestamp.tsx |   2 +-
 src/helpers/fontAwesome.ts                 |   2 +
 9 files changed, 122 insertions(+), 6 deletions(-)
 create mode 100644 src/components/regex/RegexTester.tsx

diff --git a/README.md b/README.md
index 6fa3644..3e3c35c 100644
--- a/README.md
+++ b/README.md
@@ -15,11 +15,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: <FontAwesomeIcon icon="registered" />,
+      path: '/regex-tester',
+      name: 'Regex Tester',
+      Component: RegexTester,
+    },
     {
       icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
       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 = () => {
           </div>
           <button
             type="button"
-            className="btn"
+            className="w-16 btn"
             onClick={handleCopyOutput}
             disabled={copied}
           >
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 = () => {
           </button>
           <button
             type="button"
-            className="btn"
+            className="w-16 btn"
             onClick={handleCopy}
             disabled={copied}
           >
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 = () => {
 
         <button
           type="button"
-          className="btn"
+          className="w-16 btn"
           onClick={handleCopy}
           disabled={copied}
         >
diff --git a/src/components/regex/RegexTester.tsx b/src/components/regex/RegexTester.tsx
new file mode 100644
index 0000000..850e9e2
--- /dev/null
+++ b/src/components/regex/RegexTester.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable react/no-danger */
+import React, { useEffect, useState } from 'react';
+import { clipboard } from 'electron';
+
+const RegexTester = () => {
+  const [search, setSearch] = useState('plai*');
+  const [input, setInput] = useState(
+    'PlainBelt - A toolbel for your plain text'
+  );
+  const [output, setOutput] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const handleChangeSearch = (evt: { target: { value: string } }) =>
+    setSearch(evt.target.value);
+
+  const handleChangeInput = (evt: { target: { value: string } }) =>
+    setInput(evt.target.value);
+
+  const handleClipboardInput = () => {
+    setInput(clipboard.readText());
+  };
+
+  const handleClipboardSearch = () => {
+    setSearch(clipboard.readText());
+  };
+
+  const handleCopySearch = () => {
+    setCopied(true);
+    clipboard.write({ text: search });
+    setTimeout(() => setCopied(false), 500);
+  };
+
+  useEffect(() => {
+    const regex = new RegExp(search, 'gi');
+    const out = input.replace(
+      regex,
+      (str: string) => `<span class='text-blue-500'>${str}</span>`
+    );
+    setOutput(out);
+  }, [search, input]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <section className="flex flex-col flex-1 w-full h-full space-y-2">
+        <section className="flex flex-col">
+          <div className="flex justify-between mb-1">
+            <span className="flex space-x-2">
+              <button
+                type="button"
+                className="btn"
+                onClick={handleClipboardSearch}
+              >
+                Clipboard
+              </button>
+            </span>
+            <span className="flex space-x-2">
+              <button
+                type="button"
+                className="btn"
+                onClick={handleCopySearch}
+                disabled={copied}
+              >
+                Copy
+              </button>
+            </span>
+          </div>
+          <textarea
+            onChange={handleChangeSearch}
+            className="flex-1 p-4 bg-white rounded-md"
+            value={search}
+          />
+        </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-end mb-1">
+            <span className="flex space-x-2">3 matches</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;
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 = () => {
         <span className="flex space-x-4">
           <button
             type="button"
-            className="btn"
+            className="w-16 btn"
             onClick={handleCopyOutput}
             disabled={copied}
           >
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 = () => {
         </span>
         <button
           type="button"
-          className="btn"
+          className="w-16 btn"
           onClick={handleCopy}
           disabled={copied}
         >
diff --git a/src/helpers/fontAwesome.ts b/src/helpers/fontAwesome.ts
index 8c07f7a..915f9e9 100644
--- a/src/helpers/fontAwesome.ts
+++ b/src/helpers/fontAwesome.ts
@@ -5,6 +5,7 @@ import {
   faHtml5,
   faJsSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faRegistered } from '@fortawesome/free-regular-svg-icons';
 import {
   faCamera,
   faClock,
@@ -26,5 +27,6 @@ library.add(
   faExchangeAlt,
   faDatabase,
   faJsSquare,
+  faRegistered,
   faCamera
 );

From 3ba47f49ab71120eee2499251f4c639ecc12e873 Mon Sep 17 00:00:00 2001
From: manhtai <vo@manhtai.com>
Date: Sun, 25 Jul 2021 20:56:23 +0700
Subject: [PATCH 2/3] Fixes

---
 src/components/regex/RegexTester.tsx | 90 +++++++++++++++-------------
 src/helpers/fontAwesome.ts           |  2 +-
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/components/regex/RegexTester.tsx b/src/components/regex/RegexTester.tsx
index 850e9e2..a41dd2b 100644
--- a/src/components/regex/RegexTester.tsx
+++ b/src/components/regex/RegexTester.tsx
@@ -4,15 +4,19 @@ import { clipboard } from 'electron';
 
 const RegexTester = () => {
   const [search, setSearch] = useState('plai*');
+  const [flag, setFlag] = useState('gi');
   const [input, setInput] = useState(
-    'PlainBelt - A toolbel for your plain text'
+    'PlainBelt - A toolbelt for your plain text'
   );
   const [output, setOutput] = useState('');
-  const [copied, setCopied] = useState(false);
+  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);
 
@@ -24,51 +28,45 @@ const RegexTester = () => {
     setSearch(clipboard.readText());
   };
 
-  const handleCopySearch = () => {
-    setCopied(true);
-    clipboard.write({ text: search });
-    setTimeout(() => setCopied(false), 500);
-  };
-
   useEffect(() => {
-    const regex = new RegExp(search, 'gi');
-    const out = input.replace(
-      regex,
-      (str: string) => `<span class='text-blue-500'>${str}</span>`
-    );
-    setOutput(out);
-  }, [search, input]);
+    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-2">
+      <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">
-            <span className="flex space-x-2">
-              <button
-                type="button"
-                className="btn"
-                onClick={handleClipboardSearch}
-              >
-                Clipboard
-              </button>
-            </span>
-            <span className="flex space-x-2">
-              <button
-                type="button"
-                className="btn"
-                onClick={handleCopySearch}
-                disabled={copied}
-              >
-                Copy
-              </button>
-            </span>
+            <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>
-          <textarea
-            onChange={handleChangeSearch}
-            className="flex-1 p-4 bg-white rounded-md"
-            value={search}
-          />
         </section>
 
         <section className="flex flex-col flex-1 h-1/3">
@@ -91,8 +89,16 @@ const RegexTester = () => {
         </section>
 
         <section className="flex flex-col flex-1 h-1/3">
-          <div className="flex justify-end mb-1">
-            <span className="flex space-x-2">3 matches</span>
+          <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"
diff --git a/src/helpers/fontAwesome.ts b/src/helpers/fontAwesome.ts
index 915f9e9..c897b20 100644
--- a/src/helpers/fontAwesome.ts
+++ b/src/helpers/fontAwesome.ts
@@ -5,10 +5,10 @@ import {
   faHtml5,
   faJsSquare,
 } from '@fortawesome/free-brands-svg-icons';
-import { faRegistered } from '@fortawesome/free-regular-svg-icons';
 import {
   faCamera,
   faClock,
+  faRegistered,
   faCode,
   faCopy,
   faDatabase,

From 274dee6dbce59a3ce6f9693ba582b131c2b8800b Mon Sep 17 00:00:00 2001
From: manhtai <vo@manhtai.com>
Date: Sun, 25 Jul 2021 21:01:48 +0700
Subject: [PATCH 3/3] Release 0.0.3

---
 README.md        | 6 ++++++
 src/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3e3c35c..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
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": {