Ver Fonte

Other: Implement proper use of matchers and converters.

Maciej Gołaszewski há 8 anos atrás
pai
commit
6ea76480e8

+ 23 - 11
packages/ckeditor5-font/src/fontsize/fontsizeediting.js

@@ -45,20 +45,19 @@ export default class FontSizeEditing extends Plugin {
 			const classes = viewDefinition.classes;
 			const classes = viewDefinition.classes;
 			const styles = viewDefinition.styles;
 			const styles = viewDefinition.styles;
 
 
-			const attribute = {};
+			const pattern = { name: element };
 
 
 			if ( classes ) {
 			if ( classes ) {
-				attribute.class = classes;
+				pattern.class = classes;
 			}
 			}
 
 
-			// TODO styles are not normalized in parsing - it require better handling
 			if ( styles ) {
 			if ( styles ) {
-				attribute.style = styles;
+				pattern.style = styles;
 			}
 			}
 
 
 			buildViewConverter()
 			buildViewConverter()
 				.for( data.viewToModel )
 				.for( data.viewToModel )
-				.from( { name: element, attribute } )
+				.from( pattern )
 				.toAttribute( () => ( {
 				.toAttribute( () => ( {
 					key: 'fontSize',
 					key: 'fontSize',
 					value: item.model
 					value: item.model
@@ -75,17 +74,18 @@ export default class FontSizeEditing extends Plugin {
 					return;
 					return;
 				}
 				}
 
 
-				// TODO: make utitlity class of this?
 				const viewDefinition = definition.view;
 				const viewDefinition = definition.view;
+				const classes = viewDefinition.classes;
+				const styles = viewDefinition.styles;
 
 
 				const attributes = {};
 				const attributes = {};
 
 
-				if ( viewDefinition.classes ) {
-					attributes.class = viewDefinition.classes;
+				if ( classes ) {
+					attributes.class = Array.isArray( classes ) ? classes.join( ' ' ) : classes;
 				}
 				}
 
 
-				if ( viewDefinition.styles ) {
-					attributes.style = viewDefinition.styles;
+				if ( styles ) {
+					attributes.style = typeof styles === 'string' ? styles : toStylesString( styles );
 				}
 				}
 
 
 				return new AttributeElement( viewDefinition.name, attributes );
 				return new AttributeElement( viewDefinition.name, attributes );
@@ -214,7 +214,19 @@ function generatePixelPreset( size ) {
 		stopValue: size,
 		stopValue: size,
 		view: {
 		view: {
 			name: 'span',
 			name: 'span',
-			styles: `font-size:${ size }px;`
+			styles: {
+				'font-size': `${ size }px`
+			}
 		}
 		}
 	};
 	};
 }
 }
+
+function toStylesString( stylesObject ) {
+	const styles = [];
+
+	for ( const key in stylesObject ) {
+		styles.push( key + ':' + stylesObject[ key ] );
+	}
+
+	return styles.join( ';' );
+}

+ 48 - 14
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -122,10 +122,10 @@ describe( 'FontSizeEditing', () => {
 						const plugin = editor.plugins.get( FontSizeEditing );
 						const plugin = editor.plugins.get( FontSizeEditing );
 
 
 						expect( plugin.configuredItems ).to.deep.equal( [
 						expect( plugin.configuredItems ).to.deep.equal( [
-							{ label: '10', model: '10', stopValue: 10, view: { name: 'span', styles: 'font-size:10px;' } },
-							{ label: '12', model: '12', stopValue: 12, view: { name: 'span', styles: 'font-size:12px;' } },
-							{ label: '14', model: '14', stopValue: 14, view: { name: 'span', styles: 'font-size:14px;' } },
-							{ label: '18', model: '18', stopValue: 18, view: { name: 'span', styles: 'font-size:18px;' } }
+							{ label: '10', model: '10', stopValue: 10, view: { name: 'span', styles: { 'font-size': '10px' } } },
+							{ label: '12', model: '12', stopValue: 12, view: { name: 'span', styles: { 'font-size': '12px' } } },
+							{ label: '14', model: '14', stopValue: 14, view: { name: 'span', styles: { 'font-size': '14px' } } },
+							{ label: '18', model: '18', stopValue: 18, view: { name: 'span', styles: { 'font-size': '18px' } } }
 						] );
 						] );
 					} );
 					} );
 			} );
 			} );
@@ -187,15 +187,29 @@ describe( 'FontSizeEditing', () => {
 				.create( {
 				.create( {
 					plugins: [ FontSizeEditing, Paragraph ],
 					plugins: [ FontSizeEditing, Paragraph ],
 					fontSize: {
 					fontSize: {
-						items: [ 'tiny', 'normal', 18, {
-							label: 'My setting',
-							model: 'my',
-							view: {
-								name: 'mark',
-								styles: 'font-size:30px;',
-								classes: 'my-style'
+						items: [
+							'tiny',
+							'normal',
+							18,
+							{
+								label: 'My setting',
+								model: 'my',
+								view: {
+									name: 'mark',
+									styles: { 'font-size': '30px' },
+									classes: 'my-style'
+								}
+							},
+							{
+								label: 'Big multiple classes',
+								model: 'big-multiple',
+								// TODO: define ViewElementConfigDefinition interface (wheter strings or arrays to use)?
+								view: {
+									name: 'span',
+									classes: [ 'foo', 'foo-big' ]
+								}
 							}
 							}
-						} ]
+						]
 					}
 					}
 				} )
 				} )
 				.then( newEditor => {
 				.then( newEditor => {
@@ -206,13 +220,23 @@ describe( 'FontSizeEditing', () => {
 		} );
 		} );
 
 
 		it( 'should convert from element with defined class', () => {
 		it( 'should convert from element with defined class', () => {
-			const data = '<p>f<span class="text-tiny">o</span>o</p>';
+			const data = '<p>f<span class="text-tiny foo bar">o</span>o</p>';
 
 
 			editor.setData( data );
 			editor.setData( data );
 
 
 			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="text-tiny">o</$text>o</paragraph>' );
 			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="text-tiny">o</$text>o</paragraph>' );
 
 
-			expect( editor.getData() ).to.equal( data );
+			expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
+		} );
+
+		it( 'should convert from element with defined multiple classes', () => {
+			const data = '<p>f<span class="foo foo-big bar">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="big-multiple">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<span class="foo foo-big">o</span>o</p>' );
 		} );
 		} );
 
 
 		it( 'should convert from element with defined style', () => {
 		it( 'should convert from element with defined style', () => {
@@ -225,6 +249,16 @@ describe( 'FontSizeEditing', () => {
 			expect( editor.getData() ).to.equal( data );
 			expect( editor.getData() ).to.equal( data );
 		} );
 		} );
 
 
+		it( 'should convert from element with defined style when with other styles', () => {
+			const data = '<p>f<span style="font-family: serif;font-size: 18px">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
+		} );
+
 		it( 'should convert from user defined element', () => {
 		it( 'should convert from user defined element', () => {
 			const data = '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>';
 			const data = '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>';