fixed current theme instead of adding new

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

@@ -3,13 +3,12 @@ import InsertTemplateComponent from '@components/common/InsertTemplateComponent.
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
-import {ref} from 'vue'
-import TabComponent from "@components/xml/TabComponent.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,88 +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">
-        <select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
-          <option> ---Choose tutorial--- </option>
-          <option> w3schools </option>
-          <option> Javatpoint </option>
-          <option> tutorialspoint </option>
-          <option> geeksforgeeks </option>
-        </select>
-        <input
-            id="textInput1"
-            class="text-input px-2 py-1 border rounded-3xl w-1/3"
-            type="text"
-            placeholder="Input 1"
-        />
-        <input
-            id="textInput2"
-            class="text-input px-2 py-1 border rounded-3xl w-1/3"
-            type="text"
-            placeholder="Input 2"
-        />
-        <button class="tool-button" @click="clear">Add Variable</button>
-      </div>
-    </div>
-
-    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
-                :config="{disabled:false, language:stylizedName}"></CodeEditor>
-  </div>
-
 </template>