diff --git a/content/docs/user-manual/pip.mdx b/content/docs/user-manual/pip.mdx
index c0d2d8b..070a7b9 100644
--- a/content/docs/user-manual/pip.mdx
+++ b/content/docs/user-manual/pip.mdx
@@ -48,7 +48,7 @@ Enable it by setting the property below in about:config to TRUE
| Action | Shortcut |
|------------------------------|-------------------------------------------------------------------------------------------|
-| Launch/Close PiP | |
+| Launch/Close PiP | |
| Mute / Unmute | / |
| Volume Control | / |
| Seek 5s Back / Forward | / |
diff --git a/content/docs/user-manual/shortcuts.mdx b/content/docs/user-manual/shortcuts.mdx
index b2fc1a2..2996efd 100644
--- a/content/docs/user-manual/shortcuts.mdx
+++ b/content/docs/user-manual/shortcuts.mdx
@@ -58,7 +58,7 @@ The "Toggle Split View" shortcuts currently only applicable when selecting multi
| **Action** | **Shortcut** |
| ----------------------- | ------------------------------------------------ |
-| New Window | |
+| New Window | |
| New Tab | |
| Close Tab | |
| Close Window | |
@@ -72,18 +72,18 @@ The "Toggle Split View" shortcuts currently only applicable when selecting multi
- When you're in Compact Mode and switching tabs using or , you can peek into the tab you're switching in by enabling the **"Briefly make the toolbar popup when switching or opening new tabs in compact mode"** option in `Settings` > `Look and Feel` > `Theme Settings`.
- Pressing when you're in the last tab will switch you to the first available tab (Essentials first, then pinned tabs, and lastly, regular tabs).
- ^ Tab numbers listed for these keyboard shortcuts includes Essentials and pinned tabs. Example: If you have three Essentials, four pinned tabs, and five regular tabs:
- - until will switch you to your Essentials,
- - until will switch you to your pinned tabs,
- - will switch you to your first regular tab,
- - will switch you to your last tab (12th).
-- Zen can also let you cycle through recently used tabs, instead of cycling through all of your tabs. Enable it by go to `Settings` > `General` > `Tabs` and check the `Ctrl + Tab cycles through tabs in recently used order`. A popup containing up to 7 recently used tabs will show up when you press .
+ - until will switch you to your Essentials,
+ - until will switch you to your pinned tabs,
+ - will switch you to your first regular tab,
+ - will switch you to your last tab (12th).
+- Zen can also let you cycle through recently used tabs, instead of cycling through all of your tabs. Enable it by go to `Settings` > `General` > `Tabs` and check the `Ctrl + Tab cycles through tabs in recently used order`. A popup containing up to 7 recently used tabs will show up when you press .
### Navigation
| **Action** | **Shortcut** |
| ------------------------------------ | ------------------------------------------------ |
-| Go Back | |
-| Go Forward | |
+| Go Back | |
+| Go Forward | |
| Navigate Back (Alternative) | |
| Navigate Forward (Alternative) | |
| Go Home | |
@@ -141,14 +141,14 @@ The "Toggle Split View" shortcuts currently only applicable when selecting multi
| **Action** | **Shortcut** |
| ----------------------------- | ------------------------------------------------------ |
-| Toggle DevTools | |
+| Toggle DevTools | |
| Toggle Browser Toolbox | |
| Toggle Browser Console | |
-| Toggle Responsive Design Mode | |
-| Toggle Inspector | |
-| Toggle Web Console | |
-| Toggle JavaScript Debugger | |
-| Toggle Network Monitor | |
+| Toggle Responsive Design Mode | |
+| Toggle Inspector | |
+| Toggle Web Console | |
+| Toggle JavaScript Debugger | |
+| Toggle Network Monitor | |
| Toggle Style Editor | |
| Toggle Performance | |
| Toggle Storage | |
diff --git a/src/components/KeyboardShortcut.tsx b/src/components/KeyboardShortcut.tsx
index 4e58b26..9a7e2e9 100644
--- a/src/components/KeyboardShortcut.tsx
+++ b/src/components/KeyboardShortcut.tsx
@@ -6,42 +6,53 @@ interface KeyboardShortcutProps {
shortcut: string;
macosShortcut?: string;
className?: string;
+ rewriteCtrlToCmd?: boolean;
}
+// OS detection should run only on the client-side
+const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+
+const toCharacter = (shortcut: string): string =>
+ shortcut
+ .replace(/Ctrl\s*\+\s*/gi, "⌃ + ")
+ .replace(/Alt\s*\+\s*/gi, "⌥ + ")
+ // In case Cmd was used in the base shortcut
+ .replace(/Cmd\s*\+\s*/gi, "⌘ + ")
+ // In case Option was used
+ .replace(/Option\s*\+\s*/gi, "⌥ + ")
+ // Replace individual keys if not part of a combo already handled
+ .replace(/(? = ({
shortcut,
macosShortcut,
className,
+ rewriteCtrlToCmd = true,
}) => {
const [displayShortcut, setDisplayShortcut] = useState(shortcut);
useEffect(() => {
- // OS detection should run only on the client-side
- const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
-
if (isMacUser) {
if (macosShortcut) {
- setDisplayShortcut(macosShortcut);
+ setDisplayShortcut(toCharacter(macosShortcut));
} else {
// Convert common Windows/Linux keys to macOS equivalents
- let convertedShortcut = shortcut;
- convertedShortcut = convertedShortcut.replace(/Ctrl\s*\+\s*/gi, "⌘ + ");
- convertedShortcut = convertedShortcut.replace(/Alt\s*\+\s*/gi, "⌥ + ");
- convertedShortcut = convertedShortcut.replace(/Cmd\s*\+\s*/gi, "⌘ + "); // In case Cmd was used in the base shortcut
- convertedShortcut = convertedShortcut.replace(
- /Option\s*\+\s*/gi,
- "⌥ + "
- ); // In case Option was used
- // Replace individual keys if not part of a combo already handled
- convertedShortcut = convertedShortcut.replace(/(? = ({
{key.toLowerCase() === "shift"
? "⇧"
: key.toLowerCase() === "plus"
- ? "+"
- : key}
+ ? "+"
+ : key}
{index < keys.length - 1 && +}