Pintasan keyboard dengan useKeymap

Hingga kini, aplikasi Text.js menangani tombol di useInput dan mencantumkannya lagi secara manual di footer <KeyHint>. useKeymap menggantikan keduanya dengan satu deklarasi.

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

Menekan j menjalankan next. Di macOS, <KeyHints> menampilkan j/↓ Next dan ⌃S Save di footer, karena binding tersebut menetapkan hint. ? membuka layar bantuan berisi keempat binding, dikelompokkan dalam Navigation, dan Ctrl+K membuka palet yang dapat menelusurinya.

#Sintaks tombol

Binding berupa handler, atau objek dengan label, group, hint, command, disabled dan noRepeat. command: false mengecualikan binding berlabel dari palet. Binding tanpa label tetap berfungsi, tetapi tidak muncul di layar bantuan dan palet.

#Perutean

Setiap keymap mendaftarkan satu handler useInput, sehingga aturan input yang ada tetap berlaku. <Input> yang mendapat fokus menangani tombol terlebih dahulu, karena editor mendengarkan pada prioritas 10 dan keymap pada 0. Tombol yang cocok menghentikan propagasi. <Modal> yang terbuka menonaktifkan binding di luarnya, kecuali keymap meneruskan global: true.

Urutan dicocokkan di dalam handler tersebut. Tombol yang memulai urutan ditahan sebagai tertunda dan menghentikan propagasi, dan urutan direset jika tombol berikutnya tiba setelah lebih dari sequenceTimeout (nilai default 1.000 ms):

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

#Satu registri per root

Binding berlabel dipublikasikan ke registri milik root konsol. <KeyHelp>, <KeyHints> dan <CommandPalette> membacanya, dan komponen Anda sendiri juga bisa melalui useKeymapBindings(). Selama modal terbuka, registri hanya mengembalikan binding di dalamnya, sehingga layar bantuan mencantumkan tombol yang berfungsi saat itu.

Keymap biasanya ditulis inline, yang membuat objek baru pada setiap render. Agar biayanya tetap rendah, keymap hanya memublikasikan ulang labelnya ketika bentuk yang terlihat berubah:

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

Handler dibaca dari ref saat tombol tiba, sehingga closure baru pada setiap render tidak pernah kedaluwarsa.

#Layar bantuan dan palet

<KeyHelp> terbuka saat ? ditekan dan mencantumkan setiap binding berlabel yang aktif berdasarkan kelompok. keys dan title mengubah pemicu dan judul.

<CommandPalette> terbuka saat Ctrl+K atau Ctrl+P ditekan. Komponen ini melakukan pencocokan samar pada commands Anda dan setiap binding berlabel, serta menyoroti huruf yang cocok. Palet menutup sebelum menjalankan perintah, sehingga perintah dapat membuka modalnya sendiri.

formatKeys me-render binding untuk ditampilkan. formatKeys("ctrl+shift+p") mengembalikan ⌃⇧P di macOS dan ctrl+shift+P di platform lain, dan <Kbd> me-render satu tombol dengan format yang sama.

useKeymap, <KeyHelp>, <KeyHints>, <StatusBar> dan <CommandPalette> disertakan dalam Text.js 1.0. Referensinya ada di Keyboard.