From fc7c485ba98834f6b771d713c0323c45f7f2beea Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 9 Mar 2019 20:00:45 -0800
Subject: [PATCH] Add 'n' shortcut for new doc Fixed cmd+enter shortcut to
 publish doc Fixed keyboard shortcut display on non-mac Fixed heading
 alignment Fixed documents smaller than page should not scroll

---
 app/components/ClickablePadding.js            |  3 +--
 .../Sidebar/components/Collections.js         | 17 +++++++++++-
 app/models/Document.js                        |  2 +-
 app/scenes/Document/Document.js               |  7 +++--
 app/scenes/Document/components/Editor.js      |  2 ++
 app/scenes/Document/components/Header.js      |  6 +++--
 app/scenes/KeyboardShortcuts.js               | 26 ++++++++++++-------
 app/scenes/Search/Search.js                   |  5 ++--
 app/utils/keyboard.js                         |  3 +++
 shared/components/Flex.js                     |  2 ++
 10 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 app/utils/keyboard.js

diff --git a/app/components/ClickablePadding.js b/app/components/ClickablePadding.js
index dde8c6795..7cb739c15 100644
--- a/app/components/ClickablePadding.js
+++ b/app/components/ClickablePadding.js
@@ -2,9 +2,8 @@
 import styled from 'styled-components';
 
 const ClickablePadding = styled.div`
-  min-height: 50vh;
   cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
-  ${({ grow }) => grow && `flex-grow: 1;`};
+  ${({ grow }) => grow && `flex-grow: 100;`};
 `;
 
 export default ClickablePadding;
diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js
index a0205511e..c1d938e4b 100644
--- a/app/components/Sidebar/components/Collections.js
+++ b/app/components/Sidebar/components/Collections.js
@@ -1,8 +1,11 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
+import { withRouter } from 'react-router-dom';
+import keydown from 'react-keydown';
 import Flex from 'shared/components/Flex';
 import { PlusIcon } from 'outline-icons';
+import { newDocumentUrl } from 'utils/routeHelpers';
 
 import Header from './Header';
 import SidebarLink from './SidebarLink';
