diff --git a/app/components/Editor.js b/app/components/Editor.js index a683c0dd..23c3ca94 100644 --- a/app/components/Editor.js +++ b/app/components/Editor.js @@ -9,6 +9,7 @@ import ErrorBoundary from "components/ErrorBoundary"; import Tooltip from "components/Tooltip"; import embeds from "../embeds"; import isInternalUrl from "utils/isInternalUrl"; +import { isMetaKey } from "utils/keyboard"; import { uploadFile } from "utils/uploadFile"; const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor")); @@ -49,7 +50,7 @@ function Editor(props: PropsWithRef) { return; } - if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) { + if (isInternalUrl(href) && !isMetaKey(event) && !event.shiftKey) { // relative let navigateTo = href; diff --git a/app/components/InputSearch.js b/app/components/InputSearch.js index 8cb37273..a6ede2a5 100644 --- a/app/components/InputSearch.js +++ b/app/components/InputSearch.js @@ -9,6 +9,7 @@ import { withRouter, type RouterHistory } from "react-router-dom"; import styled, { withTheme } from "styled-components"; import Input from "./Input"; import { type Theme } from "types"; +import { meta } from "utils/keyboard"; import { searchUrl } from "utils/routeHelpers"; type Props = { @@ -25,7 +26,7 @@ class InputSearch extends React.Component { input: ?Input; @observable focused: boolean = false; - @keydown("meta+f") + @keydown(`${meta}+f`) focus(ev: SyntheticEvent<>) { ev.preventDefault(); diff --git a/app/components/Layout.js b/app/components/Layout.js index 6e8dab13..3a0210a7 100644 --- a/app/components/Layout.js +++ b/app/components/Layout.js @@ -22,6 +22,7 @@ import Modal from "components/Modal"; import Sidebar from "components/Sidebar"; import SettingsSidebar from "components/Sidebar/Settings"; import { type Theme } from "types"; +import { meta } from "utils/keyboard"; import { homeUrl, searchUrl, @@ -65,7 +66,7 @@ class Layout extends React.Component { window.document.body.style.background = props.theme.background; } - @keydown("meta+.") + @keydown(`${meta}+.`) handleToggleSidebar() { this.props.ui.toggleCollapsedSidebar(); } @@ -80,7 +81,7 @@ class Layout extends React.Component { this.keyboardShortcutsOpen = false; }; - @keydown(["t", "/", "meta+k"]) + @keydown(["t", "/", `${meta}+k`]) goToSearch(ev: SyntheticEvent<>) { if (this.props.ui.editMode) return; ev.preventDefault(); diff --git a/app/scenes/Document/components/Document.js b/app/scenes/Document/components/Document.js index abccfb43..1d237644 100644 --- a/app/scenes/Document/components/Document.js +++ b/app/scenes/Document/components/Document.js @@ -33,6 +33,7 @@ import References from "./References"; import { type LocationWithState, type Theme } from "types"; import { isCustomDomain } from "utils/domains"; import { emojiToUrl } from "utils/emoji"; +import { meta } from "utils/keyboard"; import { collectionUrl, documentMoveUrl, @@ -163,7 +164,7 @@ class DocumentScene extends React.Component { } } - @keydown("meta+shift+p") + @keydown(`${meta}+shift+p`) onPublish(ev) { ev.preventDefault(); const { document } = this.props; @@ -171,7 +172,7 @@ class DocumentScene extends React.Component { this.onSave({ publish: true, done: true }); } - @keydown("meta+ctrl+h") + @keydown(`${meta}+ctrl+h`) onToggleTableOfContents(ev) { if (!this.props.readOnly) return; diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js index 62415b4e..e06dc091 100644 --- a/app/scenes/Document/components/Editor.js +++ b/app/scenes/Document/components/Editor.js @@ -12,6 +12,7 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews"; import Editor from "components/Editor"; import Flex from "components/Flex"; import HoverPreview from "components/HoverPreview"; +import { isMetaKey } from "utils/keyboard"; import { documentHistoryUrl } from "utils/routeHelpers"; type Props = { @@ -53,7 +54,7 @@ class DocumentEditor extends React.Component { handleTitleKeyDown = (event: SyntheticKeyboardEvent<>) => { if (event.key === "Enter") { event.preventDefault(); - if (event.metaKey) { + if (isMetaKey(event)) { this.props.onSave({ done: true }); return; } @@ -67,12 +68,12 @@ class DocumentEditor extends React.Component { this.focusAtStart(); return; } - if (event.key === "p" && event.metaKey && event.shiftKey) { + if (event.key === "p" && isMetaKey(event) && event.shiftKey) { event.preventDefault(); this.props.onSave({ publish: true, done: true }); return; } - if (event.key === "s" && event.metaKey) { + if (event.key === "s" && isMetaKey(event)) { event.preventDefault(); this.props.onSave({}); return; diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index f9c2c7a3..669ab3f2 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -34,7 +34,7 @@ import Tooltip from "components/Tooltip"; import DocumentMenu from "menus/DocumentMenu"; import NewChildDocumentMenu from "menus/NewChildDocumentMenu"; import TemplatesMenu from "menus/TemplatesMenu"; -import { meta } from "utils/keyboard"; +import { metaDisplay } from "utils/keyboard"; import { newDocumentUrl, editDocumentUrl } from "utils/routeHelpers"; type Props = { @@ -172,7 +172,7 @@ class Header extends React.Component { tooltip={ ui.tocVisible ? t("Hide contents") : t("Show contents") } - shortcut={`ctrl+${meta}+h`} + shortcut={`ctrl+${metaDisplay}+h`} delay={250} placement="bottom" > @@ -250,7 +250,7 @@ class Header extends React.Component { @@ -321,7 +321,7 @@ class Header extends React.Component { diff --git a/app/scenes/KeyboardShortcuts.js b/app/scenes/KeyboardShortcuts.js index cbcbe56f..a4e56c31 100644 --- a/app/scenes/KeyboardShortcuts.js +++ b/app/scenes/KeyboardShortcuts.js @@ -5,7 +5,7 @@ import styled from "styled-components"; import Flex from "components/Flex"; import HelpText from "components/HelpText"; import Key from "components/Key"; -import { meta } from "utils/keyboard"; +import { metaDisplay } from "utils/keyboard"; function KeyboardShortcuts() { const { t } = useTranslation(); @@ -41,9 +41,13 @@ function KeyboardShortcuts() { - {meta} + Ctrl + h + {metaDisplay} + Ctrl + h + + {metaDisplay} + . + + ? @@ -53,47 +57,47 @@ function KeyboardShortcuts() {

{t("Editor")}

- {meta} + Enter + {metaDisplay} + Enter - {meta} + Shift + p + {metaDisplay} + Shift + p - {meta} + s + {metaDisplay} + s - {meta} + Esc + {metaDisplay} + Esc - {meta} + b + {metaDisplay} + b - {meta} + i + {metaDisplay} + i - {meta} + u + {metaDisplay} + u - {meta} + d + {metaDisplay} + d - {meta} + k + {metaDisplay} + k - {meta} + z + {metaDisplay} + z - {meta} + Shift + z + {metaDisplay} + Shift + z diff --git a/app/scenes/Search/Search.js b/app/scenes/Search/Search.js index 831c34fc..b87c1641 100644 --- a/app/scenes/Search/Search.js +++ b/app/scenes/Search/Search.js @@ -35,7 +35,7 @@ import StatusFilter from "./components/StatusFilter"; import UserFilter from "./components/UserFilter"; import NewDocumentMenu from "menus/NewDocumentMenu"; import { type LocationWithState } from "types"; -import { meta } from "utils/keyboard"; +import { metaDisplay } from "utils/keyboard"; import { newDocumentUrl, searchUrl } from "utils/routeHelpers"; type Props = { @@ -279,8 +279,8 @@ class Search extends React.Component { - Use the {{ meta }}+K shortcut to search from - anywhere in your knowledge base + Use the {{ meta: metaDisplay }}+K shortcut to + search from anywhere in your knowledge base diff --git a/app/utils/keyboard.js b/app/utils/keyboard.js index 833738a9..231e7e7f 100644 --- a/app/utils/keyboard.js +++ b/app/utils/keyboard.js @@ -1,3 +1,10 @@ // @flow +const isMac = window.navigator.platform === "MacIntel"; -export const meta = window.navigator.platform === "MacIntel" ? "⌘" : "Ctrl"; +export const metaDisplay = isMac ? "⌘" : "Ctrl"; + +export const meta = isMac ? "cmd" : "ctrl"; + +export function isMetaKey(event: KeyboardEvent) { + return isMac ? event.metaKey : event.ctrlKey; +} diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index 65493998..f565d513 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/shared/i18n/locales/en_US/translation.json @@ -253,6 +253,7 @@ "Jump to search": "Jump to search", "Jump to dashboard": "Jump to dashboard", "Table of contents": "Table of contents", + "Toggle sidebar": "Toggle sidebar", "Open this guide": "Open this guide", "Editor": "Editor", "Save and exit document edit mode": "Save and exit document edit mode",