From ad6fe47a950ba66794b6b947911c628a5520feda Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Tue, 16 Jun 2026 17:33:51 -0700
Subject: [PATCH] Better way of setting min height on CodeMirror

Previously there were four lines of whitespace, but that
meant users had to delete that whitespace themselves when
they started editing. Now it is four lines tall without that.
---
 datasette/templates/execute_write.html | 15 +++++++--------
 tests/test_queries.py                  |  4 +++-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/datasette/templates/execute_write.html b/datasette/templates/execute_write.html
index 0d0a9931..592577f8 100644
--- a/datasette/templates/execute_write.html
+++ b/datasette/templates/execute_write.html
@@ -56,6 +56,11 @@ form.sql.core input[data-execute-write-submit]:disabled {
     cursor: not-allowed;
     opacity: 1;
 }
+.execute-write form.sql .sql-editor-min-lines .cm-content,
+.execute-write form.sql .sql-editor-min-lines .cm-gutter {
+    /* Four visible editor lines without adding blank lines to the SQL value. */
+    min-height: calc(5.6em + 8px);
+}
 .execute-write-disabled-reason {
     color: #4f5b6d;
     font-size: 0.85rem;
@@ -119,7 +124,7 @@ form.sql.core input[data-execute-write-submit]:disabled {
         <p class="message-warning execute-write-template-unavailable">There are no tables that you can currently edit.</p>
     {% endif %}
 
-    <p class="sql-editor"><textarea id="sql-editor" name="sql"{% if sql %} style="height: {{ sql.split("\n")|length + 2 }}em"{% endif %}>{{ sql }}</textarea></p>
+    <p class="sql-editor{% if not sql %} sql-editor-min-lines{% endif %}"><textarea id="sql-editor" name="sql"{% if sql %} style="height: {{ sql.split("\n")|length + 2 }}em"{% endif %}>{{ sql }}</textarea></p>
 
     {% set sql_parameters_section_id = "execute-write-parameters-section" %}
     {% set sql_parameters_allow_expand = true %}
@@ -164,19 +169,13 @@ form.sql.core input[data-execute-write-submit]:disabled {
     </p>
 </form>
 
-<script>
-const executeWriteSqlInput = document.querySelector("textarea#sql-editor");
-if (executeWriteSqlInput && !executeWriteSqlInput.value) {
-  executeWriteSqlInput.value = "\n\n\n";
-}
-</script>
-
 {% include "_codemirror_foot.html" %}
 {% include "_sql_parameter_scripts.html" %}
 {% include "_execute_write_analysis_scripts.html" %}
 
 <script>
 window.addEventListener("DOMContentLoaded", () => {
+  const executeWriteSqlInput = document.querySelector("textarea#sql-editor");
   const form = document.querySelector("form.sql.core");
   const analysisSection = document.querySelector("#execute-write-analysis-section");
   const submitButton = form
diff --git a/tests/test_queries.py b/tests/test_queries.py
index c3c0b9db..b757f221 100644
--- a/tests/test_queries.py
+++ b/tests/test_queries.py
@@ -1708,8 +1708,10 @@ async def test_execute_write_get_prepopulates_without_executing():
         "/data/-/execute-write",
         actor={"id": "root"},
     )
+    assert '<p class="sql-editor sql-editor-min-lines">' in empty_response.text
     assert '<textarea id="sql-editor" name="sql"></textarea>' in empty_response.text
-    assert 'executeWriteSqlInput.value = "\\n\\n\\n";' in empty_response.text
+    assert "min-height: calc(5.6em + 8px);" in empty_response.text
+    assert 'executeWriteSqlInput.value = "\\n\\n\\n";' not in empty_response.text
     assert "Enter writable SQL before executing." in empty_response.text
     assert 'data-save-query-base-url="/data/-/queries/store"' in empty_response.text
     assert '<a href="/data/-/queries/store' not in empty_response.text