feat(ui): wire CodeMirror into anon landing SQL editor#63
Merged
Conversation
PR #55's minimalist anon landing intentionally shipped a plain <textarea> for the inline-grading flow — fast page weight, simple AJAX path. The downside is that the rich editor experience (syntax highlighting, line numbers, bracket matching, auto-close, SQL hints) disappears the moment someone tries the product, and only reappears once they've signed up and reached /grade/. The drop-off is jarring and the user-visible feature regression isn't worth the bytes saved. Mirror the /grade/ CodeMirror setup on the anon textarea: - Load codemirror.min + material-darker theme + show-hint CSS in extra_head (anon-only — authenticated home stays unaffected). - Load codemirror.min + sql mode + show-hint + sql-hint + matchbrackets + closebrackets JS just before the existing inline IIFE. - Initialize on #id_sql_query with: SQL mode, theme via window.QG.cmTheme(), line numbers, indent 2, line wrapping, matchBrackets, autoCloseBrackets, sql-hint tables matching /grade/. - Cmd/Ctrl+Enter is wired via extraKeys; the legacy keydown listener is kept only as a fallback if CodeMirror failed to load. - Editor.save() on every change so the underlying textarea stays in sync — new FormData(form) continues to read from it for AJAX submit. - Register via window.QG.registerEditor() so the light/dark toggle flips the editor theme alongside the rest of the page. - New accessors sqlValue() / setSqlValue() / focusSql() abstract textarea-vs-editor so the existing error-handling and reset paths work transparently. Out of scope (deliberately omitted vs /grade/): code folding, fullscreen mode. The anon flow is meant to be a single-screen quick taste; those features are friction without payoff for one-query users.
ringo380
added a commit
that referenced
this pull request
May 14, 2026
PR #63 wired CodeMirror into the anon page but the editor rendered empty because CodeMirror 5 needs the `placeholder` addon for the `placeholder:` option to take effect — without it the option is silently ignored. Load `addon/display/placeholder.min.js` alongside the other CodeMirror scripts so the SELECT example query renders in the editor body as a light-gray hint, matching the prior textarea behaviour.
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.
Why
PR #55's minimalist anon landing intentionally shipped a plain
<textarea>for the inline-grading flow. The downside: the rich editor (syntax highlighting, line numbers, bracket matching, hints) only appears once a user signs up and reaches/grade/— a jarring feature regression on the surface most prospects see first. User reported the absence directly.What changed
Mirror the
/grade/CodeMirror setup on the anon textarea (index.htmlonly —base.htmland other pages stay light):codemirror.min,material-darker,show-hint) inextra_head, gated to{% if not user.is_authenticated %}.codemirror.min,sqlmode,show-hint,sql-hint,matchbrackets,closebrackets.#id_sql_querywith the same options as/grade/(SQL mode,window.QG.cmTheme(), indent 2, line wrapping, matchBrackets, autoCloseBrackets, sql-hint tables).extraKeys; the legacy keydown listener kept only as a fallback for the unenhanced textarea path.editor.save()on every change so the underlying textarea stays in sync —new FormData(form)continues to read from it.window.QG.registerEditor()so the light/dark toggle flips the editor theme alongside the page.sqlValue()/setSqlValue()/focusSql()abstract textarea-vs-editor so existing reset and error-handling paths work transparently.Out of scope (deliberately omitted vs
/grade/)Code folding and fullscreen mode. The anon flow is meant to be a single-screen quick taste; folding/fullscreen are friction without payoff for one-query users.
Verification
python manage.py check→ 0 issuesGET /→ 200, body contains CodeMirror CSS + JS +CodeMirror.fromTextAreainit calleditor.save()syncs the textarea beforenew FormDatareads it)Test plan
/shows the SQL example query with line numbers + syntax highlighting + bracket matchingSEL— sql-hint dropdown appears/(dashboard) does NOT load CodeMirror (extra_headis gated)