8
0
Просмотр исходного кода

Added styles to ImageStyleEngine.

Szymon Kupś 9 лет назад
Родитель
Сommit
8930d84516

+ 4 - 2
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -12,7 +12,7 @@ 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.consume( data.item, 'addAttribute:imageStyle' ) || !isImage( data.item ) ) {
+		if ( !consumable.test( data.item, 'addAttribute:imageStyle' ) || !isImage( data.item ) ) {
 			return;
 		}
 
@@ -24,13 +24,14 @@ export function addStyle( styles ) {
 			return;
 		}
 
+		consumable.consume( data.item, 'addAttribute:imageStyle' );
 		conversionApi.mapper.toViewElement( data.item ).addClass( newStyle.className );
 	};
 }
 
 export function changeStyle( styles ) {
 	return ( event, data, consumable, conversionApi ) => {
-		if ( !consumable.consume( data.item, 'changeAttribute:imageStyle' ) || !isImage( data.item ) ) {
+		if ( !consumable.test( data.item, 'changeAttribute:imageStyle' ) || !isImage( data.item ) ) {
 			return;
 		}
 
@@ -43,6 +44,7 @@ export function changeStyle( styles ) {
 			return;
 		}
 
+		consumable.consume( data.item, 'changeAttribute:imageStyle' );
 		const viewElement = conversionApi.mapper.toViewElement( data.item );
 		viewElement.removeClass( data.attributeOldValue );
 		viewElement.addClass( newStyle.className );

+ 1 - 1
packages/ckeditor5-image/src/imagestyle/imagestyle.js

@@ -26,7 +26,7 @@ export default class ImageStyle extends Plugin {
 		const editor = this.editor;
 
 		// Get configuration.
-		const styles = editor.config.get( 'image.styles.options' );
+		const styles = editor.config.get( 'image.styles' );
 
 		for ( let name in styles ) {
 			this._createButton( name, styles[ name ] );

+ 6 - 7
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -38,17 +38,15 @@ export default class ImageStyleEngine extends Plugin {
 
 		// Define default configuration.
 		editor.config.define( 'image.styles', {
-			options: {
-				// This option is equal to situation when no style is applied at all.
-				imageStyleFull: { title: 'Full size image', icon: 'object-center', value: null },
+			// This option is equal to situation when no style is applied at all.
+			imageStyleFull: { title: 'Full size image', icon: 'object-center', value: null },
 
-				// This represents side image.
-				imageStyleSide: { title: 'Side image', icon: 'object-right', value: 'side', className: 'image-style-side' }
-			}
+			// This represents side image.
+			imageStyleSide: { title: 'Side image', icon: 'object-right', value: 'side', className: 'image-style-side' }
 		} );
 
 		// Get configuration.
-		const styles = editor.config.get( 'image.styles.options' );
+		const styles = editor.config.get( 'image.styles' );
 
 		// Allow imageStyle attribute in image.
 		// We could call it 'style' but https://github.com/ckeditor/ckeditor5-engine/issues/559.
@@ -60,6 +58,7 @@ export default class ImageStyleEngine extends Plugin {
 		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 ) );
 
 		for ( let key in styles ) {
 			const style = styles[ key ];

+ 139 - 8
packages/ckeditor5-image/tests/imagestyle/imagestyleengine.js

@@ -7,18 +7,25 @@ import VirtualTestEditor from 'tests/core/_utils/virtualtesteditor.js';
 import ImageStyleEngine from 'ckeditor5/image/imagestyle/imagestyleengine.js';
 import ImageEngine from 'ckeditor5/image/imageengine.js';
 import ImageStyleCommand from 'ckeditor5/image/imagestyle/imagestylecommand.js';
-import { getData } from 'ckeditor5/engine/dev-utils/model.js';
+import { getData as getModelData, setData as setModelData } from 'ckeditor5/engine/dev-utils/model.js';
+import { getData as getViewData } from 'ckeditor5/engine/dev-utils/view.js';
 
 describe( 'ImageStyleEngine', () => {
-	let editor, document;
+	let editor, document, viewDocument;
 
 	beforeEach( () => {
 		return VirtualTestEditor.create( {
 			plugins: [ ImageStyleEngine ],
+			image: {
+				styles: {
+					imageStyleDummy: { title: 'Dummy style', icon: 'dummy-icon', value: 'dummy', className: 'image-style-dummy' }
+				}
+			}
 		} )
 			.then( newEditor => {
 				editor = newEditor;
 				document = editor.document;
+				viewDocument = editor.editing.view;
 			} );
 	} );
 
@@ -43,30 +50,154 @@ describe( 'ImageStyleEngine', () => {
 		expect( command ).to.be.instanceOf( ImageStyleCommand );
 	} );
 
-	// TODO: check default configuration.
-
 	it( 'should convert from view to model', () => {
 		editor.setData( '<figure class="image image-style-side"><img src="foo.png" /></figure>' );
 
-		expect( getData( document, { withoutSelection: true } ) ).to.equal( '<image imageStyle="side" src="foo.png"></image>' );
+		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image imageStyle="side" 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>' );
 
-		expect( getData( document, { withoutSelection: true } ) ).to.equal( '<image src="foo.png"></image>' );
+		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image src="foo.png"></image>' );
 	} );
 
 	it( 'should not convert from view to model when not in image figure', () => {
 		editor.setData( '<figure class="image-style-side"></figure>'  );
 
-		expect( getData( document, { withoutSelection: true } ) ).to.equal( '' );
+		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '' );
 	} );
 
 	it( 'should not convert from view to model if schema prevents it', () => {
 		document.schema.disallow( { name: 'image', attributes: 'imageStyle' } );
 		editor.setData( '<figure class="image image-style-side"><img src="foo.png" /></figure>' );
 
-		expect( getData( document, { withoutSelection: true } ) ).to.equal( '<image src="foo.png"></image>' );
+		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image src="foo.png"></image>' );
+	} );
+
+	it( 'should convert model to view: adding attribute', () => {
+		setModelData( document, '<image src="foo.png"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', 'side' );
+		} );
+
+		expect( editor.getData() ).to.equal( '<figure class="image image-style-side"><img src="foo.png"></figure>' );
+	} );
+
+	it( 'should convert model to view: removing attribute', () => {
+		setModelData( document, '<image src="foo.png" imageStyle="side"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', null );
+		} );
+
+		expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
+	} );
+
+	it( 'should convert model to view: change attribute', () => {
+		setModelData( document, '<image src="foo.png" imageStyle="dummy"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', 'side' );
+		} );
+
+		expect( editor.getData() ).to.equal( '<figure class="image image-style-side"><img src="foo.png"></figure>' );
+	} );
+
+	it( 'should not convert from model to view if already consumed: adding attribute', () => {
+		editor.editing.modelToView.on( 'addAttribute:imageStyle', ( evt, data, consumable ) => {
+			consumable.consume( data.item, 'addAttribute:imageStyle' );
+		}, { priority: 'high' } );
+
+		setModelData( document, '<image src="foo.png"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', 'side' );
+		} );
+
+		expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
+			'<figure class="image ck-widget" contenteditable="false"><img src="foo.png"></img></figure>'
+		);
+	} );
+
+	it( 'should not convert from model to view if already consumed: removing attribute', () => {
+		editor.editing.modelToView.on( 'removeAttribute:imageStyle', ( evt, data, consumable ) => {
+			consumable.consume( data.item, 'removeAttribute:imageStyle' );
+		}, { priority: 'high' } );
+
+		setModelData( document, '<image src="foo.png" imageStyle="side"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', null );
+		} );
+
+		expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
+			'<figure class="image ck-widget image-style-side" contenteditable="false"><img src="foo.png"></img></figure>'
+		);
+	} );
+
+	it( 'should not convert from model to view if already consumed: change attribute', () => {
+		editor.editing.modelToView.on( 'changeAttribute:imageStyle', ( evt, data, consumable ) => {
+			consumable.consume( data.item, 'changeAttribute:imageStyle' );
+		}, { priority: 'high' } );
+
+		setModelData( document, '<image src="foo.png" imageStyle="dummy"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', 'side' );
+		} );
+
+		expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
+			'<figure class="image ck-widget image-style-dummy" contenteditable="false"><img src="foo.png"></img></figure>'
+		);
+	} );
+
+	it( 'should not convert from model to view if style is not present: adding attribute', () => {
+		setModelData( document, '<image src="foo.png"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', 'foo' );
+		} );
+
+		expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
+	} );
+
+	it( 'should not convert from model to view if style is not present: change attribute', () => {
+		setModelData( document, '<image src="foo.png" imageStyle="dummy"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', 'foo' );
+		} );
+
+		expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
+	} );
+
+	it( 'should not convert from model to view if style is not present: remove attribute', () => {
+		setModelData( document, '<image src="foo.png" imageStyle="foo"></image>' );
+		const image = document.getRoot().getChild( 0 );
+		const batch = document.batch();
+
+		document.enqueueChanges( () => {
+			batch.setAttribute( image, 'imageStyle', null );
+		} );
+
+		expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
 	} );
 } );