Merge pull request #61 from ckeditor/t/ckeditor5/1151

Feature: The `InlineEditorUIView` should display on different sides of editable depending on the direction of the UI language. See ckeditor/ckeditor5#1151.

Author: Reinmar

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.uiLanguageDirection === 'ltr' ) {
+			return positions;
+		} else {
+			return positions.reverse();
+		}
 	}
 }

tests/inlineeditoruiview.js

@@ -19,7 +19,7 @@ describe( 'InlineEditorUIView', () => {
 	testUtils.createSinonSandbox();
 
 	beforeEach( () => {
-		locale = new Locale( 'en' );
+		locale = new Locale();
 		editingView = new EditingView();
 		editingViewRoot = createRoot( editingView.document );
 		view = new InlineEditorUIView( locale, editingView );
@@ -115,7 +115,7 @@ describe( 'InlineEditorUIView', () => {
 
 	describe( 'init()', () => {
 		it( 'appends #toolbar to panel#content', () => {
-			locale = new Locale( 'en' );
+			locale = new Locale();
 			const view = new InlineEditorUIView( locale, editingView );
 
 			view.editable.name = editingViewRoot.rootName;
@@ -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 (uiLanguageDirection="ltr")', () => {
+			locale.uiLanguageDirection = '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 (uiLanguageDirection="rtl")', () => {
+			locale.uiLanguageDirection = '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 );
 		} );

tests/manual/rtl.html

@@ -0,0 +1,10 @@
+<div id="editor" contenteditable="true">
+	<h2>Editor 1</h2>
+	<p>This is an editor instance.</p>
+</div>
+
+<style>
+	body {
+		height: 10000px;
+	}
+</style>

tests/manual/rtl.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console:false, document, window */
+
+import InlineEditor from '../../src/inlineeditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+InlineEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		language: 'ar'
+	} )
+	.then( editor => {
+		console.log( 'Editor has been initialized', editor );
+
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

tests/manual/rtl.md

@@ -0,0 +1,10 @@
+## Inline editor with right–to–left UI
+
+**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
+
+---
+
+### Expected
+
+1. The main editor toolbar should be displayed on the **right** side of editable.
+1. Same as above but also when the viewport is scrolled and the toolbar is attached to the bottom of editable.