瀏覽代碼

Revert "Using buildViewConverter for converting image styles."

This reverts commit 9ba4a3d780bc70bfa29f1917976288927ac5684c.
Szymon Kupś 9 年之前
父節點
當前提交
d010e06ea0

+ 53 - 0
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -7,6 +7,8 @@
  * @module image/imagestyle/converters
  */
 
+import { isImage } from '../utils';
+
 /**
  * Returns converter for `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
  *
@@ -35,6 +37,57 @@ export function modelToViewSetStyle( styles ) {
 	};
 }
 
+/**
+ * Returns view to model converter converting image CSS classes to proper value in the model.
+ *
+ * @param {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat>} styles Styles for which converter is created.
+ * @returns {Function} View to model converter.
+ */
+export function viewToModelImageStyles( styles ) {
+	// Convert only styles without `null` value.
+	const filteredStyles = styles.filter( style => style.value !== null );
+
+	return ( evt, data, consumable, conversionApi ) => {
+		for ( let style of filteredStyles ) {
+			viewToModelImageStyle( style, data, consumable, conversionApi );
+		}
+	};
+}
+
+// Converter from view to model converting single style.
+// For more information see {@link module:engine/conversion/viewconversiondispatcher~ViewConversionDispatcher};
+//
+// @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 figure is converted to image.
+	if ( !isImage( modelImageElement ) ) {
+		return;
+	}
+
+	// Check if image element can be placed in current context wit additional attribute.
+	const attributes = [ ...modelImageElement.getAttributeKeys(), 'imageStyle' ];
+
+	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.
 //
 // @param {String} value

+ 3 - 14
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -10,10 +10,9 @@
 import Plugin from 'ckeditor5-core/src/plugin';
 import ImageStyleCommand from './imagestylecommand';
 import ImageEngine from '../imageengine';
-import { 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';
-import buildViewConverter from 'ckeditor5-engine/src/conversion/buildviewconverter';
 
 /**
  * The image style engine plugin. Sets default configuration, creates converters and registers
@@ -65,18 +64,8 @@ export default class ImageStyleEngine extends Plugin {
 		editing.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
 		data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
 
-		const viewConverter = buildViewConverter().for( data.viewToModel );
-
-		for ( let style of styles ) {
-			if ( style.value === null ) {
-				continue;
-			}
-
-			viewConverter
-				.from( { name: 'figure', class: [ 'image', style.className ] } )
-				.consuming( { class: style.className } )
-				.toAttribute( 'imageStyle', style.value );
-		}
+		// Converter for figure element from view to model.
+		data.viewToModel.on( 'element:figure', viewToModelImageStyles( styles ), { priority: 'low' } );
 
 		// Register separate command for each style.
 		for ( let style of styles ) {

+ 1 - 13
packages/ckeditor5-image/tests/imagestyle/imagestyleengine.js

@@ -55,24 +55,12 @@ describe( 'ImageStyleEngine', () => {
 		expect( editor.commands.get( 'dummyStyle' ) ).to.be.instanceOf( ImageStyleCommand );
 	} );
 
-	it( 'should convert from view to model #1', () => {
-		editor.setData( '<figure class="image"><img src="foo.png" /></figure>' );
-
-		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image src="foo.png"></image>' );
-	} );
-
-	it( 'should convert from view to model #2', () => {
+	it( 'should convert from view to model', () => {
 		editor.setData( '<figure class="image side-class"><img src="foo.png" /></figure>' );
 
 		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image imageStyle="side" src="foo.png"></image>' );
 	} );
 
-	it( 'should convert from view to model #3', () => {
-		editor.setData( '<figure class="image dummy-class"><img src="foo.png" /></figure>' );
-
-		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image imageStyle="dummy" src="foo.png"></image>' );
-	} );
-
 	it( 'should not convert from view to model if class is not defined', () => {
 		editor.setData( '<figure class="image foo-bar"><img src="foo.png" /></figure>' );