Przeglądaj źródła

Renamed the option and improved the docs.

Piotrek Koszuliński 5 lat temu
rodzic
commit
c7037a28ae

+ 14 - 13
packages/ckeditor5-font/docs/features/font.md

@@ -21,7 +21,7 @@ The {@link module:font/font~Font} plugin enables the following features in the r
 
 ## Configuring the font family feature
 
-It is possible to configure which font family options are supported by the WYSIWYG editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option to do so.
+It is possible to configure which font family options are supported by the WYSIWYG editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `config.fontFamily.options`} configuration option to do so.
 
 Use the special `'default'` keyword to use the default font family defined in the web page styles. It removes any custom font family.
 
@@ -47,9 +47,9 @@ ClassicEditor
 
 {@snippet features/custom-font-family-options}
 
-### Prevent removing non-specified values
+### Accept all font names
 
-By default, all not specified values of `font-family` are removing during the conversion. You can disable this behaviour using `disableValueMatching` option.
+By default, all `font-family` values that are not specified in the `config.fontFamily.options` are stripped. You can enable support for all font names by using the {@link module:font/fontfamily~FontFamilyConfig#supportAllValues `config.fontFamily.supportAllValues`} option.
 
 ```js
 ClassicEditor
@@ -58,7 +58,7 @@ ClassicEditor
 			options: [
 				// ...
 			],
-			disableValueMatching: true
+			supportAllValues: true
 		},
         // ...
 	} )
@@ -68,7 +68,7 @@ ClassicEditor
 
 ## Configuring the font size feature
 
-It is possible to configure which font size options are supported by the WYSIWYG editor. Use the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option to do so.
+It is possible to configure which font size options are supported by the WYSIWYG editor. Use the {@link module:font/fontsize~FontSizeConfig#options `config.fontSize.options`} configuration option to do so.
 
 Use the special `'default'` keyword to use the default font size defined in the web page styles. It removes any custom font size.
 
@@ -171,7 +171,8 @@ ClassicEditor
 
 ### Prevent removing non-specified values
 
-By default, all not specified values of `font-size` are removing during the conversion. You can disable this behaviour using `disableValueMatching` option.
+By default, all `font-size` values that are not specified in the `config.fontSize.options` are stripped. You can enable support for all font sizes by using the {@link module:font/fontfamily~FontSizeConfig#supportAllValues `config.fontSize.supportAllValues`} option.
+
 
 ```js
 ClassicEditor
@@ -180,7 +181,7 @@ ClassicEditor
 			options: [
 				// ...
 			],
-			disableValueMatching: true
+			supportAllValues: true
 		},
         // ...
 	} )
@@ -202,7 +203,7 @@ Check out the WYSIWYG editor below with both features customized using the edito
 
 ### Specifying available colors
 
