Kaynağa Gözat

Using buildViewConverter for converting image styles.

Szymon Kupś 9 yıl önce
ebeveyn
işleme
83837774e8

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

@@ -7,8 +7,6 @@
  * @module image/imagestyle/converters
  */
 
-import { isImage } from '../utils';
-
 /**
  * Returns converter for `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
  *
@@ -37,57 +35,6 @@ 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

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

@@ -10,9 +10,10 @@
 import Plugin from 'ckeditor5-core/src/plugin';
 import ImageStyleCommand from './imagestylecommand';
 import ImageEngine from '../imageengine';
-import { viewToModelImageStyles, modelToViewSetStyle } from './converters';
+import { 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
@@ -64,8 +65,18 @@ export default class ImageStyleEngine extends Plugin {
 		editing.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
 		data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
 
-		// Converter for figure element from view to model.
-		data.viewToModel.on( 'element:figure', viewToModelImageStyles( styles ), { priority: 'low' } );
+		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 );
+		}
 
 		// Register separate command for each style.
 		for ( let style of styles ) {

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

@@ -55,12 +55,24 @@ describe( 'ImageStyleEngine', () => {
 		expect( editor.commands.get( 'dummyStyle' ) ).to.be.instanceOf( ImageStyleCommand );
 	} );
 
-	it( 'should convert from view to model', () => {
+	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', () => {
 		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>' );