Merge pull request #65 from ckeditor/t/64

Feature: Added a separator between image styles and text alternative buttons in the image toolbar. Closes #64.
ckeditor · Feb 28, 2017 · 925a538 · 925a538
2 parents 6edd823 + 081d852
commit 925a538
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 3 deletions.
diff --git a/src/imagestyle.js b/src/imagestyle.js
@@ -40,6 +40,10 @@ export default class ImageStyle extends Plugin {
 		const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
 
 		if ( defaultImageToolbarConfig ) {
+			if ( defaultImageToolbarConfig.length ) {
+				defaultImageToolbarConfig.push( '|' );
+			}
+
 			styles.forEach( style => defaultImageToolbarConfig.push( style.name ) );
 		}
 	}

diff --git a/src/imagetextalternative.js b/src/imagetextalternative.js
@@ -42,6 +42,10 @@ export default class ImageTextAlternative extends Plugin {
 		const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
 
 		if ( defaultImageToolbarConfig ) {
+			if ( defaultImageToolbarConfig.length ) {
+				defaultImageToolbarConfig.push( '|' );
+			}
+
 			defaultImageToolbarConfig.push( 'imageTextAlternative' );
 		}
 

diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js
@@ -69,9 +69,7 @@ export default class ImageToolbar extends Plugin {
 		promises.push( panel.content.add( toolbar ) );
 
 		// Add buttons to the toolbar.
-		for ( let name of toolbarConfig ) {
-			promises.push( toolbar.items.add( editor.ui.componentFactory.create( name ) ) );
-		}
+		promises.push( toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory ) );
 
 		// Add balloon panel to editor's UI.
 		promises.push( editor.ui.view.body.add( panel ) );

diff --git a/tests/imagestyle.js b/tests/imagestyle.js
@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import ImageToolbar from '../src/imagetoolbar';
 import ImageStyle from '../src/imagestyle';
@@ -86,6 +87,28 @@ describe( 'ImageStyle', () => {
 			} );
 	} );
 
+	it( 'should add separator before the button if toolbar is present and already has items', () => {
+		const editorElement = global.document.createElement( 'div' );
+		global.document.body.appendChild( editorElement );
+
+		const FooPlugin = class extends Plugin {
+			init() {
+				this.editor.ui.componentFactory.add( 'foo', () => new ButtonView() );
+
+				this.editor.config.get( 'image.defaultToolbar' ).push( 'foo' );
+			}
+		};
+
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ FooPlugin, ImageStyle, ImageToolbar ]
+		} )
+		.then( newEditor => {
+			expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'foo', '|', 'imageStyleFull', 'imageStyleSide' ] );
+
+			newEditor.destroy();
+		} );
+	} );
+
 	it( 'should not add buttons to image toolbar if configuration is present', () => {
 		const editorElement = global.document.createElement( 'div' );
 		global.document.body.appendChild( editorElement );

diff --git a/tests/imagetextalternative.js b/tests/imagetextalternative.js
@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import Image from '../src/image';
 import ImageToolbar from '../src/imagetoolbar';
@@ -109,6 +110,28 @@ describe( 'ImageTextAlternative', () => {
 				newEditor.destroy();
 			} );
 		} );
+
+		it( 'should add separator before the button if toolbar is present and already has items', () => {
+			const editorElement = global.document.createElement( 'div' );
+			global.document.body.appendChild( editorElement );
+
+			const FooPlugin = class extends Plugin {
+				init() {
+					this.editor.ui.componentFactory.add( 'foo', () => new ButtonView() );
+
+					this.editor.config.get( 'image.defaultToolbar' ).push( 'foo' );
+				}
+			};
+
+			return ClassicTestEditor.create( editorElement, {
+				plugins: [ FooPlugin, ImageTextAlternative, ImageToolbar ]
+			} )
+			.then( newEditor => {
+				expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'foo', '|', 'imageTextAlternative' ] );
+
+				newEditor.destroy();
+			} );
+		} );
 	} );
 
 	describe( 'balloon panel form', () => {