Merge pull request #14699 from ckeditor/ck/13812-wrong-tooltip-when-h…

…overing-buttons-on-chrome-on-ios Fix (utils): Wrong tooltip when hovering toolbar buttons on Chrome on iOS. Closes #13812.
ckeditor · Sep 6, 2023 · 5c7fe1c · 5c7fe1c
2 parents 1f6bf52 + 3d2e592
commit 5c7fe1c
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 2 deletions.
diff --git a/packages/ckeditor5-utils/src/keyboard.ts b/packages/ckeditor5-utils/src/keyboard.ts
@@ -121,7 +121,7 @@ export function parseKeystroke( keystroke: string | ReadonlyArray<number | strin
 export function getEnvKeystrokeText( keystroke: string ): string {
 	let keystrokeCode = parseKeystroke( keystroke );
 
-	const modifiersToGlyphs = Object.entries( env.isMac ? modifiersToGlyphsMac : modifiersToGlyphsNonMac );
+	const modifiersToGlyphs = Object.entries( ( env.isMac || env.isiOS ) ? modifiersToGlyphsMac : modifiersToGlyphsNonMac );
 
 	const modifiers = modifiersToGlyphs.reduce( ( modifiers, [ name, glyph ] ) => {
 		// Modifier keys are stored as a bit mask so extract those from the keystroke code.
@@ -202,7 +202,7 @@ function getEnvKeyCode( key: string ): number {
 
 	const code = getCode( key );
 
-	return env.isMac && code == keyCodes.ctrl ? keyCodes.cmd : code;
+	return ( env.isMac || env.isiOS ) && code == keyCodes.ctrl ? keyCodes.cmd : code;
 }
 
 /**

diff --git a/packages/ckeditor5-utils/tests/keyboard.js b/packages/ckeditor5-utils/tests/keyboard.js
@@ -85,14 +85,62 @@ describe( 'Keyboard', () => {
 
 	describe( 'parseKeystroke', () => {
 		const initialEnvMac = env.isMac;
+		const initialEnviOS = env.isiOS;
 
 		afterEach( () => {
 			env.isMac = initialEnvMac;
+			env.isiOS = initialEnviOS;
 		} );
 
 		describe( 'on Macintosh', () => {
 			beforeEach( () => {
 				env.isMac = true;
+				env.isiOS = false;
+			} );
+
+			it( 'parses string', () => {
+				expect( parseKeystroke( 'ctrl+a' ) ).to.equal( 0x880000 + 65 );
+			} );
+
+			it( 'parses string without modifier', () => {
+				expect( parseKeystroke( '[' ) ).to.equal( 91 );
+			} );
+
+			it( 'allows spacing', () => {
+				expect( parseKeystroke( 'ctrl +   a' ) ).to.equal( 0x880000 + 65 );
+			} );
+
+			it( 'is case-insensitive', () => {
+				expect( parseKeystroke( 'Ctrl+A' ) ).to.equal( 0x880000 + 65 );
+			} );
+
+			it( 'works with an array', () => {
+				expect( parseKeystroke( [ 'ctrl', 'a' ] ) ).to.equal( 0x880000 + 65 );
+			} );
+
+			it( 'works with an array which contains numbers', () => {
+				expect( parseKeystroke( [ 'shift', 33 ] ) ).to.equal( 0x220000 + 33 );
+			} );
+
+			it( 'works with two modifiers', () => {
+				expect( parseKeystroke( 'ctrl+shift+a' ) ).to.equal( 0x880000 + 0x220000 + 65 );
+			} );
+
+			it( 'supports forced modifier', () => {
+				expect( parseKeystroke( 'ctrl!+a' ) ).to.equal( 0x110000 + 65 );
+			} );
+
+			it( 'throws on unknown name', () => {
+				expectToThrowCKEditorError( () => {
+					parseKeystroke( 'foo' );
+				}, 'keyboard-unknown-key', null );
+			} );
+		} );
+
+		describe( 'on iOS', () => {
+			beforeEach( () => {
+				env.isiOS = true;
+				env.isMac = false;
 			} );
 
 			it( 'parses string', () => {
@@ -181,14 +229,64 @@ describe( 'Keyboard', () => {
 
 	describe( 'getEnvKeystrokeText', () => {
 		const initialEnvMac = env.isMac;
+		const initialEnviOS = env.isiOS;
 
 		afterEach( () => {
 			env.isMac = initialEnvMac;
+			env.isiOS = initialEnviOS;
 		} );
 
 		describe( 'on Macintosh', () => {
 			beforeEach( () => {
 				env.isMac = true;
+				env.isiOS = false;
+			} );
+
+			it( 'replaces CTRL with ⌘', () => {
+				expect( getEnvKeystrokeText( 'CTRL' ) ).to.equal( '⌘' );
+				expect( getEnvKeystrokeText( 'CTRL+A' ) ).to.equal( '⌘A' );
+				expect( getEnvKeystrokeText( 'ctrl+A' ) ).to.equal( '⌘A' );
+			} );
+
+			it( 'replaces CTRL! with ⌃', () => {
+				expect( getEnvKeystrokeText( 'CTRL!' ) ).to.equal( '⌃' );
+				expect( getEnvKeystrokeText( 'CTRL!+A' ) ).to.equal( '⌃A' );
+				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( 'normalizes value', () => {
+				expect( getEnvKeystrokeText( 'ESC' ) ).to.equal( 'Esc' );
+				expect( getEnvKeystrokeText( 'TAB' ) ).to.equal( 'Tab' );
+				expect( getEnvKeystrokeText( 'A' ) ).to.equal( 'A' );
+				expect( getEnvKeystrokeText( 'a' ) ).to.equal( 'A' );
+				expect( getEnvKeystrokeText( 'CTRL+a' ) ).to.equal( '⌘A' );
+				expect( getEnvKeystrokeText( 'ctrl+b' ) ).to.equal( '⌘B' );
+				expect( getEnvKeystrokeText( 'CTRL+[' ) ).to.equal( '⌘[' );
+				expect( getEnvKeystrokeText( 'CTRL+]' ) ).to.equal( '⌘]' );
+			} );
+		} );
+
+		describe( 'on iOS', () => {
+			beforeEach( () => {
+				env.isiOS = true;
+				env.isMac = false;
 			} );
 
 			it( 'replaces CTRL with ⌘', () => {