Added syntax highlighting for XML Tools (#156)

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>

Frontend/assets/css/tools/r11form.css

@@ -505,6 +505,10 @@ h2 {
     font-weight: 300;
 }
 
+pre {
+    margin: 0px;
+}
+
 @media only screen and (max-width: 1024px) {
     .rwd-hideable {
         display: none;

Frontend/assets/scripts/tools/highlight.js

@@ -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);
+      
+  });
+}

Frontend/assets/scripts/tools/scripts.js

@@ -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, "&")
+        .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;
-}
+}