real xterm and keymap (#1983)

* Use real xterm and intercept shortcuts

* Update xterm.css for selection feature

lib/components/style-sheet.js

@@ -23,6 +23,9 @@ export default class StyleSheet extends React.PureComponent {
             ${fontSmoothing ? `-webkit-font-smoothing: ${fontSmoothing};` : ''}
             font-feature-settings: "liga" 0;
             position: relative;
+            user-select: none;
+            -ms-user-select: none;
+            -webkit-user-select: none;
           }
 
           .terminal.focus,
@@ -163,6 +166,20 @@ export default class StyleSheet extends React.PureComponent {
             left: -9999em;
           }
 
+          .terminal .xterm-selection {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            opacity: 0.3;
+            pointer-events: none;
+          }
+
+          .terminal .xterm-selection div {
+            position: absolute;
+            background-color: ${cursorColor};
+          }
+
           /*
            *  Determine default colors for xterm.js
            */

lib/components/term.js

@@ -1,8 +1,10 @@
 /* global Blob,URL,requestAnimationFrame */
 import React from 'react';
+import Terminal from 'xterm';
 import Component from '../component';
 import terms from '../terms';
-import Terminal from 'hyper-xterm-tmp';
+import returnKey from '../utils/keymaps';
+import CommandRegistry from '../command-registry';
 
 // map old hterm constants to xterm.js
 const CURSOR_STYLES = {
@@ -37,7 +39,8 @@ export default class Term extends Component {
       this.term = props.term || new Terminal({
         cursorStyle: CURSOR_STYLES[props.cursorShape],
         cursorBlink: props.cursorBlink
-      });
+      })
+      this.term.attachCustomKeyEventHandler(this.keyboardHandler)
       this.term.on('open', this.onOpen)
       this.term.open(this.termRef, {
         focus: false
@@ -152,6 +155,17 @@ export default class Term extends Component {
     }
   }
 
+  keyboardHandler(e) {
+    // test key from keymaps before moving forward with actions
+    const key = returnKey(e);
+    if (key) {
+      if (CommandRegistry.getCommand(key)) {
+        CommandRegistry.exec(key, e);
+      }
+      return false;
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (!this.props.cleared && nextProps.cleared) {
       this.clear();

package.json

@@ -148,7 +148,7 @@
     "semver": "5.3.0",
     "style-loader": "^0.18.2",
     "uuid": "3.0.1",
-    "hyper-xterm-tmp": "2.8.0"
+    "xterm": "2.8.1"
   },
   "devDependencies": {
     "asar": "0.13.0",

yarn.lock

@@ -3225,10 +3225,6 @@ husky@0.13.4:
     is-ci "^1.0.9"
     normalize-path "^1.0.0"
 
-hyper-xterm-tmp@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/hyper-xterm-tmp/-/hyper-xterm-tmp-2.8.0.tgz#79b9e3577677bf5280eb5eb3439c0f40cb89e46e"
-
 hyphenate-style-name@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
@@ -6365,6 +6361,10 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
+xterm@2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-2.8.1.tgz#3f6b939bcb8d015a1f247d66257102cb16a0b2e1"
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"