Syntax highlighting works fully for XPath

Frontend/assets/scripts/tools/scripts.js

@@ -74,8 +74,8 @@ function clearDataField() {
  * @param {any} element
  * @returns {void}
  */
-function escapeHTML(element) {
+function escapeHTML(elementID) {
-    element.innerHTML = element.innerHTML
+    document.getElementById(elementID).innerHTML = document.getElementById(elementID).innerHTML
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
@@ -83,6 +83,11 @@ function escapeHTML(element) {
         .replace(/'/g, "&#039;");
 }
 
+function highlightSyntax(elementId) {
+    const element = document.getElementById(elementId);
+    element.innerHTML = hljs.highlightAuto(element.innerText).value
+}
+
 /**
 * It fills the XML area with a sample XML.
 * 
@@ -99,10 +104,10 @@ function fillDefaultXML(element) {
         fetch(serverAddress + "/assets/samples/sampleXml.xml")
         .then(response => response.text())
         .then((exampleData) => {
-            document.getElementById("xmlArea").innerHTML = exampleData;
+            document.getElementById("xmlArea").innerText = exampleData;
-            escapeHTML(document.getElementById("xmlArea"));
+            highlightSyntax("xmlArea");
             document.getElementById("xmlArea").style.backgroundColor = null;
-            hljs.highlightAll();
+            
         })
     }
 }
@@ -299,17 +304,17 @@ function performRequest(endpoint, checkXML, checkTransform) {
     }
     if (!empty) {
         restRequest(port, endpoint, xmlData, transformData).then(function (result) {
-            document.getElementById("resultArea").innerHTML = result.result;
+            document.getElementById("resultArea").innerText = result.result;
-            escapeHTML(document.getElementById("resultArea"));
+            highlightSyntax("resultArea");
-            hljs.highlightAll();
+            document.getElementById("procinfo").innerText = ' Computed using ' + result.processor;
-            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.";
             
-            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";
@@ -339,7 +344,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) {
@@ -351,10 +356,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;
@@ -365,6 +373,7 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) {
         });
     }
     
+    
 }
 
 

Frontend/tools/xpath.html

@@ -68,7 +68,7 @@
                 <!-- <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" contenteditable="True"></code></pre>
+                <pre><code class="language-xml bordered-field textarea-300" id="resultArea" "></code></pre>
 
             </div>
         </div>
@@ -17266,6 +17266,43 @@
             })
         }
 
+        const editorEle = document.getElementById('xmlArea');
+
+        // 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);
+                highlightSyntax(editorEle.id);
+            } 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);
+
+            
+            }
+            
+        });
+    
     </script>
 
 </body>