emit mapped keys from input-component

src/content/actions/input.js

@@ -1,16 +1,9 @@
 import actions from 'content/actions';
 
-const asKeymapChars = (key, ctrl) => {
-  if (ctrl) {
-    return '<C-' + key.toUpperCase() + '>';
-  }
-  return key;
-};
-
-const keyPress = (key, ctrl) => {
+const keyPress = (key) => {
   return {
     type: actions.INPUT_KEY_PRESS,
-    key: asKeymapChars(key, ctrl),
+    key,
   };
 };
 

src/content/components/common/index.js

@@ -10,8 +10,8 @@ export default class Common {
     const input = new InputComponent(win.document.body, store);
     const keymapper = new KeymapperComponent(store);
 
-    input.onKey((key, ctrl) => follow.key(key, ctrl));
-    input.onKey((key, ctrl) => keymapper.key(key, ctrl));
+    input.onKey(key => follow.key(key));
+    input.onKey(key => keymapper.key(key));
 
     this.store = store;
     this.children = [

src/content/components/common/input.js

@@ -1,3 +1,10 @@
+const mapKey = (e) => {
+  if (e.ctrlKey) {
+    return '<C-' + e.key.toUpperCase() + '>';
+  }
+  return e.key;
+};
+
 export default class InputComponent {
   constructor(target) {
     this.pressed = {};
@@ -47,8 +54,10 @@ export default class InputComponent {
       return;
     }
 
+    let key = mapKey(e);
+
     for (let listener of this.onKeyListeners) {
-      let stop = listener(e.key, e.ctrlKey);
+      let stop = listener(key);
       if (stop) {
         e.preventDefault();
         e.stopPropagation();

src/content/components/common/keymapper.js

@@ -9,8 +9,8 @@ export default class KeymapperComponent {
   update() {
   }
 
-  key(key, ctrl) {
-    this.store.dispatch(inputActions.keyPress(key, ctrl));
+  key(key) {
+    this.store.dispatch(inputActions.keyPress(key));
 
     let input = this.store.getState().input;
     let matched = Object.keys(input.keymaps).filter((keyStr) => {

test/content/actions/input.test.js

@@ -5,16 +5,10 @@ import * as inputActions from 'content/actions/input';
 describe("input actions", () => {
   describe("keyPress", () => {
     it('create INPUT_KEY_PRESS action', () => {
-      let action = inputActions.keyPress('a', false);
+      let action = inputActions.keyPress('a');
       expect(action.type).to.equal(actions.INPUT_KEY_PRESS);
       expect(action.key).to.equal('a');
     });
-
-    it('create INPUT_KEY_PRESS action from key with ctrl', () => {
-      let action = inputActions.keyPress('b', true);
-      expect(action.type).to.equal(actions.INPUT_KEY_PRESS);
-      expect(action.key).to.equal('<C-B>');
-    });
   });
 
   describe("clearKeys", () => {

test/content/components/common/input.test.js

@@ -0,0 +1,78 @@
+import InputComponent from 'content/components/common/input';
+import { expect } from "chai";
+
+describe('InputComponent', () => {
+  it('register callbacks', () => {
+    let component = new InputComponent(window.document);
+    component.onKey((key) => {
+      expect(key).is.equals('a');
+    });
+    component.onKeyDown({ key: 'a' });
+  });
+
+  it('invoke callback once', () => {
+    let component = new InputComponent(window.document);
+    let a = 0, b = 0;
+    component.onKey((key) => {
+      if (key == 'a') {
+        ++a;
+      } else {
+        key == 'b'
+        ++b;
+      }
+    });
+    component.onKeyDown({ key: 'a' });
+    component.onKeyDown({ key: 'b' });
+    component.onKeyPress({ key: 'a' });
+    component.onKeyUp({ key: 'a' });
+    component.onKeyPress({ key: 'b' });
+    component.onKeyUp({ key: 'b' });
+
+    expect(a).is.equals(1);
+    expect(b).is.equals(1);
+  })
+
+  it('add prefix when ctrl pressed', () => {
+    let component = new InputComponent(window.document);
+    component.onKey((key) => {
+      expect(key).is.equals('<C-A>');
+    });
+    component.onKeyDown({ key: 'a', ctrlKey: true });
+  })
+
+  it('does not invoke only meta keys', () => {
+    let component = new InputComponent(window.document);
+    component.onKey((key) => {
+      expect.fail();
+    });
+    component.onKeyDown({ key: 'Shift' });
+    component.onKeyDown({ key: 'Control' });
+    component.onKeyDown({ key: 'Alt' });
+    component.onKeyDown({ key: 'OS' });
+  })
+
+  it('ignores events from input elements', () => {
+    ['input', 'textarea', 'select'].forEach((name) => {
+      let target = window.document.createElement(name);
+      let component = new InputComponent(target);
+      component.onKey((key) => {
+        expect.fail();
+      });
+      component.onKeyDown({ key: 'x', target });
+    });
+  });
+
+  it('ignores events from contenteditable  elements', () => {
+    let target = window.document.createElement('div');
+    let component = new InputComponent(target);
+    component.onKey((key) => {
+      expect.fail();
+    });
+
+    target.setAttribute('contenteditable', '');
+    component.onKeyDown({ key: 'x', target });
+
+    target.setAttribute('contenteditable', 'true');
+    component.onKeyDown({ key: 'x', target });
+  })
+});