Froze Release11.2 (#177)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-authored-by: Dariusz Augustyniak <augustyd@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Reviewed-on: #177

Frontend/assets/css/frame.css

@@ -142,4 +142,9 @@ div#copyright a, a:visited,  a:active {
 #menu a:hover {
     transform: scale(1.25, 1.25);
     transition-duration: .3s;
+}
+
+.separator{
+    width: 100%;
+    padding:6px;
 }

Frontend/assets/css/tools/r11form.css

@@ -440,12 +440,11 @@ body {
 
 .content {
     padding: 0px 15px 0px 15px ;
-    text-align: justify;
+    text-align: left;
     overflow: hidden;
     transition: max-height .2s ease-out;
     max-height: 0px;
     border-left: #c0c2c3 2px solid;
-    
 }
 
 .collapsibleMini::before{
@@ -506,6 +505,10 @@ h2 {
     font-weight: 300;
 }
 
+pre {
+    margin: 0px;
+}
+
 @media only screen and (max-width: 1024px) {
     .rwd-hideable {
         display: none;

Frontend/assets/samples/XSLTTemplate.xslt

@@ -0,0 +1,14 @@
+<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>
+                <xsl:value-of select="count(//p:person)" />
+            </ReaderCount>
+            <BookCount>
+                <xsl:value-of select="count(/l:library/l:bookList/b:book)" />
+            </BookCount>
+        </Library>
+    </xsl:template>
+</xsl:stylesheet>

Frontend/assets/samples/sampleXMLForXSD.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<library>
+    <libraryName>City library</libraryName>
+    <libraryID>345123</libraryID>
+    <readerList>
+        <person>
+            <readerID>7321</readerID>
+            <name>Adam</name>
+            <surname>Choke</surname>
+        </person>
+        <person>
+            <readerID>5123</readerID>
+            <name>Lauren</name>
+            <surname>Wong</surname>
+        </person>
+    </readerList>
+    <bookList>
+        <book>
+            <bookID>6422</bookID>
+            <title>Harry Potter</title>
+            <readerID>7542</readerID>
+        </book>
+        <book>
+            <bookID>1234</bookID>
+            <title>Macbeth</title>
+            <readerID>5123</readerID>
+        </book>
+        <book>
+            <bookID>9556</bookID>
+            <title>Romeo and Juliet</title>
+        </book>
+    </bookList>
+</library>

Frontend/assets/samples/sampleXSD.xsd

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified"
+  targetNamespace="">
+  <xsd:element name="library">
+    <xsd:complexType mixed="true">
+      <xsd:sequence>
+        <xsd:element minOccurs="0" name="libraryName" type="xsd:string" />
+        <xsd:element minOccurs="0" name="libraryID" type="xsd:int" />
+        <xsd:element minOccurs="0" name="readerList">
+          <xsd:complexType mixed="true">
+            <xsd:sequence>
+              <xsd:element maxOccurs="unbounded" name="person">
+                <xsd:complexType mixed="true">
+                  <xsd:sequence>
+                    <xsd:element minOccurs="0" name="readerID" type="xsd:int" />
+                    <xsd:element minOccurs="0" name="name" type="xsd:normalizedString" />
+                    <xsd:element minOccurs="0" name="surname" type="xsd:normalizedString" />
+                  </xsd:sequence>
+                </xsd:complexType>
+              </xsd:element>
+            </xsd:sequence>
+          </xsd:complexType>
+        </xsd:element>
+        <xsd:element minOccurs="0" name="bookList">
+          <xsd:complexType mixed="true">
+            <xsd:sequence>
+              <xsd:element maxOccurs="unbounded" name="book">
+                <xsd:complexType mixed="true">
+                  <xsd:sequence>
+                    <xsd:element minOccurs="0" name="bookID" type="xsd:int" />
+                    <xsd:element minOccurs="0" name="title" type="xsd:string" />
+                    <xsd:element minOccurs="0" name="readerID" type="xsd:int" />
+                  </xsd:sequence>
+                </xsd:complexType>
+              </xsd:element>
+            </xsd:sequence>
+          </xsd:complexType>
+        </xsd:element>
+      </xsd:sequence>
+    </xsd:complexType>
+  </xsd:element>
+</xsd:schema>

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,12 +103,50 @@ 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;
+            
         })
     }
 }
 
+function fillDefaultXSD(){
+    const serverAddress = window.location.protocol + "//" + window.location.hostname + ":8086";
+    fetch(serverAddress + "/assets/samples/sampleXSD.xsd")
+        .then( response => response.text() )
+        .then( (XSDSchema) => {
+            document.getElementById('transformArea').innerText = XSDSchema;
+            highlightSyntax("transformArea");
+        } )
+    fetch(serverAddress + "/assets/samples/sampleXMLForXSD.xml")
+        .then( response => response.text() )
+        .then( (XMLSample) => {
+            document.getElementById('xmlArea').innerText = XMLSample;
+            highlightSyntax("xmlArea");
+        } )
+    
+}
+
+
+/**
+ * The `fillDefaultXSLT()` function fetches a default XSLT template from the server and sets the value of the element with id "transformArea" to the fetched template.
+ * 
+ * @function
+ * @name fillDefaultXSLT
+ * @kind function
+ * @returns {void}
+ */
+function fillDefaultXSLT() {
+    const serverAddress = window.location.protocol + "//" + window.location.hostname + ":8086";
+    fetch(serverAddress + "/assets/samples/XSLTTemplate.xslt")
+        .then( response => response.text() )
+        .then( (XSTLTemplate) => {
+            document.getElementById('transformArea').innerText = XSTLTemplate;
+            highlightSyntax("transformArea");
+        } )   
+}
+
 /**
 * It sets default content for the element an changes it's color to grey
 * 
@@ -223,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") {
@@ -243,17 +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 '.concat(" ", result.processor);
-            if (result.status = "OK") {
-                document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
+            document.getElementById("resultArea").innerText = result.result;
+            highlightSyntax("resultArea");
+            document.getElementById("procinfo").innerText = ' Computed using ' + result.processor;
+            
+                
+            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;
     }
     
@@ -276,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) {
@@ -288,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;
@@ -302,6 +375,7 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) {
         });
     }
     
+    
 }
 
 
@@ -350,4 +424,4 @@ async function restRequest(port, endpoint, xmlData, transformData) {
         
     });
     return result;
-}
+}