Add Mac shortcut support (#41)

Closes #40
jorgehermo9 · Oct 8, 2024 · 6f18803 · 6f18803
1 parent e92db6d
commit 6f18803
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 34 deletions.
diff --git a/crates/web/frontend/package-lock.json b/crates/web/frontend/package-lock.json
diff --git a/crates/web/frontend/package.json b/crates/web/frontend/package.json
@@ -33,8 +33,8 @@
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@types/js-beautify": "^1.14.3",
-    "@uiw/codemirror-themes": "^4.23.4",
-    "@uiw/react-codemirror": "^4.23.4",
+    "@uiw/codemirror-themes": "^4.23.5",
+    "@uiw/react-codemirror": "^4.23.5",
     "@wasm-tool/wasm-pack-plugin": "^1.7.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -49,7 +49,7 @@
     "react-dom": "^18.3.1",
     "react-resizable-panels": "^2.1.4",
     "sonner": "^1.5.0",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.0.0",
     "vscode-languageserver-protocol": "^3.17.5",

diff --git a/crates/web/frontend/src/components/apply-button/apply-button.tsx b/crates/web/frontend/src/components/apply-button/apply-button.tsx
@@ -1,4 +1,5 @@
 import ActionButton from "@/components/action-button/action-button";
+import { isMac } from "@/lib/utils";
 import { CirclePlay, Play } from "lucide-react";
 import { useCallback, useEffect } from "react";
 
@@ -10,7 +11,7 @@ interface Props {
 const ApplyButton = ({ autoApply, onClick }: Props) => {
 	const handleKeyDown = useCallback(
 		(e: KeyboardEvent) => {
-			if (e.ctrlKey && e.key === "Enter") {
+			if ((isMac ? e.metaKey : e.ctrlKey) && e.key === "Enter") {
 				e.preventDefault();
 				onClick();
 			}

diff --git a/crates/web/frontend/src/components/editor/editor-utils.ts b/crates/web/frontend/src/components/editor/editor-utils.ts
@@ -1,3 +1,4 @@
+import { isMac } from "@/lib/utils";
 import type { Data } from "@/model/data";
 import FileType from "@/model/file-type";
 import {
@@ -96,6 +97,7 @@ const gqLanguageParser = LRLanguage.define({
 const jsonLanguage = json();
 const gqLanguage = new LanguageSupport(gqLanguageParser);
 const yamlLanguage = yaml();
+const modKey = isMac ? "Cmd" : "Ctrl";
 
 const getCodemirrorLanguageByFileType = (fileType: FileType): LanguageSupport => {
 	switch (fileType) {
@@ -129,7 +131,7 @@ export const getCodemirrorExtensionsByFileType = (
 			return [
 				language,
 				urlPlugin,
-				Prec.highest(keymap.of([{ key: "Ctrl-Enter", run: () => true }])),
+				Prec.highest(keymap.of([{ key: `${modKey}-Enter`, run: () => true }])),
 				getDragAndDropExtension([FileType.JSON, FileType.YAML]),
 			];
 		case FileType.GQ:
@@ -144,8 +146,8 @@ export const getCodemirrorExtensionsByFileType = (
 				Prec.highest(
 					keymap.of([
 						{ key: "Tab", run: acceptCompletion },
-						{ key: "Ctrl-.", run: startCompletion },
-						{ key: "Ctrl-Enter", run: () => true },
+						{ key: `${modKey}-.`, run: startCompletion },
+						{ key: `${modKey}-Enter`, run: () => true },
 					]),
 				),
 				getDragAndDropExtension([FileType.GQ]),

diff --git a/crates/web/frontend/src/components/editor/editor.tsx b/crates/web/frontend/src/components/editor/editor.tsx
@@ -1,6 +1,6 @@
 import useLazyState from "@/hooks/useLazyState";
 import { gqTheme } from "@/lib/theme";
-import { cn } from "@/lib/utils";
+import { cn, isMac } from "@/lib/utils";
 import { Data } from "@/model/data";
 import FileType from "@/model/file-type";
 import { type LoadingState, loading, notLoading } from "@/model/loading-state";
@@ -111,7 +111,7 @@ const Editor = ({
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
 			if (!focused) return;
-			if (event.ctrlKey && (event.key === "s" || event.key === "S")) {
+			if ((isMac ? event.metaKey : event.ctrlKey) && (event.key === "s" || event.key === "S")) {
 				event.preventDefault();
 				handleFormatCode(content, type);
 			}

diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx
@@ -1,3 +1,4 @@
+import { isMac } from "@/lib/utils";
 import { Keyboard, X } from "lucide-react";
 import { useState } from "react";
 import ActionButton from "../action-button/action-button";
@@ -34,7 +35,7 @@ const ShortcutPopup = () => {
 						Check all available keyboard shortcuts to improve your efficiency
 					</DialogDescription>
 				</DialogHeader>
-				{shortcutSections.map((shortcutSection) => (
+				{shortcutSections(isMac).map((shortcutSection) => (
 					<div className="mt-8" key={shortcutSection.title}>
 						<h3 className="font-semibold mb-1">{shortcutSection.title}</h3>
 						<Table>

diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts b/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts
@@ -8,31 +8,31 @@ export type Shortcut = {
 	shortcut: string;
 };
 
-const globalShortcuts: Shortcut[] = [
+const globalShortcuts = (isMac: boolean) => [
 	{
 		description: "Apply the current query",
-		shortcut: "Ctrl + Enter",
+		shortcut: `${isMac ? "⌘" : "Ctrl"} + Enter`,
 	},
 ];
 
-const editorShortcuts: Shortcut[] = [
+const editorShortcuts = (isMac: boolean) => [
 	{
 		description: "Show autocompletions",
-		shortcut: "Ctrl + .",
+		shortcut: `${isMac ? "⌘" : "Ctrl"} + .`,
 	},
 	{
 		description: "Format the content of the focused editor",
-		shortcut: "Ctrl + S",
+		shortcut: `${isMac ? "⌘" : "Ctrl"} + S`,
 	},
 ];
 
-export const shortcutSections: ShortcutSection[] = [
+export const shortcutSections = (isMac: boolean): ShortcutSection[] => [
 	{
 		title: "Global Scope",
-		shortcuts: globalShortcuts,
+		shortcuts: globalShortcuts(isMac),
 	},
 	{
 		title: "Editor Scope",
-		shortcuts: editorShortcuts,
+		shortcuts: editorShortcuts(isMac),
 	},
 ];
diff --git a/crates/web/frontend/src/lib/utils.ts b/crates/web/frontend/src/lib/utils.ts
@@ -26,6 +26,8 @@ export function formatNumber(number: number, decimals = 1) {
 	return `${Number.parseFloat((number / 1000 ** i).toFixed(dm))}${sizes[i]}`;
 }
 
+export const isMac = navigator.platform.includes("Mac"); // Deprecated navigator.platform
+
 export const statusTextMap = new Map([
 	[200, "OK"],
 	[201, "Created"],