Editor improvements

frontend/src/components/Editor.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { onMounted, onUpdated, ref, watch } from 'vue';
-import { basicSetup, EditorView } from "codemirror"
+import { basicSetup } from "codemirror"
+import { EditorView, keymap } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 import { sql, MSSQL } from "@codemirror/lang-sql"
+import { indentWithTab, redo } from "@codemirror/commands"
 
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
@@ -12,6 +14,10 @@ const editor = new EditorView({
     doc: props.modelValue,
     extensions: [
       basicSetup,
+      keymap.of([
+        indentWithTab,
+        {key: 'Ctrl-Shift-z', run: redo, 'preventDefault⁠': true},
+      ]),
       sql({
         dialect: MSSQL,
         upperCaseKeywords: true,
@@ -51,6 +57,7 @@ const container = ref()
 function attachEditor() {
   if (editor.dom.parentElement !== container.value) {
     container.value.appendChild(editor.dom)
+    editor.dom.querySelector('.cm-scroller').style.height = '74px'
   }
 }
 
@@ -65,13 +72,20 @@ onUpdated(attachEditor)
 <style>
   .cm-editor {
     font-size: 1.2em;
-    min-height: 4em;
     background-color: white;
     border: solid 1px #888;
     border-radius: 4px;
     padding: 2px;
+    padding-right: 0;
+    transition: outline .2s;
+    outline: 0px dotted transparent !important;
+  }
+  .cm-editor.cm-focused {
+    outline: 1px dotted #219c83 !important;
   }
   .cm-scroller {
+    resize: vertical;
     overflow: auto;
+    min-height: 3.2em;
   }
 </style>

wails.json

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