8
0
Szymon Kupś 9 лет назад
Родитель
Сommit
6ff67f9622

+ 30 - 47
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -9,70 +9,53 @@
 
 import { isImage, getStyleByValue } from './utils.js';
 
-export function addStyle( styles ) {
-	return ( event, data, consumable, conversionApi ) => {
-		// Check if we can consume, and we are adding in image.
-		if ( !consumable.test( data.item, 'addAttribute:imageStyle' ) || !isImage( data.item ) ) {
-			return;
-		}
-
-		// Check if there is class name associated with given value.
-		const newStyle = getStyleByValue( data.attributeNewValue, styles );
-
-		// Check if new style is allowed in configuration.
-		if ( !newStyle ) {
-			return;
-		}
-
-		consumable.consume( data.item, 'addAttribute:imageStyle' );
-		conversionApi.mapper.toViewElement( data.item ).addClass( newStyle.className );
-	};
-}
+/**
+ * Returns converter for `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
+ *
+ * @param {Object} styles Object containing available styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat}
+ * for more details.
+ * @return {Function} Model to view attribute converter.
+ */
+export function modelToViewSetStyle( styles ) {
+	return ( evt, data, consumable, conversionApi ) => {
+		const eventType = evt.name.split( ':' )[ 0 ];
+		const consumableType = eventType + ':imageStyle';
 
-export function changeStyle( styles ) {
-	return ( event, data, consumable, conversionApi ) => {
-		if ( !consumable.test( data.item, 'changeAttribute:imageStyle' ) || !isImage( data.item ) ) {
+		if ( !consumable.test( data.item, consumableType ) ) {
 			return;
 		}
 
 		// Check if there is class name associated with given value.
 		const newStyle = getStyleByValue( data.attributeNewValue, styles );
 		const oldStyle = getStyleByValue( data.attributeOldValue, styles );
-
-		// Check if new style is allowed in configuration.
-		if ( !newStyle || !oldStyle ) {
-			return;
-		}
-
-		consumable.consume( data.item, 'changeAttribute:imageStyle' );
 		const viewElement = conversionApi.mapper.toViewElement( data.item );
-		viewElement.removeClass( data.attributeOldValue );
-		viewElement.addClass( newStyle.className );
-	};
-}
 
-export function removeStyle( styles ) {
-	return ( event, data, consumable, conversionApi ) => {
-		if ( !consumable.test( data.item, 'removeAttribute:imageStyle' ) || !isImage( data.item ) ) {
-			return;
+		if ( eventType == 'addAttribute' || eventType == 'changeAttribute' ) {
+			if ( !newStyle ) {
+				return;
+			}
+
+			viewElement.addClass( newStyle.className );
 		}
 
-		// Check if there is class name associated with given value.
-		const newStyle = getStyleByValue( data.attributeNewValue, styles );
-		const oldStyle = getStyleByValue( data.attributeOldValue, styles );
+		if ( eventType == 'changeAttribute' || eventType == 'removeAttribute' ) {
+			if ( !oldStyle ) {
+				return;
+			}
 
-		// Check if styles are allowed in configuration.
-		if ( !newStyle || !oldStyle ) {
-			return;
+			viewElement.removeClass( data.attributeOldValue );
 		}
 
-		consumable.consume( data.item, 'removeAttribute:imageStyle' );
-
-		const viewElement = conversionApi.mapper.toViewElement( data.item );
-		viewElement.removeClass( oldStyle.className );
+		consumable.consume( data.item, consumableType );
 	};
 }
 
+/**
+ * Returns view to model converter converting image style CSS class to proper value in the model.
+ *
+ * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style Style for which converter is created.
+ * @return {Function} View to model converter.
+ */
 export function viewToModelImageStyle( style ) {
 	return ( evt, data, consumable, conversionApi ) => {
 		const viewFigureElement = data.input;

+ 10 - 10
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -10,7 +10,7 @@
 import Plugin from '../../core/plugin.js';
 import ImageStyleCommand from './imagestylecommand.js';
 import ImageEngine from '../imageengine.js';
-import { addStyle, changeStyle, removeStyle, viewToModelImageStyle } from './converters.js';
+import { viewToModelImageStyle, modelToViewSetStyle } from './converters.js';
 
 /**
  * The image style engine plugin. Sets default configuration, creates converters and registers
@@ -52,18 +52,18 @@ export default class ImageStyleEngine extends Plugin {
 		// We could call it 'style' but https://github.com/ckeditor/ckeditor5-engine/issues/559.
 		schema.allow( { name: 'image', attributes: 'imageStyle', inside: '$root' } );
 
-		// Converters for models element imageStyle attribute.
-		editing.modelToView.on( 'addAttribute:imageStyle', addStyle( styles ) );
-		data.modelToView.on( 'addAttribute:imageStyle', addStyle( styles ) );
-		editing.modelToView.on( 'changeAttribute:imageStyle', changeStyle( styles ) );
-		data.modelToView.on( 'changeAttribute:imageStyle', changeStyle( styles ) );
-		editing.modelToView.on( 'removeAttribute:imageStyle', removeStyle( styles ) );
-		data.modelToView.on( 'removeAttribute:imageStyle', removeStyle( styles ) );
+		// Converters for imageStyle attribute from model to view.
+		editing.modelToView.on( 'addAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
+		data.modelToView.on( 'addAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
+		editing.modelToView.on( 'changeAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
+		data.modelToView.on( 'changeAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
+		editing.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
+		data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
 
+		// Converter for figure element from view to model.
 		for ( let key in styles ) {
 			const style = styles[ key ];
 
-			// 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' } );
@@ -79,7 +79,7 @@ export default class ImageStyleEngine extends Plugin {
  * Image style format descriptor.
  *
  * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
- * @property {String} value Value used to store this style in model.
+ * @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.
  * @property {String} icon Icon name to use when creating style's toolbar button.
  * @property {String} title Style's title.