README.md

@@ -1,4 +1,4 @@
-[![Test](https://github.com/plainlab/plainbelt/actions/workflows/test.yml/badge.svg)](https://github.com/plainlab/plainbelt/actions/workflows/test.yml) ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/plainlab/plainbelt)
+[![Test](https://github.com/plainlab/plainbelt/actions/workflows/test.yml/badge.svg)](https://github.com/plainlab/plainbelt/actions/workflows/test.yml) [![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/plainlab/plainbelt)](https://github.com/plainlab/plainbelt/releases)
 
 # PlainBelt
 
@@ -13,19 +13,23 @@
 
 ## Tools list
 
-- [x] Unix Timestamp Converter
-- [x] Cron Editor
-- [x] Markdown to HTML Converter
-- [x] HTML Preview
-- [x] QRCode Generator
-- [x] QRCode Reader
-- [x] Base64 Encode/Decode
-- [x] Text Diff
-- [x] JSON Formatter
-- [x] SQL Formatter
-- [x] Regex Tester
-- [x] JWT Debugger
-- [x] Js Console
+- [x] 1. Unix Timestamp Converter
+- [x] 2. Cron Editor
+- [x] 3. Markdown to HTML Converter
+- [x] 4. HTML Preview
+- [x] 5. QRCode Generator
+- [x] 6. QRCode Reader
+- [x] 7. Base64 Encode / Decode
+- [x] 8. Text Diff
+- [x] 9. JSON Formatter
+- [x] 10. SQL Formatter
+- [x] 11. Regex Tester
+- [x] 12. JWT Debugger
+- [x] 13. Js Console
+- [x] 14. HTML Entity Encode / Decode
+- [x] 15. URL Encode / Decode
+- [x] 16. Backslash Encode / Decode
+- [x] 17. Lorem Ipsum Generator
 
 ## Demo
 
@@ -70,4 +74,4 @@ Checkout the `release` folder and enjoy!
 
 ---
 
-© 2021 PlainLab
+© 2022 PlainLab

package.json

@@ -165,14 +165,14 @@
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
+    "@types/codemirror": "^5.60.2",
     "@types/diff": "^5.0.1",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "4.7.6",
     "@types/jest": "^26.0.15",
-    "@types/codemirror": "^5.60.2",
     "@types/jsonwebtoken": "^8.5.4",
-    "@types/lodash.isequal": "^4.5.5",
+    "@types/lodash": "^4.14.172",
     "@types/marked": "^2.0.4",
     "@types/node": "14.14.10",
     "@types/pngjs": "^6.0.1",
@@ -268,7 +268,8 @@
     "history": "^5.0.0",
     "jsonwebtoken": "^8.5.1",
     "jsqr": "^1.4.0",
-    "lodash.isequal": "^4.5.0",
+    "lodash": "^4.17.21",
+    "lorem-ipsum": "^2.0.3",
     "marked": "^2.1.3",
     "pngjs": "^6.0.0",
     "qrcode": "^1.4.4",

src/components/Main.tsx

@@ -19,6 +19,10 @@ import JwtDebugger from './jwt/JwtDebugger';
 import Auto from './auto/Auto';
 import CronEditor from './cron/Cron';
 import JsConsole from './notebook/JavaScript';
+import HtmlEntityCodec from './html/HtmlEntityCodec';
+import UrlCodec from './url/UrlCodec';
+import BackSlashCodec from './text/BackSlash';
+import LoremIpsum from './text/LoremIpsum';
 
 interface MenuItem {
   path: string;
@@ -57,6 +61,13 @@ const defaultRoutes: MenuItem[] = [
     show: true,
     Component: RegexTester,
   },
+  {
+    icon: <FontAwesomeIcon icon="random" />,
+    path: '/lorem-ipsum',
+    name: 'Lorem Ipsum Generator',
+    show: true,
+    Component: LoremIpsum,
+  },
   {
     icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
     path: '/markdown-to-html',
@@ -127,6 +138,27 @@ const defaultRoutes: MenuItem[] = [
     show: false,
     Component: JsConsole,
   },
+  {
+    icon: <FontAwesomeIcon icon="file-code" />,
+    path: '/html-entity-encoder',
+    name: 'HTML Entity Encoder',
+    show: false,
+    Component: HtmlEntityCodec,
+  },
+  {
+    icon: <FontAwesomeIcon icon="link" />,
+    path: '/url-encoder',
+    name: 'URL Encoder',
+    show: false,
+    Component: UrlCodec,
+  },
+  {
+    icon: <FontAwesomeIcon icon="slash" transform={{ rotate: 42 }} />,
+    path: '/back-slash-encoder',
+    name: 'Backslash Encoder',
+    show: false,
+    Component: BackSlashCodec,
+  },
 ];
 
 const Main = () => {
@@ -140,10 +172,6 @@ const Main = () => {
     setSearch(e.target.value);
   };
 
-  ipcRenderer.on('hotkey-pressed', () => {
-    history.push('/auto', { auto: true });
-  });
-
   useEffect(() => {
     if (search.trim()) {
       setRoutes(
@@ -191,6 +219,10 @@ const Main = () => {
         return null;
       })
       .catch(console.error);
+
+    ipcRenderer.on('hotkey-pressed', () => {
+      history.push('/auto', { auto: true });
+    });
   }, []);
 
   return (

src/components/auto/Auto.tsx

@@ -82,12 +82,16 @@ const Auto = () => {
           />
         </section>
         <p className="mt-4 text-lg font-bold">PlainBelt</p>
-        <a href="https://plainlab.github.io" className="opacity-50">
+        <a
+          href="https://plainlab.github.io"
+          target="new"
+          className="opacity-50"
+        >
           https://plainlab.github.io
         </a>
         {hotkey && (
           <p className="mt-10 opacity-70">
-            <em>Hotkey</em>: Control+Alt+Meta+Space (⌃⌥⌘Space in Mac)
+            <em>Hotkey</em>: Control+Alt+Meta+Space (⌃⌥⌘Space on Mac)
           </p>
         )}
       </section>

src/components/common/1-to-1.tsx

@@ -0,0 +1,103 @@
+import { clipboard } from 'electron';
+import React, { useState } from 'react';
+
+interface OneToOneProps {
+  defaultInput: string;
+  forwardFunc: (f: string) => string;
+  inverseFunc: (r: string) => string;
+}
+
+const OneToOne = ({
+  defaultInput,
+  forwardFunc,
+  inverseFunc,
+}: OneToOneProps) => {
+  const [from, setFrom] = useState(defaultInput);
+  const [to, setTo] = useState(forwardFunc(from));
+
+  const [fromCopied, setFromCopied] = useState(false);
+  const [toCopied, setToCopied] = useState(false);
+
+  const changeFrom = (value: string) => {
+    setFrom(value);
+    setTo(forwardFunc(value));
+  };
+
+  const changeTo = (value: string) => {
+    setTo(value);
+    setFrom(inverseFunc(value));
+  };
+
+  const handleChangeFrom = (evt: { target: { value: string } }) =>
+    changeFrom(evt.target.value);
+
+  const handleChangeTo = (evt: { target: { value: string } }) =>
+    changeTo(evt.target.value);
+
+  const handleCopyFrom = () => {
+    setFromCopied(true);
+    clipboard.write({ text: from });
+    setTimeout(() => setFromCopied(false), 500);
+  };
+
+  const handleCopyTo = () => {
+    setToCopied(true);
+    clipboard.write({ text: to });
+    setTimeout(() => setToCopied(false), 500);
+  };
+
+  const handleClipboardFrom = () => {
+    changeFrom(clipboard.readText());
+  };
+
+  const handleClipboardTo = () => {
+    changeTo(clipboard.readText());
+  };
+
+  return (
+    <div className="flex flex-col min-h-full">
+      <div className="flex justify-between mb-1">
+        <section className="flex items-center justify-start space-x-2">
+          <button type="button" className="btn" onClick={handleClipboardFrom}>
+            Clipboard
+          </button>
+          <button
+            type="button"
+            className="w-16 btn"
+            onClick={handleCopyFrom}
+            disabled={fromCopied}
+          >
+            {fromCopied ? 'Copied' : 'Copy'}
+          </button>
+        </section>
+        <section className="flex items-center justify-start space-x-2">
+          <button type="button" className="btn" onClick={handleClipboardTo}>
+            Clipboard
+          </button>
+          <button
+            type="button"
+            className="w-16 btn"
+            onClick={handleCopyTo}
+            disabled={toCopied}
+          >
+            {toCopied ? 'Copied' : 'Copy'}
+          </button>
+        </section>
+      </div>
+      <div className="flex flex-1 min-h-full space-x-2">
+        <textarea
+          onChange={handleChangeFrom}
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
+          value={from}
+        />
+        <textarea
+          onChange={handleChangeTo}
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
+          value={to}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default OneToOne;

src/components/html/HtmlEntityCodec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { escape, unescape } from 'lodash';
+import OneToOne from '../common/1-to-1';
+
+const HtmlEntityCodec = () => {
+  return (
+    <OneToOne
+      defaultInput='<script>alert("Hello");</script>'
+      forwardFunc={escape}
+      inverseFunc={unescape}
+    />
+  );
+};
+
+export default HtmlEntityCodec;

src/components/jwt/JwtDebugger.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import _isEqual from 'lodash.isequal';
+import _isEqual from 'lodash/isequal';
 import { ipcRenderer, clipboard } from 'electron';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {

src/components/text/BackSlash.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import OneToOne from '../common/1-to-1';
+
+const addSlashes = (string: string) => {
+  return (
+    string
+      .replace(/\\/g, '\\\\')
+      // eslint-disable-next-line no-control-regex
+      .replace(/\u0008/g, '\\b')
+      .replace(/\t/g, '\\t')
+      .replace(/\n/g, '\\n')
+      .replace(/\f/g, '\\f')
+      .replace(/\r/g, '\\r')
+      .replace(/'/g, "\\'")
+      .replace(/"/g, '\\"')
+  );
+};
+
+const removeSlashes = (string: string) => {
+  return string
+    .replace(/\\"/g, '"')
+    .replace(/\\'/g, "'")
+    .replace(/\\r/g, '\r')
+    .replace(/\\f/g, '\f')
+    .replace(/\\n/g, '\n')
+    .replace(/\\t/g, '\t')
+    .replace(/\\b/, '\u0008')
+    .replace(/\\\\/g, '\\');
+};
+
+const BackSlashCodec = () => {
+  return (
+    <OneToOne
+      defaultInput="Hello\nworld!"
+      forwardFunc={removeSlashes}
+      inverseFunc={addSlashes}
+    />
+  );
+};
+
+export default BackSlashCodec;