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/CodeEditorComponent.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { oneDark } from '@codemirror/theme-one-dark'
+import {xml} from '@codemirror/lang-xml'
+import {json} from '@codemirror/lang-json'
+import {html} from '@codemirror/lang-html'
+
+
+
+  const props= defineProps({
+    code : {
+        type: String,
+        required: true
+    },
+    config: {
+        type: Object,
+        required: true
+      },
+  })
+
+  const emit = defineEmits(
+    [
+      'update:updatedCode'
+    ]
+  )
+
+  function dataUpdated(newData:String, viewUpdate : any){
+    emit('update:updatedCode',newData)
+  }
+
+  const extensions = computed( ()=> {
+    return  [
+        oneDark,
+        parseLanguage(props.config.language),
+    ]
+
+  } )
+
+  function parseLanguage(name: String){
+    switch(name.toUpperCase()){
+      case "JSON": {
+        return json();
+      }
+      case "HTML": {
+        return html();
+      }
+      default: {
+        return xml();
+      }
+    }
+  }
+
+
+</script>
+
+<template>
+    <div class="editor h-full overflow-scroll">
+    
+    <codemirror
+      style="height: 100%; padding:0.5rem ; border-radius: 0.5rem"
+      :model-value="code"
+      @update:model-value="dataUpdated"
+      :extensions="extensions"
+      :disabled="config.disabled"
+      />
+    
+  </div>
+</template>