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>
2023-05-08 11:11:16 +02:00
parent 21f5911b1c
commit c55942c24a
11 changed files with 1394 additions and 104 deletions
--- a/Frontend/tools/jsonFormatter.html
+++ b/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>
--- a/Frontend/tools/xmlFormatter.html
+++ b/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>

--- a/Frontend/tools/xpath.html
+++ b/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>
--- a/Frontend/tools/xsd.html
+++ b/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();
-                // 
+                
            })
        }

--- a/Frontend/tools/xslt.html
+++ b/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>