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 @@ +
This is an editor instance.
+