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

Added syntax highlighting for XML Tools (#156)

Browse Source 
Syntax highlight now should work on all tools apart from Mock Services.

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #156
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
Adam Bem
2023-05-08 11:11:16 +02:00
parent 21f5911b1c
commit c55942c24a
11 changed files with 1394 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
Frontend/assets/scripts/tools/highlight.js Normal file
View File

@@ -0,0 +1,64 @@
/**
* This file contains scripts needed for syntax highlight to work.
*/
/**
* This functions highlight element with provided ID.
*
* @function
* @name highlightSyntax
* @kind function
* @param {any} elementId
* @returns {void}
*/
function highlightSyntax(elementId) {
const element = document.getElementById(elementId);
element.innerHTML = hljs.highlightAuto(element.innerText).value
}
/**
* Converts pasted data to plain text
*
* @function
* @name configurePastingInElement
* @kind function
* @param {any} elementId
* @returns {void}
*/
function configurePastingInElement(elementId) {
const editorEle = document.getElementById(elementId);
// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
highlightSyntax(editorEle.id);
});
}

82
Frontend/assets/scripts/tools/scripts.js
View File

@@ -13,8 +13,8 @@ const color_red = "#ff8f8f";
* @returns {void}
*/
function clearDefaultContent(element, text) {
if (element.value == text) {
element.value = "";
if (element.innerText == text) {
element.innerText = "";
element.style.color = "#000000";
element.style.backgroundColor = "#ffffff";
}
@@ -53,15 +53,40 @@ function getVersion() {
* @kind function
*/
function clearDataField() {
document.getElementById("xmlArea").value = "";
document.getElementById("xmlArea").innerHTML = "";
document.getElementById("xmlArea").style.color = null;
document.getElementById("xmlArea").style.backgroundColor = null;
document.getElementById("transformArea").value = "";
document.getElementById("transformArea").innerHTML = "";
document.getElementById("transformArea").style.color = null;
document.getElementById("transformArea").style.backgroundColor = null;
document.getElementById("resultArea").innerHTML = "";
}
/**
* The `escapeHTML` function is used to escape special characters in an HTML element's innerHTML property.
* This is done to prevent these characters from being interpreted as HTML tags or attributes,
* which could potentially cause security vulnerabilities or unintended behavior.
*
* @function
* @name escapeHTML
* @kind function
* @param {any} element
* @returns {void}
*/
function escapeHTML(elementID) {
document.getElementById(elementID).innerHTML = document.getElementById(elementID).innerHTML
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
/**
* It fills the XML area with a sample XML.
*
@@ -78,8 +103,10 @@ function fillDefaultXML(element) {
fetch(serverAddress + "/assets/samples/sampleXml.xml")
.then(response => response.text())
.then((exampleData) => {
document.getElementById("xmlArea").value = exampleData;
document.getElementById("xmlArea").innerText = exampleData;
highlightSyntax("xmlArea");
document.getElementById("xmlArea").style.backgroundColor = null;
})
}
}
@@ -89,14 +116,16 @@ function fillDefaultXSD(){
fetch(serverAddress + "/assets/samples/sampleXSD.xsd")
.then( response => response.text() )
.then( (XSDSchema) => {
document.getElementById('transformArea').value = XSDSchema;
document.getElementById('transformArea').innerText = XSDSchema;
highlightSyntax("transformArea");
} )
fetch(serverAddress + "/assets/samples/sampleXMLForXSD.xml")
.then( response => response.text() )
.then( (XMLSample) => {
document.getElementById('xmlArea').value = XMLSample;
} )
document.getElementById('xmlArea').innerText = XMLSample;
highlightSyntax("xmlArea");
} )
}
@@ -113,7 +142,8 @@ function fillDefaultXSLT() {
fetch(serverAddress + "/assets/samples/XSLTTemplate.xslt")
.then( response => response.text() )
.then( (XSTLTemplate) => {
document.getElementById('transformArea').value = XSTLTemplate;
document.getElementById('transformArea').innerText = XSTLTemplate;
highlightSyntax("transformArea");
} )
}
@@ -256,8 +286,8 @@ function refreshTooltip() {
function performRequest(endpoint, checkXML, checkTransform) {
const sourceId = "xmlArea";
const transformId = "transformArea";
var xmlData = document.getElementById(sourceId).value.trim();
var transformData = document.getElementById(transformId).value.trim();
var xmlData = document.getElementById(sourceId).innerText.trim();
var transformData = document.getElementById(transformId).innerText.trim();
var port = 8081;
if (getProcessor() == "libxml") {
@@ -276,22 +306,24 @@ function performRequest(endpoint, checkXML, checkTransform) {
}
if (!empty) {
restRequest(port, endpoint, xmlData, transformData).then(function (result) {
document.getElementById("resultArea").value = result.result;
document.getElementById("procinfo").innerText = ' Computed using ' + result.processor
if (result.type)
document.getElementById("procinfo").innerText += ". Returned: " + result.type;
else
document.getElementById("procinfo").innerText += ". Engine doesn't support return of data types.";
document.getElementById("resultArea").innerText = result.result;
highlightSyntax("resultArea");
document.getElementById("procinfo").innerText = ' Computed using ' + result.processor;
if (result.status = "OK") {
if (result.status == "OK") {
document.getElementById("procinfo").innerText += " (" + result.time + "ms)";
if (result.type)
document.getElementById("procinfo").innerText += ". Returned: " + result.type;
else
document.getElementById("procinfo").innerText += ". Engine doesn't support return of data types.";
procinfo.style.color = "#30aa58";
} else {
procinfo.style.color = "#aa3030";
}
});
} else {
document.getElementById("resultArea").value = "No data provided!";
document.getElementById("resultArea").innerHTML = "No data provided!";
return false;
}
@@ -314,7 +346,7 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) {
const targetElement = document.getElementById(targetId);
const infoElement = document.getElementById("formatinfo");
const port = 8082;
var xmlData = sourceElement.value.trim();
var xmlData = sourceElement.innerText.trim();
var empty = false;
if (defaultStrings.includes(xmlData) && checkXML) {
@@ -326,10 +358,13 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) {
if (!empty) {
restRequest(port, endpoint, xmlData, "").then(function (result) {
if (result.status == "OK") {
targetElement.value = result.result;
targetElement.innerText = result.result.trim();
highlightSyntax(targetElement.id);
targetElement.style.backgroundColor = null;
infoElement.innerText = ' Computed'.concat(" in ", result.time, "ms.");
infoElement.style.color = "#30aa58";
}
else {
targetElement.style.backgroundColor = color_red;
@@ -340,6 +375,7 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) {
});
}
}
@@ -388,4 +424,4 @@ async function restRequest(port, endpoint, xmlData, transformData) {
});
return result;
}
}