Przeglądaj źródła

Changed: Accept only single quotes for multi-word font family definition.

Maciej Gołaszewski 8 lat temu
rodzic
commit
ed31fc6206

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

@@ -78,7 +78,7 @@ export default class FontFamilyEditing extends Plugin {
  * @property {String} title The user-readable title of the option.
  * @property {String} model Attribute's unique value in the model.
  * @property {module:engine/view/viewelementdefinition~ViewElementDefinition} view View element configuration.
- * @property {Array.<module:engine/view/viewelementdefinition~ViewElementDefinition>} [acceptAlso] An array with all matched elements that
+ * @property {Array.<module:engine/view/viewelementdefinition~ViewElementDefinition>} [acceptsAlso] An array with all matched elements that
  * view to model conversion should also accept.
  */
 
@@ -130,7 +130,7 @@ export default class FontFamilyEditing extends Plugin {
  * used as dropdown item description in UI. The family names that consist spaces should not have quotes (as opposed to CSS standard).
  * Appropriate quotes will be added in the view. For example, for the "Lucida Sans Unicode" the editor will render:
  *
- * 		<span style="font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif">...</span>
+ * 		<span style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif">...</span>
  *
  * The "default" option is used to remove fontFamily from selection. In such case the text will
  * be represented in view using default content CSS font-family.

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

@@ -44,7 +44,7 @@ export default class FontFamilyUI extends Plugin {
 
 			// Try to set a dropdown list item style.
 			if ( option.view && option.view.style ) {
-				itemModel.set( 'style', 'font-family:' + option.view.style[ 'font-family' ] );
+				itemModel.set( 'style', `font-family: ${ option.view.style[ 'font-family' ] }` );
 			}
 
 			dropdownItems.add( itemModel );

+ 3 - 25
packages/ckeditor5-font/src/fontfamily/utils.js

@@ -62,21 +62,7 @@ function generateFontPreset( fontDefinition ) {
 	const firstFontName = fontNames[ 0 ];
 
 	// CSS-compatible font names.
-	const cssFontNames = fontNames.map( normalizeFontNameForCSS );
-
-	// TODO: Maybe we can come with something better here?
-	// TODO: Also document this behavior in engine as it uses matcher~Pattern not ViewElementDefinition.
-	// TODO: Maybe a better solution will be a callback here? (also needs documentation)
-	// This will match any quote type with whitespace.
-	const quotesMatch = '("|\'|&qout;|\\W){0,2}';
-	// Full regex will catch any style of quotation used in view.
-	// Example:
-	// from string: "Font Foo Foo, Font Bar"
-	// it will create a regex that will match any quotation mix:
-	//     - "Font Foo Foo", Font Bar
-	//     - 'Font Foo Foo', "Font Bar"
-	//     - ... etc.
-	const regexString = `${ quotesMatch }${ fontNames.map( n => n.trim() ).join( `${ quotesMatch },${ quotesMatch }` ) }${ quotesMatch }`;
+	const cssFontNames = fontNames.map( normalizeFontNameForCSS ).join( ', ' );
 
 	return {
 		title: firstFontName,
@@ -84,17 +70,9 @@ function generateFontPreset( fontDefinition ) {
 		view: {
 			name: 'span',
 			style: {
-				'font-family': cssFontNames.join( ', ' )
-			}
-		},
-		acceptsAlso: [
-			{
-				name: 'span',
-				style: {
-					'font-family': new RegExp( regexString )
-				}
+				'font-family': cssFontNames
 			}
-		]
+		}
 	};
 }
 

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

@@ -77,7 +77,7 @@ export default class FontSizeEditing extends Plugin {
  * @property {String} title The user-readable title of the option.
  * @property {String} model Attribute's unique value in the model.
  * @property {module:engine/view/viewelementdefinition~ViewElementDefinition} view View element configuration.
- * @property {Array.<module:engine/view/viewelementdefinition~ViewElementDefinition>} [acceptAlso] An array with all matched elements that
+ * @property {Array.<module:engine/view/viewelementdefinition~ViewElementDefinition>} [acceptsAlso] An array with all matched elements that
  * view to model conversion should also accept.
  */
 

+ 0 - 20
packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js

@@ -197,25 +197,5 @@ describe( 'FontFamilyEditing', () => {
 				'<p>b<span class="text-complex">a</span>z</p>'
 			);
 		} );
-
-		it( 'should convert from various inline style definitions', () => {
-			editor.setData(
-				'<p>f<span style="font-family:\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif;">o</span>o</p>' +
-				'<p>f<span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;">o</span>o</p>' +
-				'<p>f<span style="font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;">o</span>o</p>'
-			);
-
-			expect( getModelData( doc ) ).to.equal(
-				'<paragraph>[]f<$text fontFamily="Lucida Sans Unicode">o</$text>o</paragraph>' +
-				'<paragraph>f<$text fontFamily="Lucida Sans Unicode">o</$text>o</paragraph>' +
-				'<paragraph>f<$text fontFamily="Lucida Sans Unicode">o</$text>o</paragraph>'
-			);
-
-			expect( editor.getData() ).to.equal(
-				'<p>f<span style="font-family:\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif;">o</span>o</p>' +
-				'<p>f<span style="font-family:\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif;">o</span>o</p>' +
-				'<p>f<span style="font-family:\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif;">o</span>o</p>'
-			);
-		} );
 	} );
 } );

+ 3 - 35
packages/ckeditor5-font/tests/fontfamily/utils.js

@@ -57,15 +57,7 @@ describe( 'FontFamily utils', () => {
 							style: {
 								'font-family': 'Arial'
 							}
-						},
-						acceptsAlso: [
-							{
-								name: 'span',
-								style: {
-									'font-family': new RegExp( '("|\'|&qout;|\\W){0,2}Arial("|\'|&qout;|\\W){0,2}' )
-								}
-							}
-						]
+						}
 					},
 					{
 						title: 'Comic Sans MS',
@@ -75,18 +67,7 @@ describe( 'FontFamily utils', () => {
 							style: {
 								'font-family': '\'Comic Sans MS\', sans-serif'
 							}
-						},
-						acceptsAlso: [
-							{
-								name: 'span',
-								style: {
-									'font-family': new RegExp(
-										'("|\'|&qout;|\\W){0,2}Comic Sans MS("|\'|&qout;|\\W){0,2},' +
-										'("|\'|&qout;|\\W){0,2}sans-serif("|\'|&qout;|\\W){0,2}'
-									)
-								}
-							}
-						]
+						}
 					},
 					{
 						title: 'Lucida Console',
@@ -96,20 +77,7 @@ describe( 'FontFamily utils', () => {
 							style: {
 								'font-family': '\'Lucida Console\', \'Courier New\', Courier, monospace'
 							}
-						},
-						acceptsAlso: [
-							{
-								name: 'span',
-								style: {
-									'font-family': new RegExp(
-										'("|\'|&qout;|\\W){0,2}Lucida Console("|\'|&qout;|\\W){0,2},' +
-										'("|\'|&qout;|\\W){0,2}Courier New("|\'|&qout;|\\W){0,2},' +
-										'("|\'|&qout;|\\W){0,2}Courier("|\'|&qout;|\\W){0,2},' +
-										'("|\'|&qout;|\\W){0,2}monospace("|\'|&qout;|\\W){0,2}'
-									)
-								}
-							}
-						]
+						}
 					}
 				] );
 			} );