refactor: migrated to ace from monaco-editor

package.json

@@ -48,13 +48,13 @@
   },
   "dependencies": {
     "@mdi/font": "^5.8.55",
+    "ace-builds": "^1.4.12",
     "electron-log": "^4.3.0",
     "electron-store": "^6.0.1",
     "electron-updater": "^4.3.5",
     "keytar": "^7.3.0",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
-    "monaco-editor": "^0.20.0",
     "mssql": "^6.2.3",
     "mysql": "^2.18.1",
     "pg": "^8.5.1",
@@ -80,7 +80,6 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.1.0",
-    "monaco-editor-webpack-plugin": "^1.9.1",
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.0",
     "standard-version": "^9.0.0",

src/renderer/components/QueryEditor.vue

@@ -5,11 +5,9 @@
 </template>
 
 <script>
-
+import * as ace from 'ace-builds';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import 'ace-builds/webpack-resolver';
-import { completionItemProvider } from '@/suggestions/sql';
+import 'ace-builds/src-noconflict/ext-language_tools';
-
-monaco.languages.registerCompletionItemProvider('sql', completionItemProvider(monaco));
 
 export default {
    name: 'QueryEditor',
@@ -23,21 +21,21 @@ export default {
       };
    },
    mounted () {
-      this.editor = monaco.editor.create(this.$refs.editor, {
+      this.editor = ace.edit(this.$refs.editor, {
+         mode: 'ace/mode/sql',
+         theme: 'ace/theme/twilight',
          value: this.value,
-         language: 'sql',
+         fontSize: '14px',
-         theme: 'vs-dark',
+         printMargin: false
-         autoIndent: true,
-         minimap: {
-            enabled: false
-         },
-         contextmenu: false,
-         wordBasedSuggestions: true,
-         acceptSuggestionOnEnter: 'smart',
-         quickSuggestions: true
       });
 
-      this.editor.onDidChangeModelContent(e => {
+      this.editor.setOptions({
+         enableBasicAutocompletion: true,
+         enableSnippets: true,
+         enableLiveAutocompletion: true
+      });
+
+      this.editor.session.on('change', () => {
          const content = this.editor.getValue();
          this.$emit('update:value', content);
       });
@@ -47,9 +45,6 @@ export default {
             this.editor.focus();
          }, 20);
       }
-   },
-   beforeDestroy () {
-      this.editor && this.editor.dispose();
    }
 };
 </script>
@@ -63,15 +58,4 @@ export default {
       width: 100%;
     }
   }
-
-  .CodeMirror {
-    .CodeMirror-scroll {
-      max-width: 100%;
-    }
-
-    .CodeMirror-line {
-      word-break: break-word !important;
-      white-space: pre-wrap !important;
-    }
-  }
 </style>

src/renderer/store/modules/connections.store.js

@@ -3,8 +3,6 @@ import Store from 'electron-store';
 import Application from '../../ipc-api/Application';
 const key = Application.getKey();
 
-console.log(key);
-
 const persistentStore = new Store({
    name: 'connections',
    encryptionKey: key

src/renderer/suggestions/sql.js

@@ -1,12 +0,0 @@
-import { functions } from '@/suggestions/sql/sql-functions';
-import { keywords } from '@/suggestions/sql/sql-keywords';
-import { operators } from '@/suggestions/sql/sql-operators';
-import { variables } from '@/suggestions/sql/sql-variables';
-
-export const completionItemProvider = (monaco) => {
-   return {
-      provideCompletionItems () {
-         return { suggestions: [...functions(monaco), ...keywords(monaco), ...operators(monaco), ...variables(monaco)] };
-      }
-   };
-};

src/renderer/suggestions/sql/sql-operators.js

@@ -1,142 +0,0 @@
-export const operators = (monaco) => {
-   return [{
-      label: 'ALL',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'ALL'
-   },
-   {
-      label: 'AND',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'AND'
-   },
-   {
-      label: 'ANY',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'ANY'
-   },
-   {
-      label: 'BETWEEN',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'BETWEEN'
-   },
-   {
-      label: 'EXISTS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'EXISTS'
-   },
-   {
-      label: 'IN',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'IN'
-   },
-   {
-      label: 'LIKE',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'LIKE'
-   },
-   {
-      label: 'NOT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'NOT'
-   },
-   {
-      label: 'OR',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'OR'
-   },
-   {
-      label: 'SOME',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'SOME'
-   },
-   {
-      label: 'EXCEPT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'EXCEPT'
-   },
-   {
-      label: 'INTERSECT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'INTERSECT'
-   },
-   {
-      label: 'UNION',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'UNION'
-   },
-   {
-      label: 'APPLY',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'APPLY'
-   },
-   {
-      label: 'CROSS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'CROSS'
-   },
-   {
-      label: 'FULL',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'FULL'
-   },
-   {
-      label: 'INNER',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'INNER'
-   },
-   {
-      label: 'JOIN',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'JOIN'
-   },
-   {
-      label: 'LEFT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'LEFT'
-   },
-   {
-      label: 'OUTER',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'OUTER'
-   },
-   {
-      label: 'RIGHT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'RIGHT'
-   },
-   {
-      label: 'CONTAINS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'CONTAINS'
-   },
-   {
-      label: 'FREETEXT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'FREETEXT'
-   },
-   {
-      label: 'IS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'IS'
-   },
-   {
-      label: 'NULL',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'NULL'
-   },
-   {
-      label: 'PIVOT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'PIVOT'
-   },
-   {
-      label: 'UNPIVOT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'UNPIVOT'
-   },
-   {
-      label: 'MATCHED',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'MATCHED'
-   }];
-};

src/renderer/suggestions/sql/sql-variables.js

@@ -1,172 +0,0 @@
-export const variables = (monaco) => {
-   return [{
-      label: '@@DATEFIRST',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@DATEFIRST'
-   },
-   {
-      label: '@@DBTS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@DBTS'
-   },
-   {
-      label: '@@LANGID',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@LANGID'
-   },
-   {
-      label: '@@LANGUAGE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@LANGUAGE'
-   },
-   {
-      label: '@@LOCK_TIMEOUT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@LOCK_TIMEOUT'
-   },
-   {
-      label: '@@MAX_CONNECTIONS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@MAX_CONNECTIONS'
-   },
-   {
-      label: '@@MAX_PRECISION',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@MAX_PRECISION'
-   },
-   {
-      label: '@@NESTLEVEL',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@NESTLEVEL'
-   },
-   {
-      label: '@@OPTIONS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@OPTIONS'
-   },
-   {
-      label: '@@REMSERVER',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@REMSERVER'
-   },
-   {
-      label: '@@SERVERNAME',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@SERVERNAME'
-   },
-   {
-      label: '@@SERVICENAME',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@SERVICENAME'
-   },
-   {
-      label: '@@SPID',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@SPID'
-   },
-   {
-      label: '@@TEXTSIZE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TEXTSIZE'
-   },
-   {
-      label: '@@VERSION',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@VERSION'
-   },
-   {
-      label: '@@CURSOR_ROWS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@CURSOR_ROWS'
-   },
-   {
-      label: '@@FETCH_STATUS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@FETCH_STATUS'
-   },
-   {
-      label: '@@DATEFIRST',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@DATEFIRST'
-   },
-   {
-      label: '@@PROCID',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PROCID'
-   },
-   {
-      label: '@@ERROR',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@ERROR'
-   },
-   {
-      label: '@@IDENTITY',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@IDENTITY'
-   },
-   {
-      label: '@@ROWCOUNT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@ROWCOUNT'
-   },
-   {
-      label: '@@TRANCOUNT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TRANCOUNT'
-   },
-   {
-      label: '@@CONNECTIONS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@CONNECTIONS'
-   },
-   {
-      label: '@@CPU_BUSY',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@CPU_BUSY'
-   },
-   {
-      label: '@@IDLE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@IDLE'
-   },
-   {
-      label: '@@IO_BUSY',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@IO_BUSY'
-   },
-   {
-      label: '@@PACKET_ERRORS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PACKET_ERRORS'
-   },
-   {
-      label: '@@PACK_RECEIVED',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PACK_RECEIVED'
-   },
-   {
-      label: '@@PACK_SENT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PACK_SENT'
-   },
-   {
-      label: '@@TIMETICKS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TIMETICKS'
-   },
-   {
-      label: '@@TOTAL_ERRORS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TOTAL_ERRORS'
-   },
-   {
-      label: '@@TOTAL_READ',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TOTAL_READ'
-   },
-   {
-      label: '@@TOTAL_WRITE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TOTAL_WRITE'
-   }];
-};

webpack.config.js

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