Преглед изворни кода

Other: Make FontFamily work with various font-family style markup.

Maciej Gołaszewski пре 8 година
родитељ
комит
a9138d96d6

+ 32 - 7
packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js

@@ -29,7 +29,13 @@ export default class FontFamilyEditing extends Plugin {
 		editor.config.define( 'fontFamily', {
 		editor.config.define( 'fontFamily', {
 			items: [
 			items: [
 				'Arial, Helvetica, sans-serif',
 				'Arial, Helvetica, sans-serif',
-				'Courier New, Courier, monospace'
+				'Courier New, Courier, monospace',
+				'Georgia, serif',
+				'Lucida Sans Unicode, Lucida Grande, sans-serif',
+				'Tahoma, Geneva, sans-serif',
+				'Times New Roman, Times, serif',
+				'Trebuchet MS, Helvetica, sans-serif',
+				'Verdana, Geneva, sans-serif'
 			]
 			]
 		} );
 		} );
 
 
@@ -102,29 +108,48 @@ function getItemDefinition( item ) {
 // Creates a predefined preset for pixel size.
 // Creates a predefined preset for pixel size.
 function generateFontPreset( font ) {
 function generateFontPreset( font ) {
 	// Remove quotes from font names
 	// Remove quotes from font names
-	const fontNames = font.replace( /"/g, '' ).split( ',' );
+	const fontNames = font.replace( /"|'/g, '' ).split( ',' );
 
 
-	const cssFontNames = fontNames.map( cleanFontName ).join( ', ' );
+	const cssFontNames = fontNames.map( normalizeFontName );
 
 
 	const firstFontName = fontNames[ 0 ];
 	const firstFontName = fontNames[ 0 ];
 
 
+	const quotesMatch = '("|\'|&qout;|\\W){0,2}';
+
+	const regexString = `${ quotesMatch }${ fontNames.map( n => n.trim() ).join( `${ quotesMatch },${ quotesMatch }` ) }${ quotesMatch }`;
+
+	const fontFamilyRegexp = new RegExp( regexString );
+
 	return {
 	return {
 		label: firstFontName,
 		label: firstFontName,
 		model: firstFontName,
 		model: firstFontName,
 		view: {
 		view: {
 			name: 'span',
 			name: 'span',
 			styles: {
 			styles: {
-				'font-family': cssFontNames
+				'font-family': cssFontNames.join( ', ' )
 			}
 			}
-		}
+		},
+		acceptsAlso: [
+			{
+				name: 'span',
+				styles: {
+					'font-family': fontFamilyRegexp
+				}
+			}
+		]
 	};
 	};
 }
 }
 
 
-function cleanFontName( fontName ) {
+/**
+ *
+ * @param fontName
+ * @returns {string|*}
+ */
+function normalizeFontName( fontName ) {
 	fontName = fontName.trim();
 	fontName = fontName.trim();
 
 
 	if ( fontName.indexOf( ' ' ) > 0 ) {
 	if ( fontName.indexOf( ' ' ) > 0 ) {
-		fontName = `"${ fontName }"`;
+		fontName = `'${ fontName }'`;
 	}
 	}
 
 
 	return fontName;
 	return fontName;

+ 77 - 9
packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js

@@ -39,7 +39,13 @@ describe( 'FontFamilyEditing', () => {
 			it( 'should be set', () => {
 			it( 'should be set', () => {
 				expect( editor.config.get( 'fontFamily.items' ) ).to.deep.equal( [
 				expect( editor.config.get( 'fontFamily.items' ) ).to.deep.equal( [
 					'Arial, Helvetica, sans-serif',
 					'Arial, Helvetica, sans-serif',
-					'Courier New, Courier, monospace'
+					'Courier New, Courier, monospace',
+					'Georgia, serif',
+					'Lucida Sans Unicode, Lucida Grande, sans-serif',
+					'Tahoma, Geneva, sans-serif',
+					'Times New Roman, Times, serif',
+					'Trebuchet MS, Helvetica, sans-serif',
+					'Verdana, Geneva, sans-serif'
 				] );
 				] );
 			} );
 			} );
 		} );
 		} );
@@ -92,7 +98,8 @@ describe( 'FontFamilyEditing', () => {
 							label: 'Comic Sans',
 							label: 'Comic Sans',
 							model: 'comic',
 							model: 'comic',
 							view: {
 							view: {
-								name: 'span', styles: {
+								name: 'span',
+								styles: {
 									'font-family': 'Comic Sans'
 									'font-family': 'Comic Sans'
 								}
 								}
 							}
 							}
@@ -110,7 +117,7 @@ describe( 'FontFamilyEditing', () => {
 							items: [
 							items: [
 								'Arial',
 								'Arial',
 								'"Comic Sans MS", sans-serif',
 								'"Comic Sans MS", sans-serif',
-								'Lucida Console, Courier New, Courier, monospace'
+								'Lucida Console, \'Courier New\', Courier, monospace'
 							]
 							]
 						}
 						}
 					} )
 					} )
@@ -128,7 +135,15 @@ describe( 'FontFamilyEditing', () => {
 									styles: {
 									styles: {
 										'font-family': 'Arial'
 										'font-family': 'Arial'
 									}
 									}
-								}
+								},
+								acceptsAlso: [
+									{
+										name: 'span',
+										styles: {
+											'font-family': new RegExp( '("|\'|&qout;|\\W){0,2}Arial("|\'|&qout;|\\W){0,2}' )
+										}
+									}
+								]
 							},
 							},
 							{
 							{
 								label: 'Comic Sans MS',
 								label: 'Comic Sans MS',
@@ -136,9 +151,20 @@ describe( 'FontFamilyEditing', () => {
 								view: {
 								view: {
 									name: 'span',
 									name: 'span',
 									styles: {
 									styles: {
-										'font-family': '"Comic Sans MS", sans-serif'
+										'font-family': '\'Comic Sans MS\', sans-serif'
 									}
 									}
-								}
+								},
+								acceptsAlso: [
+									{
+										name: 'span',
+										styles: {
+											'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}'
+											)
+										}
+									}
+								]
 							},
 							},
 							{
 							{
 								label: 'Lucida Console',
 								label: 'Lucida Console',
@@ -146,9 +172,22 @@ describe( 'FontFamilyEditing', () => {
 								view: {
 								view: {
 									name: 'span',
 									name: 'span',
 									styles: {
 									styles: {
-										'font-family': '"Lucida Console", "Courier New", Courier, monospace'
+										'font-family': '\'Lucida Console\', \'Courier New\', Courier, monospace'
 									}
 									}
-								}
+								},
+								acceptsAlso: [
+									{
+										name: 'span',
+										styles: {
+											'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}'
+											)
+										}
+									}
+								]
 							}
 							}
 						] );
 						] );
 					} );
 					} );
