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

1 files changed, 80 insertions, 0 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