Implemented HTML Tools (#240)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #240
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps(
+    {
+        formatType: {type:String,required:true},
+        code: {type:String,required:true},
+    }
+)
+
+function chooseType(formatType: String){
+    if (formatType == "XML Converter"){
+        return "convert";
+    }
+    return formatType.toLowerCase();
+}
+
+function getTypeInfo(){
+    if( props.code.startsWith("<!DOCTYPE") ){
+        return "html"
+    }else{
+        return "xml"
+    }
+}
+
+function createBody(){
+    return JSON.stringify({
+        "data": props.code,
+        "process": getTypeInfo(),
+        "processor": "libxml",
+        "version": "1.0"
+    });
+}
+
+const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
+
+const emit = defineEmits([
+    'update:result'
+])
+
+function processResponse(formattedCode : any){
+    var result = formattedCode.result;
+    return result
+}
+
+function process(){
+    fetch(fetchLink, {body:createBody(), method: "POST"})
+        .then( response => response.json() )
+        .then( formattedCode => emit('update:result', processResponse(formattedCode) ) )
+}
+
+</script>
+
+<template>
+<button class="tool-button" @click="process()">{{ formatType }}</button>
+</template>