feat(new-tool): html entities escape/unescape

3 files changed, 93 insertions, 1 deletions

diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
new file mode 100644
index 0000000..3fd3748
--- /dev/null
+++ b/src/tools/html-entities/html-entities.vue
@@ -0,0 +1,80 @@
+<template>
+  <n-card title="Escape html entities">
+    <n-form-item
+      label="Your string :"
+    >
+      <n-input
+        v-model:value="escapeInput"
+        type="textarea"
+        placeholder="The string to escape"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-form-item label="Your string escaped :">
+      <n-input
+        :value="escapeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string escaped"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button
+        secondary
+        @click="copyEscaped"
+      >
+        Copy
+      </n-button>
+    </n-space>
+  </n-card>
+  <br>
+  <n-card title="Unescape html entities">
+    <n-form-item
+      label="Your escaped string :"
+    >
+      <n-input
+        v-model:value="unescapeInput"
+        type="textarea"
+        placeholder="The string to unescape"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-form-item label="Your string unescaped :"> 
+      <n-input
+        :value="unescapeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string unescaped"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button
+        secondary
+        @click="copyUnescaped"
+      >
+        Copy
+      </n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import {escape,unescape} from 'lodash'
+import { computed, ref } from 'vue';
+ import { useCopy } from '@/composable/copy';
+
+const escapeInput = ref('<title>IT Tool</title>')
+const escapeOutput = computed(() => escape(escapeInput.value))
+const {copy: copyEscaped} = useCopy({source: escapeOutput})
+
+const unescapeInput = ref('&lt;title&gt;IT Tool&lt;/title')
+const unescapeOutput = computed(() => unescape(unescapeInput.value))
+const {copy: copyUnescaped} = useCopy({source: unescapeOutput})
+</script> 
+ 
\ No newline at end of file
diff --git a/src/tools/html-entities/index.ts b/src/tools/html-entities/index.ts
new file mode 100644
index 0000000..530b674
--- /dev/null
+++ b/src/tools/html-entities/index.ts
@@ -0,0 +1,11 @@
+import { Code } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Escape html entities',
+  path: '/html-entities',
+  description: 'Escape or unescape html entities (replace <,>, &, " and \' to their html version)',
+  keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
+  component: () => import('./html-entities.vue'),
+  icon: Code,
+};
\ No newline at end of file
diff --git a/src/tools/index.ts b/src/tools/index.ts
index f46f784..cded17a 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as htmlEntities } from './html-entities';
 import { tool as urlParser } from './url-parser';
 import { tool as deviceInformation } from './device-information';
 import { tool as bcrypt } from './bcrypt';
@@ -37,7 +38,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Web',
     icon: LockOpen,
-    components: [urlEncoder, qrCodeGenerator, urlParser, deviceInformation],
+    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation],
   },
   {
     name: 'Development',