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/Dockerfile

@@ -4,6 +4,7 @@ COPY ./tools/ /usr/share/nginx/html/tools/
 COPY ./lawful/ /usr/share/nginx/html/lawful/
 COPY ./assets/ /usr/share/nginx/html/assets/
 COPY ./index.html /usr/share/nginx/html
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
 RUN mkdir -p /scripts
 COPY insert_version.sh /scripts/

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

Frontend/index.html

@@ -2,14 +2,19 @@
 <html>
 
 <head>
-    <meta charset="UTF-8">
     <link rel="stylesheet" href="assets/css/frame.css">
     <script src="assets/scripts/common/jquery-3.6.0.slim.min.js"></script>
     <script src="assets/scripts/dyn_host.js"></script>
     <script src="assets/scripts/frame.js"></script>
-
     <!-- <link rel="stylesheet" href="common.css"> -->
     <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"> 
+    <!-- Meta tags for SEO and SEM -->
+    <title>Release11 Web Tools</title>
+    <meta name=”robots” content="index, nofollow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+    <meta name="description"
+     content="Unleash the power of Release11's suite of intuitive web tools, including XPath, XSLT, XSD, XML Formatter, JSON Formatter, and REST Mocking services, designed to streamline your development experience and elevate your projects.">
 </head>
 
 <body onload="init()">
@@ -43,7 +48,9 @@
                 Copyright © 2023<br>
                 <a href="http://release11.com/">Release11 Sp. z. o. o.</a><br>
                 <a href="lawful/terms-of-service.html">Terms of use</a><br>
-                <a href="lawful/privacy-policy.html">Privacy statement</a>
+                <a href="lawful/privacy-policy.html">Privacy statement</a><bR>
+                <div class="separator"></div>
+                <a href="mailto:bugs@release11.com">Found a bug?</a>
             </div>
         </div>
         <iframe id="frame" name="iframe" src="./tools/xpath.html" frameborder="0"></iframe>

Frontend/nginx.conf

@@ -0,0 +1,24 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        expires -1;
+        add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+}

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/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>
@@ -36,32 +40,25 @@
                         <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
                             onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Format XML</button>
                         <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
-                            onclick="fillDefaultXML(this)">Insert default XML</button>
+                            onclick="fillDefaultXSD(this);">Insert default XML/XSD</button>
                     </div>
                 </div>
 
                 <!-- <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>
@@ -25,7 +31,7 @@
                             <option value="libxml">libXML</option>
                         </select>
                         <select name="versions" id="versions" style="display: none;">
-                            <option class="hideable libxml xalan"value="1.0">1.0</option>
+                            <option class="hideable libxml xalan" value="1.0">1.0</option>
                             <option class="hideable saxon" value="2.0">2.0</option>
                             <option class="hideable saxon" value="3.0">3.0</option>
                             <option class="hideable saxon" value="3.1">3.1</option>
@@ -45,26 +51,25 @@
                 <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 XSLT:</b></label>
-                <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>
+                <div class="display-space-between">
+                    <label for="transformArea"><b>Insert your XSLT:</b></label>
+                    <div>
+                        <button class="action-button active" id="defaultXSLTButton" style="padding: 3px 10px;"
+                            onclick="fillDefaultXSLT()">Insert default XSLT
+                        </button>
+                    </div>
+                </div>
+                <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>
@@ -1144,7 +1149,7 @@
 
     <script>
         function processTooltip() {
-            
+
             if (getProcessor() == "xalan" || getProcessor() == "libxml") {
                 document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0 functions";
                 document.getElementById("processorTooltipInfo").innerText = "Supports XSLT 1.0";
@@ -1158,9 +1163,9 @@
 
         var triggerList = document.getElementsByClassName("collapseTrigger");
         for (i = 0; i < triggerList.length; i++) {
-            
+
             triggerList[i].addEventListener("click", function () {
-                
+
                 var collapsible = this.parentElement;
                 var collapsibleData = this.nextElementSibling;
                 if (collapsibleData.style.maxHeight > "0px") {
@@ -1194,10 +1199,14 @@
         }
 
         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');
-            
+
             // refreshTooltip();
             processTooltip();
             tool.addEventListener('click', event => {
@@ -1218,8 +1227,11 @@
                 }
 
                 processTooltip();
+                
             })
+            
         }
+        
     </script>
 
 </body>