@ckeditor/ckeditor5-image 27.1.0 → 29.2.0

package/src/imagestyle/converters.js

@@ -12,8 +12,8 @@ import { first } from 'ckeditor5/src/utils';
 /**
  * Returns a converter for the `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
  *
- * @param {Object} styles An object containing available styles. See {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat}
- * for more details.
+ * @param {Array.<module:image/imagestyle~ImageStyleOptionDefinition>} styles
+ * An array containing available image style options.
  * @returns {Function} A model-to-view attribute converter.
  */
 export function modelToViewStyleAttribute( styles ) {
@@ -23,8 +23,8 @@ export function modelToViewStyleAttribute( styles ) {
 		}
 
 		// Check if there is class name associated with given value.
-		const newStyle = getStyleByName( data.attributeNewValue, styles );
-		const oldStyle = getStyleByName( data.attributeOldValue, styles );
+		const newStyle = getStyleDefinitionByName( data.attributeNewValue, styles );
+		const oldStyle = getStyleDefinitionByName( data.attributeOldValue, styles );
 
 		const viewElement = conversionApi.mapper.toViewElement( data.item );
 		const viewWriter = conversionApi.writer;
@@ -42,31 +42,39 @@ export function modelToViewStyleAttribute( styles ) {
 /**
  * Returns a view-to-model converter converting image CSS classes to a proper value in the model.
  *
- * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles The styles for which the converter is created.
+ * @param {Array.<module:image/imagestyle~ImageStyleOptionDefinition>} styles
+ * Image style options for which the converter is created.
  * @returns {Function} A view-to-model converter.
  */
 export function viewToModelStyleAttribute( styles ) {
 	// Convert only non–default styles.
-	const filteredStyles = styles.filter( style => !style.isDefault );
+	const nonDefaultStyles = {
+		imageInline: styles.filter( style => !style.isDefault && style.modelElements.includes( 'imageInline' ) ),
+		imageBlock: styles.filter( style => !style.isDefault && style.modelElements.includes( 'imageBlock' ) )
+	};
 
 	return ( evt, data, conversionApi ) => {
 		if ( !data.modelRange ) {
 			return;
 		}
 
-		const viewFigureElement = data.viewItem;
+		const viewElement = data.viewItem;
 		const modelImageElement = first( data.modelRange.getItems() );
 
-		// Check if `modelImageElement` exists (see: https://github.com/ckeditor/ckeditor5/issues/8270)
-		// and `imageStyle` attribute is allowed for that element, otherwise stop conversion early.
-		if ( modelImageElement && !conversionApi.schema.checkAttribute( modelImageElement, 'imageStyle' ) ) {
+		// Check if `modelImageElement` exists (see: #8270, and #9563)...
+		if ( !modelImageElement ) {
+			return;
+		}
+
+		// ...and the `imageStyle` attribute is allowed for that element, otherwise stop conversion early.
+		if ( !conversionApi.schema.checkAttribute( modelImageElement, 'imageStyle' ) ) {
 			return;
 		}
 
-		// Convert style one by one.
-		for ( const style of filteredStyles ) {
-			// Try to consume class corresponding with style.
-			if ( conversionApi.consumable.consume( viewFigureElement, { classes: style.className } ) ) {
+		// Convert styles one by one.
+		for ( const style of nonDefaultStyles[ modelImageElement.name ] ) {
+			// Try to consume class corresponding with the style.
+			if ( conversionApi.consumable.consume( viewElement, { classes: style.className } ) ) {
 				// And convert this style to model attribute.
 				conversionApi.writer.setAttribute( 'imageStyle', style.name, modelImageElement );
 			}
@@ -77,9 +85,9 @@ export function viewToModelStyleAttribute( styles ) {
 // Returns the style with a given `name` from an array of styles.
 //
 // @param {String} name
-// @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat> } styles
-// @returns {module:image/imagestyle/imagestyleediting~ImageStyleFormat|undefined}
-function getStyleByName( name, styles ) {
+// @param {Array.<module:image/imagestyle~ImageStyleOptionDefinition> } styles
+// @returns {module:image/imagestyle~ImageStyleOptionDefinition|undefined}
+function getStyleDefinitionByName( name, styles ) {
 	for ( const style of styles ) {
 		if ( style.name === name ) {
 			return style;

package/src/imagestyle/imagestylecommand.js

@@ -8,90 +8,130 @@
  */
 
 import { Command } from 'ckeditor5/src/core';
-import { isImage } from '../image/utils';
 
 /**
- * The image style command. It is used to apply different image styles.
+ * The image style command. It is used to apply {@link module:image/imagestyle~ImageStyleConfig#options image style option}
+ * to a selected image.
+ *
+ * **Note**: Executing this command may change the image model element if the desired style requires an image of a different
+ * type. See {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute} to learn more.
  *
  * @extends module:core/command~Command
  */
 export default class ImageStyleCommand extends Command {
 	/**
-	 * Creates an instance of the image style command. Each command instance is handling one style.
+	 * Creates an instance of the image style command. When executed, the command applies one of
+	 * {@link module:image/imagestyle~ImageStyleConfig#options style options} to the currently selected image.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor The editor instance.
-	 * @param {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} styles The styles that this command supports.
+	 * @param {Array.<module:image/imagestyle~ImageStyleOptionDefinition>} styles
+	 * The style options that this command supports.
 	 */
 	constructor( editor, styles ) {
 		super( editor );
 
 		/**
-		 * The name of the default style, if it is present. If there is no default style, it defaults to `false`.
+		 * An object containing names of default style options for the inline and block images.
+		 * If there is no default style option for the given image type in the configuration,
+		 * the name will be `false`.
 		 *
-		 * @readonly
-		 * @type {Boolean|String}
+		 * @private
+		 * @type {Object.<String,module:image/imagestyle~ImageStyleOptionDefinition#name>}
 		 */
-		this.defaultStyle = false;
+		this._defaultStyles = {
+			imageBlock: false,
+			imageInline: false
+		};
 
 		/**
-		 * A style handled by this command.
+		 * The styles handled by this command.
 		 *
-		 * @readonly
-		 * @member {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} #styles
+		 * @private
+		 * @type {module:image/imagestyle~ImageStyleConfig#options}
 		 */
-		this.styles = styles.reduce( ( styles, style ) => {
-			styles[ style.name ] = style;
-
+		this._styles = new Map( styles.map( style => {
 			if ( style.isDefault ) {
-				this.defaultStyle = style.name;
+				for ( const modelElementName of style.modelElements ) {
+					this._defaultStyles[ modelElementName ] = style.name;
+				}
 			}
 
-			return styles;
-		}, {} );
+			return [ style.name, style ];
+		} ) );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	refresh() {
-		const element = this.editor.model.document.selection.getSelectedElement();
+		const editor = this.editor;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
+		const element = imageUtils.getClosestSelectedImageElement( this.editor.model.document.selection );
 
-		this.isEnabled = isImage( element );
+		this.isEnabled = !!element;
 
-		if ( !element ) {
+		if ( !this.isEnabled ) {
 			this.value = false;
 		} else if ( element.hasAttribute( 'imageStyle' ) ) {
-			const attributeValue = element.getAttribute( 'imageStyle' );
-			this.value = this.styles[ attributeValue ] ? attributeValue : false;
+			this.value = element.getAttribute( 'imageStyle' );
 		} else {
-			this.value = this.defaultStyle;
+			this.value = this._defaultStyles[ element.name ];
 		}
 	}
 
 	/**
-	 * Executes the command.
+	 * Executes the command and applies the style to the currently selected image:
 	 *
 	 *		editor.execute( 'imageStyle', { value: 'side' } );
 	 *
+	 * **Note**: Executing this command may change the image model element if the desired style requires an image
+	 * of a different type. Learn more about {@link module:image/imagestyle~ImageStyleOptionDefinition#modelElements model element}
+	 * configuration for the style option.
+	 *
 	 * @param {Object} options
-	 * @param {String} options.value The name of the style (based on the
-	 * {@link module:image/image~ImageConfig#styles `image.styles`} configuration option).
+	 * @param {module:image/imagestyle~ImageStyleOptionDefinition#name} options.value The name of the style (as configured in
+	 * {@link module:image/imagestyle~ImageStyleConfig#options}).
 	 * @fires execute
 	 */
-	execute( options ) {
-		const styleName = options.value;
-
-		const model = this.editor.model;
-		const imageElement = model.document.selection.getSelectedElement();
+	execute( options = {} ) {
+		const editor = this.editor;
+		const model = editor.model;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 		model.change( writer => {
+			const requestedStyle = options.value;
+
+			let imageElement = imageUtils.getClosestSelectedImageElement( model.document.selection );
+
+			// Change the image type if a style requires it.
+			if ( requestedStyle && this.shouldConvertImageType( requestedStyle, imageElement ) ) {
+				this.editor.execute( imageUtils.isBlockImage( imageElement ) ? 'imageTypeInline' : 'imageTypeBlock' );
+
+				// Update the imageElement to the newly created image.
+				imageElement = imageUtils.getClosestSelectedImageElement( model.document.selection );
+			}
+
 			// Default style means that there is no `imageStyle` attribute in the model.
 			// https://github.com/ckeditor/ckeditor5-image/issues/147
-			if ( this.styles[ styleName ].isDefault ) {
+			if ( !requestedStyle || this._styles.get( requestedStyle ).isDefault ) {
 				writer.removeAttribute( 'imageStyle', imageElement );
 			} else {
-				writer.setAttribute( 'imageStyle', styleName, imageElement );
+				writer.setAttribute( 'imageStyle', requestedStyle, imageElement );
 			}
 		} );
 	}
+
+	/**
+	 * Returns `true` if requested style change would trigger the image type change.
+	 *
+	 * @param {module:image/imagestyle~ImageStyleOptionDefinition} requestedStyle The name of the style (as configured in
+	 * {@link module:image/imagestyle~ImageStyleConfig#options}).
+	 * @param {module:engine/model/element~Element} imageElement The image model element.
+	 * @returns {Boolean}
+	 */
+	shouldConvertImageType( requestedStyle, imageElement ) {
+		const supportedTypes = this._styles.get( requestedStyle ).modelElements;
+
+		return !supportedTypes.includes( imageElement.name );
+	}
 }

package/src/imagestyle/imagestyleediting.js

@@ -9,8 +9,9 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import ImageStyleCommand from './imagestylecommand';
+import ImageUtils from '../imageutils';
+import utils from './utils';
 import { viewToModelStyleAttribute, modelToViewStyleAttribute } from './converters';
-import { normalizeImageStyles } from './utils';
 
 /**
  * The image style engine plugin. It sets the default configuration, creates converters and registers
@@ -26,69 +27,129 @@ export default class ImageStyleEditing extends Plugin {
 		return 'ImageStyleEditing';
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageUtils ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */
 	init() {
+		const { normalizeStyles, getDefaultStylesConfiguration } = utils;
+		const editor = this.editor;
+		const isBlockPluginLoaded = editor.plugins.has( 'ImageBlockEditing' );
+		const isInlinePluginLoaded = editor.plugins.has( 'ImageInlineEditing' );
+
+		editor.config.define( 'image.styles', getDefaultStylesConfiguration( isBlockPluginLoaded, isInlinePluginLoaded ) );
+
+		/**
+		 * It contains a list of the normalized and validated style options.
+		 *
+		 * * Each option contains a complete icon markup.
+		 * * The style options not supported by any of the loaded image editing plugins (
+		 * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} or
+		 * {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`}) are filtered out.
+		 *
+		 * @protected
+		 * @readonly
+		 * @type {module:image/imagestyle~ImageStyleConfig}
+		 */
+		this.normalizedStyles = normalizeStyles( {
+			configuredStyles: editor.config.get( 'image.styles' ),
+			isBlockPluginLoaded,
+			isInlinePluginLoaded
+		} );
+
+		this._setupConversion( isBlockPluginLoaded, isInlinePluginLoaded );
+		this._setupPostFixer();
+
+		// Register imageStyle command.
+		editor.commands.add( 'imageStyle', new ImageStyleCommand( editor, this.normalizedStyles ) );
+	}
+
+	/**
+	 * Sets the editor conversion taking the presence of
+	 * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`}
+	 * and {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugins into consideration.
+	 *
+	 * @private
+	 * @param {Boolean} isBlockPluginLoaded
+	 * @param {Boolean} isInlinePluginLoaded
+	 */
+	_setupConversion( isBlockPluginLoaded, isInlinePluginLoaded ) {
 		const editor = this.editor;
 		const schema = editor.model.schema;
-		const data = editor.data;
-		const editing = editor.editing;
 
-		// Define default configuration.
-		editor.config.define( 'image.styles', [ 'full', 'side' ] );
+		const modelToViewConverter = modelToViewStyleAttribute( this.normalizedStyles );
+		const viewToModelConverter = viewToModelStyleAttribute( this.normalizedStyles );
 
-		// Get configuration.
-		const styles = normalizeImageStyles( editor.config.get( 'image.styles' ) );
+		editor.editing.downcastDispatcher.on( 'attribute:imageStyle', modelToViewConverter );
+		editor.data.downcastDispatcher.on( 'attribute:imageStyle', modelToViewConverter );
 
-		// Allow imageStyle attribute in image.
+		// Allow imageStyle attribute in image and imageInline.
 		// We could call it 'style' but https://github.com/ckeditor/ckeditor5-engine/issues/559.
-		schema.extend( 'image', { allowAttributes: 'imageStyle' } );
+		if ( isBlockPluginLoaded ) {
+			schema.extend( 'imageBlock', { allowAttributes: 'imageStyle' } );
 
-		// Converters for imageStyle attribute from model to view.
-		const modelToViewConverter = modelToViewStyleAttribute( styles );
-		editing.downcastDispatcher.on( 'attribute:imageStyle:image', modelToViewConverter );
-		data.downcastDispatcher.on( 'attribute:imageStyle:image', modelToViewConverter );
+			// Converter for figure element from view to model.
+			editor.data.upcastDispatcher.on( 'element:figure', viewToModelConverter, { priority: 'low' } );
+		}
 
-		// Converter for figure element from view to model.
-		data.upcastDispatcher.on( 'element:figure', viewToModelStyleAttribute( styles ), { priority: 'low' } );
+		if ( isInlinePluginLoaded ) {
+			schema.extend( 'imageInline', { allowAttributes: 'imageStyle' } );
 
-		// Register imageStyle command.
-		editor.commands.add( 'imageStyle', new ImageStyleCommand( editor, styles ) );
+			// Converter for the img element from view to model.
+			editor.data.upcastDispatcher.on( 'element:img', viewToModelConverter, { priority: 'low' } );
+		}
 	}
-}
 
-/**
- * The image style format descriptor.
- *
- *		import fullSizeIcon from 'path/to/icon.svg';
- *
- *		const imageStyleFormat = {
- *			name: 'fullSize',
- *			icon: fullSizeIcon,
- *			title: 'Full size image',
- *			className: 'image-full-size'
- *		}
- *
- * @typedef {Object} module:image/imagestyle/imagestyleediting~ImageStyleFormat
- *
- * @property {String} name The unique name of the style. It will be used to:
- *
- * * Store the chosen style in the model by setting the `imageStyle` attribute of the `<image>` element.
- * * As a value of the {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute `imageStyle` command},
- * * when registering a button for each of the styles (`'imageStyle:{name}'`) in the
- * {@link module:ui/componentfactory~ComponentFactory UI components factory} (this functionality is provided by the
- * {@link module:image/imagestyle/imagestyleui~ImageStyleUI} plugin).
- *
- * @property {Boolean} [isDefault] When set, the style will be used as the default one.
- * A default style does not apply any CSS class to the view element.
- *
- * @property {String} icon One of the following to be used when creating the style's button:
- *
- * * An SVG icon source (as an XML string).
- * * One of {@link module:image/imagestyle/utils~defaultIcons} to use a default icon provided by the plugin.
- *
- * @property {String} title The style's title.
- *
- * @property {String} className The CSS class used to represent the style in the view.
- */
+	/**
+	 * Registers a post-fixer that will make sure that the style attribute value is correct for a specific image type (block vs inline).
+	 *
+	 * @private
+	 */
+	_setupPostFixer() {
+		const editor = this.editor;
+		const document = editor.model.document;
+
+		const imageUtils = editor.plugins.get( ImageUtils );
+		const stylesMap = new Map( this.normalizedStyles.map( style => [ style.name, style ] ) );
+
+		// Make sure that style attribute is valid for the image type.
+		document.registerPostFixer( writer => {
+			let changed = false;
+
+			for ( const change of document.differ.getChanges() ) {
+				if ( change.type == 'insert' || change.type == 'attribute' && change.attributeKey == 'imageStyle' ) {
+					let element = change.type == 'insert' ? change.position.nodeAfter : change.range.start.nodeAfter;
+
+					if ( element && element.is( 'element', 'paragraph' ) && element.childCount > 0 ) {
+						element = element.getChild( 0 );
+					}
+
+					if ( !imageUtils.isImage( element ) ) {
+						continue;
+					}
+
+					const imageStyle = element.getAttribute( 'imageStyle' );
+
+					if ( !imageStyle ) {
+						continue;
+					}
+
+					const imageStyleDefinition = stylesMap.get( imageStyle );
+
+					if ( !imageStyleDefinition || !imageStyleDefinition.modelElements.includes( element.name ) ) {
+						writer.removeAttribute( 'imageStyle', element );
+						changed = true;
+					}
+				}
+			}
+
+			return changed;
+		} );
+	}
+}