Move keydown handling out of IDEView

Author: lindapaiste

client/components/Nav.jsx

@@ -13,6 +13,7 @@ import {
   setAllAccessibleOutput,
   setLanguage
 } from '../modules/IDE/actions/preferences';
+import { DocumentKeyDown } from '../modules/IDE/hooks/useKeyDownHandlers';
 import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
@@ -63,30 +64,20 @@ class Nav extends React.PureComponent {
     this.toggleDropdownForLang = this.toggleDropdown.bind(this, 'lang');
     this.handleFocusForLang = this.handleFocus.bind(this, 'lang');
     this.handleLangSelection = this.handleLangSelection.bind(this);
-
-    this.closeDropDown = this.closeDropDown.bind(this);
   }
 
   componentDidMount() {
     document.addEventListener('mousedown', this.handleClick, false);
-    document.addEventListener('keydown', this.closeDropDown, false);
   }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClick, false);
-    document.removeEventListener('keydown', this.closeDropDown, false);
   }
   setDropdown(dropdown) {
     this.setState({
       dropdownOpen: dropdown
     });
   }
 
-  closeDropDown(e) {
-    if (e.keyCode === 27) {
-      this.setDropdown('none');
-    }
-  }
-
   handleClick(e) {
     if (!this.node) {
       return;
@@ -904,6 +895,11 @@ class Nav extends React.PureComponent {
           {this.renderLeftLayout(navDropdownState)}
           {this.renderUserMenu(navDropdownState)}
         </nav>
+        <DocumentKeyDown
+          handlers={{
+            escape: () => this.setDropdown('none')
+          }}
+        />
       </header>
     );
   }

client/modules/App/components/Overlay.jsx

@@ -4,19 +4,18 @@ import { browserHistory } from 'react-router';
 import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
+import { DocumentKeyDown } from '../../IDE/hooks/useKeyDownHandlers';
 
 class Overlay extends React.Component {
   constructor(props) {
     super(props);
     this.close = this.close.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.keyPressHandle = this.keyPressHandle.bind(this);
   }
 
   componentWillMount() {
     document.addEventListener('mousedown', this.handleClick, false);
-    document.addEventListener('keydown', this.keyPressHandle);
   }
 
   componentDidMount() {
@@ -25,7 +24,6 @@ class Overlay extends React.Component {
 
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClick, false);
-    document.removeEventListener('keydown', this.keyPressHandle);
   }
 
   handleClick(e) {
@@ -40,14 +38,6 @@ class Overlay extends React.Component {
     this.close();
   }
 
-  keyPressHandle(e) {
-    // escape key code = 27.
-    // So here we are checking if the key pressed was Escape key.
-    if (e.keyCode === 27) {
-      this.close();
-    }
-  }
-
   close() {
     // Only close if it is the last (and therefore the topmost overlay)
     const overlays = document.getElementsByClassName('overlay');
@@ -90,6 +80,7 @@ class Overlay extends React.Component {
               </div>
             </header>
             {children}
+            <DocumentKeyDown handlers={{ escape: () => this.close() }} />
           </section>
         </div>
       </div>

client/modules/IDE/components/IDEKeyHandlers.jsx

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateFileContent } from '../actions/files';
+import {
+  collapseConsole,
+  collapseSidebar,
+  expandConsole,
+  expandSidebar,
+  showErrorModal,
+  startSketch,
+  stopSketch
+} from '../actions/ide';
+import { setAllAccessibleOutput } from '../actions/preferences';
+import { cloneProject, saveProject } from '../actions/project';
+import useKeyDownHandlers from '../hooks/useKeyDownHandlers';
+import {
+  getAuthenticated,
+  getIsUserOwner,
+  getSketchOwner
+} from '../selectors/users';
+
+export const useIDEKeyHandlers = ({ getContent }) => {
+  const dispatch = useDispatch();
+
+  const sidebarIsExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
+  const consoleIsExpanded = useSelector((state) => state.ide.consoleIsExpanded);
+
+  const isUserOwner = useSelector(getIsUserOwner);
+  const isAuthenticated = useSelector(getAuthenticated);
+  const sketchOwner = useSelector(getSketchOwner);
+
+  const syncFileContent = () => {
+    const file = getContent();
+    dispatch(updateFileContent(file.id, file.content));
+  };
+
+  useKeyDownHandlers({
+    'ctrl-s': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isUserOwner || (isAuthenticated && !sketchOwner)) {
+        dispatch(saveProject(getContent()));
+      } else if (isAuthenticated) {
+        dispatch(cloneProject());
+      } else {
+        dispatch(showErrorModal('forceAuthentication'));
+      }
+    },
+    'ctrl-shift-enter': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dispatch(stopSketch());
+    },
+    'ctrl-enter': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      syncFileContent();
+      dispatch(startSketch());
+    },
+    'ctrl-shift-1': (e) => {
+      e.preventDefault();
+      dispatch(setAllAccessibleOutput(true));
+    },
+    'ctrl-shift-2': (e) => {
+      e.preventDefault();
+      dispatch(setAllAccessibleOutput(false));
+    },
+    'ctrl-b': (e) => {
+      e.preventDefault();
+      dispatch(
+        // TODO: create actions 'toggleConsole', 'toggleSidebar', etc.
+        sidebarIsExpanded ? collapseSidebar() : expandSidebar()
+      );
+    },
+    'ctrl-`': (e) => {
+      e.preventDefault();
+      dispatch(consoleIsExpanded ? collapseConsole() : expandConsole());
+    }
+  });
+};
+
+const IDEKeyHandlers = ({ getContent }) => {
+  useIDEKeyHandlers({ getContent });
+  return null;
+};
+
+// Most actions can be accessed via redux, but those involving the cmController
+// must be provided via props.
+IDEKeyHandlers.propTypes = {
+  getContent: PropTypes.func.isRequired
+};
+
+export default IDEKeyHandlers;

