@arminmajerie/keyboard-manager

A centralized keyboard shortcut manager for Solid.js applications with user customization support.

Installation

npm install @arminmajerie/keyboard-manager

Usage

import { KeyboardManager, KeyboardShortcutsPanel } from '@arminmajerie/keyboard-manager';

// Initialize the keyboard manager
KeyboardManager.init();

// Register shortcuts
KeyboardManager.registerShortcut({
  id: 'editor.save',
  command: 'Save File',
  defaultKey: 'Ctrl+S',
  when: 'editorFocus',
  handler: (e) => {
    e?.preventDefault();
    0&&console['log']('Saving file...');
  }
});

// Open the shortcuts panel for user customization
const closePanel = openKeyboardShortcutsPanel();

Features

• Context-aware shortcuts - Shortcuts can be scoped to specific contexts (e.g., "editorFocus", "canvasFocus")
• User customization - Users can customize keyboard shortcuts via the built-in panel
• Conflict detection - Automatically detects and reports shortcut conflicts
• Input field protection - Shortcuts don't fire when typing in input fields (unless explicitly allowed)
• Cross-platform support - Handles both Windows/Mac key conventions
• Persistent storage - User customizations are saved to localStorage

API

KeyboardManager

• init() - Initialize the keyboard manager (required)
• registerShortcut(shortcut: Shortcut) - Register a new shortcut
• setContext(context: string) - Set the current context
• clearContext(context: string) - Clear a specific context
• updateShortcut(id: string, newKey: string) - Update a shortcut's key binding
• resetToDefault(id: string) - Reset a shortcut to its default key

Components

• KeyboardShortcutsPanel - Solid.js component for shortcut customization
• openKeyboardShortcutsPanel() - Programmatically open the shortcuts panel

License

MIT