8
0
فهرست منبع

Removed #value from ImageStyleFormat to simplify configuration. Using #name instead. Defined ImageStyleFormat#isDefault.

Aleksander Nowodzinski 8 سال پیش
والد
کامیت
33bdaf4d7b

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

@@ -120,10 +120,10 @@ export default class ImageStyle extends Plugin {
  *
  *		const imageConfig = {
  *			styles: [
- *				// A completely custom full size style with no class.
- *				{ name: 'fullSize', title: 'Full size', icon: fullSizeIcon, value: null },
+ *				// A completely custom full size style with no class, used as a default.
+ *				{ name: 'fullSize', title: 'Full size', icon: fullSizeIcon, isDefault: true },
  *
- *				{ name: 'side', title: 'To the side', icon: sideIcon, value: 'side', className: 'side-image' }
+ *				{ name: 'side', title: 'To the side', icon: sideIcon, className: 'side-image' }
  *			]
  *		};
  *

+ 8 - 8
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -26,8 +26,8 @@ export function modelToViewStyleAttribute( styles ) {
 		}
 
 		// Check if there is class name associated with given value.
-		const newStyle = getStyleByValue( data.attributeNewValue, styles );
-		const oldStyle = getStyleByValue( data.attributeOldValue, styles );
+		const newStyle = getStyleByName( data.attributeNewValue, styles );
+		const oldStyle = getStyleByName( data.attributeOldValue, styles );
 		const viewElement = conversionApi.mapper.toViewElement( data.item );
 
 		const isRemovalHandled = handleRemoval( eventType, oldStyle, viewElement );
@@ -48,7 +48,7 @@ export function modelToViewStyleAttribute( styles ) {
  */
 export function viewToModelStyleAttribute( styles ) {
 	// Convert only styles without `null` value.
-	const filteredStyles = styles.filter( style => style.value !== null );
+	const filteredStyles = styles.filter( style => !style.isDefault );
 
 	return ( evt, data, consumable, conversionApi ) => {
 		for ( const style of filteredStyles ) {
@@ -88,17 +88,17 @@ function viewToModelImageStyle( style, data, consumable, conversionApi ) {
 
 	// *** Step2: Convert to model.
 	consumable.consume( viewFigureElement, { class: style.className } );
-	modelImageElement.setAttribute( 'imageStyle', style.value );
+	modelImageElement.setAttribute( 'imageStyle', style.name );
 }
 
-// Returns style with given `value` from array of styles.
+// Returns style with given `name` from array of styles.
 //
-// @param {String} value
+// @param {String} name
 // @param {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat> } styles
 // @return {module:image/imagestyle/imagestyleengine~ImageStyleFormat|undefined}
-function getStyleByValue( value, styles ) {
+function getStyleByName( name, styles ) {
 	for ( const style of styles ) {
-		if ( style.value === value ) {
+		if ( style.name === name ) {
 			return style;
 		}
 	}

+ 3 - 3
packages/ckeditor5-image/src/imagestyle/imagestylecommand.js

@@ -53,10 +53,10 @@ export default class ImageStyleCommand extends Command {
 
 		if ( !element ) {
 			this.value = false;
-		} else if ( this.style.value === null ) {
+		} else if ( this.style.isDefault ) {
 			this.value = !element.hasAttribute( 'imageStyle' );
 		} else {
-			this.value = ( element.getAttribute( 'imageStyle' ) == this.style.value );
+			this.value = ( element.getAttribute( 'imageStyle' ) == this.style.name );
 		}
 	}
 
@@ -79,7 +79,7 @@ export default class ImageStyleCommand extends Command {
 		doc.enqueueChanges( () => {
 			const batch = options.batch || doc.batch();
 
-			batch.setAttribute( imageElement, 'imageStyle', this.style.value );
+			batch.setAttribute( imageElement, 'imageStyle', this.style.name );
 		} );
 	}
 }

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

@@ -164,7 +164,7 @@ ImageStyleEngine.defaultStyles = {
 		name: 'imageStyleFull',
 		title: 'Full size image',
 		icon: fullWidthIcon,
-		value: null
+		isDefault: true
 	},
 
 	// This represents side image.
@@ -172,7 +172,6 @@ ImageStyleEngine.defaultStyles = {
 		name: 'imageStyleSide',
 		title: 'Side image',
 		icon: rightIcon,
-		value: 'side',
 		className: 'image-style-side'
 	},
 
@@ -181,7 +180,6 @@ ImageStyleEngine.defaultStyles = {
 		name: 'imageStyleAlignLeft',
 		title: 'Left aligned image',
 		icon: leftIcon,
-		value: 'left',
 		className: 'image-style-align-left'
 	},
 
@@ -190,7 +188,6 @@ ImageStyleEngine.defaultStyles = {
 		name: 'imageStyleAlignCenter',
 		title: 'Centered image',
 		icon: centerIcon,
-		value: 'side',
 		className: 'image-style-align-center'
 	},
 
@@ -199,7 +196,6 @@ ImageStyleEngine.defaultStyles = {
 		name: 'imageStyleAlignRight',
 		title: 'Right aligned image',
 		icon: rightIcon,
-		value: 'right',
 		className: 'image-style-align-right'
 	}
 };
@@ -282,18 +278,18 @@ function normalizeStyle( style ) {
  *
  *		const imageStyleFormat = {
  *			name: 'fullSizeImage',
- *			value: 'full',
  *			icon: fullWidthIcon,
  *			title: 'Full size image',
  *			className: 'image-full-size'
  *		}
  *
  * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
- * @property {String} name The name of the style. It will be used to:
+ * @property {String} name The unique name of the style. It will be used to:
  * * register the {@link module:core/command~Command command} which will apply this style,
- * * store the style's button in the editor {@link module:ui/componentfactory~ComponentFactory}.
- * @property {String} value A value used to store this style in the model attribute.
- * When the value is `null`, the style will be used as the default one. A default style does not apply any CSS class to the view element.
+ * * store the style's button in the editor {@link module:ui/componentfactory~ComponentFactory},
+ * * store the style in the `imageStyle` model attribute.
+ * @property {Boolean} [isDefault] When set, the style will be used as the default one.
+ * A default style does not apply any CSS class to the view element.
  * @property {String} icon One of the following to be used when creating the style's button:
  *  * An SVG icon source (as an XML string),
  *  * One of {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine.defaultIcons} to use a default icon provided by the plugin.

+ 3 - 3
packages/ckeditor5-image/tests/imagestyle.js

@@ -12,9 +12,9 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 describe( 'ImageStyle', () => {
 	let editor;
 	const styles = [
-		{ name: 'style 1', title: 'Style 1 title', icon: 'style1-icon', value: null },
-		{ name: 'style 2', title: 'Style 2 title', icon: 'style2-icon', value: 'style2', cssClass: 'style2-class' },
-		{ name: 'style 3', title: 'Style 3 title', icon: 'style3-icon', value: 'style3', cssClass: 'style3-class' }
+		{ name: 'style 1', title: 'Style 1 title', icon: 'style1-icon', isDefault: true },
+		{ name: 'style 2', title: 'Style 2 title', icon: 'style2-icon', cssClass: 'style2-class' },
+		{ name: 'style 3', title: 'Style 3 title', icon: 'style3-icon', cssClass: 'style3-class' }
 	];
 
 	beforeEach( () => {

+ 7 - 7
packages/ckeditor5-image/tests/imagestyle/imagestylecommand.js

@@ -8,8 +8,8 @@ import ImageStyleCommand from '../../src/imagestyle/imagestylecommand';
 import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ImageStyleCommand', () => {
-	const defaultStyle = { name: 'defaultStyle', title: 'foo bar', icon: 'icon-1', value: null };
-	const otherStyle = { name: 'otherStyle', title: 'baz', icon: 'icon-2', value: 'other', className: 'other-class-name' };
+	const defaultStyle = { name: 'defaultStyle', title: 'foo bar', icon: 'icon-1', isDefault: true };
+	const otherStyle = { name: 'otherStyle', title: 'baz', icon: 'icon-2', className: 'other-class-name' };
 
 	let document, defaultStyleCommand, otherStyleCommand;
 
@@ -44,7 +44,7 @@ describe( 'ImageStyleCommand', () => {
 	} );
 
 	it( 'proper command should have true value when imageStyle attribute is present', () => {
-		setData( document, '[<image imageStyle="other"></image>]' );
+		setData( document, '[<image imageStyle="otherStyle"></image>]' );
 
 		expect( defaultStyleCommand.value ).to.be.false;
 		expect( otherStyleCommand.value ).to.be.true;
@@ -62,15 +62,15 @@ describe( 'ImageStyleCommand', () => {
 
 		otherStyleCommand.execute();
 
-		expect( getData( document ) ).to.equal( '[<image imageStyle="other"></image>]' );
+		expect( getData( document ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 	} );
 
 	it( 'should do nothing when attribute already present', () => {
-		setData( document, '[<image imageStyle="other"></image>]' );
+		setData( document, '[<image imageStyle="otherStyle"></image>]' );
 
 		otherStyleCommand.execute();
 
-		expect( getData( document ) ).to.equal( '[<image imageStyle="other"></image>]' );
+		expect( getData( document ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 	} );
 
 	it( 'should allow to provide batch instance', () => {
@@ -81,7 +81,7 @@ describe( 'ImageStyleCommand', () => {
 
 		otherStyleCommand.execute( { batch } );
 
-		expect( getData( document ) ).to.equal( '[<image imageStyle="other"></image>]' );
+		expect( getData( document ) ).to.equal( '[<image imageStyle="otherStyle"></image>]' );
 		sinon.assert.calledOnce( spy );
 	} );
 

+ 19 - 22
packages/ckeditor5-image/tests/imagestyle/imagestyleengine.js

@@ -51,9 +51,9 @@ describe( 'ImageStyleEngine', () => {
 					plugins: [ ImageStyleEngine ],
 					image: {
 						styles: [
-							{ name: 'fullStyle', title: 'foo', icon: 'object-center', value: null },
-							{ name: 'sideStyle', title: 'bar', icon: 'object-right', value: 'side', className: 'side-class' },
-							{ name: 'dummyStyle', title: 'baz', icon: 'object-dummy', value: 'dummy', className: 'dummy-class' },
+							{ name: 'fullStyle', title: 'foo', icon: 'object-center', isDefault: true },
+							{ name: 'sideStyle', title: 'bar', icon: 'object-right', className: 'side-class' },
+							{ name: 'dummyStyle', title: 'baz', icon: 'object-dummy', className: 'dummy-class' },
 						]
 					}
 				} )
@@ -91,7 +91,8 @@ describe( 'ImageStyleEngine', () => {
 		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>' );
+			expect( getModelData( document, { withoutSelection: true } ) )
+				.to.equal( '<image imageStyle="sideStyle" src="foo.png"></image>' );
 			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 				'<figure class="image ck-widget side-class" contenteditable="false">' +
 					'<img src="foo.png"></img>' +
@@ -130,7 +131,7 @@ describe( 'ImageStyleEngine', () => {
 			const batch = document.batch();
 
 			document.enqueueChanges( () => {
-				batch.setAttribute( image, 'imageStyle', 'side' );
+				batch.setAttribute( image, 'imageStyle', 'sideStyle' );
 			} );
 
 			expect( editor.getData() ).to.equal( '<figure class="image side-class"><img src="foo.png"></figure>' );
@@ -140,7 +141,7 @@ describe( 'ImageStyleEngine', () => {
 		} );
 
 		it( 'should convert model to view: removing attribute', () => {
-			setModelData( document, '<image src="foo.png" imageStyle="side"></image>' );
+			setModelData( document, '<image src="foo.png" imageStyle="imageStyleSide"></image>' );
 			const image = document.getRoot().getChild( 0 );
 			const batch = document.batch();
 
@@ -160,7 +161,7 @@ describe( 'ImageStyleEngine', () => {
 			const batch = document.batch();
 
 			document.enqueueChanges( () => {
-				batch.setAttribute( image, 'imageStyle', 'side' );
+				batch.setAttribute( image, 'imageStyle', 'sideStyle' );
 			} );
 
 			expect( editor.getData() ).to.equal( '<figure class="image side-class"><img src="foo.png"></figure>' );
@@ -171,7 +172,7 @@ describe( 'ImageStyleEngine', () => {
 			);
 
 			document.enqueueChanges( () => {
-				batch.setAttribute( image, 'imageStyle', 'dummy' );
+				batch.setAttribute( image, 'imageStyle', 'dummyStyle' );
 			} );
 
 			expect( editor.getData() ).to.equal( '<figure class="image dummy-class"><img src="foo.png"></figure>' );
@@ -192,7 +193,7 @@ describe( 'ImageStyleEngine', () => {
 			const batch = document.batch();
 
 			document.enqueueChanges( () => {
-				batch.setAttribute( image, 'imageStyle', 'side' );
+				batch.setAttribute( image, 'imageStyle', 'sideStyle' );
 			} );
 
 			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
@@ -205,7 +206,7 @@ describe( 'ImageStyleEngine', () => {
 				consumable.consume( data.item, 'removeAttribute:imageStyle' );
 			}, { priority: 'high' } );
 
-			setModelData( document, '<image src="foo.png" imageStyle="side"></image>' );
+			setModelData( document, '<image src="foo.png" imageStyle="sideStyle"></image>' );
 			const image = document.getRoot().getChild( 0 );
 			const batch = document.batch();
 
@@ -223,12 +224,12 @@ describe( 'ImageStyleEngine', () => {
 				consumable.consume( data.item, 'changeAttribute:imageStyle' );
 			}, { priority: 'high' } );
 
-			setModelData( document, '<image src="foo.png" imageStyle="dummy"></image>' );
+			setModelData( document, '<image src="foo.png" imageStyle="dummyStyle"></image>' );
 			const image = document.getRoot().getChild( 0 );
 			const batch = document.batch();
 
 			document.enqueueChanges( () => {
-				batch.setAttribute( image, 'imageStyle', 'side' );
+				batch.setAttribute( image, 'imageStyle', 'sideStyle' );
 			} );
 
 			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
@@ -356,9 +357,9 @@ describe( 'ImageStyleEngine', () => {
 						image: {
 							styles: [
 								// Custom user styles.
-								{ name: 'foo', title: 'foo', icon: 'custom', value: null, className: 'foo-class' },
-								{ name: 'bar', title: 'bar', icon: 'right', value: 'bar', className: 'bar-class' },
-								{ name: 'baz', title: 'Side image', icon: 'custom', value: 'baz', className: 'baz-class' },
+								{ name: 'foo', title: 'foo', icon: 'custom', isDefault: true, className: 'foo-class' },
+								{ name: 'bar', title: 'bar', icon: 'right', className: 'bar-class' },
+								{ name: 'baz', title: 'Side image', icon: 'custom', className: 'baz-class' },
 
 								// Customized default styles.
 								{ name: 'imageStyleFull', icon: 'left', title: 'Custom title' }
@@ -376,7 +377,7 @@ describe( 'ImageStyleEngine', () => {
 					name: 'foo',
 					title: 'foo',
 					icon: 'custom',
-					value: null,
+					isDefault: true,
 					className: 'foo-class'
 				} );
 			} );
@@ -394,7 +395,7 @@ describe( 'ImageStyleEngine', () => {
 					name: 'imageStyleFull',
 					title: 'Custom title',
 					icon: ImageStyleEngine.defaultIcons.left,
-					value: null
+					isDefault: true
 				} );
 			} );
 		} );
@@ -471,34 +472,30 @@ describe( 'ImageStyleEngine', () => {
 					name: 'imageStyleFull',
 					title: 'Full size image',
 					icon: fullWidthIcon,
-					value: null
+					isDefault: true
 				},
 				imageStyleSide: {
 					name: 'imageStyleSide',
 					title: 'Side image',
 					icon: rightIcon,
-					value: 'side',
 					className: 'image-style-side'
 				},
 				imageStyleAlignLeft: {
 					name: 'imageStyleAlignLeft',
 					title: 'Left aligned image',
 					icon: leftIcon,
-					value: 'left',
 					className: 'image-style-align-left'
 				},
 				imageStyleAlignCenter: {
 					name: 'imageStyleAlignCenter',
 					title: 'Centered image',
 					icon: centerIcon,
-					value: 'side',
 					className: 'image-style-align-center'
 				},
 				imageStyleAlignRight: {
 					name: 'imageStyleAlignRight',
 					title: 'Right aligned image',
 					icon: rightIcon,
-					value: 'right',
 					className: 'image-style-align-right'
 				}
 			} );