Add a better editor to Spinner.

spinner/lib/src/main/assets/css/main.css

@@ -27,8 +27,10 @@ th {
 }
 
 .query-input {
-  width: 100%;
+  width: calc(100% - 18px);
-  height: 10rem;
+  border: 1px solid black;
+  border-radius: 4px;
+  height: 200px;
   margin-bottom: 8px;
 }
 

spinner/lib/src/main/assets/query.hbs

@@ -6,7 +6,8 @@
 
     <!-- Query Input -->
     <form action="query" method="post" id="query-form">
-      <textarea name="query" class="query-input" placeholder="Enter your query...">{{query}}</textarea>
+      <div class="query-input">{{query}}</div>
+      <input type="hidden" name="query" id="query" />
       <input type="hidden" name="db" value="{{database}}" />
       <input type="submit" name="action" value="run" />
       or
@@ -47,23 +48,65 @@
     {{> partials/suffix}}
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" integrity="sha512-JPoVzOHQvXbB4+lOX6GOBM3xOZhwAMKRYn2G0VpfPcwIixAAvPL+HKuaFuevm+i6Q4GktSKY/CxlcB/1BaV/6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/ace.min.js" integrity="sha512-VDk4SZZXv8Karl+tl3RKw3grEZ0ofFrh7J5IKnVgP843O85vbeZv/npjEWtM9BhDuUHbtJc60ZpR4wjiYTfC7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/mode-sql.min.js" integrity="sha512-UBVNzqbl7u/EDMuOgFoE81YqUScjz/Uo4B3VhjlOqtKhi741M7ERSUllUeBxwr8khutma/UbCJ7+R8KDdUA52w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/theme-github.min.js" integrity="sha512-G0Ha6cELuBxxhTeMh/ZhY7D7RWt2UtWV6TMFXMSUHqc+p2xQPpAwMTCcG0QLXsmlu1QkbKQjQZC0J6cwfBa6EA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type="text/javascript">
-      function onFormatClicked(e) {
+      let editor;
-        e.preventDefault();
+
-        const queryInput = document.querySelector('.query-input')
+      function main() {
-        queryInput.value = sqlFormatter.format(queryInput.value).replaceAll("! =", "!=").replaceAll("| |", "||");
+        //document.querySelector('.query-input').addEventListener('keypress', submitOnEnter);
+        document.getElementById('query-form').addEventListener('submit', onQuerySubmitted, false);
+        renderQueryHistory();
+
+        editor = ace.edit(document.querySelector('.query-input'), {
+          mode: 'ace/mode/sql',
+          theme: 'ace/theme/github',
+          selectionStyle: 'text',
+          showPrintMargin: false
+        });
+
+        editor.setFontSize(13);
+
+        editor.commands.addCommand({
+          name: "Run",
+          bindKey: {win: "Ctrl-Return", mac: "Command-Return"},
+          exec: triggerSubmit
+        });
+
+        editor.commands.addCommand({
+          name: "Run (Cody)",
+          bindKey: {win: "Shift-Return", mac: "Shift-Return"},
+          exec: triggerSubmit
+        });
+
+        editor.commands.addCommand({
+          name: "Format",
+          bindKey: {win: "Ctrl-Shift-F", mac: "Command-Shift-F"},
+          exec: formatSql
+        });
       }
 
-      function submitOnEnter(event){
+      function onFormatClicked(e) {
-        if (event.which === 13 && event.shiftKey) {
+        formatSql();
-          event.target.form.submit();
+        e.preventDefault();
-          onQuerySubmitted();
+      }
-          event.preventDefault();
+
-        }
+      function formatSql() {
+        let formatted = sqlFormatter.format(editor.getValue()).replaceAll("! =", "!=").replaceAll("| |", "||");
+        editor.setValue(formatted, formatted.length);
+      }
+
+
+      function triggerSubmit() {
+        onQuerySubmitted();
+        document.getElementById('query-form').submit();
       }
 
       function onQuerySubmitted() {
-        const query = document.querySelector('.query-input').value;
+        const query = editor.getValue();
+
+        document.getElementById('query').value = query
 
         let history = getQueryHistory();
         history.unshift(query);
@@ -94,7 +137,8 @@
       }
 
       function onHistoryItemClicked(i) {
-        document.querySelector('.query-input').value = document.getElementById(`history-item-${i}`).innerText;
+        let item = document.getElementById(`history-item-${i}`).innerText;
+        editor.setValue(item, item.length);
       }
 
       function getQueryHistory() {
@@ -102,9 +146,7 @@
         return JSON.parse(historyRaw);
       }
 
-      document.querySelector('.query-input').addEventListener('keypress', submitOnEnter);
+      main();
-      document.getElementById('query-form').addEventListener('submit', onQuerySubmitted, false);
-      renderQueryHistory();
 
     </script>
   </body>