8
0
Pārlūkot izejas kodu

ImageStyle - converting from view to model in one callback for all styles.

Szymon Kupś 9 gadi atpakaļ
vecāks
revīzija
31b5a0a25e

+ 40 - 23
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -51,38 +51,55 @@ export function modelToViewSetStyle( styles ) {
 }
 
 /**
- * Returns view to model converter converting image style CSS class to proper value in the model.
+ * Returns view to model converter converting image CSS classes to proper value in the model.
  *
- * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style Style for which converter is created.
+ * @param {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat>} styles Styles for which converter is created.
  * @returns {Function} View to model converter.
  */
-export function viewToModelImageStyle( style ) {
-	return ( evt, data, consumable, conversionApi ) => {
-		const viewFigureElement = data.input;
-		const modelImageElement = data.output;
+export function viewToModelImageStyles( styles ) {
+	// Convert only styles without `null` value.
+	const filteredStyles = styles.filter( style => style.value !== null );
 
-		// *** Step 1: Validate conversion.
-		// Check if view element has proper class to consume.
-		if ( !consumable.test( viewFigureElement, { class: style.className } ) ) {
-			return;
+	return ( evt, data, consumable, conversionApi ) => {
+		for ( let style of filteredStyles ) {
+			viewToModelImageStyle( style, data, consumable, conversionApi );
 		}
+	};
+}
 
-		// Check if figure is converted to image.
-		if ( !isImage( modelImageElement ) ) {
-			return;
-		}
+// Converter from view to model converting single style.
+// For more information see {@link module:engine/conversion/viewconversiondispatcher~ViewConversionDispatcher};
+//
+// @private
+// @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style
+// @param {Object} data
+// @param {module:engine/conversion/viewconsumable~ViewConsumable} consumable
+// @param {Object} conversionApi
+function viewToModelImageStyle( style, data, consumable, conversionApi ) {
+	const viewFigureElement = data.input;
+	const modelImageElement = data.output;
+
+	// *** Step 1: Validate conversion.
+	// Check if view element has proper class to consume.
+	if ( !consumable.test( viewFigureElement, { class: style.className } ) ) {
+		return;
+	}
 
-		// Check if image element can be placed in current context wit additional attribute.
-		const attributes = [ ...modelImageElement.getAttributeKeys(), 'imageStyle' ];
+	// Check if figure is converted to image.
+	if ( !isImage( modelImageElement ) ) {
+		return;
+	}
 
-		if ( !conversionApi.schema.check( { name: 'image', inside: data.context, attributes } ) ) {
-			return;
-		}
+	// Check if image element can be placed in current context wit additional attribute.
+	const attributes = [ ...modelImageElement.getAttributeKeys(), 'imageStyle' ];
 
-		// *** Step2: Convert to model.
-		consumable.consume( viewFigureElement, { class: style.className } );
-		modelImageElement.setAttribute( 'imageStyle', style.value );
-	};
+	if ( !conversionApi.schema.check( { name: 'image', inside: data.context, attributes } ) ) {
+		return;
+	}
+
+	// *** Step2: Convert to model.
+	consumable.consume( viewFigureElement, { class: style.className } );
+	modelImageElement.setAttribute( 'imageStyle', style.value );
 }
 
 // Returns style with given `value` from array of styles.

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

@@ -10,7 +10,7 @@
 import Plugin from 'ckeditor5-core/src/plugin';
 import ImageStyleCommand from './imagestylecommand';
 import ImageEngine from '../imageengine';
-import { viewToModelImageStyle, modelToViewSetStyle } from './converters';
+import { viewToModelImageStyles, modelToViewSetStyle } from './converters';
 import fullSizeIcon from 'ckeditor5-core/theme/icons/object-center.svg';
 import sideIcon from 'ckeditor5-core/theme/icons/object-right.svg';
 
@@ -64,14 +64,11 @@ export default class ImageStyleEngine extends Plugin {
 		editing.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
 		data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
 
-		for ( let style of styles ) {
-			// Converter for figure element from view to model.
-			// Create converter only for non-null values.
-			if ( style.value !== null ) {
-				data.viewToModel.on( 'element:figure', viewToModelImageStyle( style ), { priority: 'low' } );
-			}
+		// Converter for figure element from view to model.
+		data.viewToModel.on( 'element:figure', viewToModelImageStyles( styles ), { priority: 'low' } );
 
-			// Register separate command for each style.
+		// Register separate command for each style.
+		for ( let style of styles ) {
 			editor.commands.set( style.name, new ImageStyleCommand( editor, style ) );
 		}
 	}