@@ -164,6 +203,7 @@ describe( 'FontFamilyEditing', () => {
 					fontFamily: {
 					fontFamily: {
 						items: [
 						items: [
 							'Arial',
 							'Arial',
+							'Lucida Sans Unicode, Lucida Grande, sans-serif',
 							{
 							{
 								label: 'My font',
 								label: 'My font',
 								model: 'my',
 								model: 'my',
@@ -188,12 +228,19 @@ describe( 'FontFamilyEditing', () => {
 			expect( editor.getData() ).to.equal( '<p>foo</p>' );
 			expect( editor.getData() ).to.equal( '<p>foo</p>' );
 		} );
 		} );
 
 
-		it( 'should convert fontFamily attribute to configured preset', () => {
+		it( 'should convert fontFamily attribute to configured simple preset', () => {
 			setModelData( doc, '<paragraph>f<$text fontFamily="Arial">o</$text>o</paragraph>' );
 			setModelData( doc, '<paragraph>f<$text fontFamily="Arial">o</$text>o</paragraph>' );
 
 
 			expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Arial;">o</span>o</p>' );
 			expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Arial;">o</span>o</p>' );
 		} );
 		} );
 
 
+		it( 'should convert fontFamily attribute to configured complex preset', () => {
+			setModelData( doc, '<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>' );
+		} );
+
 		it( 'should convert fontFamily attribute from user defined settings', () => {
 		it( 'should convert fontFamily attribute from user defined settings', () => {
 			setModelData( doc, '<paragraph>f<$text fontFamily="my">o</$text>o</paragraph>' );
 			setModelData( doc, '<paragraph>f<$text fontFamily="my">o</$text>o</paragraph>' );
 
 
@@ -208,6 +255,7 @@ describe( 'FontFamilyEditing', () => {
 					plugins: [ FontFamilyEditing, Paragraph ],
 					plugins: [ FontFamilyEditing, Paragraph ],
 					fontFamily: {
 					fontFamily: {
 						items: [
 						items: [
+							'Lucida Sans Unicode, Lucida Grande, sans-serif',
 							{
 							{
 								label: 'My other setting',
 								label: 'My other setting',
 								model: 'my-other',
 								model: 'my-other',
@@ -290,5 +338,25 @@ describe( 'FontFamilyEditing', () => {
 				'<p>b<span class="text-complex">a</span>z</p>'
 				'<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>'
+			);
+		} );
 	} );
 	} );
 } );
 } );

+ 18 - 14
packages/ckeditor5-font/tests/manual/font-family.html

@@ -1,41 +1,45 @@
 <div id="editor">
 <div id="editor">
-	<h2>Font <span class="text-big">Size</span> feature sample.</h2>
+	<h2>Font Family feature sample.</h2>
 
 
+	<h3>Arial, Helvetica, sans-serif: </h3>
 	<p>
 	<p>
-		Brownie sugar plum jelly beans. Brownie pudding liquorice jelly-o cotton candy sesame snaps powder. Chocolate cake pastry dragée dragée carrot cake. Caramels powder bear claw macaroon tiramisu. Soufflé gummies cheesecake apple pie. Candy jelly-o marzipan cake lollipop candy candy sweet. Pudding marshmallow dragée pastry cotton candy pudding caramels lemon drops. Sugar plum candy toffee donut brownie macaroon soufflé oat cake.
+		<span style="font-family: Arial, Helvetica, sans-serif;">Topping cheesecake cotton candy toffee cookie cookie lemon drops cotton candy. Carrot cake dessert jelly beans powder cake cupcake tiramisu pastry gummi bears.</span>
 	</p>
 	</p>
 
 
+	<h3>Courier New, Courier, monospace: </h3>
 	<p>
 	<p>
-		Icing powder ice cream tootsie roll cake wafer icing sweet roll. Dessert tiramisu tart. Macaroon marzipan dessert cheesecake. Pudding chupa chups liquorice sesame snaps cookie ice cream croissant. Liquorice pie cake pudding. Carrot cake gummi bears chocolate bar. Pie gummies lemon drops tiramisu sugar plum powder sesame snaps halvah lollipop.
+		<span style="font-family: 'Courier New', Courier, monospace;">Jujubes sweet wafer. Pastry cotton candy sweet muffin dessert cookie. Chocolate cake candy canes dragée wafer donut bear claw.</span>
 	</p>
 	</p>
 
 
+	<h3>Georgia, serif: </h3>
 	<p>
 	<p>
-		Powder donut sesame snaps jelly cake. Gummi bears sweet icing cotton candy oat cake dragée bonbon cotton candy. Caramels tootsie roll soufflé candy canes. Chocolate bar jelly-o apple pie. Pastry gingerbread chocolate powder pie cupcake sesame snaps. Chocolate cake topping donut chocolate cake dragée. Lemon drops powder jelly-o cake chupa chups lollipop soufflé.
+		<span style="font-family: Georgia, serif;">Chocolate bar candy fruitcake fruitcake. Lollipop gingerbread pudding sweet roll biscuit halvah marzipan croissant soufflé.</span>
 	</p>
 	</p>
 
 
+	<h3>Lucida Sans Unicode, Lucida Grande, sans-serif: </h3>
 	<p>
 	<p>
-		Halvah wafer ice cream dragée tart topping ice cream gummi bears. Donut donut lollipop donut gummies tiramisu. Cupcake cotton candy donut cake soufflé bear claw oat cake gingerbread. Sweet gummies bonbon jujubes gummies topping. Toffee macaroon caramels. Gummi bears ice cream gummi bears pudding ice cream lemon drops sweet roll icing jelly beans. Muffin cotton candy cheesecake. Chocolate bar fruitcake icing brownie croissant donut jelly chocolate bar jelly-o. Macaroon wafer sweet roll soufflé sweet roll apple pie.
+		<span style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">Chocolate muffin apple pie toffee caramels chupa chups bear claw cotton candy. Lollipop dragée fruitcake fruitcake apple pie chocolate bar candy.</span>
 	</p>
 	</p>
 
 
+	<h3>Tahoma, Geneva, sans-serif: </h3>
 	<p>
 	<p>
-		Chocolate bar pie cake chupa chups topping bear claw icing. Macaroon tootsie roll chocolate chupa chups chocolate bar candy canes bonbon jelly beans. Tootsie roll danish topping chocolate bar. Fruitcake cheesecake jelly-o. Chocolate cake muffin candy canes marzipan. Sesame snaps lollipop sweet bear claw donut dessert apple pie. Chocolate bar cookie cake dessert powder biscuit dragée.
+		<span style="font-family: Tahoma, Geneva, sans-serif;">Brownie biscuit donut gummies pie cheesecake. Dessert ice cream lemon drops candy soufflé cookie lemon drops. Chupa chups powder muffin sugar plum gummi bears fruitcake.</span>
 	</p>
 	</p>
 
 
+	<h3>Trebuchet MS, Helvetica, sans-serif: </h3>
 	<p>
 	<p>
-		Gingerbread cupcake candy powder. Chocolate cake chocolate bar marzipan lollipop. Tootsie roll chocolate cake marzipan dragée danish gummi bears gummies jelly beans. Chocolate bar candy toffee tart marshmallow cupcake. Oat cake gingerbread cheesecake toffee. Muffin chupa chups pastry. Muffin lemon drops danish dragée cake pastry pie powder. Lollipop bear claw cake halvah marshmallow liquorice.
+		<span style="font-family: 'Trebuchet MS', Helvetica, sans-serif;">Jujubes candy lollipop. Tootsie roll cookie chocolate gummies cupcake sweet fruitcake oat cake danish.</span>
 	</p>
 	</p>
 
 
-	<ul>
-		<li>It's a list item with <span class="text-tiny">tiny</span> text</li>
-		<li>It's a list item with <span class="text-small">small</span> text</li>
-		<li>It's a list item with <span class="text-big">big</span> text</li>
-		<li>It's a list item with <span class="text-huge">huge</span> text</li>
-	</ul>
+	<h3>Verdana, Geneva, sans-serif: </h3>
+	<p>
+		<span style="font-family: Verdana, Geneva, sans-serif;">Danish brownie powder pie danish. Topping dragée oat cake caramels. Chocolate bar bonbon pastry apple pie icing chocolate danish carrot cake gummies.</span>
+	</p>
 
 
 	<figure class="image">
 	<figure class="image">
 		<img src="sample.jpg" alt="CKEditor logo"/>
 		<img src="sample.jpg" alt="CKEditor logo"/>
 		<figcaption>
 		<figcaption>
-			Sample image with <span class="text-big">changed font</span> caption.
+			Sample image with <span style="font-family: Verdana, Geneva, sans-serif;">changed font</span> caption.
 		</figcaption>
 		</figcaption>
 	</figure>
 	</figure>
 </div>
 </div>