From 2ca68c2c808faa41855baeeca04dc138f99e6527 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 17 Feb 2022 23:10:11 -0800
Subject: [PATCH] fix: Cancel editing shortcut on Windows fix: Improve display
 of symbols in keyboard shortcuts dialog closes #2733

---
 app/components/Key.ts            | 12 ++++++--
 app/scenes/KeyboardShortcuts.tsx | 53 +++++++++++++++++---------------
 shared/editor/plugins/Keys.ts    | 17 +++++-----
 3 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/app/components/Key.ts b/app/components/Key.ts
index 94526da5c..7f5b9dd49 100644
--- a/app/components/Key.ts
+++ b/app/components/Key.ts
@@ -1,10 +1,16 @@
 import styled from "styled-components";
 
-const Key = styled.kbd`
+type Props = {
+  /* Set to true if displaying a single symbol character to disable monospace */
+  symbol?: boolean;
+};
+
+const Key = styled.kbd<Props>`
   display: inline-block;
   padding: 4px 6px;
-  font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  font-size: 11px;
+  font-family: ${(props) =>
+    props.symbol ? props.theme.fontFamily : props.theme.fontFamilyMono};
   line-height: 10px;
   color: ${(props) => props.theme.almostBlack};
   vertical-align: middle;
diff --git a/app/scenes/KeyboardShortcuts.tsx b/app/scenes/KeyboardShortcuts.tsx
index 2e36b5233..8ffee9364 100644
--- a/app/scenes/KeyboardShortcuts.tsx
+++ b/app/scenes/KeyboardShortcuts.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import Flex from "~/components/Flex";
 import InputSearch from "~/components/InputSearch";
 import Key from "~/components/Key";
+import { isMac } from "~/utils/browser";
 import { metaDisplay, altDisplay } from "~/utils/keyboard";
 
 function KeyboardShortcuts() {
@@ -44,7 +45,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>{altDisplay}</Key> + <Key>h</Key>
+                <Key>Ctrl</Key> + <Key symbol>{altDisplay}</Key> + <Key>h</Key>
               </>
             ),
             label: t("Table of contents"),
@@ -52,7 +53,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>.</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>.</Key>
               </>
             ),
             label: t("Toggle navigation"),
@@ -60,7 +61,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>f</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>f</Key>
               </>
             ),
             label: t("Focus search input"),
@@ -72,7 +73,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>Enter</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>Enter</Key>
               </>
             ),
             label: t("Save document and exit"),
@@ -80,7 +81,8 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>⇧</Key> + <Key>p</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key symbol>⇧</Key> +{" "}
+                <Key>p</Key>
               </>
             ),
             label: t("Publish document and exit"),
@@ -88,7 +90,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>s</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>s</Key>
               </>
             ),
             label: t("Save document"),
@@ -96,7 +98,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>Esc</Key>
+                <Key symbol>{isMac() ? metaDisplay : "⇧"}</Key> + <Key>Esc</Key>
               </>
             ),
             label: t("Cancel editing"),
@@ -109,7 +111,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>0</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>0</Key>
               </>
             ),
             label: t("Paragraph"),
@@ -117,7 +119,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>1</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>1</Key>
               </>
             ),
             label: t("Large header"),
@@ -125,7 +127,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>2</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>2</Key>
               </>
             ),
             label: t("Medium header"),
@@ -133,7 +135,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>3</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>3</Key>
               </>
             ),
             label: t("Small header"),
@@ -141,7 +143,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>\</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>\</Key>
               </>
             ),
             label: t("Code block"),
@@ -149,7 +151,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>b</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>b</Key>
               </>
             ),
             label: t("Bold"),
@@ -157,7 +159,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>i</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>i</Key>
               </>
             ),
             label: t("Italic"),
@@ -165,7 +167,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>u</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>u</Key>
               </>
             ),
             label: t("Underline"),
@@ -173,7 +175,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>d</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>d</Key>
               </>
             ),
             label: t("Strikethrough"),
@@ -181,7 +183,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>k</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>k</Key>
               </>
             ),
             label: t("Link"),
@@ -189,7 +191,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>z</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key>z</Key>
               </>
             ),
             label: t("Undo"),
@@ -197,7 +199,8 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{metaDisplay}</Key> + <Key>⇧</Key> + <Key>z</Key>
+                <Key symbol>{metaDisplay}</Key> + <Key symbol>⇧</Key> +{" "}
+                <Key>z</Key>
               </>
             ),
             label: t("Redo"),
@@ -210,7 +213,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>7</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>7</Key>
               </>
             ),
             label: t("Todo list"),
@@ -218,7 +221,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>8</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>8</Key>
               </>
             ),
             label: t("Bulleted list"),
@@ -226,7 +229,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>Ctrl</Key> + <Key>⇧</Key> + <Key>9</Key>
+                <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>9</Key>
               </>
             ),
             label: t("Ordered list"),
@@ -238,7 +241,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>⇧</Key> + <Key>Tab</Key>
+                <Key symbol>⇧</Key> + <Key>Tab</Key>
               </>
             ),
             label: t("Outdent list item"),
@@ -246,7 +249,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{altDisplay}</Key> + <Key>↑</Key>
+                <Key symbol>{altDisplay}</Key> + <Key symbol>↑</Key>
               </>
             ),
             label: t("Move list item up"),
@@ -254,7 +257,7 @@ function KeyboardShortcuts() {
           {
             shortcut: (
               <>
-                <Key>{altDisplay}</Key> + <Key>↓</Key>
+                <Key symbol>{altDisplay}</Key> + <Key symbol>↓</Key>
               </>
             ),
             label: t("Move list item down"),
diff --git a/shared/editor/plugins/Keys.ts b/shared/editor/plugins/Keys.ts
index 1dffa0be3..b8df79222 100644
--- a/shared/editor/plugins/Keys.ts
+++ b/shared/editor/plugins/Keys.ts
@@ -15,19 +15,22 @@ export default class Keys extends Extension {
   }
 
   keys(): Record<string, Command> {
+    const onCancel = () => {
+      if (this.options.onCancel) {
+        this.options.onCancel();
+        return true;
+      }
+      return false;
+    };
+
     return {
       // No-ops prevent Tab escaping the editor bounds
       Tab: () => true,
       "Shift-Tab": () => true,
 
       // Shortcuts for when editor has separate edit mode
-      Escape: () => {
-        if (this.options.onCancel) {
-          this.options.onCancel();
-          return true;
-        }
-        return false;
-      },
+      "Mod-Escape": onCancel,
+      "Shift-Escape": onCancel,
       "Mod-s": () => {
         if (this.options.onSave) {
           this.options.onSave();