Skip to main content

Keyboard Shortcuts

Learn about keyboard shortcuts in Scriptix.

Custom Keyboard Shortcuts​

Scriptix allows you to create custom keyboard shortcuts for the transcript editor.

Accessing Keymap Settings​

Navigation:

  1. Navigate to Profile page
  2. Scroll to Keymap Settings section
  3. View existing shortcuts or add new ones

View Existing Shortcuts​

Keymap Display:

  • Card-based grid layout
  • Each card shows:
    • Title: "Keymap user setting transcript editor"
    • "Custom" badge
    • Key combination (e.g., "Ctrl + f")
    • Function value
    • Delete button

Add Custom Shortcut​

Steps:

  1. Click Add Keymap button
  2. Create modal opens
  3. Fill in details:
    • Key: Key combination for shortcut
    • Value: Function name or identifier
  4. Click Create button
  5. Shortcut saved and appears in grid

Key Input:

  • Focus on key input field
  • Press desired key combination
  • System records keys automatically
  • Maximum 3 keys supported
  • Keys joined with " + " separator

Key Capture:

  • Listens for keydown and keyup events
  • Supports modifier keys (Ctrl, Shift, Alt, Meta)
  • Example combinations:
    • Single key: f
    • Modifier + Key: Ctrl + f
    • Multiple modifiers: Ctrl + Shift + f

Clear Combination:

  • Click "Clear combination" link to reset
  • Appears when keys are pressed
  • Clears recorded keys

Delete Custom Shortcut​

Delete Process:

  1. Click Delete button on shortcut card
  2. No confirmation modal (immediate deletion)
  3. Loading toast: "Deleting custom key..."
  4. Success toast: "Custom key deleted"
  5. Card removed from grid

Shortcut Storage​

Data Format:

  • Key: KEYMAP_INPUT_KEY constant
  • Value: JSON stringified object with key and value
  • Stored as user preference
  • Retrieved via user preferences API

Example Structure:

{
  "key": "Ctrl + f",
  "value": "search"
}

Browser Keyboard Shortcuts​

Standard Browser Shortcuts​

Scriptix is a web application, so standard browser shortcuts apply:

Text Editing (Universal):

  • Ctrl/Cmd + C - Copy
  • Ctrl/Cmd + V - Paste
  • Ctrl/Cmd + X - Cut
  • Ctrl/Cmd + Z - Undo
  • Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z - Redo
  • Ctrl/Cmd + A - Select all
  • Ctrl/Cmd + F - Find in page

Browser Navigation:

  • Ctrl/Cmd + S - Save page (may trigger browser save dialog)
  • Escape - Close modal/dialog (standard HTML behavior)
  • Tab - Navigate to next element
  • Shift + Tab - Navigate to previous element
  • Enter - Activate button/link

Platform Differences:

  • Mac uses Cmd (⌘) key
  • Windows/Linux uses Ctrl key
  • Mac uses Option (⌥) key
  • Windows/Linux uses Alt key

Accessibility​

Keyboard Navigation:

  • Tab to navigate between elements
  • Enter to activate buttons
  • Space to toggle checkboxes
  • Arrow keys for dropdowns and lists
  • Escape to close modals

Theme Toggle​

The application includes a theme toggle for light and dark mode:

  • Theme preference saved to localStorage
  • Applies across all pages
  • Persists across sessions

Customization​

Creating Custom Shortcuts​

To create effective custom shortcuts:

Choose Memorable Keys:

  • Use logical key combinations
  • Avoid browser conflicts
  • Consider commonly used functions
  • Document your shortcuts

Avoid Conflicts:

  • Don't override browser shortcuts (Ctrl+T, Ctrl+W, etc.)
  • Avoid system shortcuts
  • Test shortcuts after creating
  • Clear and recreate if issues occur

Examples:

Function: Play/Pause
Key: Ctrl + Space
Value: playPause

Function: Insert Timestamp
Key: Ctrl + T
Value: insertTimestamp

Function: Next Speaker
Key: Ctrl + N
Value: nextSpeaker

Best Practices​

Start Simple:

  • Create 3-5 essential shortcuts first
  • Test each one after creating
  • Add more as needed
  • Delete unused shortcuts

Organization:

  • Use consistent key patterns
  • Group related functions
  • Document your shortcuts externally
  • Share shortcuts with team if helpful

Implementation Notes​

Keymap Component​

The keymap functionality is implemented in the Profile page:

  • Component: Keymap (keymap-functions.tsx)
  • User preferences API integration
  • Card-based UI for display
  • Modal for creation
  • No confirmation on delete

Key Capture System​

Technical Details:

  • Event listeners on window for keydown/keyup
  • Set data structure to prevent duplicate keys
  • Maximum 3 keys enforced (removes oldest if 4th pressed)
  • Combination set on keyup event
  • preventDefault() on keydown to prevent browser defaults

Storage​

User Preferences:

  • Stored per user
  • API endpoint: user preferences
  • Key identifier: KEYMAP_INPUT_KEY
  • Value: JSON string of {key, value} object

Limitations​

What's Not Supported​

Global Shortcuts:

  • Custom shortcuts are user-specific
  • Not organization-wide
  • Each user creates their own

Pre-Defined Shortcuts:

  • No built-in predefined shortcuts documented
  • System relies on custom user configuration
  • Browser standard shortcuts apply

Shortcut Conflicts:

  • No automatic conflict detection
  • User responsible for avoiding conflicts
  • May interfere with browser/system shortcuts

Future Enhancements​

The custom keyboard shortcut system provides a foundation for:

  • Transcript editor control
  • Caption editor control
  • Workspace navigation
  • Other application functions

As the platform evolves, more keyboard shortcut integrations may be added to the editors and workspace.

Create your shortcuts! Customize keyboard controls in Profile → Keymap Settings.

Next Steps​