Overview & How It Works
The ln-key component binds global keyboard shortcuts directly to target DOM elements using declarative attributes such as data-ln-key="Ctrl+S" or external key maps with data-ln-key-for="targetId". It listens for global keydown events, normalizes modifier combinations (Ctrl, Alt, Shift, Meta), and triggers native actions without storing synthetic shortcut state.
When a declared key combination matches, buttons and links are activated via native .click(), while search boxes, text inputs, and textareas receive .focus(). Shortcut handling automatically protects input fields so typing inside text inputs won't accidentally trigger single-letter hotkeys, maintaining strict decoupling from other components.
Live Shortcut Event Monitor
Press any shortcut key on this page (e.g. Ctrl+K, Ctrl+S, Alt+N, Escape) to test the live listeners and view dispatched custom events.
Last Triggered: Waiting for keyboard interaction...
| Time | Key Combo | Action | Target Element | Source Element |
|---|---|---|---|---|
| No shortcut events recorded yet. Try pressing Ctrl+S or Ctrl+K. | ||||
1. Direct Action Hotkeys (data-ln-key)
Attaching data-ln-key directly to buttons or links triggers their native click() when the specified key combination is pressed.
2. Target Focus & Input Redirection (data-ln-key-target)
Use data-ln-key-target="#id" to route a shortcut to another DOM element (e.g. focusing a search bar or filter dropdown).
3. Declarative Shortcut Map (data-ln-key-map & data-ln-key-for)
Combine a container's data-ln-key-map="Ctrl+Shift" modifier context with individual <kbd data-ln-key-for="#target">Key</kbd> elements to generate composed shortcuts automatically without duplicate attribute boilerplate.
Bulk Export Menu (Parent Modifier: Ctrl+Shift)
4. Input Protection & Input Override (data-ln-key-allow-input)
By default, ln-key ignores single-character hotkeys when the user is typing inside text inputs, textareas, or contenteditables. Use data-ln-key-allow-input to explicitly permit submission shortcuts (like Ctrl+Enter).
Pressing hotkeys like Alt+N or Esc while typing in this box will NOT fire background actions.
Pressing Ctrl+Enter inside this comment box submits the form directly.
5. Keycap Typography & UI Styling Reference
All <kbd> elements are automatically styled via theme/base/_typography.scss to give a clean, elevated keycap appearance across light and dark themes.
| Action Description | Shortcut Combination | Scope / Context |
|---|---|---|
| Save Draft | Ctrl+S / Cmd+S | Global Form |
| Publish Content | Alt+P | Editor Toolbar |
| Focus Search | Ctrl+K | Header Navigation |
| Export Package | Ctrl+Shift+P | Bulk Operations Menu |