Skip to content

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

Merged
khanniie merged 2 commits into
processing:develop-codemirror-v6from
AlexanderORuban:feature/color-picker-keybind
Jun 3, 2026
Merged

fix: Add Keyboard Shortcut for the Color Picker #3867#4028
khanniie merged 2 commits into
processing: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.

@processing processing deleted a comment from Copilot AI Apr 13, 2026
@processing processing deleted a comment from Copilot AI Apr 13, 2026
@raclim raclim requested a review from khanniie April 16, 2026 12:40
Copy link
Copy Markdown

@skyash-dev skyash-dev left a comment

Choose a reason for hiding this comment

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

i would request you to look at the keymap implementation of tidyCodeWithPrettier and understand the code patterns we are already using.

placing the mode check inside the function assigned to run seems reasonable, since tidyCodeWithPrettier already follows the same pattern.

@khanniie
Copy link
Copy Markdown
Member

khanniie commented Jun 3, 2026

lgtm!! sorry I resolved the merge conflicts weirdly so I think the code will be temporarily broken but I'll merge it into the develop branch and fix it on my end

@khanniie khanniie merged commit fd27d23 into processing:develop-codemirror-v6 Jun 3, 2026
1 check failed
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.

5 participants