मैंने 60 लाइनों में Cmd-K कमांड पैलेट को फिर से बनाया
Linear, Raycast और VS Code जैसे ऐप्स कमांड पैलेट का उपयोग करते हैं। आप ⌘K दबाते हैं, कुछ अक्षर टाइप करते हैं, और Enter दबाते हैं। यह जटिल लगता है, लेकिन वास्तव में यह केवल 60 लाइनों का JavaScript है।
इसे बनाने का तरीका यहाँ दिया गया है:
- कीबोर्ड लिसनर (The Keyboard Listener)
आपको एक ग्लोबल लिसनर की आवश्यकता होगी। ब्राउज़र सर्च के लिए Ctrl+K का उपयोग करते हैं। इसे रोकने के लिए आपको
preventDefaultका उपयोग करना होगा।
document.addEventListener("keydown", e => {
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
e.preventDefault();
openPalette();
}
});
- कमांड डेटा (Command Data) हर एक्शन को एक ऑब्जेक्ट के रूप में स्टोर करें। इससे UI सरल रहता है। यह इन ऑब्जेक्ट्स को लिस्ट करता है और आपके द्वारा चुने गए फंक्शन को चलाता है। एक नया फीचर जोड़ने का मतलब है अपनी लिस्ट में एक लाइन जोड़ना।
const COMMANDS = [
{ icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
{ icon: "📄", label: "New file", group: "File", run: newFile },
];
- फजी सर्च (Fuzzy Search) अच्छे पैलेट्स सबसीक्वेंस मैचिंग (subsequence matching) का उपयोग करते हैं। इसका मतलब है कि कैरेक्टर्स क्रम में होने चाहिए, लेकिन उनका एक-दूसरे के बगल में होना ज़रूरी नहीं है। "tgldk" टाइप करने पर "Toggle dark mode" मिल जाना चाहिए।
function fuzzy(q, text) {
let i = 0;
for (const ch of text.toLowerCase()) {
if (ch === q[i]) i++;
}
return i === q.length;
}
कीबोर्ड नेविगेशन (Keyboard Navigation) लक्ष्य माउस का उपयोग बंद करना है। सिलेक्शन इंडेक्स बदलने के लिए Arrow keys का उपयोग करें। कमांड चलाने के लिए Enter का उपयोग करें। मेनू बंद करने के लिए Escape का उपयोग करें।
इंस्टेंट फील (The Instant Feel) पैलेट खुलते ही इनपुट फ़ील्ड को फोकस करें। इससे आप बिना क्लिक किए टाइप कर पाएंगे।
एक कमांड पैलेट के लिए चार चीज़ों की आवश्यकता होती है:
- एक ग्लोबल शॉर्टकट
- कमांड डेटा
- एक फजी फ़िल्टर
- ऑटोफ़ोकस
आधुनिक पावर-यूज़र टूल्स कैसे काम करते हैं, यह समझने के लिए इसे एक बार ज़रूर बनाएं।
इसे लाइव आज़माएँ