StyAndCo/zappyzep
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch from CodeMirror to Ace editor

Browse source
This commit is contained in:
Dragory 2019-10-05 14:45:13 +03:00
parent 2f64cea03b
commit f820a06bac
3 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
dashboard/package-lock.json generated
View file

@ -1831,6 +1831,11 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"brace": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
"integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -2233,11 +2238,6 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
},
"codemirror": {
"version": "5.48.0",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz",
"integrity": "sha512-3Ter+tYtRlTNtxtYdYNPxGxBL/b3cMcvPdPm70gvmcOO2Rauv/fUEewWa0tT596Hosv6ea2mtpx28OXBy1mQCg=="
},
"collection-visit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@ -2996,11 +2996,6 @@
"repeating": "^2.0.0"
}
},
"diff-match-patch": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
"integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@ -7839,15 +7834,6 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
},
"vue-codemirror": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-4.0.6.tgz",
"integrity": "sha512-ilU7Uf0mqBNSSV3KT7FNEeRIxH4s1fmpG4TfHlzvXn0QiQAbkXS9lLfwuZpaBVEnpP5CSE62iGJjoliTuA8poQ==",
"requires": {
"codemirror": "^5.41.0",
"diff-match-patch": "^1.0.0"
}
},
"vue-highlightjs": {
"version": "git://github.com/Dragory/vue-highlightjs.git#5cd0d3d82fe16b4ff51ecf45e9a527b0d35aa0fa",
"from": "git://github.com/Dragory/vue-highlightjs.git#pass-hljs-instance"
@ -7878,6 +7864,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vue2-ace-editor": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/vue2-ace-editor/-/vue2-ace-editor-0.0.14.tgz",
"integrity": "sha512-STK+ISGNaSxBxNKv/3tc7jeAE388LsM0yL52KCJtTN6ZbVIeqBtvscRLGqYuZAGaHDD4dfXm6P2Q8DdKxMB2hA==",
"requires": {
"brace": "^0.11.0"
}
},
"vuex": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

2
dashboard/package.json
View file

@ -29,10 +29,10 @@
"js-yaml": "^3.13.1",
"marked": "^0.7.0",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vue-highlightjs": "git://github.com/Dragory/vue-highlightjs.git#pass-hljs-instance",
"vue-hot-reload-api": "^2.3.3",
"vue-router": "^3.0.6",
"vue2-ace-editor": "0.0.14",
"vuex": "^3.1.1"
},
"browserslist": [

62
dashboard/src/components/dashboard/GuildConfigEditor.vue
View file

@ -4,7 +4,8 @@
</div>
<div v-else>
<h2 class="title is-1">Config for {{ guild.name }}</h2>
<codemirror v-model="editableConfig" :options="cmConfig"></codemirror>
<AceEditor v-model="editableConfig" @init="editorInit" lang="yaml" theme="twilight" :width="editorWidth" :height="editorHeight" ref="aceEditor"></AceEditor>
<div class="editor-footer">
<div class="actions">
<button class="button" v-on:click="save" :disabled="saving">Save</button>
@ -19,27 +20,15 @@
</div>
</template>
<style scoped>
.vue-codemirror {
margin-bottom: 16px;
}
>>> .CodeMirror {
height: 70vh;
}
</style>
<script>
import {mapState} from "vuex";
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/oceanic-next.css";
import "codemirror/mode/yaml/yaml.js";
import {ApiError} from "../../api";
import AceEditor from "vue2-ace-editor";
export default {
components: {
codemirror,
AceEditor,
},
async mounted() {
await this.$store.dispatch("guilds/loadAvailableGuilds");
@ -58,18 +47,8 @@
saving: false,
editableConfig: null,
errors: [],
cmConfig: {
indentWithTabs: false,
indentUnit: 2,
smartIndent: false,
lineNumbers: true,
mode: "text/x-yaml",
theme: "oceanic-next",
extraKeys: {
Tab: cm => cm.execCommand("indentMore"),
"Shift-Tab": cm => cm.execCommand("indentLess"),
},
},
editorWidth: 900,
editorHeight: 600
};
},
computed: {
@ -83,6 +62,33 @@
}),
},
methods: {
editorInit() {
require("brace/ext/language_tools");
require("brace/mode/yaml");
require("brace/theme/twilight");
this.$refs.aceEditor.editor.setOptions({
useSoftTabs: true,
tabSize: 2
});
this.fitEditorToWindow();
},
fitEditorToWindow() {
const editorElem = this.$refs.aceEditor.$el;
const newWidth = editorElem.parentNode.clientWidth;
const rect = editorElem.getBoundingClientRect();
const newHeight = window.innerHeight - rect.top - 100;
this.resizeEditor(newWidth, newHeight);
},
resizeEditor(newWidth, newHeight) {
this.editorWidth = newWidth;
this.editorHeight = newHeight;
this.$nextTick(() => {
this.$refs.aceEditor.editor.resize();
});
},
async save() {
this.saving = true;
this.errors = [];