merge new tools (#244)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-authored-by: Adam Bem <bema@noreply.example.com>
Reviewed-on: #244

Frontend/src/views/HtmlFormatterView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import { ref } from 'vue';
+import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
+
+
+const html = ref('');
+
+function clear() {
+    html.value = '';
+}
+
+function setTextFieldValue(data: string) {
+    html.value = data.toString()
+}
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100">HTML Formatter</span>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Minimize" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Prettify" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="XML Converter" />
+            </div>
+        </div>
+        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
+    </div>
+</template>