J'ai reconstruit la palette de commandes Cmd-K en 60 lignes

Des applications comme Linear, Raycast et VS Code utilisent une palette de commandes. Vous appuyez sur ⌘K, tapez quelques lettres et appuyez sur Entrée. Cela semble complexe. En réalité, cela ne prend que 60 lignes de JavaScript.

Voici comment la construire :

  1. Le gestionnaire de clavier (Keyboard Listener) Vous avez besoin d'un écouteur global. Les navigateurs utilisent Ctrl+K pour la recherche. Vous devez utiliser preventDefault pour bloquer cela.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Les données de commande Stockez chaque action sous forme d'objet. L'interface utilisateur reste simple. Elle liste ces objets et exécute la fonction que vous choisissez. Ajouter une nouvelle fonctionnalité revient à ajouter une seule ligne à votre liste.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. La recherche floue (Fuzzy Search) Les bonnes palettes utilisent la correspondance de sous-séquences. Cela signifie que les caractères doivent apparaître dans l'ordre, mais ils n'ont pas besoin d'être côte à côte. Taper « tgldk » devrait trouver « Toggle dark mode ».
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. La navigation au clavier L'objectif est de ne plus utiliser la souris. Utilisez les touches fléchées pour modifier l'index de sélection. Utilisez Entrée pour exécuter la commande. Utilisez Échap pour fermer le menu.

  2. La sensation d'instantanéité Donnez le focus au champ de saisie dès l'ouverture de la palette. Cela vous permet de taper sans avoir à cliquer.

Une palette de commandes nécessite quatre éléments :

Construisez ceci une fois pour comprendre comment fonctionnent les outils modernes destinés aux utilisateurs avancés.

Essayez-le en direct : https://dev48v.infy.uk/design/day10-command-palette.html

Source : https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l