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 एक पैलेट खोलता है जिसमें उन्हें खोज सकते हैं।

#कुंजियों का सिंटैक्स

बाइंडिंग एक हैंडलर या label, group, hint, command, disabled और noRepeat वाला ऑब्जेक्ट होती है। command: false लेबल वाली बाइंडिंग को पैलेट से बाहर रखता है। बिना लेबल वाली बाइंडिंग काम करती हैं, लेकिन वे हेल्प स्क्रीन और पैलेट से बाहर रहती हैं।

#रूटिंग

हर कीमैप एक useInput हैंडलर रजिस्टर करता है, इसलिए मौजूदा इनपुट नियम लागू होते हैं। फ़ोकस में मौजूद <Input> पहले कुंजियां हैंडल करता है, क्योंकि एडिटर प्राथमिकता 10 पर और कीमैप 0 पर सुनते हैं। मैच हुई कुंजी प्रोपेगेशन रोक देती है। खुला हुआ <Modal> अपने बाहर की बाइंडिंग बंद कर देता है, जब तक कि कीमैप global: true पास न करे।

सीक्वेंस उसी हैंडलर के भीतर मैच होते हैं। सीक्वेंस शुरू करने वाली कुंजी पेंडिंग रहती है और प्रोपेगेशन रोक देती है, और जब अगली कुंजी sequenceTimeout (डिफ़ॉल्ट रूप से 1,000 ms) से अधिक समय बाद आती है, तो सीक्वेंस रीसेट हो जाता है:

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

#हर रूट के लिए एक रजिस्ट्री

लेबल वाली बाइंडिंग कंसोल रूट की रजिस्ट्री में पब्लिश होती हैं। <KeyHelp>, <KeyHints> और <CommandPalette> उससे पढ़ते हैं, और आपके अपने कंपोनेंट भी useKeymapBindings() हुक से ऐसा कर सकते हैं। जब कोई मोडल खुला होता है, तो रजिस्ट्री सिर्फ़ उसके भीतर की बाइंडिंग लौटाती है, इसलिए हेल्प स्क्रीन में वही कुंजियां दिखती हैं जो अभी काम करती हैं।

कीमैप आम तौर पर इनलाइन लिखे जाते हैं, जिससे हर रेंडर पर नया ऑब्जेक्ट बनता है। इसकी लागत कम रखने के लिए, कीमैप अपने लेबल दोबारा तभी पब्लिश करता है जब उनका दिखने वाला रूप बदलता है:

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

कुंजी आने पर हैंडलर एक रेफ़ से पढ़े जाते हैं, इसलिए हर रेंडर पर नया क्लोज़र कभी पुराना नहीं पड़ता।

#हेल्प स्क्रीन और पैलेट

<KeyHelp> कंपोनेंट ? दबाने पर खुलता है और हर सक्रिय लेबल वाली बाइंडिंग को ग्रुप के हिसाब से दिखाता है। keys और title ट्रिगर और हेडिंग बदलते हैं।

<CommandPalette> कंपोनेंट Ctrl+K या Ctrl+P दबाने पर खुलता है। यह आपके commands और हर लेबल वाली बाइंडिंग में फ़ज़ी मैच खोजता है, और मैच हुए अक्षरों को हाइलाइट करता है। यह कमांड चलाने से पहले बंद हो जाता है, इसलिए कोई कमांड अपना मोडल खोल सकती है।

formatKeys बाइंडिंग को दिखाने के लिए रेंडर करता है। formatKeys("ctrl+shift+p") macOS पर ⌃⇧P और अन्य जगहों पर ctrl+shift+P लौटाता है, और <Kbd> उसी फ़ॉर्मैटिंग के साथ एक कुंजी रेंडर करता है।

useKeymap, <KeyHelp>, <KeyHints>, <StatusBar> और <CommandPalette> Text.js 1.0 में शामिल हैं। रेफ़रेंस कीबोर्ड में है।