diff --git a/src/inlineeditoruiview.js b/src/inlineeditoruiview.js index a14b782..1cf72bb 100644 --- a/src/inlineeditoruiview.js +++ b/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(); + } } } diff --git a/tests/inlineeditoruiview.js b/tests/inlineeditoruiview.js index 5e2366f..d82bffb 100644 --- a/tests/inlineeditoruiview.js +++ b/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 ); } ); diff --git a/tests/manual/rtl.html b/tests/manual/rtl.html new file mode 100644 index 0000000..6a32c92 --- /dev/null +++ b/tests/manual/rtl.html @@ -0,0 +1,10 @@ +
+

Editor 1

+

This is an editor instance.

+
+ + diff --git a/tests/manual/rtl.js b/tests/manual/rtl.js new file mode 100644 index 0000000..060dd2d --- /dev/null +++ b/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 ); + } ); diff --git a/tests/manual/rtl.md b/tests/manual/rtl.md new file mode 100644 index 0000000..cb0c6b7 --- /dev/null +++ b/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.