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

When "fontSize.disableValueMatching=true", values in the model will be kept as units instead of preset names.

Kamil Piechaczek 5 лет назад
Родитель
Сommit
7da6f1a188

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

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import FontSizeCommand from './fontsizecommand';
-import { normalizeOptions } from './utils';
+import { normalizeOptions, FONT_SIZE_PRESET_UNITS } from './utils';
 import { buildDefinition, FONT_SIZE } from '../utils';
 
 /**
@@ -66,12 +66,15 @@ export default class FontSizeEditing extends Plugin {
 			copyOnEnter: true
 		} );
 
+		const disableValueMatching = editor.config.get( 'fontSize.disableValueMatching' );
+
 		// Define view to model conversion.
-		const options = normalizeOptions( this.editor.config.get( 'fontSize.options' ) ).filter( item => item.model );
+		const options = normalizeOptions( this.editor.config.get( 'fontSize.options' ), { disableValueMatching } )
+			.filter( item => item.model );
 		const definition = buildDefinition( FONT_SIZE, options );
 
 		// Set-up the two-way conversion.
-		if ( editor.config.get( 'fontSize.disableValueMatching' ) ) {
+		if ( disableValueMatching ) {
 			this._prepareAnyValueConverters();
 		} else {
 			editor.conversion.attributeToElement( definition );
@@ -121,7 +124,11 @@ export default class FontSizeEditing extends Plugin {
 
 					for ( const className of viewElement.getClassNames() ) {
 						if ( className.startsWith( 'text-' ) ) {
-							return className.replace( /^text-/, '' );
+							const presetName = className.replace( /^text-/, '' );
+
+							if ( FONT_SIZE_PRESET_UNITS[ presetName ] ) {
+								return FONT_SIZE_PRESET_UNITS[ presetName ];
+							}
 						}
 					}
 

+ 24 - 4
packages/ckeditor5-font/src/fontsize/utils.js

@@ -12,16 +12,28 @@
  * to the {@link module:font/fontsize~FontSizeOption} format.
  *
  * @param {Array.<String|Number|Object>} configuredOptions An array of options taken from the configuration.
+ * @param {Object} [options={}]
+ * @param {Boolean} [options.disableValueMatching=false]
  * @returns {Array.<module:font/fontsize~FontSizeOption>}
  */
