Ver código fonte

Adjusted the position of the toolbar according to Locale#languageDirection.

Aleksander Nowodzinski 6 anos atrás
pai
commit
1acdbe7fa4

+ 7 - 1
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -172,7 +172,7 @@ export default class InlineEditorUIView extends EditorUIView {
 	 * @returns {module:utils/dom/position~Options#positions}
 	 */
 	_getPanelPositions() {
-		return [
+		const positions = [
 			( editableRect, panelRect ) => {
 				return {
 					top: this._getPanelPositionTop( editableRect, panelRect ),
@@ -188,5 +188,11 @@ export default class InlineEditorUIView extends EditorUIView {
 				};
 			}
 		];
+
+		if ( this.locale.languageDirection === 'ltr' ) {
+			return positions;
+		} else {
+			return positions.reverse();
+		}
 	}
 }

+ 28 - 2
packages/ckeditor5-editor-inline/tests/inlineeditoruiview.js

@@ -130,8 +130,11 @@ describe( 'InlineEditorUIView', () => {
 	} );
 
 	describe( 'panelPositions', () => {
-		it( 'returns the positions in the right order', () => {
-			const positions = view.panelPositions;
+		it( 'returns the positions in the right order (languageDirection="ltr")', () => {
+			locale.languageDirection = 'ltr';
+
+			const uiView = new InlineEditorUIView( locale, editingView );
+			const positions = uiView.panelPositions;
 			const editableRect = {
 				top: 100,
 				bottom: 200,
@@ -150,6 +153,29 @@ describe( 'InlineEditorUIView', () => {
 			expect( positions[ 1 ]( editableRect, panelRect ).name ).to.equal( 'toolbar_east' );
 		} );
 
+		it( 'returns the positions in the right order (languageDirection="rtl")', () => {
+			locale.languageDirection = 'rtl';
+
+			const uiView = new InlineEditorUIView( locale, editingView );
+			const positions = uiView.panelPositions;
+			const editableRect = {
+				top: 100,
+				bottom: 200,
+				left: 100,
+				right: 100,
+				width: 100,
+				height: 100
+			};
+			const panelRect = {
+				width: 50,
+				height: 50
+			};
+
+			expect( positions ).to.have.length( 2 );
+			expect( positions[ 0 ]( editableRect, panelRect ).name ).to.equal( 'toolbar_east' );
+			expect( positions[ 1 ]( editableRect, panelRect ).name ).to.equal( 'toolbar_west' );
+		} );
+
 		describe( 'west', () => {
 			testTopPositions( 0, 100 );
 		} );