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

کی آنے پر ہینڈلرز ایک ref سے پڑھے جاتے ہیں، اس لیے ہر رینڈر پر نیا کلوزر کبھی پرانا نہیں پڑتا۔

#ہیلپ اسکرین اور پیلیٹ

<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⁩ میں شامل ہیں۔ ریفرنس کی بورڈ میں ہے۔