-export function normalizeOptions( configuredOptions ) {
+export function normalizeOptions( configuredOptions, options = {} ) {
+	const disableValueMatching = options.disableValueMatching || false;
+
 	// Convert options to objects.
 	return configuredOptions
-		.map( getOptionDefinition )
+		.map( item => getOptionDefinition( item, disableValueMatching ) )
 		// Filter out undefined values that `getOptionDefinition` might return.
 		.filter( option => !!option );
 }
 
+// The values should be synchronized with "/theme/fontsize.css" file.
+export const FONT_SIZE_PRESET_UNITS = {
+	tiny: '0.7em',
+	small: '0.85em',
+	big: '1.4em',
+	huge: '1.8em'
+};
+
 // Default named presets map.
 const namedPresets = {
 	tiny: {
@@ -64,10 +76,12 @@ const namedPresets = {
 
 // Returns an option definition either from preset or creates one from number shortcut.
 // If object is passed then this method will return it without alternating it. Returns undefined for item than cannot be parsed.
+// If disableValueMatching=true, model will be set to a specified unit value instead of text.
 //
 // @param {String|Number|Object} item
+// @param {Boolean} disableValueMatching
 // @returns {undefined|module:font/fontsize~FontSizeOption}
-function getOptionDefinition( option ) {
+function getOptionDefinition( option, disableValueMatching ) {
 	// Treat any object as full item definition provided by user in configuration.
 	if ( typeof option === 'object' ) {
 		return option;
@@ -75,7 +89,13 @@ function getOptionDefinition( option ) {
 
 	// Item is a named preset.
 	if ( namedPresets[ option ] ) {
-		return namedPresets[ option ];
+		const preset = namedPresets[ option ];
+
+		if ( disableValueMatching ) {
+			preset.model = FONT_SIZE_PRESET_UNITS[ option ];
+		}
+
+		return preset;
 	}
 
 	// 'Default' font size. It will be used to remove the fontSize attribute.

+ 10 - 7
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -68,9 +68,6 @@ describe( 'FontSizeEditing', () => {
 					.create( {
 						plugins: [ FontSizeEditing, Paragraph ],
 						fontSize: {
-							options: [
-								'default',
-							],
 							disableValueMatching: true
 						}
 					} )
@@ -117,13 +114,19 @@ describe( 'FontSizeEditing', () => {
 				} );
 
 				it( 'should convert an element if it has a class that starts with "text-"', () => {
-					const data = '<p>f<span class="text-huge">o</span>o</p>';
+					editor.setData( '<p>f<span class="text-huge">o</span>o</p>' );
 
-					editor.setData( data );
+					expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="1.8em">o</$text>o</paragraph>' );
+
+					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:1.8em;">o</span>o</p>' );
+				} );
 
-					expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="huge">o</$text>o</paragraph>' );
+				it( 'should ignore an element if it has a class starts with "text-" but does not match to any preset', () => {
+					editor.setData( '<p>f<span class="text-default">o</span>o</p>' );
 
-					expect( editor.getData() ).to.equal( data );
+					expect( getModelData( doc ) ).to.equal( '<paragraph>[]foo</paragraph>' );
+
+					expect( editor.getData() ).to.equal( '<p>foo</p>' );
 				} );
 
 				it( 'should ignore an element if does not have a class that starts with "text-"', () => {

+ 19 - 1
packages/ckeditor5-font/tests/fontsize/utils.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import { normalizeOptions } from '../../src/fontsize/utils';
+import { normalizeOptions, FONT_SIZE_PRESET_UNITS } from '../../src/fontsize/utils';
 
 describe( 'FontSizeEditing Utils', () => {
 	describe( 'normalizeOptions()', () => {
@@ -35,6 +35,18 @@ describe( 'FontSizeEditing Utils', () => {
 					{ title: 'Huge', model: 'huge', view: { name: 'span', classes: 'text-huge', priority: 7 } }
 				] );
 			} );
+
+			it( 'should return defined presets with units in model values', () => {
+				const options = normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ], { disableValueMatching: true } );
+
+				expect( options ).to.deep.equal( [
+					{ title: 'Tiny', model: '0.7em', view: { name: 'span', classes: 'text-tiny', priority: 7 } },
+					{ title: 'Small', model: '0.85em', view: { name: 'span', classes: 'text-small', priority: 7 } },
+					{ title: 'Default', model: undefined },
+					{ title: 'Big', model: '1.4em', view: { name: 'span', classes: 'text-big', priority: 7 } },
+					{ title: 'Huge', model: '1.8em', view: { name: 'span', classes: 'text-huge', priority: 7 } }
+				] );
+			} );
 		} );
 
 		describe( 'numerical presets', () => {
@@ -49,4 +61,10 @@ describe( 'FontSizeEditing Utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'FONT_SIZE_PRESET_UNITS', () => {
+		it( 'provides default values', () => {
+			expect( Object.keys( FONT_SIZE_PRESET_UNITS ).length ).to.equal( 4 );
+		} );
+	} );
 } );

+ 4 - 1
packages/ckeditor5-font/tests/manual/font-size-presets.js

@@ -14,7 +14,10 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, FontSize ],
 		toolbar: [
 			'heading', '|', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
-		]
+		],
+		fontSize: {
+			disableValueMatching: true
+		}
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 1 - 0
packages/ckeditor5-font/theme/fontsize.css

@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" constant in the "/src/fontsize/utils.js" file. */
 .text-tiny {
 	font-size: .7em;
 }