8
0
Просмотр исходного кода

Improved keyboard navigation around widgets in RTL content.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
6609a69461
2 измененных файлов с 44 добавлено и 2 удалено
  1. 3 1
      packages/ckeditor5-widget/src/widget.js
  2. 41 1
      packages/ckeditor5-widget/tests/widget.js

+ 3 - 1
packages/ckeditor5-widget/src/widget.js

@@ -164,7 +164,9 @@ export default class Widget extends Plugin {
 	 */
 	_onKeydown( eventInfo, domEventData ) {
 		const keyCode = domEventData.keyCode;
-		const isForward = keyCode == keyCodes.arrowdown || keyCode == keyCodes.arrowright;
+		const isLtrContent = this.editor.locale.contentLanguageDirection === 'ltr';
+
+		const isForward = keyCode == keyCodes.arrowdown || keyCode == keyCodes[ isLtrContent ? 'arrowright' : 'arrowleft' ];
 		let wasHandled = false;
 
 		// Checks if the keys were handled and then prevents the default event behaviour and stops

+ 41 - 1
packages/ckeditor5-widget/tests/widget.js

@@ -657,6 +657,44 @@ describe( 'Widget', () => {
 				'[<image></image>]' +
 				'<paragraph>foo</paragraph>'
 			);
+
+			describe( 'RTL (right-to-left) content', () => {
+				test(
+					'should move selection forward from selected object - left arrow',
+					'[<widget></widget>]<paragraph>foo</paragraph>',
+					keyCodes.arrowleft,
+					'<widget></widget><paragraph>[]foo</paragraph>',
+					null,
+					'rtl'
+				);
+
+				test(
+					'should move selection backward from selected object - right arrow',
+					'<paragraph>foo</paragraph>[<widget></widget>]',
+					keyCodes.arrowright,
+					'<paragraph>foo[]</paragraph><widget></widget>',
+					null,
+					'rtl'
+				);
+
+				test(
+					'should move selection to next widget - left arrow',
+					'[<widget></widget>]<widget></widget>',
+					keyCodes.arrowleft,
+					'<widget></widget>[<widget></widget>]',
+					null,
+					'rtl'
+				);
+
+				test(
+					'should move selection to previous widget - right arrow',
+					'<widget></widget>[<widget></widget>]',
+					keyCodes.arrowright,
+					'[<widget></widget>]<widget></widget>',
+					null,
+					'rtl'
+				);
+			} );
 		} );
 
 		describe( 'Ctrl+A', () => {
@@ -782,8 +820,10 @@ describe( 'Widget', () => {
 			);
 		} );
 
-		function test( name, data, keyCodeOrMock, expected, expectedView ) {
+		function test( name, data, keyCodeOrMock, expected, expectedView, contentLanguageDirection = 'ltr' ) {
 			it( name, () => {
+				testUtils.sinon.stub( editor.locale, 'contentLanguageDirection' ).value( contentLanguageDirection );
+
 				const domEventDataMock = ( typeof keyCodeOrMock == 'object' ) ? keyCodeOrMock : {
 					keyCode: keyCodeOrMock
 				};