HTML Format

__TESTS__/html.spec.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+/* eslint-enable import/no-extraneous-dependencies */
+import React from 'react';
+
+import Html from '../pages/html';
+
+describe('HTML', () => {
+  it('formats HTML and adds newlines', async () => {
+    const user = userEvent.setup();
+    render(<Html />);
+
+    const html = screen.getByLabelText(/^HTML$/i);
+    const formattedHtml = screen.getByLabelText(/FormattedHTML/i);
+
+    await user.clear(html);
+    await user.type(html, '<html><body>');
+    expect(formattedHtml.innerHTML).toContain('&lt;/html&gt;');
+    expect(formattedHtml.innerHTML).toContain('\n');
+  });
+
+  it('clears inputs with either clear button', async () => {
+    const user = userEvent.setup();
+    render(<Html />);
+
+    const html = screen.getByLabelText(/^HTML$/i);
+    const formattedHtml = screen.getByLabelText(/FormattedHTML/i);
+
+    const clearBtns = screen.getAllByRole('button', { name: /Clear/i });
+
+    await user.clear(html);
+    await user.type(html, '<html>');
+    await user.click(clearBtns[0]);
+
+    expect(html).toHaveValue('');
+    expect(formattedHtml).toHaveValue('');
+
+    await user.type(html, '<html>');
+    await user.click(clearBtns[1]);
+
+    expect(html).toHaveValue('');
+    expect(formattedHtml).toHaveValue('');
+  });
+});

components/html/HtmlFormat.tsx

@@ -0,0 +1,182 @@
+import ClearIcon from '@mui/icons-material/Clear';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ContentPasteGoIcon from '@mui/icons-material/ContentPasteGo';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import prettier from 'prettier';
+import parserHtml from 'prettier/parser-html';
+import React from 'react';
+
+import useSupportsClipboardRead from '../../hooks/useSupportsClipboardRead';
+import type { ToastProps } from '../Toast';
+
+export interface HtmlFormatProps {
+  html: string | void;
+  formattedHtml: string | void;
+  error: string;
+  setHtml: (_html: string | void) => void;
+  setFormattedHtml: (_formattedHtml: string | void) => void;
+  setError: (_error: string) => void;
+  setToastMessage: (_toastMessage: string) => void;
+  setToastOpen: (_toastOpen: boolean) => void;
+  setToastSeverity: (_toastSeverity: ToastProps['severity']) => void;
+}
+
+export default function HtmlFormat({
+  html,
+  formattedHtml,
+  error,
+  setHtml,
+  setFormattedHtml,
+  setError,
+  setToastMessage,
+  setToastOpen,
+  setToastSeverity,
+}: HtmlFormatProps) {
+  const supportsClipboardRead = useSupportsClipboardRead();
+  function calculateFormattedHtml(value: string | void) {
+    setHtml(value);
+    if (!value) {
+      setFormattedHtml('');
+    }
+    try {
+      const formatted = prettier.format(value ?? '', {
+        parser: 'html',
+        plugins: [parserHtml],
+      });
+
+      setError('');
+      setFormattedHtml(formatted);
+    } catch (e: unknown) {
+      setError((e as { message: string })?.message ?? '');
+      setFormattedHtml('');
+    }
+  }
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const { value, name } = event.target;
+    if (name === 'html') {
+      calculateFormattedHtml(value);
+    }
+  }
+
+  return (
+    <Box
+      display='flex'
+      flexDirection='column'
+      justifyContent='stretch'
+      gap={6}
+      width={1000}
+      maxWidth='100%'
+    >
+      <Box
+        display='flex'
+        flexDirection='column'
+        gap={2}
+      >
+        <TextField
+          multiline
+          error={error.length > 0}
+          label='HTML'
+          name='html'
+          onChange={handleChange}
+          value={html}
+        />
+        <Box
+          display='flex'
+          flexWrap='wrap'
+          justifyContent='end'
+          gap={2}
+        >
+          <Button
+            startIcon={<ClearIcon />}
+            disabled={!html}
+            onClick={() => {
+              setHtml('');
+              setFormattedHtml('');
+            }}
+          >
+            Clear
+          </Button>
+          {!!supportsClipboardRead && (
+            <Button
+              startIcon={<ContentPasteGoIcon />}
+              onClick={async () => {
+                const text = await navigator.clipboard.readText();
+                if (text) {
+                  setHtml(text);
+                  calculateFormattedHtml(text);
+                }
+              }}
+            >
+              Paste
+            </Button>
+          )}
+        </Box>
+        {error && (
+          <pre>
+            <Typography
+              paragraph
+              color='#ff6246'
+              data-testid='html-error'
+            >
+              {error}
+            </Typography>
+          </pre>
+        )}
+      </Box>
+      <Box
+        display='flex'
+        flexDirection='column'
+        gap={2}
+      >
+        <TextField
+          multiline
+          label='FormattedHTML'
+          name='formattedHtml'
+          value={formattedHtml}
+        />
+        <Box
+          display='flex'
+          flexWrap='wrap'
+          justifyContent='end'
+          gap={2}
+        >
+          <Button
+            startIcon={<ClearIcon />}
+            disabled={!formattedHtml}
+            onClick={() => {
+              setFormattedHtml('');
+              setHtml('');
+            }}
+          >
+            Clear
+          </Button>
+          <Button
+            startIcon={<ContentCopyIcon />}
+            disabled={!formattedHtml}
+            name='Copy'
+            onClick={() => {
+              navigator.clipboard.writeText(formattedHtml || '').then(
+                () => {
+                  setToastMessage('Copied to clipboard');
+                  setToastSeverity('success');
+                  setToastOpen(true);
+                },
+                () => {
+                  setToastMessage('Failed to copy to clipboard');
+                  setToastSeverity('error');
+                  setToastOpen(true);
+                },
+              );
+            }}
+          >
+            Copy
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

data/nav.ts

@@ -1,4 +1,5 @@
 import AspectRatio from '@mui/icons-material/AspectRatio';
+import Code from '@mui/icons-material/Code';
 import DataObject from '@mui/icons-material/DataObject';
 import Fingerprint from '@mui/icons-material/Fingerprint';
 import HomeIcon from '@mui/icons-material/Home';
@@ -38,4 +39,9 @@ export default [
     href: '/urlEncodeDecode',
     Icon: LinkIcon,
   },
+  {
+    title: 'HTML',
+    href: '/html',
+    Icon: Code,
+  },
 ];

