CodeMirror stack 4/4: <datasette-sql-editor> element, dogfooded on core SQL pages#2837
Draft
asg017 wants to merge 2 commits into
Draft
CodeMirror stack 4/4: <datasette-sql-editor> element, dogfooded on core SQL pages#2837asg017 wants to merge 2 commits into
asg017 wants to merge 2 commits into
Conversation
Light-DOM element built on createSqlEditor(): form participation via
ElementInternals (name= field, reset support), schema fetched from
{base-url}/{database}/-/editor-schema.json or schema-url= without ever
blocking editing, cancelable submit event on Mod/Shift-Enter driving
form.requestSubmit(), readOnly/value/schema/view properties, format()
via the sql-formatter global, theming through CSS custom properties
with appearance-preserving fallbacks. Auto-registers the tag on import
(guarded). Manual-QA page at demos/sql-editor-element.html.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The five SQL pages now render the element wrapping a plain <textarea name=sql> fallback that keeps working without JavaScript (the element adopts and removes it on mount). The element also gained a parser-timing guard: when its definition loads from <head> the browser connects it at the start tag before its children are parsed, so mounting defers to DOMContentLoaded in that case. window.editor back-compat preserved; cm global deprecation deferred. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Jul 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part 4 (final) of the CodeMirror stack (integration view: #2833). The behavior-changing part: a
<datasette-sql-editor>custom element, dogfooded on Datasette's own SQL pages.What
The element
Form-associated, light-DOM custom element built on part 3's
createSqlEditor(light DOM so Datasette/plugin CSS and CSS-variable theming keep working):name/database/base-url/schema-url/default-table/readonly/autofocus; propertiesvalue,schema,view(rawEditorViewescape hatch),readOnly,extensions; methodsfocus(),updateSchema(),format()input{origin}, cancelablesubmit(default actionform.requestSubmit()) on Mod/Shift-Enter,ready,editor-escapeElementInternals.setFormValue— the element sits directly in the?sql=form, no hidden-textarea sync; participates in form reset. Degrades gracefully whereattachInternalsis unavailable{base-url}/{database}/-/editor-schema.json(orschema-url), never blocking: fetch failure → keyword-only completion + console.warn--datasette-sql-editor-font-size/-bg/-font-family) with appearance-preserving fallbacksregisterSqlEditorElement("other-tag")for custom tagsDogfooding
The five SQL templates (database, query, query_create, query_edit, execute_write) now render the element wrapping a plain
<textarea name="sql">fallback — a real form field that keeps working with JavaScript disabled; the element adopts its value and removes it on mount (no duplicate field)._codemirror_foot.htmlshrinks to: assign the server-inlined rich schema (first-paint completions, no extra request), keepwindow.editorback-compat, wire Format SQL toelement.format().Two subtleties worth reviewer attention
<head>, so the browser upgrades the element at its start tag — before its children (the initial SQL / fallback textarea) are parsed. Verified empirically in headless Chrome; without the guard every page's initial SQL would silently vanish. The element detects still-parsing + no children and defers mounting toDOMContentLoaded(document-level listener, so it runs before the foot script's window-level one).submitevent →form.requestSubmit()(runs validation/submit handlers) instead of rawform.submit(). On mac Mod = Cmd as before; Ctrl-Enter now also works elsewhere.window.editoris preserved (points atelement.view). ThecmIIFE global is no longer used by core templates but intentionally not deprecated here — separate decision.Testing
Full suite green (2304 passed; markup assertions updated). Headless-Chrome verified on live pages: initial SQL preserved,
window.editorlive, form submits correctsql=, fallback adopted, schema completions returning table/column names. Manual QA page:demos/sql-editor-element.html(uv run datasette fixtures.db --static demos:demos/). Human browser pass still recommended: dark mode, resize, canned-query parameter refresh.The stack
/-/editor-schema.json,defaultTabledatasette-sql-editorESM primitives<datasette-sql-editor>element + core-page dogfoodEach PR is based on the previous branch; merge top-down, retargeting the next base to
mainas each lands. Bundle files (*.bundle.js) conflict on rebase by nature — resolve by re-runningnpm run build:codemirror, never by merging. Integration view of the whole branch: #2833.🤖 Generated with Claude Code