Merge pull request #13443 from ckeditor/ci/2675-slash-commands-rtl-fix

Fix (mention): Mentions panel should be positioned left to the caret in editors with right–to–left UI language. Closes #13459.

packages/ckeditor5-mention/src/mentionui.ts

@@ -546,6 +546,7 @@ export default class MentionUI extends Plugin {
 		const editing = editor.editing;
 		const domConverter = editing.view.domConverter;
 		const mapper = editing.mapper;
+		const uiLanguageDirection = editor.locale.uiLanguageDirection;
 
 		return {
 			target: () => {
@@ -573,15 +574,18 @@ export default class MentionUI extends Plugin {
 
 				return null;
 			},
-			positions: getBalloonPanelPositions( preferredPosition )
+			positions: getBalloonPanelPositions( preferredPosition, uiLanguageDirection )
 		};
 	}
 }
 
 /**
  * Returns the balloon positions data callbacks.
  */
-function getBalloonPanelPositions( preferredPosition: MentionsView['position'] ): PositionOptions['positions'] {
+function getBalloonPanelPositions(
+	preferredPosition: MentionsView['position'],
+	uiLanguageDirection: string
+): PositionOptions['positions'] {
 	const positions: Record<string, PositionOptions['positions'][0]> = {
 		// Positions the panel to the southeast of the caret rectangle.
 		'caret_se': ( targetRect: Rect ) => {
@@ -639,12 +643,17 @@ function getBalloonPanelPositions( preferredPosition: MentionsView['position'] )
 		];
 	}
 
-	// By default return all position callbacks.
-	return [
+	// By default, return all position callbacks ordered depending on the UI language direction.
+	return uiLanguageDirection !== 'rtl' ? [
 		positions.caret_se,
 		positions.caret_sw,
 		positions.caret_ne,
 		positions.caret_nw
+	] : [
+		positions.caret_sw,
+		positions.caret_se,
+		positions.caret_nw,
+		positions.caret_ne
 	];
 }
 

packages/ckeditor5-mention/tests/mentionui.js

@@ -299,6 +299,71 @@ describe( 'MentionUI', () => {
 					expect( limiter() ).to.be.null;
 				} );
 		} );
+
+		describe( 'relation with the UI language direction of the editor', () => {
+			describe( 'for RTL languages', () => {
+				let contextualBaloonSpy;
+
+				beforeEach( async () => {
+					await editor.destroy();
+
+					return createClassicTestEditor( { ...staticConfig } )
+						.then( () => {
+							const contextualBalloon = editor.plugins.get( ContextualBalloon );
+							setData( model, '<paragraph>foo []</paragraph>' );
+							editor.locale.uiLanguageDirection = 'rtl';
+							contextualBaloonSpy = sinon.spy( contextualBalloon, 'add' );
+
+							model.change( writer => {
+								writer.insertText( '@', doc.selection.getFirstPosition() );
+							} );
+						} )
+						.then( waitForDebounce );
+				} );
+
+				it( 'should prefer the west position first (to the left of the caret)', () => {
+					const positionNames = contextualBaloonSpy.firstCall.firstArg.position.positions.map( ( { name } ) => name );
+
+					expect( positionNames ).to.have.ordered.members( [
+						'caret_sw',
+						'caret_se',
+						'caret_nw',
+						'caret_ne'
+					] );
+				} );
+			} );
+
+			describe( 'for ltr languages', () => {
+				let contextualBaloonSpy;
+
+				beforeEach( async () => {
+					await editor.destroy();
+
+					return createClassicTestEditor( { ...staticConfig } )
+						.then( () => {
+							const contextualBalloon = editor.plugins.get( ContextualBalloon );
+							setData( model, '<paragraph>foo []</paragraph>' );
+							contextualBaloonSpy = sinon.spy( contextualBalloon, 'add' );
+
+							model.change( writer => {
+								writer.insertText( '@', doc.selection.getFirstPosition() );
+							} );
+						} )
+						.then( waitForDebounce );
+				} );
+
+				it( 'should prefer the east position first (to the right of the caret)', () => {
+					const positionNames = contextualBaloonSpy.firstCall.firstArg.position.positions.map( ( { name } ) => name );
+
+					expect( positionNames ).to.have.ordered.members( [
+						'caret_se',
+						'caret_sw',
+						'caret_ne',
+						'caret_nw'
+					] );
+				} );
+			} );
+		} );
 	} );
 
 	describe( 'typing integration', () => {