8
0
Просмотр исходного кода

Other: Rename ImageStyle options, UI components and merge commands into one command.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
95d6102cae

+ 4 - 4
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -12,16 +12,16 @@ ClassicEditor
 		image: {
 			styles: [
 				// This option is equal to a situation where no style is applied.
-				'imageStyleFull',
+				'imageStyle:full',
 
 				// This represents an image aligned to left.
-				'imageStyleAlignLeft',
+				'imageStyle:alignLeft',
 
 				// This represents an image aligned to right.
-				'imageStyleAlignRight'
+				'imageStyle:alignRight'
 			],
 
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ]
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ]
 		},
 		toolbar: {
 			viewportTopOffset: 60

+ 13 - 13
packages/ckeditor5-image/docs/features/image.md

@@ -118,17 +118,17 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		image: {
 			// You need to configure the image toolbar too, so it uses the new style buttons.
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ],
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
 
 			styles: [
 				// This option is equal to a situation where no style is applied.
-				'imageStyleFull',
+				'imageStyle:full',
 
 				// This represents an image aligned to left.
-				'imageStyleAlignLeft',
+				'imageStyle:alignLeft',
 
 				// This represents an image aligned to right.
-				'imageStyleAlignRight'
+				'imageStyle:alignRight'
 			]
 		}
 	} )
