From 46ed4222f15aeeaeb062f9eb1c496294fe3d6f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= <p.smyrek@cksource.com>
Date: Fri, 13 Nov 2020 13:43:37 +0100
Subject: [PATCH] The `supportAllValues` for `font-size` doesn't work with
 nested elements

---
 .../src/fontsize/fontsizeediting.js           |  5 ++-
 .../tests/fontfamily/fontfamilyediting.js     | 10 ++++++
 .../tests/fontsize/fontsizeediting.js         | 10 ++++++
 .../tests/manual/tickets/8233/1.html          |  5 +++
 .../tests/manual/tickets/8233/1.js            | 34 +++++++++++++++++++
 .../tests/manual/tickets/8233/1.md            |  7 ++++
 6 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 packages/ckeditor5-font/tests/manual/tickets/8233/1.html
 create mode 100644 packages/ckeditor5-font/tests/manual/tickets/8233/1.js
 create mode 100644 packages/ckeditor5-font/tests/manual/tickets/8233/1.md

diff --git a/packages/ckeditor5-font/src/fontsize/fontsizeediting.js b/packages/ckeditor5-font/src/fontsize/fontsizeediting.js
index 2c4bfd6ba53..dcd58d5f4ed 100644
--- 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
index 6ea3850f7aa..0a9447b01ca 100644
--- 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
index a358825435c..ecedb922a58 100644
--- 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
new file mode 100644
index 00000000000..744ed29cad4
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..33d89241820
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..e17629eae42
--- /dev/null
+++ 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.