Sfoglia il codice sorgente

Extracted more arrow keys–related utils to ckeditor5-utils.

Aleksander Nowodzinski 5 anni fa
parent
commit
0c757a151b

+ 4 - 26
packages/ckeditor5-table/src/tablenavigation.js

@@ -16,8 +16,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import priorities from '@ckeditor/ckeditor5-utils/src/priorities';
 import {
-	keyCodes,
-	isArrowKeyCode
+	isArrowKeyCode,
+	getLocalizedArrowKeyCodeDirection
 } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 /**
@@ -166,13 +166,14 @@ export default class TableNavigation extends Plugin {
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 */
 	_onKeydown( eventInfo, domEventData ) {
+		const editor = this.editor;
 		const keyCode = domEventData.keyCode;
 
 		if ( !isArrowKeyCode( keyCode ) ) {
 			return;
 		}
 
-		const direction = getDirectionFromKeyCode( keyCode, this.editor.locale.contentLanguageDirection );
+		const direction = getLocalizedArrowKeyCodeDirection( keyCode, editor.locale.contentLanguageDirection );
 		const wasHandled = this._handleArrowKeys( direction, domEventData.shiftKey );
 
 		if ( wasHandled ) {
@@ -518,26 +519,3 @@ export default class TableNavigation extends Plugin {
 	}
 }
 
-// Returns the direction name from `keyCode`.
-//
-// @private
-// @param {Number} keyCode
-// @param {String} contentLanguageDirection The content language direction.
-// @returns {'left'|'up'|'right'|'down'} Arrow direction.
-function getDirectionFromKeyCode( keyCode, contentLanguageDirection ) {
-	const isLtrContent = contentLanguageDirection === 'ltr';
-
-	switch ( keyCode ) {
-		case keyCodes.arrowleft:
-			return isLtrContent ? 'left' : 'right';
-
-		case keyCodes.arrowright:
-			return isLtrContent ? 'right' : 'left';
-
-		case keyCodes.arrowup:
-			return 'up';
-
-		case keyCodes.arrowdown:
-			return 'down';
-	}
-}

+ 48 - 0
packages/ckeditor5-utils/src/keyboard.js

@@ -142,6 +142,54 @@ export function isArrowKeyCode( keyCode ) {
 		keyCode == keyCodes.arrowdown;
 }
 
+/**
+ * Returns the direction from the provided key code considering the language direction of the
+ * editor content.
+ *
+ * For instance, in right–to–left (RTL) languages, pressing the left arrow means moving selection right (forward)
+ * in the model structure. Similarly, pressing the right arrow moves the selection left (backward).
+ *
+ * @param {Number} keyCode
+ * @param {String} contentLanguageDirection The content language direction, corresponding to
+ * {@link module:utils/locale~Locale#contentLanguageDirection}.
+ * @returns {'left'|'up'|'right'|'down'} Arrow direction.
+ */
+export function getLocalizedArrowKeyCodeDirection( keyCode, contentLanguageDirection ) {
+	const isLtrContent = contentLanguageDirection === 'ltr';
+
+	switch ( keyCode ) {
+		case keyCodes.arrowleft:
+			return isLtrContent ? 'left' : 'right';
+
+		case keyCodes.arrowright:
+			return isLtrContent ? 'right' : 'left';
+
+		case keyCodes.arrowup:
+			return 'up';
+
+		case keyCodes.arrowdown:
+			return 'down';
+	}
+}
+
+/**
+ * Determines if the provided key code moves the selection forward or backward considering
+ * the language direction of the editor content.
+ *
+ * For instance, in right–to–left (RTL) languages, pressing the left arrow means moving forward
+ * in the model structure. Similarly, pressing the right arrow moves the selection backward.
+ *
+ * @param {Number} keyCode
+ * @param {String} contentLanguageDirection The content language direction, corresponding to
+ * {@link module:utils/locale~Locale#contentLanguageDirection}.
+ * @returns {Boolean}
+ */
+export function isForwardArrowKeyCode( keyCode, contentLanguageDirection ) {
+	const localizedKeyCodeDirection = getLocalizedArrowKeyCodeDirection( keyCode, contentLanguageDirection );
+
+	return localizedKeyCodeDirection === 'down' || localizedKeyCodeDirection === 'right';
+}
+
 function generateKnownKeyCodes() {
 	const keyCodes = {
 		arrowleft: 37,

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

@@ -13,7 +13,8 @@ import WidgetTypeAround from './widgettypearound/widgettypearound';
 import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils';
 import {
 	keyCodes,
-	isArrowKeyCode
+	isArrowKeyCode,
+	isForwardArrowKeyCode
 } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import env from '@ckeditor/ckeditor5-utils/src/env';
 
@@ -173,13 +174,13 @@ export default class Widget extends Plugin {
 	 */
 	_onKeydown( eventInfo, domEventData ) {
 		const keyCode = domEventData.keyCode;
-		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
 		// the propagation.
 		if ( isArrowKeyCode( keyCode ) ) {
+			const isForward = isForwardArrowKeyCode( keyCode, this.editor.locale.contentLanguageDirection );
+
 			wasHandled = this._handleArrowKeys( isForward );
 		} else if ( keyCode === keyCodes.enter ) {
 			wasHandled = this._handleEnterKey( domEventData.shiftKey );