Merge branch 'master' of github.com:outline/markdown-editor into remo…

…ve-forced-title

README.md

@@ -72,7 +72,7 @@ This callback is triggered when the user explicitly requests to save using a key
 
 #### `onCancel`
 
-This callback is triggered when the escape key is hit within the editor. You may use it to cancel editing.
+This callback is triggered when the `Cmd+Escape` is hit within the editor. You may use it to cancel editing.
 
 #### `onChange`
 

src/components/Toolbar/LinkSearchResult.js

@@ -26,7 +26,9 @@ const ListItem = styled.a`
   height: 28px;
   padding: 6px 8px 6px 0;
   color: ${props => props.theme.white};
+  font-family: ${props => props.theme.fontFamily};
   font-size: 15px;
+  text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
 

src/components/Toolbar/LinkToolbar.js

@@ -106,15 +106,21 @@ export default class LinkToolbar extends React.Component<Props, State> {
     this.save(url);
   };
 
+  cancel = () => {
+    this.save(this.originalValue);
+  };
+
   onKeyDown = (ev: SyntheticKeyboardEvent<*>) => {
-    switch (ev.which) {
-      case 13: // enter
+    switch (ev.key) {
+      case "Enter":
         ev.preventDefault();
         if (!(ev.target instanceof HTMLInputElement)) return;
         return this.save(ev.target.value);
-      case 27: // escape
-        return this.save(this.originalValue);
-      case 40: // down
+      case "Escape":
+        ev.preventDefault();
+        ev.stopPropagation();
+        return this.cancel();
+      case "ArrowDown":
         ev.preventDefault();
         if (this.firstDocument) {
           const element = findDOMNode(this.firstDocument);
@@ -138,6 +144,14 @@ export default class LinkToolbar extends React.Component<Props, State> {
     this.setState({ results: [] });
   };
 
+  onResultKeyDown = (ev: SyntheticKeyboardEvent<*>) => {
+    if (ev.key === "Escape") {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.cancel();
+    }
+  };
+
   removeLink = () => {
     this.save("");
   };
@@ -202,6 +216,7 @@ export default class LinkToolbar extends React.Component<Props, State> {
                   title={result.title}
                   key={result.url}
                   onClick={ev => this.selectSearchResult(ev, result.url)}
+                  onKeyDown={this.onResultKeyDown}
                 />
               ))}
             </ArrowKeyNavigation>

src/index.js

@@ -185,7 +185,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
         if (isModKey(ev)) this.onSaveAndExit(ev);
         return;
       case "Escape":
-        this.onCancel(ev);
+        if (isModKey(ev)) this.onCancel(ev);
         return;
       default:
     }