Skip to content

Commit d604081

Browse files
manhtaimanhtai
authored
Html encode decode (#27)
1 parent 842addc commit d604081

File tree

10 files changed

+170
-27
lines changed

10 files changed

+170
-27
lines changed

‎README.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[![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)
1+
[![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)
22

33
# PlainBelt
44

@@ -13,19 +13,21 @@
1313

1414
## Tools list
1515

16-
- [x] Unix Timestamp Converter
17-
- [x] Cron Editor
18-
- [x] Markdown to HTML Converter
19-
- [x] HTML Preview
20-
- [x] QRCode Generator
21-
- [x] QRCode Reader
22-
- [x] Base64 Encode/Decode
23-
- [x] Text Diff
24-
- [x] JSON Formatter
25-
- [x] SQL Formatter
26-
- [x] Regex Tester
27-
- [x] JWT Debugger
28-
- [x] Js Console
16+
- [x] 1. Unix Timestamp Converter
17+
- [x] 2. Cron Editor
18+
- [x] 3. Markdown to HTML Converter
19+
- [x] 4. HTML Preview
20+
- [x] 5. QRCode Generator
21+
- [x] 6. QRCode Reader
22+
- [x] 7. Base64 Encode / Decode
23+
- [x] 8. Text Diff
24+
- [x] 9. JSON Formatter
25+
- [x] 10. SQL Formatter
26+
- [x] 11. Regex Tester
27+
- [x] 12. JWT Debugger
28+
- [x] 13. Js Console
29+
- [x] 14. HTML Entity Encode / Decode
30+
- [x] 15. URL Encode / Decode
2931

3032
## Demo
3133

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -165,14 +165,14 @@
165165
"@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
166166
"@testing-library/jest-dom": "^5.11.6",
167167
"@testing-library/react": "^11.2.2",
168+
"@types/codemirror": "^5.60.2",
168169
"@types/diff": "^5.0.1",
169170
"@types/enzyme": "^3.10.5",
170171
"@types/enzyme-adapter-react-16": "^1.0.6",
171172
"@types/history": "4.7.6",
172173
"@types/jest": "^26.0.15",
173-
"@types/codemirror": "^5.60.2",
174174
"@types/jsonwebtoken": "^8.5.4",
175-
"@types/lodash.isequal": "^4.5.5",
175+
"@types/lodash": "^4.14.172",
176176
"@types/marked": "^2.0.4",
177177
"@types/node": "14.14.10",
178178
"@types/pngjs": "^6.0.1",
@@ -268,7 +268,7 @@
268268
"history": "^5.0.0",
269269
"jsonwebtoken": "^8.5.1",
270270
"jsqr": "^1.4.0",
271-
"lodash.isequal": "^4.5.0",
271+
"lodash": "^4.17.21",
272272
"marked": "^2.1.3",
273273
"pngjs": "^6.0.0",
274274
"qrcode": "^1.4.4",

‎src/components/Main.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import JwtDebugger from './jwt/JwtDebugger';
1919
import Auto from './auto/Auto';
2020
import CronEditor from './cron/Cron';
2121
import JsConsole from './notebook/JavaScript';
22+
import HtmlEntityCodec from './html/HtmlEntityCodec';
23+
import UrlCodec from './url/UrlCodec';
2224

2325
interface MenuItem {
2426
path: string;
@@ -127,6 +129,20 @@ const defaultRoutes: MenuItem[] = [
127129
show: false,
128130
Component: JsConsole,
129131
},
132+
{
133+
icon: <FontAwesomeIcon icon="file-code" />,
134+
path: '/html-entity-encoder',
135+
name: 'HTML Entity Encoder',
136+
show: false,
137+
Component: HtmlEntityCodec,
138+
},
139+
{
140+
icon: <FontAwesomeIcon icon="link" />,
141+
path: '/url-encoder',
142+
name: 'URL Encoder',
143+
show: false,
144+
Component: UrlCodec,
145+
},
130146
];
131147

132148
const Main = () => {

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { clipboard } from 'electron';
2+
import React, { useState } from 'react';
3+
4+
interface OneToOneProps {
5+
fromDefault: string;
6+
fromFunc: (f: string) => string;
7+
inverseFunc: (r: string) => string;
8+
}
9+
10+
const OneToOne = ({ fromDefault, fromFunc, inverseFunc }: OneToOneProps) => {
11+
const [from, setFrom] = useState(fromDefault);
12+
const [to, setTo] = useState(fromFunc(from));
13+
14+
const [fromCopied, setFromCopied] = useState(false);
15+
const [toCopied, setToCopied] = useState(false);
16+
17+
const changeFrom = (value: string) => {
18+
setFrom(value);
19+
setTo(fromFunc(value));
20+
};
21+
22+
const changeTo = (value: string) => {
23+
setTo(value);
24+
setFrom(inverseFunc(value));
25+
};
26+
27+
const handleChangeFrom = (evt: { target: { value: string } }) =>
28+
changeFrom(evt.target.value);
29+
30+
const handleChangeTo = (evt: { target: { value: string } }) =>
31+
changeTo(evt.target.value);
32+
33+
const handleCopyFrom = () => {
34+
setFromCopied(true);
35+
clipboard.write({ text: from });
36+
setTimeout(() => setFromCopied(false), 500);
37+
};
38+
39+
const handleCopyTo = () => {
40+
setToCopied(true);
41+
clipboard.write({ text: to });
42+
setTimeout(() => setToCopied(false), 500);
43+
};
44+
45+
const handleClipboardFrom = () => {
46+
changeFrom(clipboard.readText());
47+
};
48+
49+
const handleClipboardTo = () => {
50+
changeTo(clipboard.readText());
51+
};
52+
53+
return (
54+
<div className="flex flex-col min-h-full">
55+
<div className="flex justify-between mb-1">
56+
<section className="flex items-center justify-start space-x-2">
57+
<button type="button" className="btn" onClick={handleClipboardFrom}>
58+
Clipboard
59+
</button>
60+
<button
61+
type="button"
62+
className="w-16 btn"
63+
onClick={handleCopyFrom}
64+
disabled={fromCopied}
65+
>
66+
{fromCopied ? 'Copied' : 'Copy'}
67+
</button>
68+
</section>
69+
<section className="flex items-center justify-start space-x-2">
70+
<button type="button" className="btn" onClick={handleClipboardTo}>
71+
Clipboard
72+
</button>
73+
<button
74+
type="button"
75+
className="w-16 btn"
76+
onClick={handleCopyTo}
77+
disabled={toCopied}
78+
>
79+
{toCopied ? 'Copied' : 'Copy'}
80+
</button>
81+
</section>
82+
</div>
83+
<div className="flex flex-1 min-h-full space-x-2">
84+
<textarea
85+
onChange={handleChangeFrom}
86+
className="flex-1 min-h-full p-2 bg-white rounded-md"
87+
value={from}
88+
/>
89+
<textarea
90+
onChange={handleChangeTo}
91+
className="flex-1 min-h-full p-2 bg-white rounded-md"
92+
value={to}
93+
/>
94+
</div>
95+
</div>
96+
);
97+
};
98+
99+
export default OneToOne;

‎src/components/html/HtmlEntityCodec.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { escape, unescape } from 'lodash';
3+
import OneToOne from '../common/1-to-1';
4+
5+
const HtmlEntityCodec = () => {
6+
return (
7+
<OneToOne
8+
fromDefault='<script>alert("Hello");</script>'
9+
fromFunc={escape}
10+
inverseFunc={unescape}
11+
/>
12+
);
13+
};
14+
15+
export default HtmlEntityCodec;

‎src/components/jwt/JwtDebugger.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import classNames from 'classnames';
3-
import _isEqual from 'lodash.isequal';
3+
import _isEqual from 'lodash/isequal';
44
import { ipcRenderer, clipboard } from 'electron';
55
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
66
import {

‎src/components/url/UrlCodec.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import OneToOne from '../common/1-to-1';
3+
4+
const UrlCodec = () => {
5+
return (
6+
<OneToOne
7+
fromDefault="https://plainlab.github.io/?q=plainbelt"
8+
fromFunc={encodeURIComponent}
9+
inverseFunc={decodeURIComponent}
10+
/>
11+
);
12+
};
13+
14+
export default UrlCodec;

‎src/helpers/fontAwesome.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import {
2323
faRetweet,
2424
faSlidersH,
2525
faCheck,
26+
faLink,
27+
faFileCode,
2628
} from '@fortawesome/free-solid-svg-icons';
2729

2830
library.add(
@@ -46,5 +48,7 @@ library.add(
4648
faRetweet,
4749
faJs,
4850
faSlidersH,
51+
faLink,
52+
faFileCode,
4953
faCheck
5054
);

‎src/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "plainbelt",
33
"productName": "PlainBelt",
4-
"version": "0.0.15",
4+
"version": "0.0.16",
55
"description": "A plain toolbelt for developers",
66
"main": "./main.prod.js",
77
"author": {

‎yarn.lock‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1731,14 +1731,7 @@
17311731
dependencies:
17321732
"@types/node" "*"
17331733

1734-
"@types/lodash.isequal@^4.5.5":
1735-
version "4.5.5"
1736-
resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.5.tgz#4fed1b1b00bef79e305de0352d797e9bb816c8ff"
1737-
integrity sha512-4IKbinG7MGP131wRfceK6W4E/Qt3qssEFLF30LnJbjYiSfHGGRU/Io8YxXrZX109ir+iDETC8hw8QsDijukUVg==
1738-
dependencies:
1739-
"@types/lodash" "*"
1740-
1741-
"@types/lodash@*":
1734+
"@types/lodash@^4.14.172":
17421735
version "4.14.172"
17431736
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
17441737
integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==

0 commit comments

Comments
 (0)