Created theme switcher (#270)

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

Frontend/src/components/common/CodeEditorComponent.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { onBeforeUpdate, inject } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { espresso } from 'thememirror';
+import {xml} from '@codemirror/lang-xml'
+import {json} from '@codemirror/lang-json'
+import {html} from '@codemirror/lang-html'
+
+function isDarkModeSet(){
+  return localStorage.theme == "dark";
+}
+
+const theme : string = inject('theme')! ;
+
+const props= defineProps({
+  code : {
+      type: String,
+      required: true
+  },
+  config: {
+      type: Object,
+      required: true
+    },
+})
+
+const emit = defineEmits(
+  [
+    'update:updatedCode'
+  ]
+)
+
+function dataUpdated(newData:String){
+  emit('update:updatedCode',newData)
+}
+
+function selectTheme() {
+  if (isDarkModeSet()) {
+    return oneDark;
+  }
+  else {
+    return espresso;
+  }
+}
+
+let extensions = parseExtensions();
+
+
+function parseExtensions(){
+  return  [
+      selectTheme(),
+      parseLanguage(props.config.language),
+  ]
+}
+
+function parseLanguage(name: String){
+  switch(name.toUpperCase()){
+    case "JSON": {
+      return json();
+    }
+    case "HTML": {
+      return html();
+    }
+    default: {
+      return xml();
+    }
+  }
+}
+
+
+onBeforeUpdate( () => { extensions = parseExtensions(); } )
+
+</script>
+
+<template>
+  <div class="editor w-full h-full rounded-2xl overflow-x-auto">
+    
+    <codemirror
+      :key="theme"
+      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
+      :model-value="code"
+      @update:model-value="dataUpdated"
+      :extensions="extensions"
+      :disabled="config.disabled"
+      />
+    
+  </div>
+</template>