templates section done

Reviewed-on: #299
Reviewed-by: Wojciech Szewczyk <szewczyw@noreply.example.com>

Backend-libXML/Parser.py

@@ -79,9 +79,11 @@ def xpath(source: str, xpath: str) -> str:
     else:
         result_string = ""
         for e in result:
-            result_string += etree.tostring(e, pretty_print=True).decode() + "\n"
-        return result_string, "node"
-
+            if isinstance(e, etree._Element):
+                result_string += etree.tostring(e, pretty_print=True).decode() + "\n"
+            else:
+                result_string += str(e) + "\n"
+    return result_string, "node"
 
 
 def xsd(source: str, xsd: str) -> bool:

Backend/tools-services/src/main/java/com/r11/tools/controller/XmlController.java

@@ -10,8 +10,6 @@ import org.apache.logging.log4j.Logger;
 import spark.Request;
 import spark.Response;
 
-import java.io.StringWriter;
-
 /**
  * Controller used to handle XML tools: XPath, XSD validation, XQuery and XSLT
  * @author Adam Bem
@@ -50,14 +48,9 @@ public class XmlController implements RestController {
 
     @ScopedControllerManifest(method = HandlerType.POST, path = "/xslt")
     public void acceptRequestXslt(Request request, Response response) {
-        System.out.println("received xslt");
         acceptRequest(request, response, XmlJobType.XSLT);
     }
-    @ScopedControllerManifest(method = HandlerType.POST, path = "/xslt/param")
-    public void acceptRequestXsltAddParam(Request request, Response response) {
-        System.out.println("received param");
-        acceptRequest(request, response, XmlJobType.XSLT_PARAM);
-    }
+
     private void acceptRequest(Request request, Response response, XmlJobType xmlJobType) {
         XMLRequestBody requestBody;
         try {
@@ -67,12 +60,7 @@ public class XmlController implements RestController {
             return;
         }
 
-        if (requestBody.getProcessor() == null ) {
-            if(requestBody.getProcessorData() != null){
-                processRequest(new XmlJob(response, requestBody, xmlJobType));
-                return;
-            }
-            System.out.println("getProcessor=null");
+        if (requestBody.getProcessor() == null) {
             invalidEngineSelectedResponse(response);
             return;
         }
@@ -103,9 +91,10 @@ public class XmlController implements RestController {
             responseBody.setDuration(duration);
 
             xmlJob.getResponse().status(200);
-           /* this.logger.info("Request (" + xmlJob.getXmlJobType() + ", " +
+
+            this.logger.info("Request (" + xmlJob.getXmlJobType() + ", " +
                     xmlJob.getEngine().getVersion() +
-                    ") processed in " + duration + " ms.");*/
+                    ") processed in " + duration + " ms.");
 
         } catch (Exception ex) {
             responseBody = processingErrorResponse(ex, xmlJob);
@@ -140,13 +129,6 @@ public class XmlController implements RestController {
 
         String result = null;
         switch (xmlJob.getXmlJobType()) {
-            case XSLT_PARAM:
-                System.out.println("xstl_param");
-                System.out.println(requestBody.getProcessorData());
-                System.out.println(requestBody.getParamName());
-                System.out.println(requestBody.getParamValue());
-                result = addParam(requestBody.getProcessorData(), requestBody.getParamName(), requestBody.getParamValue());
-                break;
             case XSLT:
                 result = engine.processXSLT(requestBody.getData(), requestBody.getProcessorData());
                 break;
@@ -159,16 +141,7 @@ public class XmlController implements RestController {
                         requestBody.getVersion());
                 break;
         }
-        System.out.println("can we get here?");
-        return new XMLResponseBody(result, "OK", requestBody.getProcessorData());
-    }
-
-    private String addParam(String processorData, String paramName, String paramValue) {
-        System.out.println("addParamSaxon");
-        processorData= processorData.replace("<xsl:template match=\"/\">", "<xsl:param name=\""+paramName+"\" select=\"'"+paramValue+"'\"/>\n\t\t<xsl:template match=\"/\">");
-        StringWriter sw = new StringWriter();
-        sw.write(processorData);
-        return sw.toString();
+        return new XMLResponseBody(result, "OK", requestBody.getVersion());
     }
 
     private XMLResponseBody processingErrorResponse(Exception ex, XmlJob xmlJob) {

Backend/tools-services/src/main/java/com/r11/tools/controller/internal/XmlJob.java

@@ -7,7 +7,7 @@ import spark.Response;
 public class XmlJob {
     private final Response response;
     private final XMLRequestBody requestBody;
-    private XmlEngine engine;
+    private final XmlEngine engine;
     private final XmlJobType xmlJobType;
 
     public XmlJob(Response response, XMLRequestBody requestBody, XmlEngine engine, XmlJobType xmlJobType) {
@@ -16,11 +16,7 @@ public class XmlJob {
         this.engine = engine;
         this.xmlJobType = xmlJobType;
     }
-    public XmlJob(Response response, XMLRequestBody requestBody, XmlJobType xmlJobType) {
-        this.response = response;
-        this.requestBody = requestBody;
-        this.xmlJobType = xmlJobType;
-    }
+
     public Response getResponse() {
         return response;
     }

Backend/tools-services/src/main/java/com/r11/tools/controller/internal/XmlJobType.java

@@ -1,7 +1,7 @@
 package com.r11.tools.controller.internal;
 
 public enum XmlJobType {
-    XPath("XPath"), XSD("XSD"), XQuery("XQuery"), XSLT("XSLT"), XSLT_PARAM("XSLT_PARAM");
+    XPath("XPath"), XSD("XSD"), XQuery("XQuery"), XSLT("XSLT");
 
     XmlJobType(String type) {
     }

Backend/tools-services/src/main/java/com/r11/tools/model/XMLRequestBody.java

@@ -15,20 +15,19 @@ public class XMLRequestBody {
     private String processor;
     @SerializedName("version")
     private String version;
-    @SerializedName("paramName")
-    private String paramName;
-    @SerializedName("paramValue")
-    private String paramValue;
 
     public String getData() {
         return data;
     }
-    public String getProcessorData() {return processorData;}
-    public String getParamName() {return paramName;}
-    public String getParamValue() {return paramValue;}
+
+    public String getProcessorData() {
+        return processorData;
+    }
+
     public String getProcessor() {
         return processor;
     }
+
     public String getVersion() {
         return version;
     }

Backend/tools-services/src/main/java/com/r11/tools/xml/Saxon.java

@@ -164,9 +164,4 @@ public class Saxon implements XmlEngine{
     public String getVersion() {
         return "Saxon " + new Processor(false).getSaxonProductVersion();
     }
-
-    @Override
-    public String addParam(String data, String processorData) throws Exception {
-        return null;
-    }
 }

Backend/tools-services/src/main/java/com/r11/tools/xml/Xalan.java

@@ -61,6 +61,13 @@ public class Xalan implements XmlEngine{
         return nodeType == Node.CDATA_SECTION_NODE || nodeType == Node.TEXT_NODE;
     }
 
+    private boolean isAttributeNode(Node n) {
+        if (n == null)
+            return false;
+        short nodeType = n.getNodeType();
+        return nodeType == Node.CDATA_SECTION_NODE || nodeType == Node.ATTRIBUTE_NODE;
+    }
+
     @Override
     public String processXSLT(XMLMultipleFilesData[] data, String transform) throws Exception {
         throw new UnsupportedOperationException("Xalan does not support multiple files XSLT processing");
@@ -101,7 +108,10 @@ public class Xalan implements XmlEngine{
                     for (Node nn = n.getNextSibling(); isTextNode(nn); nn = nn.getNextSibling()) {
                         resultString.append(nn.getNodeValue());
                     }
-                } else {
+                } else if (isAttributeNode(n)) {
+                    resultString.append(n.getNodeValue());
+                }
+                else {
                     ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                     serializer.transform(new DOMSource(n), new StreamResult(new OutputStreamWriter(outputStream)));
                     resultString.append(outputStream);
@@ -124,11 +134,6 @@ public class Xalan implements XmlEngine{
         return org.apache.xalan.Version.getVersion();
     }
 
-    @Override
-    public String addParam(String data, String processorData) throws Exception {
-        return null;
-    }
-
     /**
      * Validates string representation of the xml document against xsd schema
      * @param data xml document

Backend/tools-services/src/main/java/com/r11/tools/xml/XmlEngine.java

@@ -9,7 +9,9 @@ public interface XmlEngine {
     XPathQueryResult processXPath(String data, String query, String version) throws Exception;
     String processXSLT(String data, String transform) throws Exception;
     String validate(String data, String xsd) throws Exception;
+
     String executeXQuery(String data, String xquery, String version) throws Exception;
+
     public String getVersion();
-    String addParam(String processorData, String paramName, String paramValue) throws Exception;
+
 }

Frontend/src/components/XsltParamComponent.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import {defineComponent, ref} from 'vue'
-const selected = ref('A')
-
-let options = ref([
-  { text: 'One', value: 'A' },
-  { text: 'Two', value: 'B' },
-  { text: 'Three', value: 'C' }
-])
-</script>
-
-<template>
-  <select v-model="selected" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-2/3" >
-    <option v-for="option in options" :value="option.value">
-      {{ option.text }}
-    </option>
-  </select>
-
-  <input
-      id="textInput1"
-      class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
-      type="text"
-      placeholder="Name"
-  />
-  <input
-      id="textInput2"
-      class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
-      type="text"
-      placeholder="Value"
-  />
-  <button class="tool-button" @click="clear">Add Variable</button>
-</template>
-

Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,7 +2,8 @@
 import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
-import { espresso } from 'thememirror';
+import { createTheme} from 'thememirror';
+import {tags as t} from '@lezer/highlight';
 import {xml} from '@codemirror/lang-xml'
 import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
@@ -18,6 +19,47 @@ const props= defineProps({
     },
 })
 
+const lightTheme = createTheme({
+	variant: 'light',
+	settings: {
+		background: '#FFFFFF',
+		foreground: '#000000',
+		caret: '#000000',
+		selection: '#80C7FF',
+		gutterBackground: '#FFFFFF',
+		gutterForeground: '#00000070',
+		lineHighlight: '#C1E2F840',
+	},
+	styles: [
+		{
+			tag: t.comment,
+			color: '#AAAAAA',
+		},
+		{
+			tag: [t.keyword, t.operator, t.typeName, t.tagName, t.propertyName],
+			color: '#2F6F9F',
+			fontWeight: 'bold',
+		},
+		{
+			tag: [t.attributeName, t.definition(t.propertyName)],
+			color: '#4F9FD0',
+		},
+		{
+			tag: [t.className, t.string, t.special(t.brace)],
+			color: '#CF4F5F',
+		},
+		{
+			tag: t.number,
+			color: '#CF4F5F',
+			fontWeight: 'bold',
+		},
+		{
+			tag: t.variableName,
+			fontWeight: 'bold',
+		},
+	],
+});
+
 const emit = defineEmits(
   [
     'update:updatedCode'
@@ -37,7 +79,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return espresso;
+    return lightTheme;
 }
 
 function isDarkModeSet(){
@@ -83,4 +125,4 @@ function parseLanguage(name: String){
       />
     
   </div>
-</template>
+</template>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -2,14 +2,13 @@
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
-import XsltParamComponent from '@/components/XsltParamComponent.vue'
 
-import {ref} from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps(
     {
-      stylizedName: {type: String, required: true},
-      data: {type: String},
+        stylizedName: {type: String, required: true},
+        data: {type: String},
     }
 )
 const emit = defineEmits(['update:modelValue'])
@@ -18,72 +17,54 @@ const data = ref('')
 const inputFile = ref()
 
 function sendValue() {
-  emit('update:modelValue', data.value)
+    emit('update:modelValue', data.value)
 }
 
-
 function updateData(newData: string, clearFileSelector: boolean = true) {
-  data.value = newData
-  if (clearFileSelector)
-    inputFile.value.value = '';
-  sendValue()
+    data.value = newData
+    if (clearFileSelector)
+        inputFile.value.value = '';
+    sendValue()
 }
 
 function clear() {
-  updateData('')
+    updateData('')
 }
 
 function canBeFormatted() {
-  return props.stylizedName.toLowerCase() == 'xml' ||
-      props.stylizedName.toLowerCase() == 'xsd' ||
-      props.stylizedName.toLowerCase() == 'xslt'
+    return props.stylizedName.toLowerCase() == 'xml' || 
+           props.stylizedName.toLowerCase() == 'xsd' || 
+           props.stylizedName.toLowerCase() == 'xslt'
 }
 
-function addParameters() {
-  return props.stylizedName?.toLowerCase() == "xslt"
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        let result = reader.result?.toString()
+        if (typeof result == "string")
+            updateData(result, false);
+            
+    }
+    reader.readAsText(file.target.files[0])
 }
 
-function readFile(file: any) {
-
-  const reader = new FileReader()
-  reader.onloadend = () => {
-    let result = reader.result?.toString()
-    if (typeof result == "string")
-      updateData(result, false)
-
-  }
-  reader.readAsText(file.target.files[0])
-}
-
-
-
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
-    <div class="flex justify-between mb-2"></div>
-
-    <div class="flex place-content-between w-full items-center">
-
-      <span class="dark:text-white mr-2">{{ stylizedName }}</span>
-
-      <div class="flex items-stretch w-64">
-        <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile"/>
-      </div>
-
-      <div class="flex space-x-2 pb-2 overflow-x-auto">
-        <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
-        <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
-        <button class="tool-button" @click="clear">Clear</button>
-      </div>
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
+        <div class="flex place-content-between w-full items-center">
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-auto">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+                </div>
+                
+                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
+                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+                <button class="tool-button" @click="clear">Clear</button>
+            </div>
+        </div>
+        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
     </div>
-
-    <div class="flex place-content-between w-full items-center">
-      <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
-        <XsltParamComponent :stylizedName="stylizedName"/>
-      </div>
-    </div>
-
-    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
-  </div>
 </template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -7,16 +7,18 @@ const props = defineProps(
     {
         tool: {type: String, required: true},
         xml: {type: [String, Array<TabData>], required: true},
-        query: {type: String, required: true}
+        query: {type: String, required: true},
+        activeTabId: {type: Number, required: false}
     }
 )
 
-const emit = defineEmits(["update"]);
+const emit = defineEmits(["update", "update:engine"]);
 
 const result = ref('');
 
 let enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
 
+const allVersionsOfXpath = ["2.0", "3.0", "3.1"];
 const allVersions = ["1.0", "2.0", "3.0", "3.1"];
 let versionsForCurrentEngine = ref([""]);
 
@@ -72,7 +74,7 @@ function changeAvailableVersionsOfXPath() {
     if(engine.value == "xalan" || engine.value == "libxml")
         versionsForCurrentEngine.value = ["1.0"];
     else if (engine.value == "saxon")
-        versionsForCurrentEngine.value = allVersions;
+        versionsForCurrentEngine.value = allVersionsOfXpath;
 }
 
 function selectDefaultEngine() {
@@ -109,21 +111,23 @@ function prepareRequest():Request {
 
 function prepareURL(): string {
     const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-   
+
     let tool = props.tool;
-    if (Array.isArray(props.xml) && props.xml.length > 1)
+    if (Array.isArray(props.xml) && props.xml.length > 1 && engine.value == "saxon")
         tool = "multiple/xslt";
 
     return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
 }
 
 function selectRequestBodyType() : string {
-    if (Array.isArray(props.xml) && props.xml.length > 1)
-        return prepareRequestBodyMultiXml();
+    if (Array.isArray(props.xml) && (engine.value == "xalan" || engine.value == "libxml"))
+      return prepareRequestBodySingleXml(props.xml.at(props.activeTabId!)!.data)
+    else if (Array.isArray(props.xml) && props.xml.length > 1)
+      return prepareRequestBodyMultiXml();
     else if (Array.isArray(props.xml))
-        return prepareRequestBodySingleXml(props.xml.at(0)!.data);
+      return prepareRequestBodySingleXml(props.xml.at(0)!.data);
     else
-        return prepareRequestBodySingleXml(props.xml!);
+      return prepareRequestBodySingleXml(props.xml!);
 }
 
 function prepareRequestBodySingleXml(data: string):string {
@@ -188,6 +192,10 @@ function emitVersionChange() {
     emit("update", version.value);
 }
 
+function emitEngineChange() {
+  emit("update:engine", engine.value);
+}
+
 function isVersionSelectionAvailable() {
     return !(versionsForCurrentEngine.value.length == 1 && versionsForCurrentEngine.value.at(0) == "N/A");
 }
@@ -202,6 +210,11 @@ function highlightField() {
     return "";
 }
 
+function handleChange() {
+  changeAvailableVersions();
+  emitEngineChange();
+}
+
 </script>
 
 <template>
@@ -209,7 +222,7 @@ function highlightField() {
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2 overflow-x-auto">
-                <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="engine" name="engine" @change="handleChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                 </select>
                 <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -10,11 +10,11 @@ const props = defineProps(
     {
         stylizedName: {type: String, required: true},
         data: {type: Array<TabData>},
-        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0}
+        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0},
+        engine: {type: String, required: true}
     }
 )
-const emit = defineEmits(['update:modelValue'])
-
+const emit = defineEmits(['update:modelValue', 'update:activeTabId'])
 const newTabId = ref(0);
 const activeTabId = ref(0);
 const data = ref('')
@@ -30,6 +30,9 @@ tabs.value.push({
 function sendValue() {
     emit('update:modelValue', tabs.value);
 }
+function emitActiveTab() {
+  emit('update:activeTabId', activeTabId.value);
+}
 
 function updateData(newData: string) {
     data.value = newData;
@@ -73,6 +76,7 @@ function changeActiveTab(id : number) {
     
     tabs.value.at(index)!.data = data.value;
     activeTabId.value = id;
+    emitActiveTab();
     data.value = tabs.value.at(newIndex)!.data;
 
     sendValue();
@@ -128,7 +132,7 @@ function findIndexWithID(id : number) : number {
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex justify-between mb-2">
             <div class="flex gap-2 overflow-x-auto">
-                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId" :class="[tab.id !== activeTabId && (props.engine === 'xalan' ? 'disabled-tab' : '' || props.engine === 'libxml' ? 'disabled-tab' : '')]">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">

Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue

@@ -7,6 +7,8 @@ const props = defineProps({
     tool:{type: String, required:true}
 })
 
+const activeIndex = ref<number | null>(null)
+
 function toggleTooltips() {
     isEntryHidden.value = !isEntryHidden.value;
 }
@@ -20,7 +22,15 @@ function entryHasArguments() {
 }
 
 function entryHasExamples() {
-    return props.entryData.examples.length > 0;
+    if("examples" in props.entryData){
+      return props.entryData.examples.length > 0;
+    }
+}
+
+function entryHasXsltExamples() {
+    if("xsltExamples" in props.entryData){
+      return props.entryData.xsltExamples.length > 0;
+    }
 }
 
 function interpretXPathIndicators( elementType:string ):string {
@@ -47,7 +57,7 @@ function interpretXPathIndicators( elementType:string ):string {
 
 <template>
     <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400">
-        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">{{ props.entryData.name }}</button>
+        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100 hover:font-bold overflow-auto" @click="toggleTooltips()">{{ props.entryData.name }}</button>
         <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
             <h4 class="text-xl mb-2 font-bold text-justify">Description</h4>
             <span class="text-justify">
@@ -55,6 +65,29 @@ function interpretXPathIndicators( elementType:string ):string {
                     {{ props.entryData.description }}
                 </p>
             </span>
+
+            <br/><h4 class="text-xl mb-2 font-bold text-justify">Examples:</h4>
+            <table v-if="entryHasXsltExamples()" class="w-full border">
+                <tr>
+                  <th class="font-normal">Use of {{ props.entryData.name }} example:</th>
+                </tr>
+                <tr v-for="(ex, index) in props.entryData.xsltExamples" :key="index">
+                    <td
+                        class="relative font-bold cursor-pointer bg-white p-4 border hover-effect"
+                        @mouseenter="activeIndex = index"
+                        @mouseleave="activeIndex = null"
+                    >
+                        <code>{{ ex.xslt }}</code>
+                      <transition name="fade">
+                        <div v-if="activeIndex === index" class="popup">
+                          <code>{{ ex.xslt }}</code>
+                        </div>
+                      </transition>
+                    </td>
+                </tr>
+            </table>
+            <br><span class="font-bold flex justify-center items-center w-full h-full">Hover over the text to enlarge!</span>
+
             <div id="xpathArgTooltip" v-if="tool == 'xpath'"> 
                 <h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4>
             <table v-if="entryHasArguments()" class="w-full">

Frontend/src/style.css

@@ -43,3 +43,36 @@
 .tab-active {
     @apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
+
+.disabled-tab {
+    @apply py-2 px-3 h-fit text-slate-400 border-t border-l border-r border-slate-300 rounded-t-2xl bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 pointer-events-none opacity-50;
+}
+
+.hover-effect {
+    @apply border-black bg-blue-50;
+    font-size: 10px;
+}
+
+.hover-effect:hover {
+    @apply bg-blue-200;
+}
+
+.popup {
+    @apply fixed top-1/2 left-1/2 bg-blue-400 text-white p-5 rounded-lg shadow-lg text-sm;
+    transform: translate(-30%, -35%) scale(1.3) translate3d(-30%, 0px, 0px);
+    z-index: 1000;
+    white-space: pre-wrap;
+}
+
+.fade-enter-active {
+    @apply duration-500 opacity-100;
+}
+
+.fade-leave-active {
+    animation: fadeOut 0.5s ease-in-out 800ms forwards;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}

Frontend/src/views/XSLTView.vue

@@ -11,6 +11,8 @@ import { ref } from 'vue';
 const xml = ref(new Array<TabData>);
 const query = ref('');
 const version = ref('');
+const engine = ref('')
+const activeTabId = ref(0)
 
 function updateVersion(newVersion: string) {
     version.value = newVersion;
@@ -22,10 +24,10 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" v-model:activeTabId="activeTabId" :engine="engine" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
             </div>
-            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :active-tab-id="activeTabId" v-model:engine="engine" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
         </div>
         <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
     </div>

issue_template/bug.md

@@ -0,0 +1,21 @@
+---
+
+name: "Bug template"    
+about: "This template is for reporting bugs"  
+title: "Bug"    
+
+---
+
+## Description
+*A clear and concise description of the issue.*
+
+### Selected Fields
+- **Engine:** [Specify the engine used]
+- **Version:** [Specify the version]
+- **Tool:** [Specify the currently used tool]
+
+### Data: 
+*Paste used xml/xslt/json etc...*
+
+## Additional Context
+*Any other information that might help with this issue.*

issue_template/feature.md

@@ -0,0 +1,10 @@
+---
+
+name: "Feature request template"    
+about: "This template is for requesting features"    
+title: "Feature request" 
+
+---
+
+## Feature Request 
+*Describe the feature you’d like to see and why it’s useful.*