refactor: rename isMac to isAppleDevice

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/package.json

@@ -167,7 +167,8 @@
     "ts-loader": "9.4.4",
     "ts-mockery": "1.2.0",
     "ts-node": "10.9.1",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "user-agent-data-types": "0.3.1"
   },
   "packageManager": "yarn@3.6.3"
 }

frontend/src/additional-global-types.d.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/// <reference types="user-agent-data-types" />

frontend/src/components/editor-page/utils.ts

@@ -1,13 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { isClientSideRendering } from '../../utils/is-client-side-rendering'
-
-/**
- * Determines if the client is running on a Mac.
- * This is necessary to e.g. determine different keyboard shortcuts.
- */
-export const isMac: () => boolean = () =>
-  isClientSideRendering() && (navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone')

frontend/src/components/global-dialogs/shortcuts-modal/alt-key.tsx

@@ -3,12 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { isMac } from '../../editor-page/utils'
+import { isAppleDevice } from '../../../utils/is-apple-device'
 import React from 'react'
 
 /**
  * Renders a keyboard alt/option key hint depending on if the browser is running on macOS or not.
  */
 export const AltKey: React.FC = () => {
-  return isMac() ? <kbd>⌥</kbd> : <kbd>Alt</kbd>
+  return isAppleDevice() ? <kbd>⌥</kbd> : <kbd>Alt</kbd>
 }

frontend/src/components/global-dialogs/shortcuts-modal/modifier-key.tsx

@@ -3,12 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { isMac } from '../../editor-page/utils'
+import { isAppleDevice } from '../../../utils/is-apple-device'
 import React from 'react'
 
 /**
  * Renders a keyboard control/command key hint depending on if the browser is running on macOS or not.
  */
 export const ModifierKey: React.FC = () => {
-  return isMac() ? <kbd>⌘</kbd> : <kbd>Ctrl</kbd>
+  return isAppleDevice() ? <kbd>⌘</kbd> : <kbd>Ctrl</kbd>
 }

frontend/src/utils/is-apple-device.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/**
+ * Determines if the client is running on an Apple device like a Mac or an iPhone.
+ * This is necessary to e.g. determine different keyboard shortcuts.
+ */
+export const isAppleDevice: () => boolean = () => {
+  const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown'
+  return platform.startsWith('Mac') || platform === 'iPhone'
+}

yarn.lock

@@ -2525,6 +2525,7 @@ __metadata:
     ts-node: 10.9.1
     twemoji-colr-font: 14.1.3
     typescript: 5.2.2
+    user-agent-data-types: 0.3.1
     uuid: 9.0.0
     vega: 5.25.0
     vega-embed: 6.22.2
@@ -17837,6 +17838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"user-agent-data-types@npm:0.3.1":
+  version: 0.3.1
+  resolution: "user-agent-data-types@npm:0.3.1"
+  checksum: b1e00d85fe1471d1adb203c371a99c4eba8b478d648611f2fcdad4fba31428fdc5f777739c14d58b8995e5ab54bccd6b92e169e9594ca7a07294846fd70c3d4b
+  languageName: node
+  linkType: hard
+
 "utf8-byte-length@npm:^1.0.1":
   version: 1.0.4
   resolution: "utf8-byte-length@npm:1.0.4"