From 8da7491d320c7ee31274d2c5bc980de1c409c589 Mon Sep 17 00:00:00 2001 From: David Rodriguez Date: Sun, 6 Oct 2024 23:21:12 +0200 Subject: [PATCH 1/5] chore: Add support to cmd shortcuts --- crates/web/frontend/package-lock.json | 32 +++++++++---------- crates/web/frontend/package.json | 6 ++-- .../components/apply-button/apply-button.tsx | 2 +- .../src/components/editor/editor-utils.ts | 2 ++ .../frontend/src/components/editor/editor.tsx | 2 +- .../components/shortcut-popup/shortcuts.ts | 6 ++-- 6 files changed, 26 insertions(+), 24 deletions(-) diff --git a/crates/web/frontend/package-lock.json b/crates/web/frontend/package-lock.json index a87e1bc..f767301 100644 --- a/crates/web/frontend/package-lock.json +++ b/crates/web/frontend/package-lock.json @@ -30,8 +30,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", @@ -46,7 +46,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", @@ -1984,9 +1984,9 @@ } }, "node_modules/@uiw/codemirror-extensions-basic-setup": { - "version": "4.23.4", - "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.4.tgz", - "integrity": "sha512-/p6uXHDfjm3pjWNsanMs7ZMms1XJpq6DZxXUFMyUYKnLkq3t9ukGWh7lYLaAmnsgT/wojJb/RkLByeCoFy7jYw==", + "version": "4.23.5", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.5.tgz", + "integrity": "sha512-eTMfT8TejVN/D5vvuz9Lab+MIoRYdtqa2ftZZmU3JpcDIXf9KaExPo+G2Rl9HqySzaasgGXOOG164MAnj3MSIw==", "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.0.0", @@ -2011,9 +2011,9 @@ } }, "node_modules/@uiw/codemirror-themes": { - "version": "4.23.4", - "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.4.tgz", - "integrity": "sha512-rnuNUOTVq+B9ym2V7tqjGWhAr+4dyVRGYan2pIRFPRNpYTcr7XsbcGRy6DBkHK5uVK8tAiqC1Gn7vPSdC1nZXg==", + "version": "4.23.5", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.5.tgz", + "integrity": "sha512-yWUTpaVroxIxjKASQAmKaYy+ZYtF+YB6d8sVmSRK2TVD13M+EWvVT2jBGFLqR1UVg7G0W/McAy8xdeTg+a3slg==", "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", @@ -2030,16 +2030,16 @@ } }, "node_modules/@uiw/react-codemirror": { - "version": "4.23.4", - "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.23.4.tgz", - "integrity": "sha512-HE2MlzxCNCl0THsaoBs4rSZymhdOtN+wTZUqLfgHYjYF2hvVzhn0sVNFkmr4urLP6khshWpVg87vvTz9V8qnyg==", + "version": "4.23.5", + "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.23.5.tgz", + "integrity": "sha512-2zzGpx61L4mq9zDG/hfsO4wAH209TBE8VVsoj/qrccRe6KfcneCwKgRxtQjxBCCnO0Q5S+IP+uwCx5bXRzgQFQ==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.6", "@codemirror/commands": "^6.1.0", "@codemirror/state": "^6.1.1", "@codemirror/theme-one-dark": "^6.0.0", - "@uiw/codemirror-extensions-basic-setup": "4.23.4", + "@uiw/codemirror-extensions-basic-setup": "4.23.5", "codemirror": "^6.0.0" }, "funding": { @@ -4746,9 +4746,9 @@ } }, "node_modules/tailwind-merge": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz", - "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz", + "integrity": "sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==", "license": "MIT", "funding": { "type": "github", diff --git a/crates/web/frontend/package.json b/crates/web/frontend/package.json index 7decb49..aa23b9f 100644 --- 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 index 3cad174..ab6dcc4 100644 --- a/crates/web/frontend/src/components/apply-button/apply-button.tsx +++ b/crates/web/frontend/src/components/apply-button/apply-button.tsx @@ -10,7 +10,7 @@ interface Props { const ApplyButton = ({ autoApply, onClick }: Props) => { const handleKeyDown = useCallback( (e: KeyboardEvent) => { - if (e.ctrlKey && e.key === "Enter") { + if ((e.ctrlKey || e.metaKey) && 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 index e77f5f7..f430ff9 100644 --- a/crates/web/frontend/src/components/editor/editor-utils.ts +++ b/crates/web/frontend/src/components/editor/editor-utils.ts @@ -145,7 +145,9 @@ export const getCodemirrorExtensionsByFileType = ( keymap.of([ { key: "Tab", run: acceptCompletion }, { key: "Ctrl-.", run: startCompletion }, + { key: "Cmd-.", run: startCompletion }, { key: "Ctrl-Enter", run: () => true }, + { key: "Cmd-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 index 8bcccf1..898c4ab 100644 --- a/crates/web/frontend/src/components/editor/editor.tsx +++ b/crates/web/frontend/src/components/editor/editor.tsx @@ -111,7 +111,7 @@ const Editor = ({ const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (!focused) return; - if (event.ctrlKey && (event.key === "s" || event.key === "S")) { + if ((event.ctrlKey || event.metaKey) && (event.key === "s" || event.key === "S")) { event.preventDefault(); handleFormatCode(content, type); } diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts b/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts index 8c8ff59..63a1e26 100644 --- a/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts +++ b/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts @@ -11,18 +11,18 @@ export type Shortcut = { const globalShortcuts: Shortcut[] = [ { description: "Apply the current query", - shortcut: "Ctrl + Enter", + shortcut: "Ctrl | ⌘ + Enter", }, ]; const editorShortcuts: Shortcut[] = [ { description: "Show autocompletions", - shortcut: "Ctrl + .", + shortcut: "Ctrl | ⌘ + .", }, { description: "Format the content of the focused editor", - shortcut: "Ctrl + S", + shortcut: "Ctrl | ⌘ + S", }, ]; From c749554f2498d5a39c28d9bab1434284ba50ecc8 Mon Sep 17 00:00:00 2001 From: David Rodriguez Date: Sun, 6 Oct 2024 23:33:59 +0200 Subject: [PATCH 2/5] chore: Adapt shortcuts to the navigator platform --- .../components/shortcut-popup/shortcut-popup.tsx | 3 ++- .../src/components/shortcut-popup/shortcuts.ts | 16 ++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx index 681ce62..c6b2d50 100644 --- a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx +++ b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx @@ -15,6 +15,7 @@ import { shortcutSections } from "./shortcuts"; const ShortcutPopup = () => { const [open, setOpen] = useState(false); + const isMac = navigator.platform.includes("Mac"); return ( @@ -34,7 +35,7 @@ const ShortcutPopup = () => { Check all available keyboard shortcuts to improve your efficiency - {shortcutSections.map((shortcutSection) => ( + {shortcutSections(isMac).map((shortcutSection) => (

{shortcutSection.title}

diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts b/crates/web/frontend/src/components/shortcut-popup/shortcuts.ts index 63a1e26..0b72e78 100644 --- 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), }, ]; From 05b96f9b81cfbe2b43618278146cfc7df739e7c5 Mon Sep 17 00:00:00 2001 From: David Rodriguez Date: Sun, 6 Oct 2024 23:35:27 +0200 Subject: [PATCH 3/5] chore: Add comment to indicate the deprecated usage --- .../frontend/src/components/shortcut-popup/shortcut-popup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx index c6b2d50..65d7714 100644 --- a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx +++ b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx @@ -15,7 +15,7 @@ import { shortcutSections } from "./shortcuts"; const ShortcutPopup = () => { const [open, setOpen] = useState(false); - const isMac = navigator.platform.includes("Mac"); + const isMac = navigator.platform.includes("Mac"); // Deprecated navigator.platform return ( From 5ef685796c3c1aeed7d205399eaa710791bdcd3b Mon Sep 17 00:00:00 2001 From: David Rodriguez Date: Tue, 8 Oct 2024 22:54:30 +0200 Subject: [PATCH 4/5] chore: Improve shortcuts when in mac --- .../src/components/apply-button/apply-button.tsx | 3 ++- .../web/frontend/src/components/editor/editor-utils.ts | 10 +++++----- crates/web/frontend/src/components/editor/editor.tsx | 4 ++-- .../src/components/shortcut-popup/shortcut-popup.tsx | 2 +- crates/web/frontend/src/lib/utils.ts | 2 ++ 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/crates/web/frontend/src/components/apply-button/apply-button.tsx b/crates/web/frontend/src/components/apply-button/apply-button.tsx index ab6dcc4..03db217 100644 --- 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.metaKey) && 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 index f430ff9..644f80d 100644 --- a/crates/web/frontend/src/components/editor/editor-utils.ts +++ b/crates/web/frontend/src/components/editor/editor-utils.ts @@ -22,6 +22,7 @@ import { toast } from "sonner"; import type PromiseWorker from "webworker-promise"; import { validateFile } from "../import-popup/import-utils"; import urlPlugin from "./url-plugin"; +import { isMac } from "@/lib/utils"; export const exportFile = (data: Data, filename: string) => { const blob = new Blob([data.content], { type: `application/${data.type}` }); @@ -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,10 +146,8 @@ export const getCodemirrorExtensionsByFileType = ( Prec.highest( keymap.of([ { key: "Tab", run: acceptCompletion }, - { key: "Ctrl-.", run: startCompletion }, - { key: "Cmd-.", run: startCompletion }, - { key: "Ctrl-Enter", run: () => true }, - { key: "Cmd-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 index 898c4ab..0653dfc 100644 --- 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.metaKey) && (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 index 65d7714..0e352e8 100644 --- a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx +++ b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx @@ -12,10 +12,10 @@ import { import Link from "../ui/link"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"; import { shortcutSections } from "./shortcuts"; +import { isMac } from "@/lib/utils"; const ShortcutPopup = () => { const [open, setOpen] = useState(false); - const isMac = navigator.platform.includes("Mac"); // Deprecated navigator.platform return ( diff --git a/crates/web/frontend/src/lib/utils.ts b/crates/web/frontend/src/lib/utils.ts index 86f4bdd..8d29606 100644 --- 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"], From ee2d466d88eb4c167cb6774e1042b81c8c731944 Mon Sep 17 00:00:00 2001 From: David Rodriguez Date: Tue, 8 Oct 2024 22:55:50 +0200 Subject: [PATCH 5/5] chore: Run check --- crates/web/frontend/src/components/editor/editor-utils.ts | 2 +- .../frontend/src/components/shortcut-popup/shortcut-popup.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/web/frontend/src/components/editor/editor-utils.ts b/crates/web/frontend/src/components/editor/editor-utils.ts index 644f80d..7f9e48d 100644 --- 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 { @@ -22,7 +23,6 @@ import { toast } from "sonner"; import type PromiseWorker from "webworker-promise"; import { validateFile } from "../import-popup/import-utils"; import urlPlugin from "./url-plugin"; -import { isMac } from "@/lib/utils"; export const exportFile = (data: Data, filename: string) => { const blob = new Blob([data.content], { type: `application/${data.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 index 0e352e8..49351f0 100644 --- 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"; @@ -12,7 +13,6 @@ import { import Link from "../ui/link"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"; import { shortcutSections } from "./shortcuts"; -import { isMac } from "@/lib/utils"; const ShortcutPopup = () => { const [open, setOpen] = useState(false);