Merge pull request #8454 from ckeditor/i/8233

Fix (font): Fixed the [`fontSize.supportAllValues`](https://ckeditor.com/docs/ckeditor5/latest/api/module_font_fontsize-FontSizeConfig.html#member-supportAllValues) configuration for the [`FontSize`](https://ckeditor.com/docs/ckeditor5/latest/api/module_font_fontsize-FontSize.html) plugin to work with nested elements. Closes #8233.
ckeditor · Nov 16, 2020 · 180415e · 180415e
2 parents 1f5d187 + 46ed422
commit 180415e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 1 deletion.
diff --git a/packages/ckeditor5-font/src/fontsize/fontsizeediting.js b/packages/ckeditor5-font/src/fontsize/fontsizeediting.js
@@ -131,7 +131,10 @@ export default class FontSizeEditing extends Plugin {
 				value: viewElement => viewElement.getStyle( 'font-size' )
 			},
 			view: {
-				name: 'span'
+				name: 'span',
+				styles: {
+					'font-size': /.*/
+				}
 			}
 		} );
 	}

diff --git a/packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js b/packages/ckeditor5-font/tests/fontfamily/fontfamilyediting.js
@@ -130,6 +130,16 @@ describe( 'FontFamilyEditing', () => {
 
 					expect( editor.getData() ).to.equal( data );
 				} );
+
+				it( 'should convert from a nested element', () => {
+					const data = '<p>f<span><span><span><span style="font-family: Arial, sans-serif">o</span></span></span></span>o</p>';
+
+					editor.setData( data );
+
+					expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontFamily="Arial, sans-serif">o</$text>o</paragraph>' );
+
+					expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Arial, sans-serif;">o</span>o</p>' );
+				} );
 			} );
 		} );
 	} );

diff --git a/packages/ckeditor5-font/tests/fontsize/fontsizeediting.js b/packages/ckeditor5-font/tests/fontsize/fontsizeediting.js
@@ -111,6 +111,16 @@ describe( 'FontSizeEditing', () => {
 
 					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
 				} );
+
+				it( 'should convert from a nested element', () => {
+					const data = '<p>f<span><span><span><span style="font-size: 18px">o</span></span></span></span>o</p>';
+
+					editor.setData( data );
+
+					expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18px">o</$text>o</paragraph>' );
+
+					expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
+				} );
 			} );
 
 			it( 'should throw an error if used with default configuration of the plugin', () => {

diff --git a/packages/ckeditor5-font/tests/manual/tickets/8233/1.html b/packages/ckeditor5-font/tests/manual/tickets/8233/1.html
@@ -0,0 +1,5 @@
+<div id="editor">
+	<p>
+		<span style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"><span style="font-size: 28px">LUCIDA, 28px</span></span>
+	</p>
+</div>
diff --git a/packages/ckeditor5-font/tests/manual/tickets/8233/1.js b/packages/ckeditor5-font/tests/manual/tickets/8233/1.js
@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontSize from '../../../../src/fontsize';
+import FontFamily from '../../../../src/fontfamily';
+
+const config = {
+	plugins: [ ArticlePluginSet, FontSize, FontFamily ],
+	toolbar: [
+		'heading', '|', 'fontFamily', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+	],
+	fontSize: {
+		options: [ 10, 12, 14, 'default', 18, 20, 22 ],
+		supportAllValues: true
+	},
+	fontFamily: {
+		supportAllValues: true
+	}
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), config )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( error => {
+		console.error( error.stack );
+	} );
diff --git a/packages/ckeditor5-font/tests/manual/tickets/8233/1.md b/packages/ckeditor5-font/tests/manual/tickets/8233/1.md
@@ -0,0 +1,7 @@
+## The supportAllValues doesn't work with nested elements [#8233](https://github.com/ckeditor/ckeditor5/issues/8233)
+
+1. Open CKEditor Inspector (if not already opened) and go to `View` tab.
+
+**Expected result**: the `<span>` element has both `font-family` **and** `font-size` styles.
+
+**Unexpected result**: the `<span>` element lost nested `font-size` style.