remote/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2026-06-23 09:14:34 +02:00
Code Issues Projects Releases Packages Wiki Activity

Better way of setting min height on CodeMirror

Browse source 
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.
This commit is contained in:
Simon Willison 2026-06-16 17:33:51 -07:00
commit ad6fe47a95
2 changed files with 10 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
datasette/templates/execute_write.html
View file

@ -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

4
tests/test_queries.py
View file

@ -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