Merge pull request #1027 from ckeditor/t/1026

Feature: Introduced `view.Document#keyup` event (fired by the `KeyObserver`). Closes #1026.

Author: Reinmar

src/view/observer/keyobserver.js

@@ -21,11 +21,11 @@ export default class KeyObserver extends DomEventObserver {
 	constructor( document ) {
 		super( document );
 
-		this.domEventType = 'keydown';
+		this.domEventType = [ 'keydown', 'keyup' ];
 	}
 
 	onDomEvent( domEvt ) {
-		this.fire( 'keydown', domEvt, {
+		this.fire( domEvt.type, domEvt, {
 			keyCode: domEvt.keyCode,
 
 			altKey: domEvt.altKey,
@@ -54,7 +54,22 @@ export default class KeyObserver extends DomEventObserver {
  */
 
 /**
- * The value of the {@link module:engine/view/document~Document#event:keydown} event.
+ * Fired when a key has been released.
+ *
+ * Introduced by {@link module:engine/view/observer/keyobserver~KeyObserver}.
+ *
+ * Note that because {@link module:engine/view/observer/keyobserver~KeyObserver} is attached by the
+ * {@link module:engine/view/document~Document}
+ * this event is available by default.
+ *
+ * @see module:engine/view/observer/keyobserver~KeyObserver
+ * @event module:engine/view/document~Document#event:keyup
+ * @param {module:engine/view/observer/keyobserver~KeyEventData} keyEventData
+ */
+
+/**
+ * The value of both events - {@link module:engine/view/document~Document#event:keydown} and
+ * {@link module:engine/view/document~Document#event:keyup}.
  *
  * @class module:engine/view/observer/keyobserver~KeyEventData
  * @extends module:engine/view/observer/domeventdata~DomEventData

tests/view/manual/keyobserver.js

@@ -11,6 +11,7 @@ import { setData } from '../../../src/dev-utils/view';
 const viewDocument = new Document();
 
 viewDocument.on( 'keydown', ( evt, data ) => console.log( 'keydown', data ) );
+viewDocument.on( 'keyup', ( evt, data ) => console.log( 'keyup', data ) );
 
 viewDocument.createRoot( document.getElementById( 'editable' ), 'editable' );
 setData( viewDocument, 'foo{}bar', { rootName: 'editable' } );

tests/view/manual/keyobserver.md

@@ -1,5 +1,7 @@
 * Expected initialization: `foo{}bar`.
 * Press some keys - nothing should be added to editor's contents.
+* When press some key - event `keydown` should be logged. When the key is released - event `keyup` should be logged.
+* You can hold the key in order to check whether `keydown` event is fired multiple times. After releasing the key, `keyup` event should be fired once.
 * Check whether key events are logged to the console with proper data:
   * `keyCode`,
   * `altKey`,

tests/view/observer/keyobserver.js

@@ -22,7 +22,8 @@ describe( 'KeyObserver', () => {
 	} );
 
 	it( 'should define domEventType', () => {
-		expect( observer.domEventType ).to.equal( 'keydown' );
+		expect( observer.domEventType ).to.contains( 'keydown' );
+		expect( observer.domEventType ).to.contains( 'keyup' );
 	} );
 
 	describe( 'onDomEvent', () => {
@@ -31,7 +32,15 @@ describe( 'KeyObserver', () => {
 
 			viewDocument.on( 'keydown', spy );
 
-			observer.onDomEvent( { target: document.body, keyCode: 111, altKey: false, ctrlKey: false, metaKey: false, shiftKey: false } );
+			observer.onDomEvent( {
+				type: 'keydown',
+				target: document.body,
+				keyCode: 111,
+				altKey: false,
+				ctrlKey: false,
+				metaKey: false,
+				shiftKey: false
+			} );
 
 			expect( spy.calledOnce ).to.be.true;
 
@@ -52,7 +61,15 @@ describe( 'KeyObserver', () => {
 
 			viewDocument.on( 'keydown', spy );
 
-			observer.onDomEvent( { target: document.body, keyCode: 111, altKey: true, ctrlKey: true, metaKey: false, shiftKey: true } );
+			observer.onDomEvent( {
+				type: 'keydown',
+				target: document.body,
+				keyCode: 111,
+				altKey: true,
+				ctrlKey: true,
+				metaKey: false,
+				shiftKey: true
+			} );
 
 			const data = spy.args[ 0 ][ 1 ];
 			expect( data ).to.have.property( 'keyCode', 111 );
@@ -70,10 +87,39 @@ describe( 'KeyObserver', () => {
 
 			viewDocument.on( 'keydown', spy );
 
-			observer.onDomEvent( { target: document.body, keyCode: 111, metaKey: true } );
+			observer.onDomEvent( { type: 'keydown', target: document.body, keyCode: 111, metaKey: true } );
 
 			const data = spy.args[ 0 ][ 1 ];
 			expect( data ).to.have.property( 'ctrlKey', true );
 		} );
+
+		it( 'should fire keyup with the target and key info', () => {
+			const spy = sinon.spy();
+
+			viewDocument.on( 'keyup', spy );
+
+			observer.onDomEvent( {
+				type: 'keyup',
+				target: document.body,
+				keyCode: 111,
+				altKey: false,
+				ctrlKey: false,
+				metaKey: false,
+				shiftKey: false
+			} );
+
+			expect( spy.calledOnce ).to.be.true;
+
+			const data = spy.args[ 0 ][ 1 ];
+			expect( data ).to.have.property( 'domTarget', document.body );
+			expect( data ).to.have.property( 'keyCode', 111 );
+			expect( data ).to.have.property( 'altKey', false );
+			expect( data ).to.have.property( 'ctrlKey', false );
+			expect( data ).to.have.property( 'shiftKey', false );
+			expect( data ).to.have.property( 'keystroke', getCode( data ) );
+
+			// Just to be sure.
+			expect( getCode( data ) ).to.equal( 111 );
+		} );
 	} );
 } );