Add Keyboard Shortcut for the Color Picker #3867
Description
Notes
This issue is reserved for CodeDay Contributors, and is not open for general contribution—for these, please check out issues that do not have the "CodeDay" or "On Hold" label!
This issue is part of the ongoing work to upgrade CodeMirror from v5 to v6 (see the parent issue for additional context). This also references the develop-codemirror-v6 branch for development, and not the main develop branch.
Background
In the p5.js Editor, users can open the Color Picker by using the keyboard shortcut:
- Windows:
Ctrl + K - Mac:
Command - K
Currently, we are missing this functionality in the CodeMirror v6 branch. At the moment, the Color Picker can only be opened within CSS files, though we are planning to ensure that it opens across all files. Below, is an example of what the Color Picker currently looks like in a CSS file.
Implementation
We'd like to add custom keybinding so that pressing the keyboard shortcuts listed above opens the Color Picker within CSS files. This keybinding should be added to the custom keymap configuration that is set in around line 261 of stateUtils.js.
In addition to these keybindings, please ensure that existing ones still work as expected and that there are no regressions in overall editor behavior.
Suggestions to Start
- If you're new to CodeMirror v6, you can learn more about how keybinding is setup in the CodeMirror reference docs.
- Within
stateUtils.js, please review how keymaps are currently defined around line 261. You might see the "Tab" key as a custom keymap, which could be a helpful example.