use monaco editor

debugger/src/App.vue

@@ -11,11 +11,19 @@ export default {
 </script>
 
 <style>
+html {
+  height: 100%;
+}
+body {
+  height: 100%;
+}
+
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  height: 100%;
 }
 </style>

debugger/src/components/Context.vue

@@ -2,7 +2,7 @@
   <div class="context">
     <el-page-header @back="goBack"></el-page-header>
     <el-container class="container">
-      <el-aside class="aside">
+      <el-aside>
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>Context info</span>
@@ -20,12 +20,7 @@
       </el-aside>
       <el-main>
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Running</span>
-          </div>
-          <div class="script">
-            <pre class="language-js"> <code v-html="script"></code></pre>
-          </div>
+          <div class="script" ref="editor"></div>
         </el-card>
       </el-main>
     </el-container>
@@ -34,13 +29,19 @@
 
 <script>
 import axios from "axios";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.main.js";
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution";
+import { StandaloneCodeEditorServiceImpl } from "monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeServiceImpl.js";
+
 export default {
   name: "Context",
   data: function() {
     return {
       id: this.$route.params.id,
       source: this.$route.params.id,
-      script: ""
+      script: "",
+      editor: null,
+      curTheme: "vs"
     };
   },
   methods: {
@@ -49,6 +50,14 @@ export default {
     },
     debug() {
       console.log("debug");
+      axios
+        .post(`/api/reload?id=${this.$route.params.id}`, {
+          contextId: this.$route.params.id,
+          script: this.editor.getValue()
+        })
+        .then(function(response) {
+          console.log("post result:", response);
+        });
     }
   },
   mounted: function() {
@@ -56,10 +65,13 @@ export default {
     axios.get(`/api/context?id=${this.$route.params.id}`).then(res => {
       this.source = res.data.source;
       this.script = res.data.script;
+      this.editor.setValue(this.script);
+    });
+    this.editor = monaco.editor.create(this.$refs.editor, {
+      theme: this.curTheme,
+      automaticLayout: true,
+      language: "javascript"
     });
-  },
-  updated: function() {
-    Prism.highlightAll();
   }
 };
 </script>
@@ -91,6 +103,7 @@ p span {
 
 .script {
   text-align: left;
-  font-size: 50%;
+  font-size: 100%;
+  height: fill-available;
 }
 </style>