@@ -14,6 +17,7 @@ import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 
 type Props = {
+  history: Object,
   collections: CollectionsStore,
   documents: DocumentsStore,
   onCreateCollection: () => void,
@@ -28,8 +32,17 @@ class Collections extends React.Component<Props> {
     this.props.collections.fetchPage({ limit: 100 });
   }
 
+  @keydown('n')
+  goToNewDocument() {
+    const activeCollection = this.props.collections.active;
+    if (!activeCollection) return;
+
+    this.props.history.push(newDocumentUrl(activeCollection));
+  }
+
   render() {
     const { collections, ui, documents } = this.props;
+
     const content = (
       <Flex column>
         <Header>Collections</Header>
@@ -57,4 +70,6 @@ class Collections extends React.Component<Props> {
   }
 }
 
-export default inject('collections', 'ui', 'documents')(Collections);
+export default inject('collections', 'ui', 'documents')(
+  withRouter(Collections)
+);
diff --git a/app/models/Document.js b/app/models/Document.js
index d06bf60a7..e6e593321 100644
--- a/app/models/Document.js
+++ b/app/models/Document.js
@@ -86,7 +86,7 @@ export default class Document extends BaseModel {
   @computed
   get isEmpty(): boolean {
     // Check if the document title has been modified and user generated content exists
-    return this.text.replace(new RegExp(`^#$`), '').trim().length === 0;
+    return this.text.replace(/^#/, '').trim().length === 0;
   }
 
   @computed
diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js
index 3c8299881..f436a1dc8 100644
--- a/app/scenes/Document/Document.js
+++ b/app/scenes/Document/Document.js
@@ -194,6 +194,10 @@ class DocumentScene extends React.Component<Props> {
   handleCloseMoveModal = () => (this.moveModalOpen = false);
   handleOpenMoveModal = () => (this.moveModalOpen = true);
 
+  onSaveAndExit = () => {
+    this.onSave({ done: true, publish: true });
+  };
+
   onSave = async (
     options: { done?: boolean, publish?: boolean, autosave?: boolean } = {}
   ) => {
@@ -367,7 +371,7 @@ class DocumentScene extends React.Component<Props> {
                 onImageUploadStop={this.onImageUploadStop}
                 onSearchLink={this.onSearchLink}
                 onChange={this.onChange}
-                onSave={this.onSave}
+                onSave={this.onSaveAndExit}
                 onCancel={this.onDiscard}
                 readOnly={!this.isEditing}
                 toc={!revision}
@@ -387,7 +391,6 @@ const MaxWidth = styled(Flex)`
   padding: 0 16px;
   max-width: 100vw;
   width: 100%;
-  height: 100%;
 
   ${breakpoint('tablet')`	
     padding: 0 24px;
diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js
index 6dd4b5170..67cb5879b 100644
--- a/app/scenes/Document/components/Editor.js
+++ b/app/scenes/Document/components/Editor.js
@@ -48,6 +48,8 @@ class DocumentEditor extends React.Component<Props> {
 }
 
 const StyledEditor = styled(Editor)`
+  justify-content: start;
+
   p {
     ${Placeholder} {
       visibility: hidden;
diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js
index 54c78847a..972392006 100644
--- a/app/scenes/Document/components/Header.js
+++ b/app/scenes/Document/components/Header.js
@@ -10,6 +10,7 @@ import { NewDocumentIcon } from 'outline-icons';
 import Document from 'models/Document';
 import AuthStore from 'stores/AuthStore';
 import { documentEditUrl } from 'utils/routeHelpers';
+import { meta } from 'utils/keyboard';
 
 import Flex from 'shared/components/Flex';
 import Breadcrumb from './Breadcrumb';
@@ -107,6 +108,7 @@ class Header extends React.Component<Props> {
         justify="space-between"
         readOnly={!isEditing}
         isCompact={this.isScrolled}
+        shrink={false}
       >
         <Modal
           isOpen={this.showShareModal}
@@ -149,7 +151,7 @@ class Header extends React.Component<Props> {
               <Action>
                 <Button
                   onClick={this.handleSave}
-                  title="Save changes (Cmd+Enter)"
+                  title={`Save changes ${isDraft ? '' : `${meta}+Enter`}`}
                   disabled={savingIsDisabled}
                   isSaving={isSaving}
                   neutral={isDraft}
@@ -164,7 +166,7 @@ class Header extends React.Component<Props> {
             <Action>
               <Button
                 onClick={this.handlePublish}
-                title="Publish document (Cmd+Enter)"
+                title={`Publish document (${meta}+Enter)`}
                 disabled={savingIsDisabled}
                 small
               >
diff --git a/app/scenes/KeyboardShortcuts.js b/app/scenes/KeyboardShortcuts.js
index 2e94adc64..adb2d14f4 100644
--- a/app/scenes/KeyboardShortcuts.js
+++ b/app/scenes/KeyboardShortcuts.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import Key from 'components/Key';
 import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
+import { meta } from 'utils/keyboard';
 
 function KeyboardShortcuts() {
   return (
@@ -17,6 +18,11 @@ function KeyboardShortcuts() {
 
       <h2>Navigation</h2>
       <List>
+        <Keys>
+          <Key>n</Key>
+        </Keys>
+        <Label>New document in current collection</Label>
+
         <Keys>
           <Key>e</Key>
         </Keys>
@@ -46,44 +52,44 @@ function KeyboardShortcuts() {
       <h2>Editor</h2>
       <List>
         <Keys>
-          <Key>⌘</Key> + <Key>Enter</Key>
+          <Key>{meta}</Key> + <Key>Enter</Key>
         </Keys>
         <Label>Save and exit document edit mode</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>S</Key>
+          <Key>{meta}</Key> + <Key>S</Key>
         </Keys>
         <Label>Save document and continue editing</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>Esc</Key>
+          <Key>{meta}</Key> + <Key>Esc</Key>
         </Keys>
         <Label>Cancel editing</Label>
 
         <Keys>
-          <Key>⌘</Key> + <Key>b</Key>
+          <Key>{meta}</Key> + <Key>b</Key>
         </Keys>
         <Label>Bold</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>i</Key>
+          <Key>{meta}</Key> + <Key>i</Key>
         </Keys>
         <Label>Italic</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>u</Key>
+          <Key>{meta}</Key> + <Key>u</Key>
         </Keys>
         <Label>Underline</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>d</Key>
+          <Key>{meta}</Key> + <Key>d</Key>
         </Keys>
         <Label>Strikethrough</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>k</Key>
+          <Key>{meta}</Key> + <Key>k</Key>
         </Keys>
         <Label>Link</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>z</Key>
+          <Key>{meta}</Key> + <Key>z</Key>
         </Keys>
         <Label>Undo</Label>
         <Keys>
-          <Key>⌘</Key> + <Key>Shift</Key> + <Key>z</Key>
+          <Key>{meta}</Key> + <Key>Shift</Key> + <Key>z</Key>
         </Keys>
         <Label>Redo</Label>
       </List>
diff --git a/app/scenes/Search/Search.js b/app/scenes/Search/Search.js
index 1842a998a..6bff9f7e6 100644
--- a/app/scenes/Search/Search.js
+++ b/app/scenes/Search/Search.js
@@ -13,6 +13,7 @@ import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import { searchUrl } from 'utils/routeHelpers';
+import { meta } from 'utils/keyboard';
 
 import Flex from 'shared/components/Flex';
 import Empty from 'components/Empty';
@@ -193,8 +194,8 @@ class Search extends React.Component<Props> {
           {showShortcutTip && (
             <Fade>
               <HelpText small>
-                Use the <strong>CMD+K</strong> shortcut to search from anywhere
-                in Outline
+                Use the <strong>{meta}+K</strong> shortcut to search from
+                anywhere in Outline
               </HelpText>
             </Fade>
           )}
diff --git a/app/utils/keyboard.js b/app/utils/keyboard.js
new file mode 100644
index 000000000..3b09fe0de
--- /dev/null
+++ b/app/utils/keyboard.js
@@ -0,0 +1,3 @@
+// @flow
+
+export const meta = window.navigator.platform === 'MacIntel' ? '⌘' : 'Ctrl';
diff --git a/shared/components/Flex.js b/shared/components/Flex.js
index 027506223..b664dd8b4 100644
--- a/shared/components/Flex.js
+++ b/shared/components/Flex.js
@@ -18,6 +18,7 @@ type AlignValues =
 
 type Props = {
   column?: ?boolean,
+  shrink?: ?boolean,
   align?: AlignValues,
   justify?: JustifyValues,
   auto?: ?boolean,
@@ -36,6 +37,7 @@ const Container = styled.div`
   flex-direction: ${({ column }) => (column ? 'column' : 'row')};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
+  flex-shrink: ${({ shrink }) => (shrink ? 1 : 0)};
   min-height: 0;
   min-width: 0;
 `;