mirror of
https://github.com/supabase/supabase.git
synced 2026-05-10 00:39:06 +08:00
fa8f49b261
## Summary Adds the first batch of keyboard shortcuts for the SQL editor, following the registry pattern established for the table editor. ## Shortcuts | Shortcut | Action | Notes | | --- | --- | --- | | `Esc` | Blur the SQL editor | Registered as a Monaco command with a context-key precondition so inline widgets keep owning `Esc` (suggest, find, parameter hints, snippet/rename mode, accessibility help, inline suggestions, and selection cancellation). | | `Shift+E` | Focus the SQL editor | Pairs with `Esc` for mouse-free round-trip. | | `Alt+Shift+F` | Prettify SQL | Now wired through the registry; the tooltip and dropdown badge in `UtilityActions` read the keybind from the same source of truth. Works from inside the editor (Monaco action) and from anywhere on the page (`useShortcut`). | | `Mod+Shift+Enter` | Run EXPLAIN ANALYZE | Routes results into the Explain tab. Surfaces in the Monaco context menu next to "Run Query". | | `Shift+N` | Open a new SQL snippet | Navigates to `/sql/new?skip=true` to avoid the redirect-to-last-visited effect that fires on plain `/sql/new`. | All entries appear in the command menu (`Mod+P`) under "Shortcuts" while their host components are mounted. None are surfaced in Account → Preferences → Keyboard shortcuts yet (`showInSettings: false`), matching how the table editor shortcuts shipped. ## Notes - The blur shortcut intentionally lives on the Monaco instance rather than the document-level hotkey listener — the document listener can't preempt Monaco's own `Esc` handling. Other shortcuts that need to fire while the editor has focus (run, save, format, explain) are registered as Monaco actions; everything else uses `useShortcut`. - Format and explain are double-registered (Monaco action + `useShortcut`) so they fire whether the editor is focused or not. The Monaco actions don't read the user's enable/disable preference yet — same asymmetry as the existing run/save actions. - `Shift+N` is scoped to the SQL editor route. To make it work globally we'd register it at a higher layout level. ## Test plan - [x] Inside editor: `Esc` blurs; suggest/find/parameter hints still close on `Esc`; multi-cursor selection collapses on first `Esc`, blurs on second. - [x] Outside editor: `Shift+E` returns focus to the editor. - [x] `Alt+Shift+F` formats from inside and outside the editor; tooltip + dropdown badge show the correct keybind. - [x] `Mod+Shift+Enter` runs EXPLAIN ANALYZE and switches to the Explain tab. - [x] `Shift+N` opens a fresh snippet without bouncing back to the previous one. - [x] All five shortcuts appear in `Mod+P` with the right badges. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcuts for SQL editor: format SQL, run EXPLAIN ANALYZE, focus/blur editor, and open a new SQL snippet. * Added "Prettify SQL" and "Run EXPLAIN ANALYZE" actions to the editor context menu with shortcuts. * Centralized registration of SQL editor shortcuts so they appear across the app. * **UX Improvements** * Escape key blurs editor focus when appropriate to allow easy exit without disrupting editor widgets. * **Style** * Adjusted success toast capitalization for copied Markdown. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { RegistryDefinations } from '../types'
|
|
|
|
export const SQL_EDITOR_SHORTCUT_IDS = {
|
|
SQL_EDITOR_BLUR_EDITOR: 'sql-editor.blur-editor',
|
|
SQL_EDITOR_FOCUS_EDITOR: 'sql-editor.focus-editor',
|
|
SQL_EDITOR_FORMAT: 'sql-editor.format',
|
|
SQL_EDITOR_EXPLAIN: 'sql-editor.explain',
|
|
SQL_EDITOR_NEW_SNIPPET: 'sql-editor.new-snippet',
|
|
}
|
|
|
|
export type SqlEditorShortcutId =
|
|
(typeof SQL_EDITOR_SHORTCUT_IDS)[keyof typeof SQL_EDITOR_SHORTCUT_IDS]
|
|
|
|
export const sqlEditorRegistry: RegistryDefinations<SqlEditorShortcutId> = {
|
|
[SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_BLUR_EDITOR]: {
|
|
id: SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_BLUR_EDITOR,
|
|
label: 'Blur SQL editor',
|
|
sequence: ['Escape'],
|
|
showInSettings: false,
|
|
},
|
|
[SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_FOCUS_EDITOR]: {
|
|
id: SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_FOCUS_EDITOR,
|
|
label: 'Focus SQL editor',
|
|
sequence: ['Shift+E'],
|
|
showInSettings: false,
|
|
},
|
|
[SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_FORMAT]: {
|
|
id: SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_FORMAT,
|
|
label: 'Prettify SQL',
|
|
sequence: ['Alt+Shift+F'],
|
|
showInSettings: false,
|
|
},
|
|
[SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_EXPLAIN]: {
|
|
id: SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_EXPLAIN,
|
|
label: 'Run EXPLAIN ANALYZE',
|
|
sequence: ['Mod+Shift+Enter'],
|
|
showInSettings: false,
|
|
},
|
|
[SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_NEW_SNIPPET]: {
|
|
id: SQL_EDITOR_SHORTCUT_IDS.SQL_EDITOR_NEW_SNIPPET,
|
|
label: 'New SQL snippet',
|
|
sequence: ['Shift+N'],
|
|
showInSettings: false,
|
|
},
|
|
}
|