Fix ctrl+c to close WebView 🍾 (#1287)

* rm hyperCaretFocus => prevent callstask

* keep caret component

lib/actions/sessions.js

@@ -57,7 +57,6 @@ export function addSessionData(uid, data) {
 
         const enterKey = Boolean(data.match(/\n/));
         const url = enterKey ? isUrl(shell, data) : null;
-
         if (url) {
           dispatch({
             type: SESSION_URL_SET,

lib/components/term.js

@@ -16,8 +16,9 @@ export default class Term extends Component {
     this.handleMouseUp = this.handleMouseUp.bind(this);
     this.handleScrollEnter = this.handleScrollEnter.bind(this);
     this.handleScrollLeave = this.handleScrollLeave.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
     this.onHyperCaret = this.onHyperCaret.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
     props.ref_(this);
   }
 
@@ -121,14 +122,6 @@ export default class Term extends Component {
     this.scrollMouseEnter = false;
   }
 
-  handleFocus() {
-    // This will in turn result in `this.focus()` being
-    // called, which is unecessary.
-    // Should investigate if it matters.
-    this.props.onActive();
-    this.term.focusHyperCaret();
-  }
-
   handleMouseUp() {
     this.props.onActive();
     // this makes sure that we focus the hyper caret only
@@ -139,6 +132,18 @@ export default class Term extends Component {
       this.term.focusHyperCaret();
     }
   }
+  handleFocus() {
+    // This will in turn result in `this.focus()` being
+    // called, which is unecessary.
+    // Should investigate if it matters.
+    this.props.onActive();
+  }
+
+  handleKeyDown(e) {
+    if (e.ctrlKey && e.key === 'c') {
+      this.props.onURLAbort();
+    }
+  }
 
   onHyperCaret(caret) {
     this.hyperCaret = caret;
@@ -262,13 +267,10 @@ export default class Term extends Component {
       // key input so that it doesn't conflict
       // with the <webview>
       if (nextProps.url) {
-        const io = this.term.io.push();
+        this.term.io.push();
-        io.onVTKeystroke = io.sendString = str => {
+        window.addEventListener('keydown', this.handleKeyDown);
-          if (str.length === 1 && str.charCodeAt(0) === 3 /* Ctrl + C */) {
-            this.props.onURLAbort();
-          }
-        };
       } else {
+        window.removeEventListener('keydown', this.handleKeyDown);
         this.term.io.pop();
       }
     }
@@ -349,6 +351,7 @@ export default class Term extends Component {
         />
       { this.props.url ?
         <webview
+          key="hyper-webview"
           src={this.props.url}
           onFocus={this.handleFocus}
           style={{
@@ -361,16 +364,14 @@ export default class Term extends Component {
             height: '100%'
           }}
           /> :
-        [
+        <div // eslint-disable-line react/jsx-indent
-          <div key="hyper-caret" contentEditable className="hyper-caret" ref={this.onHyperCaret}/>,
+          key="scrollbar"
-          <div // eslint-disable-line react/jsx-indent
+          className={css('scrollbarShim')}
-            key="scrollbar"
+          onMouseEnter={this.handleScrollEnter}
-            className={css('scrollbarShim')}
+          onMouseLeave={this.handleScrollLeave}
-            onMouseEnter={this.handleScrollEnter}
+          />
-            onMouseLeave={this.handleScrollLeave}
-            />
-        ]
       }
+      <div key="hyper-caret" contentEditable className="hyper-caret" ref={this.onHyperCaret}/>
       { this.props.customChildren }
     </div>);
   }