feat(new tool): xml formatter (#457)

* feat(new tool): xml formatter

* feat(xml-formatter): added happy path e2e tests

* refactor(xml-formatter): improved unit tests

* refactor(xml-formatter): add better suitable icon

* feat(xml-formatter): added happy path e2e tests

* feat(xml-formatter): registered xml as syntax highlighter

* chore(auto-import): removed unused NSpace

---------

Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/tools/xml-formatter/xml-formatter.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { formatXml, isValidXML } from './xml-formatter.service';
+import type { UseValidationRule } from '@/composable/validation';
+
+const defaultValue = '<hello><world>foo</world><world>bar</world></hello>';
+const indentSize = useStorage('xml-formatter:indent-size', 2);
+const collapseContent = useStorage('xml-formatter:collapse-content', true);
+
+function transformer(value: string) {
+  return formatXml(value, {
+    indentation: ' '.repeat(indentSize.value),
+    collapseContent: collapseContent.value,
+    lineSeparator: '\n',
+  });
+}
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: isValidXML,
+    message: 'Provided XML is not valid.',
+  },
+];
+</script>
+
+<template>
+  <div important:flex-full important:flex-shrink-0 important:flex-grow-0>
+    <div flex justify-center>
+      <n-form-item label="Collapse content:" label-placement="left">
+        <n-switch v-model:value="collapseContent" />
+      </n-form-item>
+      <n-form-item label="Indent size:" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="0" max="10" w-100px />
+      </n-form-item>
+    </div>
+  </div>
+
+  <format-transformer
+    input-label="Your XML"
+    input-placeholder="Paste your XML here..."
+    output-label="Formatted XML from your XML"
+    output-language="xml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+    :input-default="defaultValue"
+  />
+</template>