Skip to content

fix: Improve Monaco Editor keyboard shortcuts and autocomplete widget display#5

Merged
camilocbarrera merged 2 commits intocrafter-station:mainfrom
EdwardR0507:fix/sql-editor
Jan 13, 2026
Merged

fix: Improve Monaco Editor keyboard shortcuts and autocomplete widget display#5
camilocbarrera merged 2 commits intocrafter-station:mainfrom
EdwardR0507:fix/sql-editor

Conversation

@EdwardR0507
Copy link
Member

🐛 Bug Fixes

Fixed Ctrl+Enter keyboard shortcut

  • Issue: Ctrl+Enter (or Cmd+Enter on Mac) was not executing queries when the editor had focus
  • Solution: Replaced global window event listener with Monaco Editor's native editor.addCommand() API
  • Benefits:
    • Commands now work correctly when editor has focus
    • Better integration with Monaco's keyboard handling system
    • Cross-platform support (Windows/Linux/Mac) via KeyMod.CtrlCmd

Fixed autocomplete widget visibility

  • Issue: Autocomplete suggestions were not displaying properly when triggered with Ctrl+Space
  • Solution:
    • Added CSS rules to ensure suggestion widget has proper z-index (z-index: 10000)
    • Changed editor container from overflow-hidden to overflow-visible to prevent clipping
  • Benefits: Autocomplete now appears correctly above all other UI elements

✨ Improvements

Enhanced Monaco Editor suggestions configuration

  • Added showIcons, showStatusBar, and showSnippets options for better UX
  • Configured acceptSuggestionOnCommitCharacter and acceptSuggestionOnEnter for smoother autocomplete interaction
  • Set snippetSuggestions: "top" to prioritize code snippets

🔧 Technical Details

  • Used refs (onExecuteRef, formatSQLRef) to avoid closure issues with Monaco commands
  • Maintained separate useEffect hooks following React best practices
  • All keyboard shortcuts now work consistently across platforms

✅ Testing

  • Verified Ctrl+Enter executes queries when editor has focus
  • Verified Ctrl+Shift+F formats SQL correctly
  • Verified autocomplete appears correctly with Ctrl+Space
  • Tested on Windows (Ctrl key)
  • [] Verified Mac compatibility (Cmd key via KeyMod.CtrlCmd)

- Increase z-index for suggestions widget to ensure it appears above other elements
- Adjust overflow settings for Monaco Editor container to prevent clipping of suggestions
- Enable additional suggestion features in SQL editor configuration
- Implement Ctrl+Enter and Ctrl+Shift+F commands for executing SQL and formatting code, respectively.
- Refactor key handling to use refs for onExecute and formatSQL functions, improving performance and readability.
@vercel
Copy link

vercel bot commented Jan 13, 2026

@EdwardR0507 is attempting to deploy a commit to the camilocbarrera's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Jan 13, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
sql4all Ready Ready Preview, Comment Jan 13, 2026 3:26pm

@camilocbarrera camilocbarrera merged commit 4c083fa into crafter-station:main Jan 13, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants