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

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