implemented synthax highlighting to mock sevice message body

Frontend/src/components/CodeEditorComponent.vue

@@ -19,6 +19,16 @@ import {html} from '@codemirror/lang-html'
       },
   })
 
+  const emit = defineEmits(
+    [
+      'update:updatedCode'
+    ]
+  )
+
+  function dataUpdated(newData:String, viewUpdate : any){
+    emit('update:updatedCode',newData)
+  }
+
   const extensions = computed( ()=> {
     return  [
         oneDark,
@@ -50,6 +60,7 @@ import {html} from '@codemirror/lang-html'
     <codemirror
       style="height: 100%; padding:0.5rem ; border-radius: 0.5rem"
       :model-value="code"
+      @update:model-value="dataUpdated"
       :extensions="extensions"
       :disabled="config.disabled"
       />

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -37,6 +37,10 @@ function putDataInFields(data: mockedMessageData){
   messageData = ref( data )
 }
 
+function showUpdatedCode(newCode : string){
+  messageData.value.messageBody = newCode
+}
+
 </script>
 
 <template>
@@ -64,7 +68,12 @@ function putDataInFields(data: mockedMessageData){
     </div>
     <div class="flex text-left flex-col overflow-scroll h-3/4">
       <label for="messageBody text-center">Body</label>
-      <CodeEditorComponent :config="{disabled:false,language:messageData.contentType}" :code="messageData.messageBody" id="messageBody"></CodeEditorComponent>
+      <CodeEditorComponent
+      @update:updated-code="showUpdatedCode"
+      v-model="messageData.messageBody" 
+      :config="{disabled:false,language:messageData.contentType}" 
+      :code="messageData.messageBody" 
+      id="messageBody" />
     </div>
     <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
   </div>