Implemented proper editors (#236)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #236
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -2,6 +2,7 @@
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import { ref } from 'vue';
+import CodeEditor from '../CodeEditorComponent.vue';
 
 const data = ref('')
 
@@ -14,6 +15,12 @@ const props = defineProps(
 const emit = defineEmits(['update'])
 
 function sendValue() {
+    console.log("input works")
+    emit('update', data.value)
+}
+
+function sendNewValue(newValue : string) {
+    data.value = newValue
     emit('update', data.value)
 }
 
@@ -44,6 +51,7 @@ function canBeFormatted() {
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea>
+        <!-- <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea> -->
+        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
     </div>
 </template>