From 7616a35c4100b687349f35ca2061a53e852a72ed Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Wed, 3 Apr 2024 23:01:22 +0200
Subject: [PATCH] feat(new tool): HTML Prettier

HTML Prettier
---
 src/tools/html-prettifier/html-prettifier.vue | 40 +++++++++++++++++++
 src/tools/html-prettifier/index.ts            | 12 ++++++
 src/tools/index.ts                            |  2 +
 3 files changed, 54 insertions(+)
 create mode 100644 src/tools/html-prettifier/html-prettifier.vue
 create mode 100644 src/tools/html-prettifier/index.ts

diff --git a/src/tools/html-prettifier/html-prettifier.vue b/src/tools/html-prettifier/html-prettifier.vue
new file mode 100644
index 00000000..92250842
--- /dev/null
+++ b/src/tools/html-prettifier/html-prettifier.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import beautify from 'js-beautify';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputHtml = ref('');
+const outputHtml = computed(() => {
+  return beautify.html(inputHtml.value, {
+    unformatted: ['code', 'pre', 'em', 'strong', 'span'],
+    indent_inner_html: true,
+    indent_char: ' ',
+    indent_size: 2,
+    sep: '\n',
+  });
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputHtml"
+      multiline raw-text
+      placeholder="Your HTML content..."
+      rows="8"
+      autofocus
+      label="Your HTML to format (can paste from clipboard):"
+      paste-html
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output prettified HTML:">
+      <TextareaCopyable
+        :value="outputHtml"
+        multiline
+        language="html"
+        :word-wrap="true"
+      />
+    </n-form-item>
+  </div>
+</template>
diff --git a/src/tools/html-prettifier/index.ts b/src/tools/html-prettifier/index.ts
new file mode 100644
index 00000000..fd33878f
--- /dev/null
+++ b/src/tools/html-prettifier/index.ts
@@ -0,0 +1,12 @@
+import { BrandHtml5 } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Html Prettifier',
+  path: '/html-prettifier',
+  description: 'Prettify HTML code',
+  keywords: ['html', 'prettifier', 'beautify', 'prettier', 'format'],
+  component: () => import('./html-prettifier.vue'),
+  icon: BrandHtml5,
+  createdAt: new Date('2024-03-15'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 4a290995..718f1b7e 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -7,6 +7,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
 import { tool as cssPrettifier } from './css-prettifier';
+import { tool as htmlPrettifier } from './html-prettifier';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -150,6 +151,7 @@ export const toolsByCategory: ToolCategory[] = [
       xmlFormatter,
       yamlViewer,
       cssPrettifier,
+      htmlPrettifier,
     ],
   },
   {