@@ -136,7 +136,7 @@ ClassicEditor
 	.catch( ... );
 ```
 
-In the code sample above we used predefined image styles – `'imageStyleFull'`, `'imageStyleAlignLeft'` and `'imageStyleAlignRight'`. The latter two apply, respectively, `.image-style-align-left` and  `.image-style-align-right` classes to the `<figure>` element.
+In the code sample above we used predefined image styles – `'imageStyle:full'`, `'imageStyle:alignLeft'` and `'imageStyle:alignRight'`. The latter two apply, respectively, `.image-style-align-left` and  `.image-style-align-right` classes to the `<figure>` element.
 
 See the result below:
 
@@ -150,11 +150,11 @@ See the result below:
 
 Besides using the {@link module:image/imagestyle/utils~defaultStyles 5 predefined styles}:
 
-* `'imageStyleFull'`,
-* `'imageStyleSide'`,
-* `'imageStyleAlignLeft'`,
-* `'imageStyleAlignCenter'`,
-* `'imageStyleAlignRight'`
+* `'full'`,
+* `'side'`,
+* `'alignLeft'`,
+* `'alignCenter'`,
+* `'alignRight'`
 
 you can also define your own styles or modify the existing ones.
 
@@ -194,7 +194,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle ],
 		image: {
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleFull', 'imageStyleSide' ]
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ]
 		}
 	} )
 	.then( ... )
@@ -211,8 +211,8 @@ The {@link module:image/image~Image} plugin registers:
 
 The {@link module:image/imagestyle~ImageStyle} plugin registers:
 
-* A command for each defined style (based on the {@link module:image/image~ImageConfig#styles `image.styles`} configuration option) &mdash; e.g. `'imageStyleFull'` and `'imageStyleSide'`,
-* A button for each defined style &mdash; e.g. `'imageStyleFull'` and `'imageStyleSide'`.
+* A command for each defined style (based on the {@link module:image/image~ImageConfig#styles `image.styles`} configuration option) &mdash; e.g. `'imageStyle:full'` and `'imageStyle:side'`,
+* A button for each defined style &mdash; e.g. `'imageStyle:full'` and `'imageStyle:side'`.
 
 ## Contribute
 

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

@@ -42,7 +42,7 @@ export default class ImageStyle extends Plugin {
  * The default value is:
  *
  *		const imageConfig = {
- *			styles: [ 'imageStyleFull', 'imageStyleSide' ]
+ *			styles: [ 'imageStyle:full', 'imageStyle:side' ]
  *		};
  *
  * which configures two default styles:
@@ -65,10 +65,10 @@ export default class ImageStyle extends Plugin {
  *			styles: [
  *				// This will only customize the icon of the "full" style.
  *				// Note: 'right' is one of default icons provided by the feature.
- *				{ name: 'imageStyleFull', icon: 'right' },
+ *				{ name: 'full', icon: 'right' },
  *
  *				// This will customize the icon, title and CSS class of the default "side" style.
- *				{ name: 'imageStyleSide', icon: customIcon, title: 'My side style', class: 'custom-side-image' }
+ *				{ name: 'side', icon: customIcon, title: 'My side style', class: 'custom-side-image' }
  *			]
  *		};
  *
@@ -96,14 +96,14 @@ export default class ImageStyle extends Plugin {
  * The feature creates commands based on defined styles, so you can change the style of a selected image by executing
  * the following command:
  *
- *		editor.execute( 'imageStyleSide' );
+ *		editor.execute( 'imageStyle:side' );
  *
  * The features creates also buttons which execute the commands, so assuming that you use the
  * default image styles setting you can {@link module:image/image~ImageConfig#toolbar configure the image toolbar}
  * to contain these options:
  *
  *		const imageConfig = {
- *			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
+ *			toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
  *		};
  *
  * @member {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} module:image/image~ImageConfig#styles

+ 29 - 17
packages/ckeditor5-image/src/imagestyle/imagestylecommand.js

@@ -20,27 +20,34 @@ export default class ImageStyleCommand extends Command {
 	 * Creates an instance of the image style command. Each command instance is handling one style.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor The editor instance.
-	 * @param {module:image/imagestyle/imagestyleediting~ImageStyleFormat} style A style to be applied by this command.
+	 * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles A styles that this command supports.
 	 */
-	constructor( editor, style ) {
+	constructor( editor, styles ) {
 		super( editor );
 
 		/**
-		 * The value of the command &mdash; `true` if a style handled by the command is applied on a currently selected image,
-		 * `false` otherwise.
+		 * A style handled by this command.
 		 *
 		 * @readonly
-		 * @observable
-		 * @member {Boolean} #value
+		 * @member {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} #styles
 		 */
+		this.styles = styles.reduce( ( styles, style ) => {
+			styles[ style.name ] = style;
+
+			if ( style.isDefault ) {
+				this._defaultStyle = style.name;
+			}
+
+			return styles;
+		}, {} );
 
 		/**
-		 * A style handled by this command.
+		 * Cached name of a default style if present. If there is no default style it defaults to false.
 		 *
-		 * @readonly
-		 * @member {module:image/imagestyle/imagestyleediting~ImageStyleFormat} #style
+		 * @type {Boolean|String}
+		 * @private
 		 */
-		this.style = style;
+		this._defaultStyle = false;
 	}
 
 	/**
@@ -53,20 +60,25 @@ export default class ImageStyleCommand extends Command {
 
 		if ( !element ) {
 			this.value = false;
-		} else if ( this.style.isDefault ) {
-			this.value = !element.hasAttribute( 'imageStyle' );
+		} else if ( element.hasAttribute( 'imageStyle' ) ) {
+			const attributeValue = element.getAttribute( 'imageStyle' );
+			this.value = this.styles[ attributeValue ] ? attributeValue : false;
 		} else {
-			this.value = ( element.getAttribute( 'imageStyle' ) == this.style.name );
+			this.value = this._defaultStyle;
 		}
 	}
 
 	/**
 	 * Executes the command.
 	 *
+	 * @param {Object} options
+	 * @param {String} options.value
 	 * @fires execute
 	 */
-	execute() {
-		if ( this.value ) {
+	execute( options = {} ) {
+		const styleName = options.value;
+
+		if ( !this.styles[ styleName ] ) {
 			return;
 		}
 
@@ -76,10 +88,10 @@ export default class ImageStyleCommand extends Command {
 		model.change( writer => {
 			// Default style means that there is no `imageStyle` attribute in the model.
 			// https://github.com/ckeditor/ckeditor5-image/issues/147
-			if ( this.style.isDefault ) {
+			if ( this.styles[ styleName ].isDefault ) {
 				writer.removeAttribute( 'imageStyle', imageElement );
 			} else {
-				writer.setAttribute( 'imageStyle', this.style.name, imageElement );
+				writer.setAttribute( 'imageStyle', styleName, imageElement );
 			}
 		} );
 	}

+ 3 - 5
packages/ckeditor5-image/src/imagestyle/imagestyleediting.js

@@ -44,7 +44,7 @@ export default class ImageStyleEditing extends Plugin {
 		const editing = editor.editing;
 
 		// Define default configuration.
-		editor.config.define( 'image.styles', [ 'imageStyleFull', 'imageStyleSide' ] );
+		editor.config.define( 'image.styles', [ 'imageStyle:full', 'imageStyle:side' ] );
 
 		// Get configuration.
 		const styles = normalizeImageStyles( editor.config.get( 'image.styles' ) );
@@ -61,10 +61,8 @@ export default class ImageStyleEditing extends Plugin {
 		// Converter for figure element from view to model.
 		data.upcastDispatcher.on( 'element:figure', viewToModelStyleAttribute( styles ), { priority: 'low' } );
 
-		// Register separate command for each style.
-		for ( const style of styles ) {
-			editor.commands.add( style.name, new ImageStyleCommand( editor, style ) );
-		}
+		// Register imageStyle command.
+		editor.commands.add( 'imageStyle', new ImageStyleCommand( editor, styles ) );
 	}
 }
 

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

@@ -69,8 +69,10 @@ export default class ImageStyleUI extends Plugin {
 	_createButton( style ) {
 		const editor = this.editor;
 
-		editor.ui.componentFactory.add( style.name, locale => {
-			const command = editor.commands.get( style.name );
+		const componentName = `imageStyle:${ style.name }`;
+
+		editor.ui.componentFactory.add( componentName, locale => {
+			const command = editor.commands.get( 'imageStyle' );
 			const view = new ButtonView( locale );
 
 			view.set( {
@@ -80,9 +82,9 @@ export default class ImageStyleUI extends Plugin {
 			} );
 
 			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
-			view.bind( 'isOn' ).to( command, 'value' );
+			view.bind( 'isOn' ).to( command, 'value', value => value === style.name );
 
-			this.listenTo( view, 'execute', () => editor.execute( style.name ) );
+			this.listenTo( view, 'execute', () => editor.execute( 'imageStyle', { value: style.name } ) );
 
 			return view;
 		} );

+ 20 - 18
packages/ckeditor5-image/src/imagestyle/utils.js

@@ -20,53 +20,53 @@ import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  *
  * Among them, 2 default semantic content styles are available:
  *
- * * `imageStyleFull` is a full–width image without any CSS class,
- * * `imageStyleSide` is a side image styled with the `image-style-side` CSS class
+ * * `full` is a full–width image without any CSS class,
+ * * `side` is a side image styled with the `image-style-side` CSS class
  *
  * There are also 3 styles focused on formatting:
  *
- * * `imageStyleAlignLeft` aligns the image to the left using the `image-style-align-left` class,
- * * `imageStyleAlignCenter` centers the image to the left using the `image-style-align-center` class,
- * * `imageStyleAlignRight` aligns the image to the right using the `image-style-align-right` class,
+ * * `alignLeft` aligns the image to the left using the `image-style-align-left` class,
+ * * `alignCenter` centers the image to the left using the `image-style-align-center` class,
+ * * `alignRight` aligns the image to the right using the `image-style-align-right` class,
  *
  * @member {Object.<String,Object>}
  */
 const defaultStyles = {
 	// This option is equal to situation when no style is applied.
-	imageStyleFull: {
-		name: 'imageStyleFull',
+	full: {
+		name: 'full',
 		title: 'Full size image',
 		icon: fullWidthIcon,
 		isDefault: true
 	},
 
 	// This represents side image.
-	imageStyleSide: {
-		name: 'imageStyleSide',
+	side: {
+		name: 'side',
 		title: 'Side image',
 		icon: rightIcon,
 		className: 'image-style-side'
 	},
 
 	// This style represents an imaged aligned to the left.
-	imageStyleAlignLeft: {
-		name: 'imageStyleAlignLeft',
+	alignLeft: {
+		name: 'alignLeft',
 		title: 'Left aligned image',
 		icon: leftIcon,
 		className: 'image-style-align-left'
 	},
 
 	// This style represents a centered imaged.
-	imageStyleAlignCenter: {
-		name: 'imageStyleAlignCenter',
+	alignCenter: {
+		name: 'alignCenter',
 		title: 'Centered image',
 		icon: centerIcon,
 		className: 'image-style-align-center'
 	},
 
 	// This style represents an imaged aligned to the right.
-	imageStyleAlignRight: {
-		name: 'imageStyleAlignRight',
+	alignRight: {
+		name: 'alignRight',
 		title: 'Right aligned image',
 		icon: rightIcon,
 		className: 'image-style-align-right'
@@ -110,8 +110,10 @@ function _normalizeStyle( style ) {
 	if ( typeof style == 'string' ) {
 		// If it's one of the defaults, just use it.
 		// Clone the style to avoid overriding defaults.
-		if ( defaultStyles[ style ] ) {
-			style = Object.assign( {}, defaultStyles[ style ] );
+		const styleName = style.indexOf( 'imageStyle:' ) === 0 ? style.substr( 11 ) : style;
+
+		if ( defaultStyles[ styleName ] ) {
+			style = Object.assign( {}, defaultStyles[ styleName ] );
 		}
 		// If it's just a name but none of the defaults, warn because probably it's a mistake.
 		else {
@@ -122,7 +124,7 @@ function _normalizeStyle( style ) {
 
 			// Normalize the style anyway to prevent errors.
 			style = {
-				name: style
+				name: styleName
 			};
 		}
 	}

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

@@ -178,10 +178,10 @@ export default class ImageToolbar extends Plugin {
  * * {@link module:image/imagetextalternative~ImageTextAlternative}.
  *
  * Three toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
- * `'imageStyleFull'`, `'imageStyleSide'`, and `'imageTextAlternative'` so you can configure the toolbar like this:
+ * `'imageStyle:full'`, `'imageStyle:side'`, and `'imageTextAlternative'` so you can configure the toolbar like this:
  *
  *		const imageConfig = {
- *			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+ *			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  *		};
  *
  * Of course, the same buttons can also be used in the

+ 32 - 26
packages/ckeditor5-image/tests/imagestyle/imagestylecommand.js

@@ -11,14 +11,13 @@ describe( 'ImageStyleCommand', () => {
 	const defaultStyle = { name: 'defaultStyle', title: 'foo bar', icon: 'icon-1', isDefault: true };
 	const otherStyle = { name: 'otherStyle', title: 'baz', icon: 'icon-2', className: 'other-class-name' };
 
-	let model, defaultStyleCommand, otherStyleCommand;
+	let model, command;
 
 	beforeEach( () => {
 		return ModelTestEditor.create()
 			.then( newEditor => {
 				model = newEditor.model;
-				defaultStyleCommand = new ImageStyleCommand( newEditor, defaultStyle );
-				otherStyleCommand = new ImageStyleCommand( newEditor, otherStyle );
+				command = new ImageStyleCommand( newEditor, [ defaultStyle, otherStyle ] );
 
 				model.schema.register( 'p', { inheritAllFrom: '$block' } );
 
@@ -34,35 +33,31 @@ describe( 'ImageStyleCommand', () => {
 	it( 'command value should be false if no image is selected', () => {
 		setData( model, '[]<image></image>' );
 
-		expect( defaultStyleCommand.value ).to.be.false;
-		expect( otherStyleCommand.value ).to.be.false;
+		expect( command.value ).to.be.false;
 	} );
 
 	it( 'should match default style if no imageStyle attribute is present', () => {
 		setData( model, '[<image></image>]' );
 
-		expect( defaultStyleCommand.value ).to.be.true;
-		expect( otherStyleCommand.value ).to.be.false;
+		expect( command.value ).to.equal( 'defaultStyle' );
 	} );
 
 	it( 'proper command should have true value when imageStyle attribute is present', () => {
 		setData( model, '[<image imageStyle="otherStyle"></image>]' );
 
-		expect( defaultStyleCommand.value ).to.be.false;
-		expect( otherStyleCommand.value ).to.be.true;
+		expect( command.value ).to.equal( 'otherStyle' );
 	} );
 
 	it( 'should have false value if style does not match', () => {
 		setData( model, '[<image imageStyle="foo"></image>]' );
 
-		expect( defaultStyleCommand.value ).to.be.false;
-		expect( otherStyleCommand.value ).to.be.false;
+		expect( command.value ).to.be.false;
 	} );
 
 	it( 'should set proper value when executed', () => {
 		setData( model, '[<image></image>]' );
 
-		otherStyleCommand.execute();
+		command.execute( { value: 'otherStyle' } );
 
 		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 	} );
@@ -70,7 +65,23 @@ describe( 'ImageStyleCommand', () => {
 	it( 'should do nothing when attribute already present', () => {
 		setData( model, '[<image imageStyle="otherStyle"></image>]' );
 
-		otherStyleCommand.execute();
+		command.execute( { value: 'otherStyle' } );
+
+		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
+	} );
+
+	it( 'should do nothing attribute is not known', () => {
+		setData( model, '[<image imageStyle="otherStyle"></image>]' );
+
+		command.execute( { value: 'someNotExistingStyle' } );
+
+		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
+	} );
+
+	it( 'should do nothing when value is not passed', () => {
+		setData( model, '[<image imageStyle="otherStyle"></image>]' );
+
+		command.execute();
 
 		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 	} );
@@ -81,7 +92,7 @@ describe( 'ImageStyleCommand', () => {
 		model.change( writer => {
 			expect( writer.batch.deltas ).to.length( 0 );
 
-			otherStyleCommand.execute();
+			command.execute( { value: 'otherStyle' } );
 
 			expect( writer.batch.deltas ).to.length.above( 0 );
 		} );
@@ -90,38 +101,33 @@ describe( 'ImageStyleCommand', () => {
 	it( 'should be enabled on image element', () => {
 		setData( model, '[<image></image>]' );
 
-		expect( defaultStyleCommand.isEnabled ).to.be.true;
-		expect( otherStyleCommand.isEnabled ).to.be.true;
+		expect( command.isEnabled ).to.be.true;
 	} );
 
 	it( 'should be disabled when not placed on image', () => {
 		setData( model, '[<p></p>]' );
 
-		expect( defaultStyleCommand.isEnabled ).to.be.false;
-		expect( otherStyleCommand.isEnabled ).to.be.false;
+		expect( command.isEnabled ).to.be.false;
 	} );
 
 	it( 'should be disabled when not placed directly on image', () => {
 		setData( model, '[<p></p><image></image>]' );
 
-		expect( defaultStyleCommand.isEnabled ).to.be.false;
-		expect( otherStyleCommand.isEnabled ).to.be.false;
+		expect( command.isEnabled ).to.be.false;
 	} );
 
 	it( 'default style should be active after executing it after another style', () => {
 		setData( model, '[<image></image>]' );
 
-		expect( defaultStyleCommand.value ).to.be.true;
-		expect( otherStyleCommand.value ).to.be.false;
+		expect( command.value ).to.equal( 'defaultStyle' );
 
-		otherStyleCommand.execute();
+		command.execute( { value: 'otherStyle' } );
 
 		expect( getData( model ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 
-		defaultStyleCommand.execute();
+		command.execute( { value: 'defaultStyle' } );
 
 		expect( getData( model ) ).to.equal( '[<image></image>]' );
-		expect( defaultStyleCommand.value ).to.be.true;
-		expect( otherStyleCommand.value ).to.be.false;
+		expect( command.value ).to.equal( 'defaultStyle' );
 	} );
 } );

+ 8 - 10
packages/ckeditor5-image/tests/imagestyle/imagestyleediting.js

@@ -71,7 +71,7 @@ describe( 'ImageStyleEditing', () => {
 				.then( newEditor => {
 					editor = newEditor;
 
-					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ 'imageStyleFull', 'imageStyleSide' ] );
+					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ 'imageStyle:full', 'imageStyle:side' ] );
 				} );
 		} );
 
@@ -81,10 +81,8 @@ describe( 'ImageStyleEditing', () => {
 			expect( schema.checkAttribute( [ '$root', 'image' ], 'imageStyle' ) ).to.be.true;
 		} );
 
-		it( 'should register separate command for each style', () => {
-			expect( editor.commands.get( 'fullStyle' ) ).to.be.instanceOf( ImageStyleCommand );
-			expect( editor.commands.get( 'sideStyle' ) ).to.be.instanceOf( ImageStyleCommand );
-			expect( editor.commands.get( 'dummyStyle' ) ).to.be.instanceOf( ImageStyleCommand );
+		it( 'should register a command', () => {
+			expect( editor.commands.get( 'imageStyle' ) ).to.be.instanceOf( ImageStyleCommand );
 		} );
 
 		it( 'should convert from view to model', () => {
@@ -266,7 +264,7 @@ describe( 'ImageStyleEditing', () => {
 				.then( newEditor => {
 					editor = newEditor;
 
-					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ 'imageStyleFull', 'imageStyleSide' ] );
+					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ 'imageStyle:full', 'imageStyle:side' ] );
 				} );
 		} );
 
@@ -276,14 +274,14 @@ describe( 'ImageStyleEditing', () => {
 					plugins: [ ImageStyleEditing ],
 					image: {
 						styles: [
-							'imageStyleSide'
+							'imageStyle:side'
 						]
 					}
 				} )
 				.then( newEditor => {
 					editor = newEditor;
 
-					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ 'imageStyleSide' ] );
+					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ 'imageStyle:side' ] );
 				} );
 		} );
 
@@ -293,14 +291,14 @@ describe( 'ImageStyleEditing', () => {
 					plugins: [ ImageStyleEditing ],
 					image: {
 						styles: [
-							{ name: 'imageStyleSide' }
+							{ name: 'imageStyle:side' }
 						]
 					}
 				} )
 				.then( newEditor => {
 					editor = newEditor;
 
-					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ { name: 'imageStyleSide' } ] );
+					expect( newEditor.config.get( 'image.styles' ) ).to.deep.equal( [ { name: 'imageStyle:side' } ] );
 				} );
 		} );
 	} );

+ 5 - 4
packages/ckeditor5-image/tests/imagestyle/imagestyleui.js

@@ -43,9 +43,10 @@ describe( 'ImageStyleUI', () => {
 	it( 'should register buttons for each style', () => {
 		const spy = sinon.spy( editor, 'execute' );
 
+		const command = editor.commands.get( 'imageStyle' );
+
 		for ( const style of styles ) {
-			const command = editor.commands.get( style.name );
-			const buttonView = editor.ui.componentFactory.create( style.name );
+			const buttonView = editor.ui.componentFactory.create( `imageStyle:${ style.name }` );
 
 			expect( buttonView ).to.be.instanceOf( ButtonView );
 			expect( buttonView.label ).to.equal( style.title );
@@ -57,7 +58,7 @@ describe( 'ImageStyleUI', () => {
 			expect( buttonView.isEnabled ).to.be.false;
 
 			buttonView.fire( 'execute' );
-			sinon.assert.calledWithExactly( editor.execute, style.name );
+			sinon.assert.calledWithExactly( editor.execute, 'imageStyle', { value: style.name } );
 
 			spy.reset();
 		}
@@ -86,7 +87,7 @@ describe( 'ImageStyleUI', () => {
 			.then( newEditor => {
 				editor = newEditor;
 
-				const buttonView = editor.ui.componentFactory.create( 'style 1' );
+				const buttonView = editor.ui.componentFactory.create( 'imageStyle:style 1' );
 
 				expect( buttonView.label ).to.equal( 'Default title' );
 			} );

+ 12 - 12
packages/ckeditor5-image/tests/imagestyle/utils.js

@@ -27,7 +27,7 @@ describe( 'ImageStyle utils', () => {
 					{ name: 'baz', title: 'Side image', icon: 'custom', className: 'baz-class' },
 
 					// Customized default styles.
-					{ name: 'imageStyleFull', icon: 'left', title: 'Custom title' }
+					{ name: 'full', icon: 'left', title: 'Custom title' }
 				] );
 			} );
 
@@ -47,7 +47,7 @@ describe( 'ImageStyle utils', () => {
 
 			it( 'should extend one of default styles if #name matches', () => {
 				expect( imageStyles[ 3 ] ).to.deep.equal( {
-					name: 'imageStyleFull',
+					name: 'full',
 					title: 'Custom title',
 					icon: leftIcon,
 					isDefault: true
@@ -57,36 +57,36 @@ describe( 'ImageStyle utils', () => {
 
 		describe( 'string format', () => {
 			it( 'should use one of default styles if #name matches', () => {
-				expect( normalizeImageStyles( [ 'imageStyleFull' ] ) ).to.deep.equal( [ {
-					name: 'imageStyleFull',
+				expect( normalizeImageStyles( [ 'imageStyle:full' ] ) ).to.deep.equal( [ {
+					name: 'full',
 					title: 'Full size image',
 					icon: fullWidthIcon,
 					isDefault: true
 				} ] );
 
-				expect( normalizeImageStyles( [ 'imageStyleSide' ] ) ).to.deep.equal( [ {
-					name: 'imageStyleSide',
+				expect( normalizeImageStyles( [ 'imageStyle:side' ] ) ).to.deep.equal( [ {
+					name: 'side',
 					title: 'Side image',
 					icon: rightIcon,
 					className: 'image-style-side'
 				} ] );
 
-				expect( normalizeImageStyles( [ 'imageStyleAlignLeft' ] ) ).to.deep.equal( [ {
-					name: 'imageStyleAlignLeft',
+				expect( normalizeImageStyles( [ 'imageStyle:alignLeft' ] ) ).to.deep.equal( [ {
+					name: 'alignLeft',
 					title: 'Left aligned image',
 					icon: leftIcon,
 					className: 'image-style-align-left'
 				} ] );
 
-				expect( normalizeImageStyles( [ 'imageStyleAlignCenter' ] ) ).to.deep.equal( [ {
-					name: 'imageStyleAlignCenter',
+				expect( normalizeImageStyles( [ 'imageStyle:alignCenter' ] ) ).to.deep.equal( [ {
+					name: 'alignCenter',
 					title: 'Centered image',
 					icon: centerIcon,
 					className: 'image-style-align-center'
 				} ] );
 
-				expect( normalizeImageStyles( [ 'imageStyleAlignRight' ] ) ).to.deep.equal( [ {
-					name: 'imageStyleAlignRight',
+				expect( normalizeImageStyles( [ 'imageStyle:alignRight' ] ) ).to.deep.equal( [ {
+					name: 'alignRight',
 					title: 'Right aligned image',
 					icon: rightIcon,
 					className: 'image-style-align-right'

+ 1 - 1
packages/ckeditor5-image/tests/manual/caption.js

@@ -28,7 +28,7 @@ ClassicEditor
 		],
 		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ],
 		image: {
-			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		}
 	} )
 	.then( editor => {

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

@@ -31,7 +31,7 @@ ClassicEditor
 		],
 		toolbar: [ 'heading', '|', 'undo', 'redo' ],
 		image: {
-			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
+			toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
 		}
 	} )
 	.then( editor => {
@@ -56,8 +56,8 @@ ClassicEditor
 		],
 		toolbar: [ 'heading', '|', 'undo', 'redo' ],
 		image: {
-			styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ],
-			toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ]
+			styles: [ 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight' ],
+			toolbar: [ 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight' ]
 		}
 	} )
 	.then( editor => {

+ 1 - 1
packages/ckeditor5-image/tests/manual/imageupload.js

@@ -32,7 +32,7 @@ ClassicEditor
 		],
 		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ],
 		image: {
-			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		}
 	} )
 	.then( editor => {