diff --git a/frontend/package.json b/frontend/package.json
index 3e3977a6f..bfdd321f7 100644
--- a/frontend/package.json
+++ b/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"
}
diff --git a/frontend/src/additional-global-types.d.ts b/frontend/src/additional-global-types.d.ts
new file mode 100644
index 000000000..1e7b44df4
--- /dev/null
+++ b/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
+ */
+
+///
diff --git a/frontend/src/components/editor-page/utils.ts b/frontend/src/components/editor-page/utils.ts
deleted file mode 100644
index 3d91c35fd..000000000
--- a/frontend/src/components/editor-page/utils.ts
+++ /dev/null
@@ -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')
diff --git a/frontend/src/components/global-dialogs/shortcuts-modal/alt-key.tsx b/frontend/src/components/global-dialogs/shortcuts-modal/alt-key.tsx
index 1a107b45d..b5c0d0199 100644
--- a/frontend/src/components/global-dialogs/shortcuts-modal/alt-key.tsx
+++ b/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() ? ⌥ : Alt
+ return isAppleDevice() ? ⌥ : Alt
}
diff --git a/frontend/src/components/global-dialogs/shortcuts-modal/modifier-key.tsx b/frontend/src/components/global-dialogs/shortcuts-modal/modifier-key.tsx
index 3cb58f781..9a6334c17 100644
--- a/frontend/src/components/global-dialogs/shortcuts-modal/modifier-key.tsx
+++ b/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() ? ⌘ : Ctrl
+ return isAppleDevice() ? ⌘ : Ctrl
}
diff --git a/frontend/src/utils/is-apple-device.ts b/frontend/src/utils/is-apple-device.ts
new file mode 100644
index 000000000..8dcb212ea
--- /dev/null
+++ b/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'
+}
diff --git a/yarn.lock b/yarn.lock
index 3eb72f3a7..271cf9637 100644
--- a/yarn.lock
+++ b/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"