feat: Keyboard shortcut reference inside editor

app/components/Layout.js

@@ -21,6 +21,8 @@ import Sidebar from 'components/Sidebar';
 import SettingsSidebar from 'components/Sidebar/Settings';
 import Modals from 'components/Modals';
 import DocumentHistory from 'components/DocumentHistory';
+import Modal from 'components/Modal';
+import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
 import ErrorSuspended from 'scenes/ErrorSuspended';
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
@@ -41,6 +43,7 @@ type Props = {
 class Layout extends React.Component<Props> {
   scrollable: ?HTMLDivElement;
   @observable redirectTo: ?string;
+  @observable keyboardShortcutsOpen: boolean = false;
 
   componentWillMount() {
     this.updateBackground();
@@ -54,6 +57,15 @@ class Layout extends React.Component<Props> {
     }
   }
 
+  @keydown('shift+/')
+  handleOpenKeyboardShortcuts() {
+    this.keyboardShortcutsOpen = true;
+  }
+
+  handleCloseKeyboardShortcuts = () => {
+    this.keyboardShortcutsOpen = false;
+  };
+
   updateBackground() {
     // ensure the wider page color always matches the theme
     window.document.body.style.background = this.props.theme.background;
@@ -71,11 +83,6 @@ class Layout extends React.Component<Props> {
     this.redirectTo = homeUrl();
   }
 
-  @keydown('shift+/')
-  openKeyboardShortcuts() {
-    this.props.ui.setActiveModal('keyboard-shortcuts');
-  }
-
   render() {
     const { auth, ui } = this.props;
     const { user, team } = auth;
@@ -118,6 +125,13 @@ class Layout extends React.Component<Props> {
           </Switch>
         </Container>
         <Modals ui={ui} />
+        <Modal
+          isOpen={this.keyboardShortcutsOpen}
+          onRequestClose={this.handleCloseKeyboardShortcuts}
+          title="Keyboard shortcuts"
+        >
+          <KeyboardShortcuts />
+        </Modal>
         <GlobalStyles />
       </Container>
     );

app/components/Modals.js

@@ -9,7 +9,6 @@ import CollectionDelete from 'scenes/CollectionDelete';
 import CollectionExport from 'scenes/CollectionExport';
 import DocumentDelete from 'scenes/DocumentDelete';
 import DocumentShare from 'scenes/DocumentShare';
-import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
 
 type Props = {
   ui: UiStore,
@@ -55,9 +54,6 @@ class Modals extends React.Component<Props> {
         <Modal name="document-delete" title="Delete document">
           <DocumentDelete onSubmit={this.handleClose} />
         </Modal>
-        <Modal name="keyboard-shortcuts" title="Keyboard shortcuts">
-          <KeyboardShortcuts />
-        </Modal>
       </span>
     );
   }

app/components/Tooltip.js

@@ -9,6 +9,7 @@ type Props = {
   children: React.Node,
   delay?: number,
   className?: string,
+  block?: boolean,
 };
 
 class Tooltip extends React.Component<Props> {
@@ -17,7 +18,15 @@ class Tooltip extends React.Component<Props> {
   }
 
   render() {
-    const { tooltip, delay = 50, children, className, ...rest } = this.props;
+    const {
+      tooltip,
+      delay = 50,
+      children,
+      block,
+      className,
+      ...rest
+    } = this.props;
+    const Component = block ? 'div' : 'span';
 
     return (
       <StyledTippy
@@ -30,7 +39,7 @@ class Tooltip extends React.Component<Props> {
         inertia
         {...rest}
       >
-        <span className={className}>{children}</span>
+        <Component className={className}>{children}</Component>
       </StyledTippy>
     );
   }