package.json

@@ -25,6 +25,7 @@
     "next": "12.2.5",
     "next-images": "^1.8.4",
     "next-pwa": "^5.6.0",
+    "prettier": "^2.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "uuid": "^9.0.0"

pages/html.tsx

@@ -0,0 +1,54 @@
+import Typography from '@mui/material/Typography';
+import React, { useState } from 'react';
+
+import Heading from '../components/Heading';
+import HtmlFormat from '../components/html/HtmlFormat';
+import Layout from '../components/Layout';
+import Toast, { ToastProps } from '../components/Toast';
+import useLocalState from '../hooks/useLocalState';
+
+export default function HtmlPage() {
+  const [html, setHtml] = useLocalState<string | void>({
+    key: 'html',
+    defaultValue: '',
+  });
+
+  const [formattedHtml, setFormattedHtml] = useLocalState<
+    string | void
+  >({
+    key: 'htmlFormatted',
+    defaultValue: '',
+  });
+
+  const [error, setError] = React.useState('');
+  const [toastOpen, setToastOpen] = useState<boolean>(false);
+  const [toastMessage, setToastMessage] = useState<string>('');
+  const [toastSeverity, setToastSeverity] =
+    useState<ToastProps['severity']>('success');
+
+  return (
+    <Layout title='HTML'>
+      <Heading>HTML</Heading>
+      <Typography paragraph>
+        Paste or type in some unformatted HTML to format it
+      </Typography>
+      <HtmlFormat
+        html={html}
+        formattedHtml={formattedHtml}
+        error={error}
+        setHtml={setHtml}
+        setFormattedHtml={setFormattedHtml}
+        setError={setError}
+        setToastMessage={setToastMessage}
+        setToastOpen={setToastOpen}
+        setToastSeverity={setToastSeverity}
+      />
+      <Toast
+        open={toastOpen}
+        message={toastMessage}
+        severity={toastSeverity}
+        onClose={() => setToastOpen(false)}
+      />
+    </Layout>
+  );
+}