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/mock/RestMockMessageComponent.vue

@@ -2,6 +2,7 @@
 import {ref, type Ref} from 'vue';
 import HeadersComponent from './HeadersComponent.vue';
 import SaveComponent from './SaveComponent.vue';
+import CodeEditorComponent from '../CodeEditorComponent.vue';
 
 const clientUUID = ref('');
 const host = window.location.protocol + "//" + window.location.hostname + "/mock";
@@ -36,10 +37,14 @@ function putDataInFields(data: mockedMessageData){
   messageData = ref( data )
 }
 
+function showUpdatedCode(newCode : string){
+  messageData.value.messageBody = newCode
+}
+
 </script>
 
 <template>
-  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
+  <div class="flex overflow-y-scroll flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
     <div>
       <label for="link">Link</label><br/>
       <div class="flex gap-4">
@@ -61,9 +66,14 @@ function putDataInFields(data: mockedMessageData){
       </div>
       
     </div>
-    <div class="flex flex-col">
-      <label for="messageBody">Body</label>
-      <textarea class="text-field h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
+    <div class="flex text-left flex-col overflow-scroll h-3/4">
+      <label for="messageBody text-center">Body</label>
+      <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>