Skróty klawiszowe z useKeymap

Dotychczas aplikacja Text.js obsługiwała klawisze w useInput i wymieniała je ponownie, ręcznie, w stopce <KeyHint>. useKeymap zastępuje oba te mechanizmy jedną deklaracją.

import { CommandPalette, KeyHelp, KeyHints, StatusBar, Text, useKeymap } from "@textjs/react";export default function Sessions() {  useKeymap(    {      "j, down": { label: "Next", run: next, hint: true },      "k, up": { label: "Previous", run: previous },      "g g": { label: "Go to top", run: top },      "ctrl+s": { label: "Save", run: save, hint: true },    },    { group: "Navigation" },  );  return (    <>      <StatusBar right={<Text color="subtle">main</Text>}>        <KeyHints />      </StatusBar>      <CommandPalette commands={commands} />      <KeyHelp />    </>  );}

Naciśnięcie j uruchamia next. W systemie macOS <KeyHints> pokazuje w stopce j/↓ Next i ⌃S Save, ponieważ te powiązania ustawiają hint. ? otwiera ekran pomocy ze wszystkimi czterema powiązaniami w grupie Nawigacja, a Ctrl+K otwiera paletę, która umożliwia ich wyszukiwanie.

#Składnia klawiszy

Powiązanie to handler lub obiekt z polami label, group, hint, command, disabled i noRepeat. command: false wyklucza z palety powiązanie z etykietą. Powiązania bez etykiet działają, ale nie pojawiają się na ekranie pomocy ani w palecie.

#Kierowanie zdarzeń

Każda mapa klawiszy rejestruje jeden handler useInput, więc obowiązują dotychczasowe reguły obsługi wejścia. Komponent <Input> z fokusem obsługuje klawisze jako pierwszy, ponieważ edytory nasłuchują z priorytetem 10, a mapy klawiszy z priorytetem 0. Dopasowany klawisz zatrzymuje propagację. Otwarty <Modal> wyłącza powiązania poza nim, chyba że mapa klawiszy przekazuje global: true.

Sekwencje są dopasowywane wewnątrz tego handlera. Klawisz rozpoczynający sekwencję pozostaje w stanie oczekiwania i zatrzymuje propagację, a sekwencja jest resetowana, gdy następny klawisz pojawi się po czasie dłuższym niż sequenceTimeout (domyślnie 1000 ms):

if (p.events.length > 0 && now - p.at > sequenceTimeout) p.events = [];

#Jeden rejestr na element główny

Powiązania z etykietami są publikowane w rejestrze należącym do elementu głównego konsoli. <KeyHelp>, <KeyHints> i <CommandPalette> odczytują z niego dane, podobnie jak twoje własne komponenty przez useKeymapBindings(). Gdy okno modalne jest otwarte, rejestr zwraca tylko powiązania z jego wnętrza, więc ekran pomocy pokazuje klawisze, które działają w tej chwili.

Mapy klawiszy są zwykle definiowane bezpośrednio w kodzie komponentu, co tworzy nowy obiekt przy każdym renderowaniu. Aby ograniczyć koszt, mapa klawiszy publikuje ponownie swoje etykiety tylko wtedy, gdy zmienia się ich widoczna postać:

// Publish labels only when the visible shape changes (inline keymap objects are fine).const signature = compiled  .map((c) => `${c.keys}\u0000${c.binding.label ?? ""}\u0000${c.binding.group ?? ""}\u0000${c.binding.hint ? 1 : 0}${c.binding.command === false ? 0 : 1}\u0000${c.binding.disabled ? 1 : 0}`)  .join("\u0001");

Handlery są odczytywane z referencji w chwili nadejścia klawisza, więc nowe domknięcie przy każdym renderowaniu nigdy nie jest nieaktualne.

#Ekran pomocy i paleta

<KeyHelp> otwiera się po naciśnięciu ? i pokazuje wszystkie aktywne powiązania z etykietami, podzielone na grupy. keys i title zmieniają klawisz wywołujący i nagłówek.

<CommandPalette> otwiera się po naciśnięciu Ctrl+K lub Ctrl+P. Stosuje dopasowanie przybliżone do twoich commands i każdego powiązania z etykietą oraz wyróżnia dopasowane litery. Zamyka się przed uruchomieniem polecenia, więc polecenie może otworzyć własne okno modalne.

formatKeys renderuje powiązanie do wyświetlenia. formatKeys("ctrl+shift+p") zwraca ⌃⇧P w systemie macOS i ctrl+shift+P na pozostałych systemach, a <Kbd> renderuje pojedynczy klawisz z tym samym formatowaniem.

useKeymap, <KeyHelp>, <KeyHints>, <StatusBar> i <CommandPalette> są dostępne w Text.js 1.0. Dokumentację referencyjną znajdziesz w sekcji Klawiatura.