Other: Aligned the implementation to the new Command API (see https://github.com/ckeditor/ckeditor5-core/issues/88).

BREAKING CHANGES: The command API has been changed.

Author: szymonkups

src/imagestyle/imagestylecommand.js

@@ -7,13 +7,13 @@
  * @module image/imagestyle/imagestylecommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command/command';
+import Command from '@ckeditor/ckeditor5-core/src/command';
 import { isImage } from '../image/utils';
 
 /**
  * The image style command. It is used to apply different image styles.
  *
- * @extends module:core/command/command~Command
+ * @extends module:core/command~Command
  */
 export default class ImageStyleCommand extends Command {
 	/**
@@ -26,14 +26,13 @@ export default class ImageStyleCommand extends Command {
 		super( editor );
 
 		/**
-		 * The current command value - `true` if style handled by the command is applied on currently selected image,
+		 * The value of the command - `true` if style handled by the command is applied on currently selected image,
 		 * `false` otherwise.
 		 *
 		 * @readonly
 		 * @observable
 		 * @member {Boolean} #value
 		 */
-		this.set( 'value', false );
 
 		/**
 		 * Style handled by this command.
@@ -42,63 +41,40 @@ export default class ImageStyleCommand extends Command {
 		 * @member {module:image/imagestyle/imagestyleengine~ImageStyleFormat} #style
 		 */
 		this.style = style;
-
-		// Update current value and refresh state each time something change in model document.
-		this.listenTo( editor.document, 'changesDone', () => {
-			this._updateValue();
-			this.refreshState();
-		} );
 	}
 
 	/**
-	 * Updates command's value.
-	 *
-	 * @private
+	 * @inheritDoc
 	 */
-	_updateValue() {
-		const doc = this.editor.document;
-		const element = doc.selection.getSelectedElement();
+	refresh() {
+		const element = this.editor.document.selection.getSelectedElement();
+
+		this.isEnabled = isImage( element );
 
 		if ( !element ) {
 			this.value = false;
-
-			return;
-		}
-
-		if ( this.style.value === null ) {
+		} else if ( this.style.value === null ) {
 			this.value = !element.hasAttribute( 'imageStyle' );
 		} else {
 			this.value = ( element.getAttribute( 'imageStyle' ) == this.style.value );
 		}
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	_checkEnabled() {
-		const element = this.editor.document.selection.getSelectedElement();
-
-		return isImage( element );
-	}
-
 	/**
 	 * Executes command.
 	 *
-	 * @protected
+	 * @fires execute
 	 * @param {Object} options
 	 * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps. New batch will be
 	 * created if this option is not set.
 	 */
-	_doExecute( options = {} ) {
-		// Stop if style is already applied.
+	execute( options = {} ) {
 		if ( this.value ) {
 			return;
 		}
 
-		const editor = this.editor;
-		const doc = editor.document;
-		const selection = doc.selection;
-		const imageElement = selection.getSelectedElement();
+		const doc = this.editor.document;
+		const imageElement = doc.selection.getSelectedElement();
 
 		doc.enqueueChanges( () => {
 			const batch = options.batch || doc.batch();

src/imagestyle/imagestyleengine.js

@@ -69,7 +69,7 @@ export default class ImageStyleEngine extends Plugin {
 
 		// Register separate command for each style.
 		for ( const style of styles ) {
-			editor.commands.set( style.name, new ImageStyleCommand( editor, style ) );
+			editor.commands.add( style.name, new ImageStyleCommand( editor, style ) );
 		}
 	}
 }
@@ -89,7 +89,7 @@ export default class ImageStyleEngine extends Plugin {
  *
  * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
  * @property {String} name Name of the style. It will be used to:
- * * register {@link module:core/command/command~Command command} which will apply this style,
+ * * register {@link module:core/command~Command command} which will apply this style,
  * * store style's button in editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
  * @property {String} value Value used to store this style in model attribute.
  * When value is `null` style will be used as default one. Default style does not apply any CSS class to the view element.

src/imagetextalternative/imagetextalternativecommand.js

@@ -7,46 +7,30 @@
  * @module image/imagelaternatetext/imagetextalternativecommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command/command';
+import Command from '@ckeditor/ckeditor5-core/src/command';
 import { isImage } from '../image/utils';
 
 /**
  * The image text alternative command. It is used to change `alt` attribute on `image` elements.
  *
- * @extends module:core/command/command~Command
+ * @extends module:core/command~Command
  */
 export default class ImageTextAlternativeCommand extends Command {
 	/**
-	 * @inheritDoc
+	 * The command value - `false` if there is no `alt` attribute, otherwise the value of the `alt` attribute.
+	 *
+	 * @readonly
+	 * @observable
+	 * @member {String|Boolean} #value
 	 */
-	constructor( editor ) {
-		super( editor );
-
-		/**
-		 * The current command value - `false` if there is no `alt` attribute, otherwise contains string with `alt`
-		 * attribute value.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {String|Boolean} #value
-		 */
-		this.set( 'value', false );
-
-		// Update current value and refresh state each time something change in model document.
-		this.listenTo( editor.document, 'changesDone', () => {
-			this._updateValue();
-			this.refreshState();
-		} );
-	}
 
 	/**
-	 * Updates command's value.
-	 *
-	 * @private
+	 * @inheritDoc
 	 */
-	_updateValue() {
-		const doc = this.editor.document;
-		const element = doc.selection.getSelectedElement();
+	refresh() {
+		const element = this.editor.document.selection.getSelectedElement();
+
+		this.isEnabled = isImage( element );
 
 		if ( isImage( element ) && element.hasAttribute( 'alt' ) ) {
 			this.value = element.getAttribute( 'alt' );
@@ -56,26 +40,16 @@ export default class ImageTextAlternativeCommand extends Command {
 	}
 
 	/**
-	 * @inheritDoc
-	 */
-	_checkEnabled() {
-		const element = this.editor.document.selection.getSelectedElement();
-
-		return isImage( element );
-	}
-
-	/**
-	 * Executes command.
+	 * Executes the command.
 	 *
-	 * @protected
+	 * @fires execute
 	 * @param {Object} options
 	 * @param {String} options.newValue New value of `alt` attribute to set.
 	 * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps. New batch will be
 	 * created if this option is not set.
 	 */
-	_doExecute( options ) {
-		const editor = this.editor;
-		const doc = editor.document;
+	execute( options ) {
+		const doc = this.editor.document;
 		const imageElement = doc.selection.getSelectedElement();
 
 		doc.enqueueChanges( () => {

src/imagetextalternative/imagetextalternativeengine.js

@@ -21,6 +21,6 @@ export default class ImageTextAlternativeEngine extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		this.editor.commands.set( 'imageTextAlternative', new ImageTextAlternativeCommand( this.editor ) );
+		this.editor.commands.add( 'imageTextAlternative', new ImageTextAlternativeCommand( this.editor ) );
 	}
 }

tests/imagestyle/imagestylecommand.js

@@ -60,15 +60,15 @@ describe( 'ImageStyleCommand', () => {
 	it( 'should set proper value when executed', () => {
 		setData( document, '[<image></image>]' );
 
-		otherStyleCommand._doExecute();
+		otherStyleCommand.execute();
 
 		expect( getData( document ) ).to.equal( '[<image imageStyle="other"></image>]' );
 	} );
 
 	it( 'should do nothing when attribute already present', () => {
 		setData( document, '[<image imageStyle="other"></image>]' );
 
-		otherStyleCommand._doExecute();
+		otherStyleCommand.execute();
 
 		expect( getData( document ) ).to.equal( '[<image imageStyle="other"></image>]' );
 	} );
@@ -79,7 +79,7 @@ describe( 'ImageStyleCommand', () => {
 
 		setData( document, '[<image></image>]' );
 
-		otherStyleCommand._doExecute( { batch } );
+		otherStyleCommand.execute( { batch } );
 
 		expect( getData( document ) ).to.equal( '[<image imageStyle="other"></image>]' );
 		sinon.assert.calledOnce( spy );

tests/imagestyle/imagestyleengine.js

@@ -46,10 +46,6 @@ describe( 'ImageStyleEngine', () => {
 	} );
 
 	it( 'should register separate command for each style', () => {
-		expect( editor.commands.has( 'fullStyle' ) ).to.be.true;
-		expect( editor.commands.has( 'sideStyle' ) ).to.be.true;
-		expect( editor.commands.has( 'dummyStyle' ) ).to.be.true;
-
 		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 );

tests/imagetextalternative/imagetextalternativecommand.js

@@ -58,15 +58,15 @@ describe( 'ImageTextAlternativeCommand', () => {
 	it( 'should set proper alt if executed on image without alt attribute', () => {
 		setData( document, '[<image src="image.png"></image>]' );
 
-		command._doExecute( { newValue: 'fiz buz' } );
+		command.execute( { newValue: 'fiz buz' } );
 
 		expect( getData( document ) ).to.equal( '[<image alt="fiz buz" src="image.png"></image>]' );
 	} );
 
 	it( 'should change alt if executed on image with alt attribute', () => {
 		setData( document, '[<image alt="foo bar" src="image.png"></image>]' );
 
-		command._doExecute( { newValue: 'fiz buz' } );
+		command.execute( { newValue: 'fiz buz' } );
 
 		expect( getData( document ) ).to.equal( '[<image alt="fiz buz" src="image.png"></image>]' );
 	} );
@@ -77,7 +77,7 @@ describe( 'ImageTextAlternativeCommand', () => {
 
 		setData( document, '[<image src="image.png"></image>]' );
 
-		command._doExecute( { newValue: 'foo bar', batch } );
+		command.execute( { newValue: 'foo bar', batch } );
 
 		expect( getData( document ) ).to.equal( '[<image alt="foo bar" src="image.png"></image>]' );
 		sinon.assert.calledOnce( spy );