|
|
@@ -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,30 +41,19 @@ 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 );
|
|
|
@@ -73,32 +61,20 @@ export default class ImageStyleCommand extends Command {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @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();
|