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

Other: Initial implementation of FontSize data pipeline conversion.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
22b27ba93c

+ 28 - 1
packages/ckeditor5-font/src/fontsize/fontsizeediting.js

@@ -9,6 +9,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
+import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
 import AttributeElement from '@ckeditor/ckeditor5-engine/src/view/attributeelement';
 
 /**
@@ -38,6 +39,32 @@ export default class FontSizeEditing extends Plugin {
 		const data = editor.data;
 		const editing = editor.editing;
 
+		for ( const item of this.configuredItems ) {
+			const viewDefinition = item.view;
+			const element = viewDefinition.name;
+			const classes = viewDefinition.classes;
+			const styles = viewDefinition.styles;
+
+			const attribute = {};
+
+			if ( classes ) {
+				attribute.class = classes;
+			}
+
+			// TODO styles are not normalized in parsing - it require better handling
+			if ( styles ) {
+				attribute.style = styles;
+			}
+
+			buildViewConverter()
+				.for( data.viewToModel )
+				.from( { name: element, attribute } )
+				.toAttribute( () => ( {
+					key: 'fontSize',
+					value: item.model
+				} ) );
+		}
+
 		// Convert model to view
 		buildModelConverter().for( data.modelToView, editing.modelToView )
 			.fromAttribute( 'fontSize' )
@@ -187,7 +214,7 @@ function generatePixelPreset( size ) {
 		stopValue: size,
 		view: {
 			name: 'span',
-			styles: `font-size: ${ size }px`
+			styles: `font-size:${ size }px;`
 		}
 	};
 }

+ 60 - 5
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -8,7 +8,7 @@ import FontSizeEditing from './../../src/fontsize/fontsizeediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
-import { setData as setModelData } from '../../../ckeditor5-engine/src/dev-utils/model';
+import { getData as getModelData, setData as setModelData } from '../../../ckeditor5-engine/src/dev-utils/model';
 
 describe( 'FontSizeEditing', () => {
 	let editor, doc;
@@ -122,10 +122,10 @@ describe( 'FontSizeEditing', () => {
 						const plugin = editor.plugins.get( FontSizeEditing );
 
 						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;' } }
 						] );
 					} );
 			} );
@@ -180,4 +180,59 @@ describe( 'FontSizeEditing', () => {
 			expect( editor.getData() ).to.equal( '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>' );
 		} );
 	} );
+
+	describe( 'data pipeline conversions', () => {
+		beforeEach( () => {
+			return VirtualTestEditor
+				.create( {
+					plugins: [ FontSizeEditing, Paragraph ],
+					fontSize: {
+						items: [ 'tiny', 'normal', 18, {
+							label: 'My setting',
+							model: 'my',
+							view: {
+								name: 'mark',
+								styles: 'font-size:30px;',
+								classes: 'my-style'
+							}
+						} ]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					doc = editor.document;
+				} );
+		} );
+
+		it( 'should convert from element with defined class', () => {
+			const data = '<p>f<span class="text-tiny">o</span>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="text-tiny">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'should convert from element with defined style', () => {
+			const data = '<p>f<span style="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( data );
+		} );
+
+		it( 'should convert from user defined element', () => {
+			const data = '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>';
+
+			editor.setData( data );
+
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="my">o</$text>o</paragraph>' );
+
+			expect( editor.getData() ).to.equal( data );
+		} );
+	} );
 } );