Html encode decode (#27)

Author: manhtai

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,21 @@
 
 ## 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
 
 ## Demo
 

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,7 @@
     "history": "^5.0.0",
     "jsonwebtoken": "^8.5.1",
     "jsqr": "^1.4.0",
-    "lodash.isequal": "^4.5.0",
+    "lodash": "^4.17.21",
     "marked": "^2.1.3",
     "pngjs": "^6.0.0",
     "qrcode": "^1.4.4",

src/components/Main.tsx

@@ -19,6 +19,8 @@ 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';
 
 interface MenuItem {
   path: string;
@@ -127,6 +129,20 @@ 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,
+  },
 ];
 
 const Main = () => {

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

@@ -0,0 +1,99 @@
+import { clipboard } from 'electron';
+import React, { useState } from 'react';
+
+interface OneToOneProps {
+  fromDefault: string;
+  fromFunc: (f: string) => string;
+  inverseFunc: (r: string) => string;
+}
+
+const OneToOne = ({ fromDefault, fromFunc, inverseFunc }: OneToOneProps) => {
+  const [from, setFrom] = useState(fromDefault);
+  const [to, setTo] = useState(fromFunc(from));
+
+  const [fromCopied, setFromCopied] = useState(false);
+  const [toCopied, setToCopied] = useState(false);
+
+  const changeFrom = (value: string) => {
+    setFrom(value);
+    setTo(fromFunc(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
+      fromDefault='<script>alert("Hello");</script>'
+      fromFunc={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/url/UrlCodec.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import OneToOne from '../common/1-to-1';
+
+const UrlCodec = () => {
+  return (
+    <OneToOne
+      fromDefault="https://plainlab.github.io/?q=plainbelt"
+      fromFunc={encodeURIComponent}
+      inverseFunc={decodeURIComponent}
+    />
+  );
+};
+
+export default UrlCodec;

src/helpers/fontAwesome.ts

@@ -23,6 +23,8 @@ import {
   faRetweet,
   faSlidersH,
   faCheck,
+  faLink,
+  faFileCode,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -46,5 +48,7 @@ library.add(
   faRetweet,
   faJs,
   faSlidersH,
+  faLink,
+  faFileCode,
   faCheck
 );

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plainbelt",
   "productName": "PlainBelt",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "A plain toolbelt for developers",
   "main": "./main.prod.js",
   "author": {

yarn.lock

@@ -1731,14 +1731,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/lodash.isequal@^4.5.5":
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.5.tgz#4fed1b1b00bef79e305de0352d797e9bb816c8ff"
-  integrity sha512-4IKbinG7MGP131wRfceK6W4E/Qt3qssEFLF30LnJbjYiSfHGGRU/Io8YxXrZX109ir+iDETC8hw8QsDijukUVg==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
+"@types/lodash@^4.14.172":
   version "4.14.172"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
   integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==