| 
						 
							
							
							
						 
					 | 
				
			
			 | 
			 | 
			
				@@ -1,63 +1,8 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<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('');
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				const inputFile = ref()
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				const errorOccurred = ref(false);
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				function clear() {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    html.value = '';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    errorOccurred.value = false
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    inputFile.value.value = ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				function setTextFieldValue(data: string) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    html.value = data.toString()
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				function setErrorOccurred(occurred: boolean) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    errorOccurred.value = occurred
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				function setExample(data: string) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    inputFile.value.value = ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    setTextFieldValue(data)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				function readFile(file : any) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    const reader = new FileReader()
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    reader.onloadend = () => {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        var result = reader.result?.toString()
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        if (typeof result == "string")
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            setTextFieldValue(result);
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    reader.readAsText(file.target.files[0])
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				</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">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <div class="flex items-stretch w-64">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setExample"></InsertTemplateComponent>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <button class="tool-button" @click="clear()">Clear</button>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Minimize" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Prettify" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="HTML -> XML" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <FormatterComponent formatter-language="HTML"></FormatterComponent>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				</template>
 |