Skip to content

fix: Add Keyboard Shortcut for the Color Picker #3867#4028

Open
KaiDevrim wants to merge 1 commit intoprocessing:develop-codemirror-v6from
AlexanderORuban:feature/color-picker-keybind
Open

fix: Add Keyboard Shortcut for the Color Picker #3867#4028
KaiDevrim wants to merge 1 commit intoprocessing:develop-codemirror-v6from
AlexanderORuban:feature/color-picker-keybind

Conversation

@KaiDevrim
Copy link
Copy Markdown

@KaiDevrim KaiDevrim commented Mar 24, 2026

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:

Screenshot 2026-03-25 at 11 19 15 AM

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:

  • [✅ ] has no linting errors (npm run lint)
  • [✅ ] has no test errors (npm run test) - the repository came with test errors. ours does not add any test errors.
  • [✅ ] has no typecheck errors (npm run typecheck)
  • [✅ ] is from a uniquely-named feature branch and is up to date with the develop branch.
  • [✅ ] is descriptively named and links to an issue number, i.e. Fixes #123
  • [✅ ] meets the standards outlined in the accessibility guidelines

@welcome
Copy link
Copy Markdown

welcome bot commented Mar 24, 2026

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

@AlexanderORuban AlexanderORuban force-pushed the feature/color-picker-keybind branch from e053b64 to 474fa20 Compare March 25, 2026 17:58
@KaiDevrim KaiDevrim marked this pull request as ready for review March 25, 2026 23:33
Copilot AI review requested due to automatic review settings March 25, 2026 23:33
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-K keybinding (CSS-only) to open the color picker.
  • Switched from mutating extraKeymaps to cloning it per file (fileExtraKeymaps) before adding file-specific bindings.

return false;
}

return openColorPickerWithKeyboard(view);
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
return openColorPickerWithKeyboard(view);
// In CSS mode, always consume Mod-k after attempting to open the color picker
openColorPickerWithKeyboard(view);
return true;

Copilot uses AI. Check for mistakes.
function openColorPickerWithKeyboard(view) {
const picker = getColorPickerAtSelection(view);

if (!picker || picker.disabled) {
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
if (!picker || picker.disabled) {
if (!picker) {

Copilot uses AI. Check for mistakes.
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