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>
This commit is contained in:
2023-05-08 11:11:16 +02:00
parent 21f5911b1c
commit c55942c24a
11 changed files with 1394 additions and 104 deletions

View File

@@ -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>