Bladeren bron

Added separators between ImageTextAlternative and ImageStyle plugin buttons in ImageToolbar.

Aleksander Nowodzinski 8 jaren geleden
bovenliggende
commit
d2b4d5d6d0

+ 4 - 0
packages/ckeditor5-image/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 ) );
 		}
 	}

+ 4 - 0
packages/ckeditor5-image/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' );
 		}
 

+ 23 - 0
packages/ckeditor5-image/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 );

+ 23 - 0
packages/ckeditor5-image/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', () => {