diff --git a/src/toolbar/toolbarview.js b/src/toolbar/toolbarview.js index 5266d75c..1b39be7c 100644 --- a/src/toolbar/toolbarview.js +++ b/src/toolbar/toolbarview.js @@ -735,6 +735,11 @@ class DynamicGrouping { const dropdown = createDropdown( locale ); dropdown.class = 'ck-toolbar__grouped-dropdown'; + + // Make sure the dropdown never sticks out to the left/right. It should be under the main toolbar. + // (https://github.com/ckeditor/ckeditor5/issues/5608) + dropdown.panelPosition = locale.uiLanguageDirection === 'ltr' ? 'sw' : 'se'; + addToolbarToDropdown( dropdown, [] ); dropdown.buttonView.set( { diff --git a/tests/manual/toolbar/grouping.html b/tests/manual/toolbar/grouping.html index 4cac73cf..bb92f882 100644 --- a/tests/manual/toolbar/grouping.html +++ b/tests/manual/toolbar/grouping.html @@ -9,3 +9,10 @@

Editor with RTL UI

Editor content

+ + diff --git a/tests/manual/toolbar/grouping.md b/tests/manual/toolbar/grouping.md index 1f89658c..b9ae64e5 100644 --- a/tests/manual/toolbar/grouping.md +++ b/tests/manual/toolbar/grouping.md @@ -6,6 +6,7 @@ 2. Refresh the test. 3. The toolbar should looks the same. Make sure none of toolbar items wrapped or overflow. 4. The dropdown button should be displayed at the end of the toolbar, allowing to access grouped features. + * The drop–down should be displayed **under** the main toolbar. 5. Grouped items toolbar should never start or end with a separator, even if one was in the main toolbar space. 6. Other separators (between items) should be preserved. diff --git a/tests/toolbar/toolbarview.js b/tests/toolbar/toolbarview.js index 52725e23..da736da3 100644 --- a/tests/toolbar/toolbarview.js +++ b/tests/toolbar/toolbarview.js @@ -778,6 +778,28 @@ describe( 'ToolbarView', () => { expect( groupedItemsDropdown.toolbarView.items.map( i => i ) ) .to.have.ordered.members( groupedItems.map( i => i ) ); } ); + + // https://github.com/ckeditor/ckeditor5/issues/5608 + it( 'has the proper position depending on the UI language direction (LTR UI)', () => { + const locale = new Locale( { uiLanguage: 'en' } ); + const view = new ToolbarView( locale, { shouldGroupWhenFull: true } ); + view.render(); + + expect( view._behavior.groupedItemsDropdown.panelPosition ).to.equal( 'sw' ); + + view.destroy(); + } ); + + // https://github.com/ckeditor/ckeditor5/issues/5608 + it( 'has the proper position depending on the UI language direction (RTL UI)', () => { + const locale = new Locale( { uiLanguage: 'ar' } ); + const view = new ToolbarView( locale, { shouldGroupWhenFull: true } ); + view.render(); + + expect( view._behavior.groupedItemsDropdown.panelPosition ).to.equal( 'se' ); + + view.destroy(); + } ); } ); describe( 'item overflow checking logic', () => {