#1 Add monaco editor (#4)

Reviewed-on: #4
Co-authored-by: stuzer05 <stuzer05@stuzer.link>
Co-committed-by: stuzer05 <stuzer05@stuzer.link>

src/assets/app.scss

@@ -36,9 +36,6 @@ input:disabled, textarea:disabled {
 textarea[id=data] {
 	height: 200px;
 }
-textarea[id=result] {
-	height: 350px;
-}
 div[id=result] {
 	height: 350px;
 }

src/components/MonacoEditor.vue

@@ -28,16 +28,22 @@ export default {
     },
   },
   mounted() {
+    console.log(monacoResultInst);
     loader.init().then((monaco) => {
       monacoResultInst = monaco;
 
       monaco.editor.create(document.querySelector(`#${this.name}`), {
-        value: '',
+        value: this.value,
         language: this.language,
         readOnly: this.readonly,
       });
     });
   },
+  unmounted() {
+    if (monacoResultInst) {
+      monacoResultInst.editor.getModels().forEach(model => model.dispose());
+    }
+  },
   watch: {
     value: {
       // the callback will be called immediately after the start of the observation

src/views/PHPArrayToJson.vue

@@ -17,15 +17,19 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
 import { config } from '../../config';
+import MonacoEditor from "@/components/MonacoEditor.vue";
 
 export default {
+  components: {
+    MonacoEditor
+  },
   data() {
     return {
       toolData: {