client/modules/IDE/components/Modal.jsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 import ExitIcon from '../../../images/exit.svg';
+import useKeyDownHandlers from '../hooks/useKeyDownHandlers';
 
 // Common logic from NewFolderModal, NewFileModal, UploadFileModal
 
@@ -30,6 +31,8 @@ const Modal = ({
     };
   }, []);
 
+  useKeyDownHandlers({ escape: onClose });
+
   return (
     <section className="modal" ref={modalRef}>
       <div className={classNames('modal-content', contentClassName)}>

client/modules/IDE/hooks/useKeyDownHandlers.js

@@ -0,0 +1,55 @@
+import mapKeys from 'lodash/mapKeys';
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Attaches keydown handlers to the global document.
+ *
+ * Handles Mac/PC switching of Ctrl to Cmd.
+ *
+ * @param {Record<string, (e: KeyboardEvent) => void>} keyHandlers - an object
+ * which maps from the key to its event handler.  The object keys are a combination
+ * of the key and prefixes `ctrl-` `shift-` (ie. 'ctrl-f', 'ctrl-shift-f')
+ * and the values are the function to call when that specific key is pressed.
+ */
+export default function useKeyDownHandlers(keyHandlers) {
+  /**
+   * Instead of memoizing the handlers, use a ref and call the current
+   * handler at the time of the event.
+   */
+  const handlers = useRef(keyHandlers);
+
+  useEffect(() => {
+    handlers.current = mapKeys(keyHandlers, (value, key) => key.toLowerCase());
+  }, [keyHandlers]);
+
+  /**
+   * Will call all matching handlers, starting with the most specific: 'ctrl-shift-f' => 'ctrl-f' => 'f'.
+   * Can use e.stopPropagation() to prevent subsequent handlers.
+   * @type {(function(KeyboardEvent): void)}
+   */
+  const handleEvent = useCallback((e) => {
+    const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
+    const isCtrl = isMac ? e.metaKey && this.isMac : e.ctrlKey;
+    if (e.shiftKey && isCtrl) {
+      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+    }
+    if (isCtrl) {
+      handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
+    }
+    handlers.current[e.key.toLowerCase()]?.(e);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEvent);
+
+    return () => document.removeEventListener('keydown', handleEvent);
+  }, [handleEvent]);
+}
+
+/**
+ * Component version can be used in class components where hooks can't be used.
+ */
+export const DocumentKeyDown = ({ handlers }) => {
+  useKeyDownHandlers(handlers);
+  return null;
+};