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

Frontend/tools/jsonFormatter.html

@@ -6,14 +6,15 @@
     <meta charset="utf-8" />
 
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
-    <link rel="stylesheet" href="../assets/css/json.css">
+    <link rel="stylesheet" href="../assets/css/highlight.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="../assets/scripts/tools/scripts.js"></script>
+    <script src="../assets/scripts/tools/highlight.js"></script>
     <script src="../assets/scripts/tools/json.js"></script>
     <script>hljs.highlightAll();</script>
   </head>
 
-  <body>
+  <body onload="init()">
     <div class="container">
       <div id="tool" class="tool rwd-expandable">
         <div class="tool-context">
@@ -224,38 +225,11 @@
 
       hljs.addPlugin(mergeHTMLPlugin);
 
-      const editorEle = document.getElementById('jsonBlock');
-
-      // 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);
-        }
-      });
+      function init() {
+        // Make sure that only plain text is pasted
+        configurePastingInElement("jsonBlock");
+        
+      }
     </script>
   </body>
 </html>

Frontend/tools/xmlFormatter.html

@@ -4,7 +4,12 @@
     <head>
         <!-- <link rel="stylesheet" href="styles.css"> -->
         <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+        <link rel="stylesheet" href="../assets/css/highlight.css">
+        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
         <script src="../assets/scripts/tools/scripts.js"></script>
+        <script src="../assets/scripts/tools/highlight.js"></script>
+        <script>hljs.highlightAll();</script>
+
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta charset="utf-8" />
     </head>
@@ -34,10 +39,7 @@
 
                     </div>
 
-                    <textarea id="xmlArea" name="xmlArea" rows="15"
-                        class="textarea-700 bordered-field vertically-resizeable max-width"
-                        onblur="setDefaultContent(this, 'Insert XML here');"
-                        onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
+                    <pre><code class="language-xml bordered-field textarea-700" id="xmlArea" contenteditable="True"></code></pre>
                     <br><br>
                     <button id="prettifyButton" class="max-width block-label action-button active"
                         onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Prettify XML</button>
@@ -70,7 +72,7 @@
             }
 
             function init() {
-                setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
+                configurePastingInElement("xmlArea");
             }
         </script>
 

Frontend/tools/xpath.html

@@ -2,10 +2,13 @@
 <html>
 
 <head>
-    <!-- <link rel="stylesheet" href="../common.css"> -->
-    <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
-    <script src="../assets/scripts/tools/scripts.js"> </script>
+    <link rel="stylesheet" href="../assets/css/highlight.css">
+    <script src="../assets/scripts/common/hljs.min.js"></script>
+    <script src="../assets/scripts/tools/scripts.js"></script>
+    <script src="../assets/scripts/tools/highlight.js"></script>
+    <script>hljs.highlightAll();</script>
+    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
@@ -46,24 +49,17 @@
                 </div>
                 <br>
                 <label for="xmlArea"><b>Insert your XML:</b></label>
-                <textarea id="xmlArea" name="xmlArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
-                    onblur="setDefaultContent(this, 'Insert XML here');"
-                    onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
-                <br><br>
+                <pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
+                <br>
                 <label for="transformArea"><b>Insert your XPath:</b></label>
-                <textarea id="transformArea" name="transformArea" class="bordered-field vertically-resizeable max-width"
-                    rows="4" onblur="setDefaultContent(this, 'Insert XPath expression here');"
-                    onfocus="clearDefaultContent(this,  'Insert XPath expression here');"></textarea>
+                <pre><code class="language-xml bordered-field" id="transformArea" contenteditable="True"></code></pre>
                 <br>
                 <button id="requestButton" class="max-width block-label action-button active"
                     onclick="performRequest('xpath', false, true)">Execute XPath
                     expression</button>
-                <br><br>
+                <br>
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
-                <textarea disabled id="resultArea" name="resultArea"
-                    class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;"
-                    rows="10" cols="100"></textarea>
+                <pre><code class="language-xml bordered-field textarea-300" id="resultArea"></code></pre>
 
             </div>
         </div>
@@ -17223,6 +17219,10 @@
         }
 
         function init() {
+            // Make sure that only plain text is pasted
+            configurePastingInElement("xmlArea");
+            configurePastingInElement("transformArea");
+
             //Handle clicks in whole form and set info in tooltip
             setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
             setDefaultContent(document.getElementById("transformArea"), 'Insert XPath expression here');
@@ -17261,6 +17261,8 @@
             })
         }
 
+        
+    
     </script>
 
 </body>

Frontend/tools/xsd.html

@@ -4,7 +4,11 @@
 <head>
     <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+    <link rel="stylesheet" href="../assets/css/highlight.css">
