feat: add html encoder / decoder

package.json

@@ -27,6 +27,7 @@
     "fast-deep-equal": "^3.1.3",
     "fp-ts": "^2.11.9",
     "fuse.js": "^6.5.3",
+    "html-entities": "^2.3.3",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-ace": "^9.5.0",

src/components/layout/Drawer.tsx

@@ -65,7 +65,12 @@ const toolGroups = [
     icon: <SyncAlt />,
     title: "Encoders / Decoders",
     tools: [
-      { icon: <Code />, title: "HTML", href: pagesPath.$url(), disabled: true },
+      {
+        icon: <Code />,
+        title: "HTML",
+        href: pagesPath.encoders_decoders.html.$url(),
+        disabled: false,
+      },
       { icon: <Link />, title: "URL", href: pagesPath.$url(), disabled: true },
       { icon: <DragHandle />, title: "Base 64", href: pagesPath.$url(), disabled: true },
       { icon: <Key />, title: "JWT", href: pagesPath.$url(), disabled: true },

src/components/pages/encoders-decoders/html/Content.tsx

@@ -0,0 +1,46 @@
+import { decode, encode } from "html-entities";
+import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+
+import { Main, MainItem, TextField } from "@/components/common";
+
+type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+
+type Props = {
+  decoded: TextFieldValue;
+  encoded: TextFieldValue;
+  onDecodedChange: OnTextFieldChange;
+  onEncodedChange: OnTextFieldChange;
+};
+
+const StyledComponent = ({ decoded, encoded, onDecodedChange, onEncodedChange }: Props) => (
+  <Main title="HTML Encoder / Decoder">
+    <MainItem title="Decoded">
+      <TextField multiline rows={10} value={decoded} onChange={onDecodedChange} />
+    </MainItem>
+    <MainItem title="Encoded">
+      <TextField multiline rows={10} value={encoded} onChange={onEncodedChange} />
+    </MainItem>
+  </Main>
+);
+
+export const Component = memo(StyledComponent);
+
+const Container = () => {
+  const [decoded, setDecoded] = useState("<Hello World>");
+  const [encoded, setEncoded] = useState("&lt;Hello World&gt;");
+
+  const onDecodedChange: Props["onDecodedChange"] = useCallback(({ currentTarget: { value } }) => {
+    setDecoded(value);
+    setEncoded(encode(value));
+  }, []);
+
+  const onEncodedChange: Props["onEncodedChange"] = useCallback(({ currentTarget: { value } }) => {
+    setEncoded(value);
+    setDecoded(decode(value));
+  }, []);
+
+  return <Component {...{ decoded, encoded, onDecodedChange, onEncodedChange }} />;
+};
+
+export default Container;

src/components/pages/encoders-decoders/html/index.ts

@@ -0,0 +1,3 @@
+import Content from "./Content";
+
+export { Content };

src/components/pages/home/Content.tsx

@@ -48,8 +48,8 @@ const tools = [
     description:
       "Encode or decode all the applicable characters to their corresponding HTML entities",
     keywords: "html encoder escaper decocder unescaper",
-    href: pagesPath.$url(),
+    href: pagesPath.encoders_decoders.html.$url(),
-    disabled: true,
+    disabled: false,
   },
   {
     icon: <Link />,

src/libs/$path.ts

@@ -13,6 +13,14 @@ export const pagesPath = {
       }),
     },
   },
+  encoders_decoders: {
+    html: {
+      $url: (url?: { hash?: string }) => ({
+        pathname: "/encoders-decoders/html" as const,
+        hash: url?.hash,
+      }),
+    },
+  },
   $url: (url?: { hash?: string }) => ({ pathname: "/" as const, hash: url?.hash }),
 };
 

src/pages/encoders-decoders/html.tsx

@@ -0,0 +1,7 @@
+import type { NextPage } from "next";
+
+import { Content } from "@/components/pages/encoders-decoders/html";
+
+const Page: NextPage = Content;
+
+export default Page;

yarn.lock

@@ -1445,6 +1445,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+html-entities@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
+  integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
+
 html-tokenize@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-tokenize/-/html-tokenize-2.0.1.tgz#c3b2ea6e2837d4f8c06693393e9d2a12c960be5f"