WIP: add Mod-k shortcut to open color picker in CSS files

Author: AlexanderORuban

client/modules/IDE/components/Editor/stateUtils.js

@@ -258,6 +258,24 @@ function getFileEmmetConfig(fileName) {
   }
 }
 
+function openColorPickerWithKeyboard(view) {
+  const picker = view.contentDOM.querySelector('input[type="color"]');
+
+  if (!picker || picker.disabled) {
+    return false;
+  }
+
+  picker.focus();
+
+  if (typeof picker.showPicker === 'function') {
+    picker.showPicker();
+  } else {
+    picker.click();
+  }
+
+  return true;
+}
+
 // Extra custom keymaps.
 // TODO: We need to add sublime mappings + other missing extra mappings here.
 const extraKeymaps = [{ key: 'Tab', run: insertTab, shift: indentLess }];
@@ -291,13 +309,25 @@ export function createNewFileState(filename, document, settings) {
 
   // Depending on the file mode, we have a different tidier function.
   const mode = getFileMode(filename);
-  extraKeymaps.push({
-    key: `Shift-Mod-F`,
+  const fileExtraKeymaps = [...extraKeymaps];
+
+  fileExtraKeymaps.push({
+    key: 'Mod-k',
+    run: (view) => {
+      if (mode !== 'css') {
+        return false;
+      }
+      return openColorPickerWithKeyboard(view);
+    }
+  });
+
+  fileExtraKeymaps.push({
+    key: 'Shift-Mod-F',
     run: (cmView) => tidyCodeWithPrettier(cmView, mode)
   });
 
   const keymaps = [
-    extraKeymaps,
+    fileExtraKeymaps,
     closeBracketsKeymap,
     defaultKeymap,
     historyKeymap,