+    <script src="../assets/scripts/common/hljs.min.js"></script>
     <script src="../assets/scripts/tools/scripts.js"></script>
+    <script src="../assets/scripts/tools/highlight.js"></script>
+    <script>hljs.highlightAll();</script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
@@ -43,25 +47,18 @@
                 <!-- <span id="processorTooltipInfo">procInfo</span><br> -->
 
                 <label for="xmlArea"><b>Insert your XML:</b></label>
-                <textarea id="xmlArea" name="xmlArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
-                    onblur="setDefaultContent(this, 'Insert XML here');"
-                    onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
-                <br><br>
+                <pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
+                <br>
 
                 <label for="transformArea"><b>Insert your XSD:</b></label>
-                <textarea id="transformArea" name="transformArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
-                    onblur="setDefaultContent(this, 'Insert XSD here');"
-                    onfocus="clearDefaultContent(this, 'Insert XSD here');"></textarea>
+                <pre><code class="language-xml bordered-field textarea-300" id="transformArea" contenteditable="True"></code></pre>
                 <br>
                 <button id="requestButton" class="max-width block-label action-button active"
                     onclick="performRequest('xsd', true, true)">Verify XSD</button>
-                <br><br>
+                <br>
 
                 <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
-                <textarea disabled id="resultArea" name="resultArea" rows="2"
-                    class="bordered-field vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
+                <pre><code class="language-xml bordered-field" id="resultArea"></code></pre>
 
             </div>
         </div>
@@ -84,6 +81,10 @@
 
     <script>
         function init() {
+            // Make sure that only plain text is pasted
+            configurePastingInElement("xmlArea");
+            configurePastingInElement("transformArea");
+
             //Handle clicks in whole form and set info in tooltip
             setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
             setDefaultContent(document.getElementById("transformArea"), 'Insert XSD here');
@@ -98,7 +99,7 @@
                 }
 
                 processTooltip();
-                // 
+                
             })
         }
 

Frontend/tools/xslt.html

@@ -4,7 +4,13 @@
 <head>
     <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+    <link rel="stylesheet" href="../assets/css/highlight.css">
+    <script src="../assets/scripts/common/hljs.min.js"></script>
     <script src="../assets/scripts/tools/scripts.js"></script>
+    <script src="../assets/scripts/tools/highlight.js"></script>
+    <script>hljs.highlightAll();</script>
+
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
@@ -45,11 +51,8 @@
                 <br>
 
                 <label for="xmlArea"><b>Insert your XML:</b></label>
-                <textarea id="xmlArea" name="xmlArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
-                    onblur="setDefaultContent(this, 'Insert XML here');"
-                    onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
-                <br><br>
+                <pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
+                <br>
 
                 <div class="display-space-between">
                     <label for="transformArea"><b>Insert your XSLT:</b></label>
@@ -59,19 +62,14 @@
                         </button>
                     </div>
                 </div>
-                <textarea id="transformArea" name="transformArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
-                    onblur="setDefaultContent(this, 'Insert XSLT here');"
-                    onfocus="clearDefaultContent(this, 'Insert XSLT here');"></textarea>
+                <pre><code class="language-xml bordered-field textarea-300" id="transformArea" contenteditable="True"></code></pre>
                 <br>
                 <button id="requestButton" class="max-width block-label action-button active"
                     onclick="performRequest('xslt', true, true)">Execute XSLT transform</button>
-                <br><br>
+                <br>
 
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
-                <textarea disabled id="resultArea" name="resultArea" rows="10"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
-                    style="margin-bottom: 50px;"></textarea>
+                <pre><code class="language-xml bordered-field textarea-300" id="resultArea"></code></pre>
 
             </div>
         </div>
@@ -1201,6 +1199,10 @@
         }
 
         function init() {
+            // Make sure that only plain text is pasted
+            configurePastingInElement("xmlArea");
+            configurePastingInElement("transformArea");
+
             //Handle clicks in whole form and set info in tooltip
             setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
             setDefaultContent(document.getElementById("transformArea"), 'Insert XSLT here');
@@ -1225,8 +1227,11 @@
                 }
 
                 processTooltip();
+                
             })
+            
         }
+        
     </script>
 
 </body>

Samples/xslt/sampleXSLT.xslt

@@ -1,4 +1,4 @@
-<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:b="http://www.demo.com" xmlns:p="http://www.release11.com/person" xmlns:l="http://www.release11.com/library">
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:b="http://www.release11.com/book" xmlns:p="http://www.release11.com/person" xmlns:l="http://www.release11.com/library">
     <xsl:template match="/">
 		<Library>
 			<ReaderCount>