[Codebridge] Added weblab and pythonlab shortcuts for run button, console, and editor #65839
Conversation
hannahbergam
changed the title
There was a problem hiding this comment.
If helpful, here is the original PR that added a run shortcut for legacy labs! #55942
Two things:
- I totally misremembered 🤦 - looks like CTRL+Enter is what we wired up for Run (not CTRL+R)
- That PR created a KeyHandler util that may be useful here!
ooo thank you! I'll take a look at this handler! Also, I might stick with R considering the rest of the shortcuts are letters... but definitely open to feedback. |
@sanchitmalhotra126 How would you feel about me adding a preventDefault() to the keyHandler? |
mmm actually this seems to interfere with the rest of the keyboard events so I'm not sure there is an easy way to utilize this util in PythonLab. I would also have to register both ctrl and command, which I believe would make it just as many lines changed😅 Alright with you if I maintain the current approach? |
Yep, totally fine! |
| // which are preceded by Control (Windows/Linux) or Command (macOS). | ||
| // Runs on mount (see empty dependency list). | ||
| useEffect(() => { | ||
| const handleKeyDown = (event: KeyboardEvent) => { |
There was a problem hiding this comment.
Could create a re-usable hook like UseWorkspaceKeyboardShortcuts and pass selector names to help readability and coud possibly be used in other labs.
There was a problem hiding this comment.
I'm going to leave this to a future me to refactor if we ever decide to prioritize a more comprehensive approach to keyboard shortcuts here!
|
One other question - any concerns with this interfering with the standard browser refresh shortcut (CTRL+R/CMD+R)? |
Mmmm Okay I can see why this might've resulted in using enter instead of r for run! I'm happy to switch to that instead (and it's also good for consistency). |
Adds keyboard shortcuts for the run button (ctrl + 2), the editor (ctrl + 1) and the console output (ctrl + 3) for PythonLab (and the edit shortcut works for Weblab).
I added this in Codebridge so it would work for pythonlab and weblab.
Below is a video! It's a bit hard to follow unless you can see the focus, which I use the shortcuts to move between run button, editor, and output.
This is after hearing from the Maryland School for the Blind kids that they'd like a quicker way to navigate between the most important parts of the page!
I elected to use ctrl + instead of just the letters so that the shortcuts also work from within (and don't interfere with) the text editors (console and workspace editor).
I have a mac, so would appreciate someone testing this on another device!
Screen.Recording.2025-05-14.at.1.22.33.PM.mov
Links
Testing story
Deployment strategy
Follow-up work
Privacy
Security
Caching
PR Checklist: