R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Implemented HTML Tools

Browse Source
This commit is contained in:
Mikolaj Widla
2023-07-03 12:29:09 +02:00
parent fe605ec6e0
commit 40f1b2caf8
5 changed files with 81 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Backend-libXML/Parser.py
View File

@@ -1,7 +1,28 @@
from lxml import etree from lxml import etree, html
from io import BytesIO from io import BytesIO
def convertHTML(source: str, sourceFrom: str):
htmlParser = html.HTMLParser(remove_comments=True, remove_blank_text=True)
xmlParser = etree.XMLParser(remove_comments=True, remove_blank_text=True)
if sourceFrom == "xml":
xmldoc = etree.parse(BytesIO(source.encode("utf-8")), xmlParser)
return html.tostring(xmldoc, method="html", pretty_print=True).decode()
elif sourceFrom == "html":
htmldoc = html.parse(BytesIO(source.encode("utf-8")), htmlParser)
return etree.tostring(htmldoc, method="xml", pretty_print=True, doctype="", xml_declaration=True, encoding="utf-8").decode()
else:
return
def formatHTML(source: str, prettify: bool) -> str:
parser = html.HTMLParser(remove_blank_text=True, remove_comments=True, remove_pis=True)
htmlDoc = html.parse(BytesIO(source.encode("utf-8")),parser=parser)
if not prettify:
return html.tostring(htmlDoc).decode().replace("\n", "").replace("> ", ">")
return etree.tostring(htmlDoc, encoding='unicode', pretty_print=True)
def formatXML(source: str, prettify: bool) -> str: def formatXML(source: str, prettify: bool) -> str:
"""Method used to format XML """Method used to format XML

18
Backend-libXML/main.py
View File

@@ -40,6 +40,12 @@ def process_xml(request: request, type: str) -> str:
response_json['result'] = Parser.formatXML(data, True) response_json['result'] = Parser.formatXML(data, True)
elif (type == "minimize"): elif (type == "minimize"):
response_json['result'] = Parser.formatXML(data, False) response_json['result'] = Parser.formatXML(data, False)
elif (type == "prettifyHtml"):
response_json['result'] = Parser.formatHTML(data, True)
elif (type == "minimizeHtml"):
response_json['result'] = Parser.formatHTML(data, False)
elif (type == "convertHTML"):
response_json['result'] = Parser.convertHTML(data, process)
else: else:
raise ValueError("Valid operation types are: xsd, xslt, xpath") raise ValueError("Valid operation types are: xsd, xslt, xpath")
@@ -79,5 +85,17 @@ def prettify():
def minimize(): def minimize():
return process_xml(request, "minimize") return process_xml(request, "minimize")
@app.route("/html/prettify",methods=["POST"])
def prettifyHtml():
return process_xml(request, "prettifyHtml")
@app.route("/html/minimize",methods=["POST"])
def minimizeHtml():
return process_xml(request, "minimizeHtml")
@app.route("/html/convert",methods=["POST"])
def XMLToHTMLConvertion():
return process_xml(request, "convertHTML")
if __name__ == "__main__": if __name__ == "__main__":
app.run() app.run()

1
Frontend/src/assets/sampleHtml.html
View File

@@ -9,5 +9,6 @@
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p>That's paragraph</p> <p>That's paragraph</p>
<br>
</body> </body>
</html> </html>

35
Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
View File

@@ -6,12 +6,45 @@ const props = defineProps(
} }
) )
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([ const emit = defineEmits([
'update:result' 'update:result'
]) ])
function process(){ 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> </script>

8
Frontend/src/views/HtmlFormatterView.vue
View File

@@ -2,6 +2,7 @@
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'; import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import CodeEditorComponent from '@/components/CodeEditorComponent.vue'; import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
import { ref } from 'vue'; import { ref } from 'vue';
import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
const html = ref(''); const html = ref('');
@@ -11,7 +12,7 @@ function clear() {
} }
function setTextFieldValue(data: string) { function setTextFieldValue(data: string) {
html.value = data html.value = data.toString()
} }
</script> </script>
@@ -21,8 +22,11 @@ function setTextFieldValue(data: string) {
<div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between"> <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> <span class="dark:text-slate-100">HTML Formatter</span>
<div class="flex flex-wrap gap-2 justify-center"> <div class="flex flex-wrap gap-2 justify-center">
<InsertTemplateComponent stylized-name="HTML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent> <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
<button class="tool-button" @click="clear()">Clear</button> <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>
</div> </div>
<CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" /> <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />