Quick Actions (codesandbox#380)

* Add Quick Actions

* Fix keymapping validation

* Fix tests

* Fix linter

* Fix registering of keybindings

* Fix cmd+alt+p not registering keyup events

Author: CompuIves

packages/app/package.json

@@ -119,6 +119,7 @@
     "downshift": "^1.0.0-rc.14",
     "eslint-config-react-app": "^1.0.5",
     "file-saver": "^1.3.3",
+    "geniejs": "^0.5.0",
     "glamor": "^2.20.25",
     "gsap": "^1.20.3",
     "gulp": "^3.9.1",
@@ -185,7 +186,7 @@
       "/create-zip\\/.*\\/files/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(common))"
+      "node_modules/(?!(common|react-icons))"
     ],
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/__mocks__/styleMock.js",

packages/app/src/app/components/Preference/PreferenceKeybinding/KeybindingInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Input from 'app/components/Input';
 
-import { normalizeKey } from 'app/store/preferences/keybindings';
+import { normalizeKey, formatKey } from 'app/store/preferences/keybindings';
 
 type Props = {
   value: Array<string>,
@@ -14,22 +14,6 @@ type Props = {
 const SPECIAL_KEYS = ['Meta', 'Control', 'Alt', 'Shift', 'Enter', 'Backspace'];
 const IGNORED_KEYS = ['Backspace', 'Escape', 'CapsLock'];
 
-function formatKey(key: string) {
-  switch (key) {
-    case 'Meta': {
-      const isMac = !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i);
-      if (isMac) {
-        return '⌘';
-      }
-      return '⊞';
-    }
-    case 'Control':
-      return 'Ctrl';
-    default:
-      return key;
-  }
-}
-
 function sortKeys(keys: Array<string>) {
   return keys.sort((a, b) => {
     const isASpecial = SPECIAL_KEYS.indexOf(a) > -1;

packages/app/src/app/components/sandbox/CodeEditor/Monaco.js

@@ -728,16 +728,6 @@ export default class CodeEditor extends React.Component<Props, State> {
         this.handleSaveCode();
       }
     );
-
-    const quickCommandAction = this.editor.getAction(
-      'editor.action.quickCommand'
-    );
-    this.editor.addCommand(
-      this.monaco.KeyMod.CtrlCmd | // eslint-disable-line no-bitwise
-      this.monaco.KeyMod.Shift | // eslint-disable-line no-bitwise
-        this.monaco.KeyCode.KEY_P, // eslint-disable-line no-bitwise
-      quickCommandAction._run // eslint-disable-line no-underscore-dangle
-    );
   };
 
   disposeModules = (modules: Array<Module>) => {

packages/app/src/app/containers/KeybindingManager.js

@@ -2,14 +2,15 @@ import React, { KeyboardEvent } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
-import { KEYBINDINGS, normalizeKey } from 'app/store/preferences/keybindings';
-import { keybindingsSelector } from 'app/store/preferences/selectors';
+import { normalizeKey } from 'app/store/preferences/keybindings';
+import { userKeybindingsSelector } from 'app/store/preferences/selectors';
 import { modalSelector } from 'app/store/modal/selectors';
 
 type Props = {
   sandboxId: string,
   keybindings: {
     [key: string]: {
+      title: string,
       bindings: [Array<string>, ?Array<string>],
       action: Function,
     },
@@ -22,14 +23,9 @@ type Props = {
 };
 
 const mapStateToProps = createSelector(
-  keybindingsSelector,
+  userKeybindingsSelector,
   modalSelector,
-  (userKeybindings, modal) => {
-    const newBindings = { ...KEYBINDINGS };
-    Object.keys(userKeybindings).forEach(key => {
-      newBindings[key].bindings = userKeybindings[key];
-    });
-
+  (newBindings, modal) => {
     const bindingStrings = {};
 
     Object.keys(newBindings).forEach(key => {
@@ -57,6 +53,7 @@ const mapDispatchToProps = dispatch => ({
 class KeybindingManager extends React.Component<Props> {
   pressedComboKeys = [];
   pressedComboMetaKeys = [];
+  pressedSpecialKeys = [];
   checkedStrokes = this.props.bindingStrings;
 
   removeFromPressedComboKeys = (key: string) => {
@@ -80,6 +77,19 @@ class KeybindingManager extends React.Component<Props> {
       }
     }
 
+    // We also register special keys, sometimes key ups are not registered
+    // for special keys, so after every 2 seconds we clear the array
+    if (this.pressedSpecialKeys.indexOf(key) === -1) {
+      this.pressedSpecialKeys.push(key);
+
+      clearTimeout(this.specialTimeout);
+      this.specialTimeout = setTimeout(() => {
+        this.pressedSpecialKeys.forEach(k => {
+          this.removeFromPressedComboKeys(k);
+        });
+      }, 1500);
+    }
+
     // check match
     const match = this.checkCombosForPressedKeys();
 
@@ -91,6 +101,7 @@ class KeybindingManager extends React.Component<Props> {
     if (typeof match === 'string') {
       this.pressedComboKeys = [];
       this.pressedComboMetaKeys = [];
+      this.pressedSpecialKeys = [];
       this.checkedStrokes = this.props.bindingStrings;
 
       this.props.dispatch(

packages/app/src/app/containers/Modal.js

@@ -92,10 +92,12 @@ class ModalContainer extends React.PureComponent {
   props: Props;
 
   closeModal = e => {
-    if (!e || !e.defaultPrevented) {
-      const { modalActions } = this.props;
-      modalActions.closeModal();
+    const { modalActions, modal } = this.props;
+    if (e && e.keyCode && modal.preventEscapeClosing) {
+      return;
     }
+
+    modalActions.closeModal();
   };
 
   getStyles = (width = 400, top = 20) => ({

packages/app/src/app/containers/Preferences/KeyMapping/Preferences.js

@@ -52,6 +52,7 @@ class Preferences extends React.Component<Props> {
     const valB1 = value[1] && [...value[1]].sort().join('');
     const alreadyExists = bindings.some(([b0, b1]) => {
       if (
+        b0 &&
         [...b0]
           .sort()
           .join('')

packages/app/src/app/containers/QuickActions/Keys.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { formatKey } from 'app/store/preferences/keybindings';
+
+type Props = {
+  bindings: Array<string>,
+};
+
+const Key = styled.div`
+  padding: 0.25rem 0.3rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.theme.background2};
+  border-radius: 3px;
+  margin: 0 1px;
+  font-size: 0.75rem;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+`;
+
+export default ({ bindings }: Props) =>
+  bindings.map(key => <Key key={key}>{formatKey(key)}</Key>);