Button to format SQL, closes #136

SQL code will be formatted on page load, and can additionally
be formatted by clicking the "Format SQL" button.

Thanks, @rixx!

datasette/static/app.css

@@ -166,22 +166,32 @@ form input[type=search] {
         width: 95%;
     }
 }
-form input[type=submit] {
+form input[type=submit], form button[type=button] {
-    color: #fff;
-    background-color: #007bff;
-    border-color: #007bff;
     font-weight: 400;
     cursor: pointer;
     text-align: center;
     vertical-align: middle;
-    border: 1px solid blue;
+    border-width: 1px;
+    border-style: solid;
     padding: .5em 0.8em;
     font-size: 0.9rem;
     line-height: 1;
     border-radius: .25rem;
+}
+
+form input[type=submit] {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
     -webkit-appearance: button;
 }
 
+form button[type=button] {
+    color: #007bff;
+    background-color: #fff;
+    border-color: #007bff;
+}
+
 .filter-row {
     margin-bottom: 0.6em;
 }

datasette/templates/_codemirror.html

@@ -1,3 +1,4 @@
+<script src="/-/static/sql-formatter-2.3.3.min.js" defer></script>
 <script src="/-/static/codemirror-5.31.0.js"></script>
 <link rel="stylesheet" href="/-/static/codemirror-5.31.0-min.css" />
 <script src="/-/static/codemirror-5.31.0-sql.min.js"></script>

datasette/templates/_codemirror_foot.html

@@ -1,5 +1,18 @@
 <script>
-    var editor = CodeMirror.fromTextArea(document.getElementById("sql-editor"), {
+window.onload = () => {
+    const sqlFormat = document.querySelector("button#sql-format");
+    const readOnly = document.querySelector("pre#sql-query");
+    const sqlInput = document.querySelector("textarea#sql-editor");
+    if (sqlFormat && !readOnly) {
+        sqlFormat.hidden = false;
+    }
+    if (readOnly) {
+        readOnly.innerHTML = sqlFormatter.format(readOnly.innerHTML);
+    }
+    if (sqlInput) {
+        sqlInput.value = sqlFormatter.format(sqlInput.value);
+    }
+    var editor = CodeMirror.fromTextArea(sqlInput, {
       lineNumbers: true,
       mode: "text/x-sql",
       lineWrapping: true,
@@ -10,4 +23,10 @@
       },
       Tab: false
     });
+    if (sqlInput && sqlFormat) {
+        sqlFormat.addEventListener("click", ev => {
+            editor.setValue(sqlFormatter.format(editor.getValue()));
+        })
+    }
+}
 </script>

datasette/templates/database.html

@@ -26,7 +26,10 @@
     <form class="sql" action="{{ database_url(database) }}" method="get">
         <h3>Custom SQL query</h3>
         <p><textarea id="sql-editor" name="sql">{% if tables %}select * from {{ tables[0].name|escape_sqlite }}{% else %}select sqlite_version(){% endif %}</textarea></p>
-        <p><input type="submit" value="Run SQL"></p>
+        <p>
+            <button id="sql-format" type="button" hidden>Format SQL</button>
+            <input type="submit" value="Run SQL">
+        </p>
     </form>
 {% endif %}
 

datasette/templates/query.html

@@ -37,7 +37,7 @@
         {% if editable and config.allow_sql %}
             <p><textarea id="sql-editor" name="sql">{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}</textarea></p>
         {% else %}
-            <pre>{% if query %}{{ query.sql }}{% endif %}</pre>
+            <pre id="sql-query">{% if query %}{{ query.sql }}{% endif %}</pre>
         {% endif %}
     {% else %}
         <input type="hidden" name="sql" value="{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}">
@@ -49,7 +49,10 @@
             <p><label for="qp{{ loop.index }}">{{ name }}</label> <input type="text" id="qp{{ loop.index }}" name="{{ name }}" value="{{ value }}"></p>
         {% endfor %}
     {% endif %}
-    <p><input type="submit" value="Run SQL"></p>
+    <p>
+        <button id="sql-format" type="button" hidden>Format SQL</button>
+        <input type="submit" value="Run SQL">
+    </p>
 </form>
 
 {% if display_rows %}