Merge pull request #207 from ckeditor/t/206

Fix: Long keystrokes should be handled properly by getEnvKeystrokeText on Mac. Added support for ⇧ and ⌥ modifiers. Closes #206.

Author: szymonkups

src/keyboard.js

@@ -12,6 +12,18 @@
 import CKEditorError from './ckeditorerror';
 import env from './env';
 
+const macGlyphsToModifiers = {
+	'⌘': 'ctrl',
+	'⇧': 'shift',
+	'⌥': 'alt'
+};
+
+const modifiersToMacGlyphs = {
+	'ctrl': '⌘',
+	'shift': '⇧',
+	'alt': '⌥'
+};
+
 /**
  * Object with `keyName => keyCode` pairs for a set of known keys.
  *
@@ -96,15 +108,22 @@ export function parseKeystroke( keystroke ) {
  * @returns {String} Keystroke text specific for the environment.
  */
 export function getEnvKeystrokeText( keystroke ) {
-	const split = splitKeystrokeText( keystroke );
-
-	if ( env.mac ) {
-		if ( split[ 0 ].toLowerCase() == 'ctrl' ) {
-			return '⌘' + ( split[ 1 ] || '' );
-		}
+	if ( !env.mac ) {
+		return keystroke;
 	}
 
-	return keystroke;
+	return splitKeystrokeText( keystroke )
+		// Replace modifiers (e.g. "ctrl") with Mac glyphs (e.g. "⌘") first.
+		.map( key => modifiersToMacGlyphs[ key.toLowerCase() ] || key )
+
+		// Decide whether to put "+" between keys in the keystroke or not.
+		.reduce( ( value, key ) => {
+			if ( value.slice( -1 ) in macGlyphsToModifiers ) {
+				return value + key;
+			} else {
+				return value + '+' + key;
+			}
+		} );
 }
 
 function generateKnownKeyCodes() {

tests/keyboard.js

@@ -120,9 +120,28 @@ describe( 'Keyboard', () => {
 				expect( getEnvKeystrokeText( 'ctrl+A' ) ).to.equal( '⌘A' );
 			} );
 
+			it( 'replaces SHIFT with ⇧', () => {
+				expect( getEnvKeystrokeText( 'SHIFT' ) ).to.equal( '⇧' );
+				expect( getEnvKeystrokeText( 'SHIFT+A' ) ).to.equal( '⇧A' );
+				expect( getEnvKeystrokeText( 'shift+A' ) ).to.equal( '⇧A' );
+			} );
+
+			it( 'replaces ALT with ⌥', () => {
+				expect( getEnvKeystrokeText( 'ALT' ) ).to.equal( '⌥' );
+				expect( getEnvKeystrokeText( 'ALT+A' ) ).to.equal( '⌥A' );
+				expect( getEnvKeystrokeText( 'alt+A' ) ).to.equal( '⌥A' );
+			} );
+
+			it( 'work for multiple modifiers', () => {
+				expect( getEnvKeystrokeText( 'CTRL+SHIFT+X' ) ).to.equal( '⌘⇧X' );
+				expect( getEnvKeystrokeText( 'ALT+SHIFT+X' ) ).to.equal( '⌥⇧X' );
+			} );
+
 			it( 'does not touch other keys', () => {
-				expect( getEnvKeystrokeText( 'SHIFT+A' ) ).to.equal( 'SHIFT+A' );
+				expect( getEnvKeystrokeText( 'ESC+A' ) ).to.equal( 'ESC+A' );
+				expect( getEnvKeystrokeText( 'TAB' ) ).to.equal( 'TAB' );
 				expect( getEnvKeystrokeText( 'A' ) ).to.equal( 'A' );
+				expect( getEnvKeystrokeText( 'A+CTRL+B' ) ).to.equal( 'A+⌘B' );
 			} );
 		} );
 
@@ -135,6 +154,8 @@ describe( 'Keyboard', () => {
 				expect( getEnvKeystrokeText( 'CTRL+A' ) ).to.equal( 'CTRL+A' );
 				expect( getEnvKeystrokeText( 'ctrl+A' ) ).to.equal( 'ctrl+A' );
 				expect( getEnvKeystrokeText( 'SHIFT+A' ) ).to.equal( 'SHIFT+A' );
+				expect( getEnvKeystrokeText( 'alt+A' ) ).to.equal( 'alt+A' );
+				expect( getEnvKeystrokeText( 'CTRL+SHIFT+A' ) ).to.equal( 'CTRL+SHIFT+A' );
 				expect( getEnvKeystrokeText( 'A' ) ).to.equal( 'A' );
 			} );
 		} );