-It is possible to configure which colors are available in the color dropdown. Use the {@link module:font/fontcolor~FontColorConfig#colors `fontColor.colors`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors `fontBackgroundColor.colors`} configuration options to do so.
+It is possible to configure which colors are available in the color dropdown. Use the {@link module:font/fontcolor~FontColorConfig#colors `config.fontColor.colors`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors `config.fontBackgroundColor.colors`} configuration options to do so.
 
 ```js
 ClassicEditor
@@ -270,7 +271,7 @@ ClassicEditor
 
 ### Changing the geometry of the color grid
 
-You can configure the number of columns in the color dropdown by setting the {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`} configuration options.
+You can configure the number of columns in the color dropdown by setting the {@link module:font/fontcolor~FontColorConfig#columns `config.fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `config.fontBackgroundColor.columns`} configuration options.
 
 Usually, you will want to use this option when changing the number of [available colors](#specifying-available-colors).
 
@@ -303,7 +304,7 @@ ClassicEditor
 
 The font and font background color dropdowns contain the "Document colors" section. It lists the colors already used in the document for the users to be able to easily reuse them (for consistency purposes).
 
-By default, the number of displayed document colors is limited to one row, but you can adjust it (or remove the whole section) by using the {@link module:font/fontcolor~FontColorConfig#documentColors `fontColor.documentColors`} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors `fontBackgroundColor.documentColors`} options.
+By default, the number of displayed document colors is limited to one row, but you can adjust it (or remove the whole section) by using the {@link module:font/fontcolor~FontColorConfig#documentColors `config.fontColor.documentColors`} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors `config.fontBackgroundColor.documentColors`} options.
 
 ```js
 ClassicEditor
@@ -378,7 +379,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers the following com
 * The `'fontFamily'` dropdown.
 * The {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand `'fontFamily'`} command.
 
-	The number of options and their names correspond to the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option.
+	The number of options and their names correspond to the {@link module:font/fontfamily~FontFamilyConfig#options `config.fontFamily.options`} configuration option.
 
 	You can change the font family of the current selection by executing the command with a desired value:
 
@@ -424,7 +425,7 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
 * The `'fontSize'` dropdown.
 * The {@link module:font/fontsize/fontsizecommand~FontSizeCommand `'fontSize'`} command.
 
-	The number of options and their names correspond to the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option.
+	The number of options and their names correspond to the {@link module:font/fontsize~FontSizeConfig#options `config.fontSize.options`} configuration option.
 
 	You can change the font size of the current selection by executing the command with a desired value:
 
@@ -436,7 +437,7 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
 	editor.execute( 'fontSize', { value: 'small' } );
 	```
 
-	Passing an empty value will remove any `fontSize` set:
+	Passing an empty value will remove any `config.fontSize` set:
 
 	```js
 	editor.execute( 'fontSize' );

+ 2 - 2
packages/ckeditor5-font/src/fontfamily.js

@@ -121,10 +121,10 @@ export default class FontFamily extends Plugin {
  * You can preserve pasted font family values by switching the option:
  *
  *		const fontSizeConfig = {
- *			disableValueMatching: true
+ *			supportAllValues: true
  *		};
  *
  * Now, the font families, not specified in the editor's configuration, won't be removed when pasting the content.
  *
- * @member {Boolean} module:font/fontfamily~FontFamilyConfig#disableValueMatching
+ * @member {Boolean} module:font/fontfamily~FontFamilyConfig#supportAllValues
  */

+ 2 - 2
packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js

@@ -50,7 +50,7 @@ export default class FontFamilyEditing extends Plugin {
 				'Trebuchet MS, Helvetica, sans-serif',
 				'Verdana, Geneva, sans-serif'
 			],
-			disableValueMatching: false
+			supportAllValues: false
 		} );
 	}
 
@@ -72,7 +72,7 @@ export default class FontFamilyEditing extends Plugin {
 		const definition = buildDefinition( FONT_FAMILY, options );
 
 		// Set-up the two-way conversion.
-		if ( editor.config.get( 'fontFamily.disableValueMatching' ) ) {
+		if ( editor.config.get( 'fontFamily.supportAllValues' ) ) {
 			this._prepareAnyValueConverters();
 		} else {
 			editor.conversion.attributeToElement( definition );

+ 2 - 2
packages/ckeditor5-font/src/fontsize.js

@@ -139,10 +139,10 @@ export default class FontSize extends Plugin {
  * You can preserve pasted font size values by switching the option:
  *
  *		const fontSizeConfig = {
- *			disableValueMatching: true
+ *			supportAllValues: true
  *		};
  *
  * Now, the font sizes, not specified in the editor's configuration, won't be removed when pasting the content.
  *
- * @member {Boolean} module:font/fontsize~FontSizeConfig#disableValueMatching
+ * @member {Boolean} module:font/fontsize~FontSizeConfig#supportAllValues
  */

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

@@ -49,7 +49,7 @@ export default class FontSizeEditing extends Plugin {
 				'big',
 				'huge'
 			],
-			disableValueMatching: false
+			supportAllValues: false
 		} );
 	}
 
@@ -66,15 +66,15 @@ export default class FontSizeEditing extends Plugin {
 			copyOnEnter: true
 		} );
 
-		const disableValueMatching = editor.config.get( 'fontSize.disableValueMatching' );
+		const supportAllValues = editor.config.get( 'fontSize.supportAllValues' );
 
 		// Define view to model conversion.
-		const options = normalizeOptions( this.editor.config.get( 'fontSize.options' ), { disableValueMatching } )
+		const options = normalizeOptions( this.editor.config.get( 'fontSize.options' ), { supportAllValues } )
 			.filter( item => item.model );
 		const definition = buildDefinition( FONT_SIZE, options );
 
 		// Set-up the two-way conversion.
-		if ( disableValueMatching ) {
+		if ( supportAllValues ) {
 			this._prepareAnyValueConverters();
 		} else {
 			editor.conversion.attributeToElement( definition );

+ 7 - 7
packages/ckeditor5-font/src/fontsize/utils.js

@@ -15,15 +15,15 @@ import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  *
  * @param {Array.<String|Number|Object>} configuredOptions An array of options taken from the configuration.
  * @param {Object} [options={}]
- * @param {Boolean} [options.disableValueMatching=false]
+ * @param {Boolean} [options.supportAllValues=false]
  * @returns {Array.<module:font/fontsize~FontSizeOption>}
  */
 export function normalizeOptions( configuredOptions, options = {} ) {
-	const disableValueMatching = options.disableValueMatching || false;
+	const supportAllValues = options.supportAllValues || false;
 
 	// Convert options to objects.
 	return configuredOptions
-		.map( item => getOptionDefinition( item, disableValueMatching ) )
+		.map( item => getOptionDefinition( item, supportAllValues ) )
 		// Filter out undefined values that `getOptionDefinition` might return.
 		.filter( option => !!option );
 }
@@ -86,12 +86,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.
+// If supportAllValues=true, model will be set to a specified unit value instead of text.
 //
 // @param {String|Number|Object} item
-// @param {Boolean} disableValueMatching
+// @param {Boolean} supportAllValues
 // @returns {undefined|module:font/fontsize~FontSizeOption}
-function getOptionDefinition( option, disableValueMatching ) {
+function getOptionDefinition( option, supportAllValues ) {
 	// Check whether passed option is a full item definition provided by user in configuration.
 	if ( isFullItemDefinition( option ) ) {
 		return attachPriority( option );
@@ -101,7 +101,7 @@ function getOptionDefinition( option, disableValueMatching ) {
 
 	// Item is a named preset.
 	if ( preset ) {
-		if ( disableValueMatching ) {
+		if ( supportAllValues ) {
 			preset.model = FONT_SIZE_PRESET_UNITS[ option ];
 		}
 

+ 3 - 3
packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js

@@ -67,11 +67,11 @@ describe( 'FontFamilyEditing', () => {
 					'Verdana, Geneva, sans-serif'
 				] );
 
-				expect( editor.config.get( 'fontFamily.disableValueMatching' ) ).to.equal( false );
+				expect( editor.config.get( 'fontFamily.supportAllValues' ) ).to.equal( false );
 			} );
 		} );
 
-		describe( 'disableValueMatching=true', () => {
+		describe( 'supportAllValues=true', () => {
 			let editor, doc;
 
 			beforeEach( () => {
@@ -82,7 +82,7 @@ describe( 'FontFamilyEditing', () => {
 							options: [
 								'Arial'
 							],
-							disableValueMatching: true
+							supportAllValues: true
 						}
 					} )
 					.then( newEditor => {

+ 1 - 1
packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js

@@ -112,7 +112,7 @@ describe( 'FontFamilyUI', () => {
 				.create( element, {
 					plugins: [ FontFamilyEditing, FontFamilyUI ],
 					fontSize: {
-						disableValueMatching: true
+						supportAllValues: true
 					}
 				} )
 				.then( editor => {

+ 3 - 3
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -56,11 +56,11 @@ describe( 'FontSizeEditing', () => {
 		describe( 'default value', () => {
 			it( 'should be set', () => {
 				expect( editor.config.get( 'fontSize.options' ) ).to.deep.equal( [ 'tiny', 'small', 'default', 'big', 'huge' ] );
-				expect( editor.config.get( 'fontSize.disableValueMatching' ) ).to.equal( false );
+				expect( editor.config.get( 'fontSize.supportAllValues' ) ).to.equal( false );
 			} );
 		} );
 
-		describe( 'disableValueMatching=true', () => {
+		describe( 'supportAllValues=true', () => {
 			let editor, doc;
 
 			beforeEach( () => {
@@ -68,7 +68,7 @@ describe( 'FontSizeEditing', () => {
 					.create( {
 						plugins: [ FontSizeEditing, Paragraph ],
 						fontSize: {
-							disableValueMatching: true
+							supportAllValues: true
 						}
 					} )
 					.then( newEditor => {

+ 2 - 2
packages/ckeditor5-font/tests/fontsize/utils.js

@@ -37,8 +37,8 @@ describe( 'FontSizeEditing Utils', () => {
 				] );
 			} );
 
-			it( 'should return defined presets with units in model values if disableValueMatching=true', () => {
-				const options = normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ], { disableValueMatching: true } );
+			it( 'should return defined presets with units in model values if supportAllValues=true', () => {
+				const options = normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ], { supportAllValues: true } );
 
 				expect( options ).to.deep.equal( [
 					{ title: 'Tiny', model: '0.7em', view: { name: 'span', classes: 'text-tiny', priority: 7 } },

+ 6 - 6
packages/ckeditor5-font/tests/integration.js

@@ -52,7 +52,7 @@ describe( 'Integration test Font', () => {
 			);
 		} );
 
-		it( 'should render one span element for all types of font features (disableValueMatching=true)', () => {
+		it( 'should render one span element for all types of font features (supportAllValues=true)', () => {
 			const element = document.createElement( 'div' );
 			document.body.appendChild( element );
 
@@ -60,10 +60,10 @@ describe( 'Integration test Font', () => {
 				.create( element, {
 					plugins: [ Font, ArticlePluginSet ],
 					fontFamily: {
-						disableValueMatching: true
+						supportAllValues: true
 					},
 					fontSize: {
-						disableValueMatching: true
+						supportAllValues: true
 					}
 				} )
 				.then( editor => {
@@ -114,7 +114,7 @@ describe( 'Integration test Font', () => {
 			);
 		} );
 
-		it( 'should render elements wrapped in proper order (disableValueMatching=true)', () => {
+		it( 'should render elements wrapped in proper order (supportAllValues=true)', () => {
 			const element = document.createElement( 'div' );
 			document.body.appendChild( element );
 
@@ -122,10 +122,10 @@ describe( 'Integration test Font', () => {
 				.create( element, {
 					plugins: [ Font, ArticlePluginSet ],
 					fontFamily: {
-						disableValueMatching: true
+						supportAllValues: true
 					},
 					fontSize: {
-						disableValueMatching: true
+						supportAllValues: true
 					}
 				} )
 				.then( editor => {

+ 3 - 3
packages/ckeditor5-font/tests/manual/font-family.js

@@ -28,7 +28,7 @@ async function startMode( selectedMode ) {
 	if ( selectedMode === 'restricted-values' ) {
 		await reloadEditor();
 	} else {
-		await reloadEditor( { disableValueMatching: true } );
+		await reloadEditor( { supportAllValues: true } );
 	}
 }
 
@@ -45,8 +45,8 @@ async function reloadEditor( options = {} ) {
 		fontFamily: {}
 	};
 
-	if ( options.disableValueMatching ) {
-		config.fontFamily.disableValueMatching = true;
+	if ( options.supportAllValues ) {
+		config.fontFamily.supportAllValues = true;
 	}
 
 	window.editor = await ClassicEditor.create( document.querySelector( '#editor' ), config );

+ 2 - 0
packages/ckeditor5-font/tests/manual/font-size-numeric.html

@@ -17,4 +17,6 @@
 	<p><span style="font-size: 36px;">Some text with font-size set to: 36px.</span></p>
 	<p><span style="font-size: 48px;">Some text with font-size set to: 48px.</span></p>
 	<p><span style="font-size: 64px;">Some text with font-size set to: 64px.</span></p>
+	<p><span style="font-size: 2em">Some text with font-size set to: 2em.</span></p>
+	<p><span style="font-size: 15.5pt">Some text with font-size set to: 15.5pt.</span></p>
 </div>

+ 3 - 3
packages/ckeditor5-font/tests/manual/font-size-numeric.js

@@ -28,7 +28,7 @@ async function startMode( selectedMode ) {
 	if ( selectedMode === 'restricted-values' ) {
 		await reloadEditor();
 	} else {
-		await reloadEditor( { disableValueMatching: true } );
+		await reloadEditor( { supportAllValues: true } );
 	}
 }
 
@@ -45,8 +45,8 @@ async function reloadEditor( options = {} ) {
 		fontSize: { options: [ 10, 12, 14, 'default', 18, 20, 22 ] }
 	};
 
-	if ( options.disableValueMatching ) {
-		config.fontSize.disableValueMatching = true;
+	if ( options.supportAllValues ) {
+		config.fontSize.supportAllValues = true;
 	}
 
 	window.editor = await ClassicEditor.create( document.querySelector( '#editor' ), config );