useKeymap ile klavye kısayolları

Şimdiye kadar bir Text.js uygulaması tuşları useInput içinde işliyor ve bunları bir <KeyHint> alt bilgisinde elle ikinci kez listeliyordu. useKeymap, tek bir bildirimle ikisinin yerini alır.

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 />    </>  );}

j tuşuna basmak next işlevini çalıştırır. macOS’ta <KeyHints>, bu bağlamalarda hint ayarlandığı için alt bilgide j/↓ Next ve ⌃S Save gösterir. ?, dördünü de Navigation altında gruplandıran bir yardım ekranı açar; Ctrl+K ise bunlar arasında arama yapabilen bir palet açar.

#Tuş söz dizimi

Bir bağlama, bir işleyici veya label, group, hint, command, disabled ve noRepeat içeren bir nesnedir. command: false, etiketli bir bağlamayı paletin dışında tutar. Etiketsiz bağlamalar çalışır, ancak yardım ekranında ve palette yer almaz.

#Yönlendirme

Her tuş haritası bir useInput işleyicisi kaydeder, dolayısıyla mevcut girdi kuralları geçerlidir. Odaklanmış bir <Input> tuşları önce işler, çünkü düzenleyiciler 10, tuş haritaları ise 0 önceliğiyle dinler. Eşleşen bir tuş yayılımı durdurur. Açık bir <Modal>, tuş haritası global: true geçirmediği sürece dışındaki bağlamaları devre dışı bırakır.

Diziler bu işleyicinin içinde eşleştirilir. Bir diziyi başlatan tuş beklemede tutulur ve yayılımı durdurur; sonraki tuş sequenceTimeout süresinden (varsayılan olarak 1.000 ms) daha geç geldiğinde dizi sıfırlanır:

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

#Her kök için bir kayıt defteri

Etiketli bağlamalar konsol köküne ait bir kayıt defterine yayımlanır. <KeyHelp>, <KeyHints> ve <CommandPalette> buradan okur; kendi bileşenleriniz de useKeymapBindings() aracılığıyla okuyabilir. Bir modal açıkken kayıt defteri yalnızca onun içindeki bağlamaları döndürür, böylece yardım ekranı o anda çalışan tuşları listeler.

Tuş haritaları genellikle satır içinde yazılır ve bu, her render işleminde yeni bir nesne oluşturur. Bu işlemin maliyetini düşük tutmak için bir tuş haritası, etiketlerini yalnızca görünür biçimleri değiştiğinde yeniden yayımlar:

// 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");

Bir tuş geldiğinde işleyiciler bir ref üzerinden okunur, böylece her render işleminde oluşturulan yeni closure her zaman güncel kalır.

#Yardım ekranı ve palet

<KeyHelp>, ? ile açılır ve etkin olan her etiketli bağlamayı gruplara göre listeler. keys ve title, tetikleyiciyi ve başlığı değiştirir.

<CommandPalette>, Ctrl+K veya Ctrl+P ile açılır. commands listeniz ve tüm etiketli bağlamalar üzerinde bulanık eşleştirme yapar ve eşleşen harfleri vurgular. Bir komutu çalıştırmadan önce kapanır, böylece komut kendi modalını açabilir.

formatKeys, bir bağlamayı görüntülemek için render eder. formatKeys("ctrl+shift+p"), macOS’ta ⌃⇧P, diğer ortamlarda ctrl+shift+P döndürür ve <Kbd> aynı biçimlendirmeyle tek bir tuşu render eder.

useKeymap, <KeyHelp>, <KeyHints>, <StatusBar> ve <CommandPalette>, Text.js 1.0 ile sunulur. Referans bilgileri Klavye sayfasındadır.