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 7d6117c..c6b42d7 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 321a4c9..4170120 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 0000000..9564d3f --- /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; -- 2.44.1