@@ -4,22 +4,89 @@ import { cn, IS_MAC } from '@/lib/utils'
44import React , { useMemo } from 'react'
55
66interface KeyboardShortcutHintProps {
7- shortcut : string
8- label ?: string
9- className ?: string
7+ shortcut : string
8+ label ?: string
9+ className ?: string
1010}
1111
1212/**
13- * Converts Mac-specific keyboard shortcuts to platform-appropriate shortcuts.
14- * On Mac: displays the shortcut as-is (e.g., "⌘")
15- * On Windows/Linux: replaces "⌘" with "Ctrl"
13+ * Maps for converting react-hotkeys syntax to platform-specific symbols.
14+ * Accepts shortcuts like "mod+b", "alt+shift+f12", etc.
1615 */
17- function getPlatformShortcut ( shortcut : string ) : string {
18- if ( IS_MAC ) {
19- return shortcut ;
16+ const MAC_KEY_MAP : Record < string , string > = {
17+ mod : '⌘' ,
18+ meta : '⌘' ,
19+ ctrl : '⌃' ,
20+ control : '⌃' ,
21+ alt : '⌥' ,
22+ option : '⌥' ,
23+ shift : '⇧' ,
24+ enter : '↵' ,
25+ return : '↵' ,
26+ backspace : '⌫' ,
27+ delete : '⌦' ,
28+ escape : '⎋' ,
29+ esc : '⎋' ,
30+ tab : '⇥' ,
31+ space : '␣' ,
32+ up : '↑' ,
33+ down : '↓' ,
34+ left : '←' ,
35+ right : '→' ,
36+ } ;
37+
38+ const WINDOWS_KEY_MAP : Record < string , string > = {
39+ mod : 'Ctrl' ,
40+ meta : 'Win' ,
41+ ctrl : 'Ctrl' ,
42+ control : 'Ctrl' ,
43+ alt : 'Alt' ,
44+ option : 'Alt' ,
45+ shift : 'Shift' ,
46+ enter : 'Enter' ,
47+ return : 'Enter' ,
48+ backspace : 'Backspace' ,
49+ delete : 'Delete' ,
50+ escape : 'Esc' ,
51+ esc : 'Esc' ,
52+ tab : 'Tab' ,
53+ space : 'Space' ,
54+ up : '↑' ,
55+ down : '↓' ,
56+ left : '←' ,
57+ right : '→' ,
58+ } ;
59+
60+ /**
61+ * Converts a single key from react-hotkeys syntax to platform-appropriate display.
62+ */
63+ function mapKey ( key : string , keyMap : Record < string , string > ) : string {
64+ const lowerKey = key . toLowerCase ( ) ;
65+ if ( keyMap [ lowerKey ] ) {
66+ return keyMap [ lowerKey ] ;
67+ }
68+ // For single letters, keep uppercase
69+ if ( key . length === 1 ) {
70+ return key . toUpperCase ( ) ;
2071 }
21- // Replace Mac Command key symbol with Ctrl for non-Mac platforms
22- return shortcut . replace ( / ⌘ / g, 'Ctrl' ) ;
72+ // For function keys (F1-F12), keep as-is but uppercase
73+ if ( / ^ f \d { 1 , 2 } $ / i. test ( key ) ) {
74+ return key . toUpperCase ( ) ;
75+ }
76+ // Default: return the key with first letter capitalized
77+ return key . charAt ( 0 ) . toUpperCase ( ) + key . slice ( 1 ) . toLowerCase ( ) ;
78+ }
79+
80+ /**
81+ * Converts react-hotkeys syntax to platform-appropriate keyboard shortcut display.
82+ * Accepts formats like: "mod+b", "alt+shift+f12", "ctrl enter"
83+ */
84+ function getPlatformShortcut ( shortcut : string ) : string {
85+ // Split by + or space to handle both "mod+b" and "⌘ B" formats
86+ const keys = shortcut . split ( / [ + \s ] + / ) . filter ( Boolean ) ;
87+ const keyMap = IS_MAC ? MAC_KEY_MAP : WINDOWS_KEY_MAP ;
88+
89+ return keys . map ( key => mapKey ( key , keyMap ) ) . join ( ' ' ) ;
2390}
2491
2592export function KeyboardShortcutHint ( { shortcut, label, className } : KeyboardShortcutHintProps ) {
0 commit comments