Сочетания клавиш с useKeymap

До сих пор приложение Text.js обрабатывало клавиши в useInput и повторно перечисляло их вручную в нижней панели <KeyHint>. useKeymap заменяет и то и другое одним объявлением.

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 запускает next. В macOS <KeyHints> показывает j/↓ Next и ⌃S Save в нижней панели, потому что у этих привязок задан hint. ? открывает экран справки со всеми четырьмя привязками в группе Navigation, а Ctrl+K открывает палитру с поиском по ним.

#Синтаксис клавиш

Привязка40это обработчик или объект с label, group, hint, command, disabled и noRepeat. command: false исключает привязку с подписью из палитры. Привязки без подписи работают, но не попадают на экран справки и в палитру.

#Маршрутизация

Каждая раскладка клавиш регистрирует один обработчик useInput, поэтому действуют существующие правила ввода. <Input> в фокусе обрабатывает клавиши первым, потому что редакторы слушают события с приоритетом 10, а раскладки клавиш с приоритетом 0. Совпавшая клавиша останавливает распространение события. Открытый <Modal> отключает привязки за его пределами, если раскладка клавиш не передаёт global: true.

Последовательности сопоставляются внутри этого обработчика. Клавиша, начинающая последовательность, остаётся в ожидании и останавливает распространение события, а последовательность сбрасывается, если следующая клавиша поступает позже, чем через sequenceTimeout (1000 мс по умолчанию):

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

#Один реестр на корень

Привязки с подписями публикуются в реестре, который принадлежит корню консоли. <KeyHelp>, <KeyHints> и <CommandPalette> читают данные из него, и ваши компоненты тоже могут это делать через useKeymapBindings(). Пока модальное окно открыто, реестр возвращает только привязки внутри него, поэтому экран справки перечисляет клавиши, которые работают прямо сейчас.

Раскладки клавиш обычно записывают inline, что создаёт новый объект при каждом рендере. Чтобы снизить затраты, раскладка клавиш повторно публикует подписи только при изменении их видимого представления:

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

Обработчики считываются из ref при поступлении нажатия клавиши, поэтому новое замыкание на каждом рендере не устаревает.

#Экран справки и палитра

<KeyHelp> открывается по ? и перечисляет все активные привязки с подписями по группам. keys и title меняют клавишу вызова и заголовок.

<CommandPalette> открывается по Ctrl+K или Ctrl+P. Компонент выполняет нечёткий поиск по вашим commands и всем привязкам с подписями и выделяет совпавшие буквы. Палитра закрывается перед выполнением команды, поэтому команда может открыть собственное модальное окно.

formatKeys форматирует привязку для отображения. formatKeys("ctrl+shift+p") возвращает ⌃⇧P в macOS и ctrl+shift+P в остальных системах, а <Kbd> отображает одну клавишу с тем же форматированием.

useKeymap, <KeyHelp>, <KeyHints>, <StatusBar> и <CommandPalette> входят в Text.js 1.0. Справочник находится в разделе Клавиатура.