diff --git a/apps/client/src/features/comment/components/comment-editor.tsx b/apps/client/src/features/comment/components/comment-editor.tsx index 067391f4..0fdc7395 100644 --- a/apps/client/src/features/comment/components/comment-editor.tsx +++ b/apps/client/src/features/comment/components/comment-editor.tsx @@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next"; import EmojiCommand from "@/features/editor/extensions/emoji-command"; import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion"; import MentionView from "@/features/editor/components/mention/mention-view"; +import { platformModifierKey } from "@/lib"; interface CommentEditorProps { defaultContent?: any; @@ -83,7 +84,7 @@ const CommentEditor = forwardRef( } } - if ((event.ctrlKey || event.metaKey) && event.key === "Enter") { + if (platformModifierKey(event) && event.code === "Enter") { event.preventDefault(); if (onSave) onSave(); diff --git a/apps/client/src/features/editor/page-editor.tsx b/apps/client/src/features/editor/page-editor.tsx index 7cc4723a..30ccc2e4 100644 --- a/apps/client/src/features/editor/page-editor.tsx +++ b/apps/client/src/features/editor/page-editor.tsx @@ -62,7 +62,7 @@ import { useIdle } from "@/hooks/use-idle.ts"; import { queryClient } from "@/main.tsx"; import { IPage } from "@/features/page/types/page.types.ts"; import { useParams } from "react-router-dom"; -import { extractPageSlugId } from "@/lib"; +import { extractPageSlugId, platformModifierKey } from "@/lib"; import { FIVE_MINUTES } from "@/lib/constants.ts"; import { PageEditMode } from "@/features/user/types/user.types.ts"; import { jwtDecode } from "jwt-decode"; @@ -232,11 +232,11 @@ export default function PageEditor({ scrollMargin: 80, handleDOMEvents: { keydown: (_view, event) => { - if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") { + if (platformModifierKey(event) && event.code === "KeyS") { event.preventDefault(); return true; } - if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") { + if (platformModifierKey(event) && event.code === "KeyK") { searchSpotlight.open(); return true; } diff --git a/apps/client/src/features/editor/title-editor.tsx b/apps/client/src/features/editor/title-editor.tsx index 15c3ff02..e61d8c04 100644 --- a/apps/client/src/features/editor/title-editor.tsx +++ b/apps/client/src/features/editor/title-editor.tsx @@ -27,6 +27,7 @@ import localEmitter from "@/lib/local-emitter.ts"; import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts"; import { PageEditMode } from "@/features/user/types/user.types.ts"; import { searchSpotlight } from "@/features/search/constants.ts"; +import { platformModifierKey } from "@/lib"; export interface TitleEditorProps { pageId: string; @@ -90,11 +91,11 @@ export function TitleEditor({ editorProps: { handleDOMEvents: { keydown: (_view, event) => { - if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") { + if (platformModifierKey(event) && event.code === "KeyS") { event.preventDefault(); return true; } - if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") { + if (platformModifierKey(event) && event.code === "KeyK") { searchSpotlight.open(); return true; } diff --git a/apps/client/src/features/search/components/search-control.tsx b/apps/client/src/features/search/components/search-control.tsx index a98909b7..3a689e28 100644 --- a/apps/client/src/features/search/components/search-control.tsx +++ b/apps/client/src/features/search/components/search-control.tsx @@ -13,6 +13,7 @@ import { import classes from "./search-control.module.css"; import React from "react"; import { useTranslation } from "react-i18next"; +import { platformModifierLabel } from "@/lib"; interface SearchControlProps extends BoxProps, ElementProps<"button"> {} @@ -27,7 +28,7 @@ export function SearchControl({ className, ...others }: SearchControlProps) { {t("Search")} - Ctrl + K + {platformModifierLabel} + K diff --git a/apps/client/src/lib/utils.tsx b/apps/client/src/lib/utils.tsx index 5f640d45..fe97f718 100644 --- a/apps/client/src/lib/utils.tsx +++ b/apps/client/src/lib/utils.tsx @@ -100,6 +100,15 @@ export const normalizeUrl = (url: string): string => { return `https://${url}`; }; +const _isApple = /mac|iphone|ipad|ipod/i.test(navigator.platform ?? ""); + +/// Cmd key on Apple devices, Ctrl key everywhere else +export function platformModifierKey(event: KeyboardEvent): boolean { + return _isApple ? event.metaKey : event.ctrlKey; +} + +export const platformModifierLabel = _isApple ? "⌘" : "Ctrl"; + export function castToBoolean(value: unknown): boolean { if (value == null) { return false;