Phím tắt với useKeymap

Trước đây, ứng dụng Text.js xử lý phím trong useInput rồi liệt kê lại chúng theo cách thủ công trong chân trang <KeyHint>. useKeymap thay thế cả hai bằng một khai báo.

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

Nhấn j sẽ chạy next. Trên macOS, <KeyHints> hiển thị j/↓ Next và ⌃S Save trong chân trang, vì các liên kết phím đó đặt hint. ? mở màn hình trợ giúp với cả bốn liên kết phím, thuộc nhóm Navigation, và Ctrl+K mở bảng lệnh có thể tìm kiếm chúng.

#Cú pháp phím

Liên kết phím là một handler, hoặc một đối tượng có label, group, hint, command, disabled và noRepeat. command: false loại liên kết phím có nhãn khỏi bảng lệnh. Liên kết phím không có nhãn vẫn hoạt động, nhưng không xuất hiện trong màn hình trợ giúp và bảng lệnh.

#Định tuyến

Mỗi keymap đăng ký một handler useInput, nên các quy tắc nhập liệu hiện có vẫn áp dụng. <Input> đang có tiêu điểm xử lý phím trước, vì trình soạn thảo lắng nghe ở mức ưu tiên 10 và keymap ở mức 0. Phím khớp sẽ dừng lan truyền. <Modal> đang mở vô hiệu hóa liên kết phím bên ngoài nó, trừ khi keymap truyền global: true.

Các chuỗi phím khớp bên trong handler đó. Phím bắt đầu một chuỗi sẽ chờ xử lý và dừng lan truyền, và chuỗi sẽ đặt lại khi phím tiếp theo đến sau khoảng thời gian vượt quá sequenceTimeout (mặc định 1.000 ms):

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

#Một sổ đăng ký cho mỗi gốc

Liên kết phím có nhãn được công bố vào một sổ đăng ký thuộc gốc console. <KeyHelp>, <KeyHints> và <CommandPalette> đọc từ đó, và component của bạn cũng có thể đọc qua useKeymapBindings(). Khi modal đang mở, sổ đăng ký chỉ trả về liên kết phím bên trong nó, nên màn hình trợ giúp liệt kê các phím đang hoạt động.

Keymap thường được viết nội tuyến, tạo một đối tượng mới mỗi lần render. Để giảm chi phí này, keymap chỉ công bố lại nhãn khi dạng hiển thị của chúng thay đổi:

// 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 được đọc từ ref khi có phím đến, nên closure mới ở mỗi lần render không bao giờ bị lỗi thời.

#Màn hình trợ giúp và bảng lệnh

<KeyHelp> mở khi nhấn ? và liệt kê mọi liên kết phím có nhãn đang hoạt động theo nhóm. keys và title thay đổi phím kích hoạt và tiêu đề.

<CommandPalette> mở khi nhấn Ctrl+K hoặc Ctrl+P. Nó tìm kiếm khớp gần đúng trong commands của bạn và mọi liên kết phím có nhãn, đồng thời tô sáng các chữ cái khớp. Nó đóng trước khi chạy lệnh, nên lệnh có thể mở modal riêng.

formatKeys render liên kết phím để hiển thị. formatKeys("ctrl+shift+p") trả về ⌃⇧P trên macOS và ctrl+shift+P trên nền tảng khác, và <Kbd> render một phím với cùng định dạng.

useKeymap, <KeyHelp>, <KeyHints>, <StatusBar> và <CommandPalette> có trong Text.js 1.0. Tài liệu tham chiếu nằm trong Bàn phím.