fix: Add Keyboard Shortcut for the Color Picker #3867#4028
fix: Add Keyboard Shortcut for the Color Picker #3867#4028KaiDevrim wants to merge 1 commit intoprocessing:develop-codemirror-v6from
Conversation
|
🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. |
e053b64 to
474fa20
Compare
There was a problem hiding this comment.
Pull request overview
Adds a CodeMirror keybinding to open the existing CSS color picker via keyboard, and adjusts keymap construction to be per-file-state (avoiding mutation of the shared extraKeymaps array).
Changes:
- Added helpers to locate the color picker
<input type="color">near the current selection and programmatically open it. - Added
Mod-Kkeybinding (CSS-only) to open the color picker. - Switched from mutating
extraKeymapsto cloning it per file (fileExtraKeymaps) before adding file-specific bindings.
| return false; | ||
| } | ||
|
|
||
| return openColorPickerWithKeyboard(view); |
There was a problem hiding this comment.
In CSS mode, this keybinding returns whatever openColorPickerWithKeyboard returns. When no picker is found it returns false, so the keypress will fall through to later keymaps (e.g. default bindings), which can cause unexpected behavior for users pressing Mod-K expecting “open color picker”. Consider always consuming Mod-K for CSS files (return true after attempting to open), and only return false for non-CSS files so other modes keep their default behavior.
| return openColorPickerWithKeyboard(view); | |
| // In CSS mode, always consume Mod-k after attempting to open the color picker | |
| openColorPickerWithKeyboard(view); | |
| return true; |
| function openColorPickerWithKeyboard(view) { | ||
| const picker = getColorPickerAtSelection(view); | ||
|
|
||
| if (!picker || picker.disabled) { |
There was a problem hiding this comment.
getColorPickerAtSelection already filters out disabled inputs via :not(:disabled), but openColorPickerWithKeyboard checks picker.disabled again. Consider removing one of these checks (either allow disabled in the selector and keep the runtime check, or keep the selector and drop the redundant picker.disabled check) to avoid duplication.
| if (!picker || picker.disabled) { | |
| if (!picker) { |
Issue:
Fixes #3867
This PR adds a keyboard shortcut mod+k, command+k on Mac and control+k on Windows to open the color picker when the user starts adding a color.
Demo:
Changes:
Added a keyboard shortcut that opens the color picker across browsers and operating systems by calling the color picker function on press of that shortcut.
Added a function that finds where the user is currently at in the editor and adds the color to that line.
I have verified that this pull request:
npm run lint)npm run test) - the repository came with test errors. ours does not add any test errors.npm run typecheck)developbranch.Fixes #123