From 1ba2d328e9d7e3b128f64b34c97a88b094ab9ed6 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 25 Apr 2023 12:56:24 +0200
Subject: [PATCH] Added coloring to result field

---
 Frontend/assets/css/tools/r11form.css    | 4 ++++
 Frontend/assets/scripts/tools/scripts.js | 8 +++++---
 Frontend/tools/xpath.html                | 7 ++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/Frontend/assets/css/tools/r11form.css b/Frontend/assets/css/tools/r11form.css
index 4430b85..d73a294 100644
--- a/Frontend/assets/css/tools/r11form.css
+++ b/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;
diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js
index 5e1438e..906c24f 100644
--- a/Frontend/assets/scripts/tools/scripts.js
+++ b/Frontend/assets/scripts/tools/scripts.js
@@ -279,7 +279,7 @@ function refreshTooltip() {
 function performRequest(endpoint, checkXML, checkTransform) {
     const sourceId = "xmlArea";
     const transformId = "transformArea";
-    var xmlData = document.getElementById(sourceId).value.trim();
+    var xmlData = document.getElementById(sourceId).innerText.trim();
     var transformData = document.getElementById(transformId).value.trim();
     
     var port = 8081;
@@ -299,7 +299,9 @@ function performRequest(endpoint, checkXML, checkTransform) {
     }
     if (!empty) {
         restRequest(port, endpoint, xmlData, transformData).then(function (result) {
-            document.getElementById("resultArea").value = result.result;
+            document.getElementById("resultArea").innerHTML = result.result;
+            escapeHTML(document.getElementById("resultArea"));
+            hljs.highlightAll();
             document.getElementById("procinfo").innerText = ' Computed using ' + result.processor
             if (result.type)
                 document.getElementById("procinfo").innerText += ". Returned: " + result.type;
@@ -314,7 +316,7 @@ function performRequest(endpoint, checkXML, checkTransform) {
             }
         });
     } else {
-        document.getElementById("resultArea").value = "No data provided!";
+        document.getElementById("resultArea").innerHTML = "No data provided!";
         return false;
     }
     
diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html
index 8eeec3f..1ea043e 100644
--- a/Frontend/tools/xpath.html
+++ b/Frontend/tools/xpath.html
@@ -53,7 +53,7 @@
                     class="textarea-300 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-300" id="xmlArea" contenteditable="True"></code></pre>
+                <pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
                 <br><br>
                 <label for="transformArea"><b>Insert your XPath:</b></label>
                 <textarea id="transformArea" name="transformArea" class="bordered-field vertically-resizeable max-width"
@@ -65,9 +65,10 @@
                     expression</button>
                 <br><br>
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
-                <textarea disabled id="resultArea" name="resultArea"
+                <!-- <textarea disabled id="resultArea" name="resultArea"
                     class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;"
-                    rows="10" cols="100"></textarea>
+                    rows="10" cols="100"></textarea> -->
+                <pre><code class="language-xml bordered-field textarea-300" id="resultArea" contenteditable="True"></code></pre>
 
             </div>
         </div>