fix: Meta key shortcuts not bound correctly in Windows browsers (#1753)

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;
 

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<Props> {
   input: ?Input;
   @observable focused: boolean = false;
 
-  @keydown("meta+f")
+  @keydown(`${meta}+f`)
   focus(ev: SyntheticEvent<>) {
     ev.preventDefault();
 

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<Props> {
     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<Props> {
     this.keyboardShortcutsOpen = false;
   };
 
-  @keydown(["t", "/", "meta+k"])
+  @keydown(["t", "/", `${meta}+k`])
   goToSearch(ev: SyntheticEvent<>) {
     if (this.props.ui.editMode) return;
     ev.preventDefault();

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<Props> {
     }
   }
 
-  @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<Props> {
     this.onSave({ publish: true, done: true });
   }
 
-  @keydown("meta+ctrl+h")
+  @keydown(`${meta}+ctrl+h`)
   onToggleTableOfContents(ev) {
     if (!this.props.readOnly) return;
 

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<Props> {
   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<Props> {
       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;

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<Props> {
                 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<Props> {
               <Action>
                 <Tooltip
                   tooltip={t("Save")}
-                  shortcut={`${meta}+enter`}
+                  shortcut={`${metaDisplay}+enter`}
                   delay={500}
                   placement="bottom"
                 >
@@ -321,7 +321,7 @@ class Header extends React.Component<Props> {
             <Action>
               <Tooltip
                 tooltip={t("Publish")}
-                shortcut={`${meta}+shift+p`}
+                shortcut={`${metaDisplay}+shift+p`}
                 delay={500}
                 placement="bottom"
               >

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() {
         </Keys>
         <Label>{t("Jump to dashboard")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>Ctrl</Key> + <Key>h</Key>
+          <Key>{metaDisplay}</Key> + <Key>Ctrl</Key> + <Key>h</Key>
         </Keys>
         <Label>{t("Table of contents")}</Label>
+        <Keys>
+          <Key>{metaDisplay}</Key> + <Key>.</Key>
+        </Keys>
+        <Label>{t("Toggle sidebar")}</Label>
         <Keys>
           <Key>?</Key>
         </Keys>
@@ -53,47 +57,47 @@ function KeyboardShortcuts() {
       <h2>{t("Editor")}</h2>
       <List>
         <Keys>
-          <Key>{meta}</Key> + <Key>Enter</Key>
+          <Key>{metaDisplay}</Key> + <Key>Enter</Key>
         </Keys>
         <Label>{t("Save and exit document edit mode")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>Shift</Key> + <Key>p</Key>
+          <Key>{metaDisplay}</Key> + <Key>Shift</Key> + <Key>p</Key>
         </Keys>
         <Label>{t("Publish and exit document edit mode")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>s</Key>
+          <Key>{metaDisplay}</Key> + <Key>s</Key>
         </Keys>
         <Label>{t("Save document and continue editing")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>Esc</Key>
+          <Key>{metaDisplay}</Key> + <Key>Esc</Key>
         </Keys>
         <Label>{t("Cancel editing")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>b</Key>
+          <Key>{metaDisplay}</Key> + <Key>b</Key>
         </Keys>
         <Label>{t("Bold")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>i</Key>
+          <Key>{metaDisplay}</Key> + <Key>i</Key>
         </Keys>
         <Label>{t("Italic")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>u</Key>
+          <Key>{metaDisplay}</Key> + <Key>u</Key>
         </Keys>
         <Label>{t("Underline")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>d</Key>
+          <Key>{metaDisplay}</Key> + <Key>d</Key>
         </Keys>
         <Label>{t("Strikethrough")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>k</Key>
+          <Key>{metaDisplay}</Key> + <Key>k</Key>
         </Keys>
         <Label>{t("Link")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>z</Key>
+          <Key>{metaDisplay}</Key> + <Key>z</Key>
         </Keys>
         <Label>{t("Undo")}</Label>
         <Keys>
-          <Key>{meta}</Key> + <Key>Shift</Key> + <Key>z</Key>
+          <Key>{metaDisplay}</Key> + <Key>Shift</Key> + <Key>z</Key>
         </Keys>
         <Label>{t("Redo")}</Label>
       </List>

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<Props> {
             <Fade>
               <HelpText small>
                 <Trans>
-                  Use the <strong>{{ meta }}+K</strong> shortcut to search from
+                  Use the <strong>{{ meta: metaDisplay }}+K</strong> shortcut to
-                  anywhere in your knowledge base
+                  search from anywhere in your knowledge base
                 </Trans>
               </HelpText>
             </Fade>

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;
+}

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",