Switch from CodeMirror to Ace editor

dashboard/package-lock.json

@@ -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",

dashboard/package.json

@@ -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": [

dashboard/src/components/dashboard/GuildConfigEditor.vue

@@ -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: {
+        editorWidth: 900,
-          indentWithTabs: false,
+        editorHeight: 600
-          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"),
-          },
-        },
       };
     },
     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 = [];