feat: monaco-editor as query editor

package.json

@@ -40,20 +40,17 @@
     }
   },
   "electronWebpack": {
-    "whiteListedModules": [
-      "codemirror"
-    ],
     "renderer": {
       "webpackConfig": "webpack.config.js"
     }
   },
   "dependencies": {
     "@mdi/font": "^5.5.55",
-    "codemirror": "^5.56.0",
     "electron-log": "^4.2.4",
     "electron-updater": "^4.3.4",
     "lodash": "^4.17.20",
     "moment": "^2.27.0",
+    "monaco-editor": "^0.20.0",
     "mssql": "^6.2.1",
     "mysql": "^2.18.1",
     "pg": "^8.3.2",
@@ -81,6 +78,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
+    "monaco-editor-webpack-plugin": "^1.9.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^9.0.3",
     "standard-version": "^9.0.0",

src/renderer/components/QueryEditor.vue

@@ -1,25 +1,26 @@
 <template>
    <div class="editor-wrapper">
-      <textarea
-         ref="codemirror"
-         :options="cmOptions"
-      />
+      <div ref="editor" class="editor" />
    </div>
 </template>
 
 <script>
-import CodeMirror from 'codemirror';
 
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/material-darker.css';
-import 'codemirror/mode/sql/sql';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/hint/show-hint.css';
-import 'codemirror/addon/hint/sql-hint';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-CodeMirror.defineOption('sql-hint');
+monaco.languages.registerCompletionItemProvider('sql', {
+   provideCompletionItems: () => {
+      const suggestions = [// TODO: complete in a separate file
+         {
+            label: 'SELECT',
+            kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: 'SELECT'
+         }
+      ];
+
+      return { suggestions };
+   }
+});
 
 export default {
    name: 'QueryEditor',
@@ -28,42 +29,31 @@ export default {
    },
    data () {
       return {
-         cminstance: null,
-         content: '',
-         cmOptions: {
-            tabSize: 3,
-            smartIndent: true,
-            styleActiveLine: true,
-            lineNumbers: true,
-            line: true,
-            mode: 'text/x-sql',
-            theme: 'material-darker',
-            extraKeys: {
-               'Ctrl-Space': 'autocomplete'
-            },
-            hintOptions: {
-               tables: {
-                  users: ['name', 'score', 'birthDate'],
-                  countries: ['name', 'population', 'size']
-               }
-            },
-            autoCloseBrackets: true
-         }
+         editor: null
       };
    },
    mounted () {
-      this.initialize();
-   },
-   methods: {
-      initialize () {
-         this.cminstance = CodeMirror.fromTextArea(this.$refs.codemirror, this.cmOptions);
-         this.cminstance.setValue(this.value || this.content);
+      this.editor = monaco.editor.create(this.$refs.editor, {
+         value: this.value,
+         language: 'sql',
+         theme: 'vs-dark',
+         autoIndent: true,
+         minimap: {
+            enabled: false
+         },
+         contextmenu: false,
+         acceptSuggestionOnEnter: 'smart',
+         quickSuggestions: true,
+         wordBasedSuggestions: true
+      });
 
-         this.cminstance.on('change', cm => {
-            this.content = cm.getValue();
-            this.$emit('input', this.content);
-         });
-      }
+      this.editor.onDidChangeModelContent(e => {
+         const content = this.editor.getValue();
+         this.$emit('update:value', content);
+      });
+   },
+   beforeDestroy () {
+      this.editor && this.editor.dispose();
    }
 };
 </script>
@@ -71,11 +61,14 @@ export default {
 <style lang="scss">
   .editor-wrapper {
     border-bottom: 1px solid #444;
+
+    .editor {
+      height: 200px;
+      width: 100%;
+    }
   }
 
   .CodeMirror {
-    height: 200px;
-
     .CodeMirror-scroll {
       max-width: 100%;
     }

src/renderer/components/Workspace.vue

@@ -61,9 +61,9 @@
          />
          <WorkspaceQueryTab
             v-for="tab of queryTabs"
-            v-show="selectedTab === tab.uid"
             :key="tab.uid"
             :tab-uid="tab.uid"
+            :is-selected="selectedTab === tab.uid"
             :connection="connection"
          />
       </div>

src/renderer/components/WorkspaceQueryTab.vue

@@ -1,7 +1,7 @@
 <template>
-   <div class="workspace-query-tab column col-12 columns col-gapless">
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
       <div class="workspace-query-runner column col-12">
-         <QueryEditor v-model="query" />
+         <QueryEditor v-if="isSelected" :value.sync="query" />
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <button
@@ -55,7 +55,8 @@ export default {
    mixins: [tableTabs],
    props: {
       connection: Object,
-      tabUid: String
+      tabUid: String,
+      isSelected: Boolean
    },
    data () {
       return {

webpack.config.js

@@ -1,8 +1,11 @@
-
 const webpack = require('webpack');
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
    plugins: [
+      new MonacoEditorPlugin({
+         languages: ['sql']
+      }),
       new webpack.DefinePlugin({
          'process.env': {
             PACKAGE_VERSION: JSON.stringify(require('./package.json').version)