Use codemirror editor

frontend/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-sql": "^6.5.4",
+    "codemirror": "^6.0.1",
     "primeflex": "^3.3.1",
     "primevue": "^3.29.2",
     "vue": "^3.2.37",

frontend/package.json.md5

@@ -1 +1 @@
-c30a4857bfd7a5273b3ada5264097de0
+81cc65e68376a8f0c2daa81bb3fc8dc9

frontend/src/App.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, reactive, ref } from 'vue';
 import { FilterMatchMode } from 'primevue/api';
 import { GetAppVersion, MssqlQuery } from '../wailsjs/go/main/App'
+import Editor from './components/Editor.vue';
 import AppIcon from './assets/images/appicon.png'
 
 const data = reactive({
@@ -11,7 +12,7 @@ const data = reactive({
   db: '',
   username: 'sa',
   password: '',
-  query: 'SELECT GETDATE();',
+  query: 'SELECT GETDATE();\n\n',
   columns: [],
   rows: [],
   filters: {},
@@ -131,7 +132,6 @@ const copyRows = async () => {
     });
 
     navigator.clipboard.writeText(str);
-    
     data.loading = false;
   });
 }
@@ -159,14 +159,10 @@ const copyRows = async () => {
     </div>
     <ProgressBar v-show="data.loading_dbs" mode="indeterminate"></ProgressBar>
     <hr/>
-
-    <Textarea
+    <Editor
       v-model="data.query"
-      rows="2"
-      style="display: block; width: 100%; margin-top: 10px; margin-bottom: 10px; font-size: 1em;"
-      @keydown.enter.ctrl="execute"
-    >
-    </Textarea>
+      class="mb-2"
+    />
     <div class="flex align-items-center">
       <Button :disabled="data.loading_dbs" @click="execute">Execute (F5)</Button>
 

frontend/src/components/Editor.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { onMounted, onUpdated, ref, watch } from 'vue';
+import { basicSetup, EditorView } from "codemirror"
+import { EditorState } from "@codemirror/state"
+import { sql, MSSQL } from "@codemirror/lang-sql"
+
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
+const editor = new EditorView({
+  state: EditorState.create({
+    doc: props.modelValue,
+    extensions: [
+      basicSetup,
+      sql({
+        dialect: MSSQL,
+        upperCaseKeywords: true,
+      }),
+      EditorView.updateListener.of(v => {
+        if (v.docChanged) {
+          emit('update:modelValue', v.state.doc.toString())
+        }
+      })
+    ],
+  }),
+})
+
+const utils = {
+  getDoc() {
+    return editor.state.doc.toString()
+  },
+  setDoc(doc) {
+    if (this.getDoc() != doc) {
+      editor.dispatch({
+        changes: {
+          from: 0,
+          to: editor.state.doc.length,
+          insert: doc
+        }
+      })
+    }
+  }
+}
+
+watch(() => props.modelValue, (val) => {
+  utils.setDoc(val)
+})
+
+const container = ref()
+
+function attachEditor() {
+  if (editor.dom.parentElement !== container.value) {
+    container.value.appendChild(editor.dom)
+  }
+}
+
+onMounted(attachEditor)
+onUpdated(attachEditor)
+</script>
+
+<template>
+  <div ref="container"></div>
+</template>
+
+<style>
+  .cm-editor {
+    font-size: 1.2em;
+    min-height: 4em;
+    background-color: white;
+    border: solid 1px #888;
+    border-radius: 4px;
+    padding: 2px;
+  }
+  .cm-scroller {
+    overflow: auto;
+  }
+</style>

wails.json

@@ -4,7 +4,7 @@
   "outputfilename": "QuickQuery",
   "info": {
     "companyName": "mmghv",
-    "productVersion": "0.1.4",
+    "productVersion": "0.2.0",
     "copyright": "Copyright © 2023 github.com/mmghv",
     "comments": "Simple SQL database query tool, built using Wails (Go & Vue.js)"
   },