use monaco editor
This commit is contained in:
pengfei.zhou
parent
8c2c55e7b8
commit
d9eb9489b8
@ -12,6 +12,7 @@ import com.github.penfeizhou.doric.DoricDriver;
|
||||
import com.github.pengfeizhou.jscore.JSONBuilder;
|
||||
|
||||
import org.json.JSONArray;
|
||||
import org.json.JSONObject;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.io.InputStream;
|
||||
@ -78,6 +79,34 @@ public class LocalServer extends NanoHTTPD {
|
||||
return "{}";
|
||||
}
|
||||
});
|
||||
commandMap.put("reload", new APICommand() {
|
||||
@Override
|
||||
public String name() {
|
||||
return "reload";
|
||||
}
|
||||
|
||||
@Override
|
||||
public Object exec(IHTTPSession session) {
|
||||
Map<String, String> files = new HashMap<>();
|
||||
try {
|
||||
session.parseBody(files);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
String id = session.getParms().get("id");
|
||||
DoricContext doricContext = DoricContextManager.getContext(id);
|
||||
if (doricContext != null) {
|
||||
try {
|
||||
JSONObject jsonObject = new JSONObject(files.get("postData"));
|
||||
doricContext.reload(jsonObject.optString("script"));
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
return "success";
|
||||
}
|
||||
return "fail";
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
5
debugger/package-lock.json
generated
5
debugger/package-lock.json
generated
@ -7453,6 +7453,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"monaco-editor": {
|
||||
"version": "0.17.1",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.17.1.tgz",
|
||||
"integrity": "sha512-JAc0mtW7NeO+0SwPRcdkfDbWLgkqL9WfP1NbpP9wNASsW6oWqgZqNIWt4teymGjZIXTElx3dnQmUYHmVrJ7HxA=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"babel-plugin-prismjs": "^1.1.1",
|
||||
"core-js": "^2.6.5",
|
||||
"element-ui": "^2.11.1",
|
||||
"monaco-editor": "^0.17.1",
|
||||
"prismjs": "^1.17.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-prism": "^1.0.5",
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Doric Dev Pannel</title>
|
||||
<link href="prism.css" rel="stylesheet" />
|
||||
<!-- <link href="prism.css" rel="stylesheet" /> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -17,7 +17,7 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<script src="prism.js"></script>
|
||||
<!-- <script src="prism.js"></script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user