From 908b7c5bb121add77b1ab9cf6fccc764053c2ea5 Mon Sep 17 00:00:00 2001
From: Hamzah Mansour <HamzahMansour@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:25:02 -0700
Subject: [PATCH] Use proper modifier key in markdown text input on macOS
 (#1995)

* add os detect util, use meta key on macos

* pr feedback
---
 src/shared/components/common/markdown-textarea.tsx |  5 ++---
 src/shared/utils/browser/index.ts                  |  2 ++
 src/shared/utils/browser/platform.ts               | 13 +++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 src/shared/utils/browser/platform.ts

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 7d6117c2..c6b42d73 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -1,4 +1,4 @@
-import { isBrowser } from "@utils/browser";
+import { isBrowser, platform } from "@utils/browser";
 import { numToSI, randomStr } from "@utils/helpers";
 import autosize from "autosize";
 import classNames from "classnames";
@@ -21,7 +21,6 @@ import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
 import { LanguageSelect } from "./language-select";
 import ProgressBar from "./progress-bar";
-
 interface MarkdownTextAreaProps {
   /**
    * Initial content inside the textarea
@@ -477,7 +476,7 @@ export class MarkdownTextArea extends Component<
   // Keybind handler
   // Keybinds inspired by github comment area
   handleKeyBinds(i: MarkdownTextArea, event: KeyboardEvent) {
-    if (event.ctrlKey || event.metaKey) {
+    if (platform.isMac() ? event.metaKey : event.ctrlKey) {
       switch (event.key) {
         case "k": {
           i.handleInsertLink(i, event);
diff --git a/src/shared/utils/browser/index.ts b/src/shared/utils/browser/index.ts
index 321a4c9f..41701207 100644
--- a/src/shared/utils/browser/index.ts
+++ b/src/shared/utils/browser/index.ts
@@ -4,6 +4,7 @@ import dataBsTheme from "./data-bs-theme";
 import isBrowser from "./is-browser";
 import isDark from "./is-dark";
 import loadCss from "./load-css";
+import platform from "./platform";
 import restoreScrollPosition from "./restore-scroll-position";
 import saveScrollPosition from "./save-scroll-position";
 import setAuthCookie from "./set-auth-cookie";
@@ -16,6 +17,7 @@ export {
   isBrowser,
   isDark,
   loadCss,
+  platform,
   restoreScrollPosition,
   saveScrollPosition,
   setAuthCookie,
diff --git a/src/shared/utils/browser/platform.ts b/src/shared/utils/browser/platform.ts
new file mode 100644
index 00000000..9564d3f8
--- /dev/null
+++ b/src/shared/utils/browser/platform.ts
@@ -0,0 +1,13 @@
+import { isBrowser } from "@utils/browser";
+
+const platformString = () =>
+  navigator.platform?.match(/mac|win|linux/i)?.[0].toLowerCase();
+const getPlatformPredicate = (platform: string) => () =>
+  isBrowser() && platformString() === platform;
+const isWin = getPlatformPredicate("win");
+const isMac = getPlatformPredicate("mac");
+const isLinux = getPlatformPredicate("linux");
+
+const platform = { isWin, isMac, isLinux };
+
+export default platform;