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/package.json

@@ -12,8 +12,13 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "hljs": "^6.2.3",
+    "@codemirror/lang-html": "^6.4.5",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-xml": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "codemirror": "^6.0.1",
     "vue": "^3.3.4",
+    "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.2"
   },
   "devDependencies": {

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>

Frontend/src/components/mock/BodyDetailComponent.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import CodeEditorComponent from '../CodeEditorComponent.vue';
+
 
 const props = defineProps(
     {
-        data: {required: true, type: String}
+        data: {required: true, type: String},
+        contentType: {required:true,type:String},
     }
 )
 
+
+
 </script>
 
 <template>
-    <span class="text-white text-center h-screen overflow-x-scroll ">
-        {{ props.data.replace(/\\n/g,"") }}
-    </span>
+    <CodeEditorComponent :code="props.data" :config='{disabled:true, language:props.contentType.replace("application/","")}' />
 </template>

Frontend/src/components/mock/HistoryComponent.vue

@@ -7,8 +7,9 @@ import HeadersDetailComponent from './HeadersDetailComponent.vue';
 const shownDetail = ref('none');
 const currentShownData = ref('');
 const currentIndex = ref(-1);
+const currentContentType = ref('application/json');
 
-function showBody(body : string, index: number){
+function showBody(body : string, index: number, contentType : string){
     if( currentIndex.value == index && shownDetail.value == "body" ){
         shownDetail.value = "none";
     } else {
@@ -16,6 +17,7 @@ function showBody(body : string, index: number){
         shownDetail.value = "body";
         currentShownData.value = body;
     }
+    currentContentType.value = contentType;
 }
 
 function showHeaders(headers: object, index: number){
@@ -34,7 +36,7 @@ function showHeaders(headers: object, index: number){
 <template>
     <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
     <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
-    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+    <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
     <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
     </div>
 </template>

Frontend/src/components/mock/HistoryRecords.vue

@@ -4,11 +4,16 @@ import {ref, type Ref } from 'vue';
 interface historyRecord {
     clientUUID : String,
     dateTimeStamp: String,
-    headers : Object,
+    headers : Headers ,
     httpMethod: String,
     requestBody: String
 }
 
+interface Headers {
+    'content-type': String,
+    [propName: string]: any;
+}
+
 const emit = defineEmits([
     'click:showHeaders',
     'click:showBody',
@@ -28,9 +33,9 @@ function showHeaders(headers: Object, index : number){
     emit('click:showHeaders',headers, index)
 }
 
-function showBody(body: String , index : number){
-    console.log(body)
-    emit('click:showBody',body, index)
+function showBody(body: String , index : number, contentType: String){
+
+    emit('click:showBody',body, index, contentType  )
 }
 
 function refreshHistory(){
@@ -54,7 +59,7 @@ function refreshHistory(){
                 <td> {{ item.httpMethod }} </td>
                 <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
                 <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])">Show Body</button> 
                     <span v-else>Empty Body</span>
                 </td>
             </tr>

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>

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>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import CodeEditor from '../CodeEditorComponent.vue';
 
 
 const props = defineProps(
@@ -136,7 +137,8 @@ function clear() {
             </div>
         </div>
         <div class="text-field overflow-scroll h-full w-full">
-            <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>
+            <!--  <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>  -->
+            <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
         </div>
         
     </div>

Frontend/src/views/JsonFormatterView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
 import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 import { ref } from 'vue';
@@ -31,6 +32,6 @@ function clear() {
                 <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
             </div>
         </div>
-        <textarea name="data" id="data" :value="json" class="text-field h-full"></textarea>
+        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
     </div>
 </template>

Frontend/src/views/XmlFormatterView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
 import { ref } from 'vue';
 
 
@@ -31,6 +32,6 @@ function clear() {
                 <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
             </div>
         </div>
-        <textarea name="data" id="data" :value="xml" class="text-field h-full"></textarea>
+        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
     </div>
 </template>