Przeglądaj źródła

Changed ImageToolbar default configuration processing.

Szymon Kupś 9 lat temu
rodzic
commit
86f9abfd1a

+ 4 - 4
packages/ckeditor5-image/src/imagestyle/imagestyle.js

@@ -36,11 +36,11 @@ export default class ImageStyle extends Plugin {
 			this._createButton( style );
 		}
 
-		// If there is no default image toolbar configuration, add all image styles buttons.
-		const imageToolbarConfig = this.editor.config.get( 'image.toolbar' );
+		// Push buttons to default image toolbar if one exists.
+		const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
 
-		if ( !imageToolbarConfig ) {
-			this.editor.config.set( 'image.toolbar', styles.map( style => style.name ) );
+		if ( defaultImageToolbarConfig ) {
+			styles.forEach( style => defaultImageToolbarConfig.push( style.name ) );
 		}
 	}
 

+ 13 - 2
packages/ckeditor5-image/src/imagetoolbar.js

@@ -44,19 +44,30 @@ const positions = {
  * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected.
  * Toolbar components are created using editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}
  * based on {@link module:core/editor/editor~Editor#config configuration} stored under `image.toolbar`.
+ * Other plugins can add new components to the default toolbar configuration by pushing them to `image.defaultToolbar`
+ * configuration. Default configuration is used when `image.toolbar` config is not present.
  *
  * @extends module:core/plugin~Plugin.
  */
 export default class ImageToolbar extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.set( 'image.defaultToolbar', [] );
+	}
+
 	/**
 	 * @inheritDoc
 	 */
 	afterInit() {
 		const editor = this.editor;
-		const toolbarConfig = editor.config.get( 'image.toolbar' );
+		const toolbarConfig = editor.config.get( 'image.toolbar' ) || editor.config.get( 'image.defaultToolbar' );
 
 		// Don't add the toolbar if there is no configuration.
-		if ( !toolbarConfig ) {
+		if ( !toolbarConfig.length ) {
 			return;
 		}
 

+ 16 - 3
packages/ckeditor5-image/tests/imagestyle/imagestyle.js

@@ -4,6 +4,7 @@
  */
 
 import ClassicTestEditor from 'ckeditor5-core/tests/_utils/classictesteditor';
+import ImageToolbar from 'ckeditor5-image/src/imagetoolbar';
 import ImageStyle from 'ckeditor5-image/src/imagestyle/imagestyle';
 import ImageStyleEngine from 'ckeditor5-image/src/imagestyle/imagestyleengine';
 import ButtonView from 'ckeditor5-ui/src/button/buttonview';
@@ -67,10 +68,22 @@ describe( 'ImageStyle', () => {
 		}
 	} );
 
-	it( 'should add buttons to image toolbar if there is no default configuration', () => {
-		const toolbarConfig =  editor.config.get( 'image.toolbar' );
+	it( 'should not add buttons to default image toolbar if image toolbar is not present', () => {
+		expect( editor.config.get( 'image.defaultToolbar' ) ).to.be.undefined;
+	} );
+
+	it( 'should add buttons to default image toolbar if toolbar is present', () => {
+		const editorElement = global.document.createElement( 'div' );
+		global.document.body.appendChild( editorElement );
+
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ ImageStyle, ImageToolbar ]
+		} )
+			.then( newEditor => {
+				expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'imageStyleFull', 'imageStyleSide' ] );
 
-		expect( toolbarConfig ).to.eql( styles.map( style => style.name ) );
+				newEditor.destroy();
+			} );
 	} );
 
 	it( 'should not add buttons to image toolbar if configuration is present', () => {

+ 33 - 0
packages/ckeditor5-image/tests/imagetoolbar.js

@@ -43,6 +43,10 @@ describe( 'ImageToolbar', () => {
 		expect( editor.plugins.get( ImageToolbar ) ).to.be.instanceOf( ImageToolbar );
 	} );
 
+	it( 'should initialize image.defaultToolbar to an empty array', () => {
+		expect( editor.config.get( 'image.defaultToolbar' ) ).to.eql( [] );
+	} );
+
 	it( 'should not initialize if there is no configuration', () => {
 		const editorElement = global.document.createElement( 'div' );
 		global.document.body.appendChild( editorElement );
@@ -58,6 +62,25 @@ describe( 'ImageToolbar', () => {
 			} );
 	} );
 
+	it( 'should allow other plugins to alter default config', () => {
+		const editorElement = global.document.createElement( 'div' );
+		global.document.body.appendChild( editorElement );
+
+		return ClassicEditor.create( editorElement, {
+			plugins: [ ImageToolbar, FakeButton, AlterDefaultConfig ]
+		} )
+			.then( newEditor => {
+				const panel = getBalloonPanelView( newEditor.ui.view.body );
+				const toolbar = panel.content.get( 0 );
+				const button = toolbar.items.get( 0 );
+
+				expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'fake_button' ] );
+				expect( button.label ).to.equal( 'fake button' );
+
+				newEditor.destroy();
+			} );
+	} );
+
 	it( 'should add BalloonPanelView to view body', () => {
 		expect( panel ).to.be.instanceOf( BalloonPanelView );
 	} );
@@ -164,4 +187,14 @@ describe( 'ImageToolbar', () => {
 			} );
 		}
 	}
+
+	class AlterDefaultConfig extends Plugin {
+		init() {
+			const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
+
+			if ( defaultImageToolbarConfig ) {
+				defaultImageToolbarConfig.push( 'fake_button' );
+			}
+		}
+	}
 } );