Merge pull request #16 from ckeditor/t/ckeditor5-highlight/17

Fix: Ensured that font size's and font family's markup is always "outside" markup of other typical inline features, especially those changing background color. Thanks to that, the entire area of styled text will be correctly colored. Closes ckeditor/ckeditor5-highlight#17.

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@ckeditor/ckeditor5-cloud-services": "^10.0.0",
     "@ckeditor/ckeditor5-editor-classic": "^10.0.0",
+    "@ckeditor/ckeditor5-highlight": "^10.0.0",
     "@ckeditor/ckeditor5-paragraph": "^10.0.0",
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",

src/fontfamily/utils.js

@@ -71,7 +71,8 @@ function generateFontPreset( fontDefinition ) {
 			name: 'span',
 			styles: {
 				'font-family': cssFontNames
-			}
+			},
+			priority: 5
 		}
 	};
 }

src/fontsize/utils.js

@@ -29,31 +29,35 @@ const namedPresets = {
 		model: 'tiny',
 		view: {
 			name: 'span',
-			classes: 'text-tiny'
+			classes: 'text-tiny',
+			priority: 5
 		}
 	},
 	small: {
 		title: 'Small',
 		model: 'small',
 		view: {
 			name: 'span',
-			classes: 'text-small'
+			classes: 'text-small',
+			priority: 5
 		}
 	},
 	big: {
 		title: 'Big',
 		model: 'big',
 		view: {
 			name: 'span',
-			classes: 'text-big'
+			classes: 'text-big',
+			priority: 5
 		}
 	},
 	huge: {
 		title: 'Huge',
 		model: 'huge',
 		view: {
 			name: 'span',
-			classes: 'text-huge'
+			classes: 'text-huge',
+			priority: 5
 		}
 	}
 };
@@ -108,7 +112,8 @@ function generatePixelPreset( size ) {
 			name: 'span',
 			styles: {
 				'font-size': `${ size }px`
-			}
+			},
+			priority: 5
 		}
 	};
 }

tests/fontfamily/utils.js

@@ -56,7 +56,8 @@ describe( 'FontFamily utils', () => {
 							name: 'span',
 							styles: {
 								'font-family': 'Arial'
-							}
+							},
+							priority: 5
 						}
 					},
 					{
@@ -66,7 +67,8 @@ describe( 'FontFamily utils', () => {
 							name: 'span',
 							styles: {
 								'font-family': '\'Comic Sans MS\', sans-serif'
-							}
+							},
+							priority: 5
 						}
 					},
 					{
@@ -76,7 +78,8 @@ describe( 'FontFamily utils', () => {
 							name: 'span',
 							styles: {
 								'font-family': '\'Lucida Console\', \'Courier New\', Courier, monospace'
-							}
+							},
+							priority: 5
 						}
 					}
 				] );

tests/fontsize/fontsizeui.js

@@ -203,11 +203,11 @@ describe( 'FontSizeUI', () => {
 			it( 'does not alter normalizeOptions() internals', () => {
 				const options = normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ] );
 				expect( options ).to.deep.equal( [
-					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny' } },
-					{ title: 'Small', model: 'small', view: { name: 'span', classes: 'text-small' } },
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny', priority: 5 } },
+					{ title: 'Small', model: 'small', view: { name: 'span', classes: 'text-small', priority: 5 } },
 					{ title: 'Default', model: undefined },
-					{ title: 'Big', model: 'big', view: { name: 'span', classes: 'text-big' } },
-					{ title: 'Huge', model: 'huge', view: { name: 'span', classes: 'text-huge' } }
+					{ title: 'Big', model: 'big', view: { name: 'span', classes: 'text-big', priority: 5 } },
+					{ title: 'Huge', model: 'huge', view: { name: 'span', classes: 'text-huge', priority: 5 } }
 				] );
 			} );
 

tests/fontsize/integration.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import FontSize from '../../src/fontsize';
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
+
+describe( 'FontSize - integration', () => {
+	let editor, model, element;
+
+	beforeEach( () => {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		return ClassicTestEditor
+			.create( element, {
+				plugins: [ Highlight, Paragraph, FontSize ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				model = editor.model;
+			} );
+	} );
+
+	afterEach( () => {
+		element.remove();
+
+		return editor.destroy();
+	} );
+
+	describe( 'compatibility with highlight', () => {
+		it( 'the view "span" element should outer wrap the text', () => {
+			setModelData( model, '<paragraph>Foo [Bar] Baz.</paragraph>' );
+
+			editor.execute( 'highlight', { value: 'yellowMarker' } );
+
+			expect( getViewData( editor.editing.view ) ).to.equal(
+				'<p>Foo {<mark class="marker-yellow">Bar</mark>} Baz.</p>'
+			);
+
+			editor.execute( 'fontSize', { value: 'huge' } );
+
+			expect( getViewData( editor.editing.view ) ).to.equal(
+				'<p>Foo {<span class="text-huge"><mark class="marker-yellow">Bar</mark></span>} Baz.</p>'
+			);
+		} );
+	} );
+} );

tests/fontsize/utils.js

@@ -28,23 +28,23 @@ describe( 'FontSizeEditing Utils', () => {
 		describe( 'named presets', () => {
 			it( 'should return defined presets', () => {
 				expect( normalizeOptions( [ 'tiny', 'small', 'default', 'big', 'huge' ] ) ).to.deep.equal( [
-					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny' } },
-					{ title: 'Small', model: 'small', view: { name: 'span', classes: 'text-small' } },
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', classes: 'text-tiny', priority: 5 } },
+					{ title: 'Small', model: 'small', view: { name: 'span', classes: 'text-small', priority: 5 } },
 					{ title: 'Default', model: undefined },
-					{ title: 'Big', model: 'big', view: { name: 'span', classes: 'text-big' } },
-					{ title: 'Huge', model: 'huge', view: { name: 'span', classes: 'text-huge' } }
+					{ title: 'Big', model: 'big', view: { name: 'span', classes: 'text-big', priority: 5 } },
+					{ title: 'Huge', model: 'huge', view: { name: 'span', classes: 'text-huge', priority: 5 } }
 				] );
 			} );
 		} );
 
 		describe( 'numerical presets', () => {
 			it( 'should return generated presets', () => {
 				expect( normalizeOptions( [ '10', 12, 'default', '14.1', 18.3 ] ) ).to.deep.equal( [
-					{ title: '10', model: 10, view: { name: 'span', styles: { 'font-size': '10px' } } },
-					{ title: '12', model: 12, view: { name: 'span', styles: { 'font-size': '12px' } } },
+					{ title: '10', model: 10, view: { name: 'span', styles: { 'font-size': '10px' }, priority: 5 } },
+					{ title: '12', model: 12, view: { name: 'span', styles: { 'font-size': '12px' }, priority: 5 } },
 					{ title: 'Default', model: undefined },
-					{ title: '14.1', model: 14.1, view: { name: 'span', styles: { 'font-size': '14.1px' } } },
-					{ title: '18.3', model: 18.3, view: { name: 'span', styles: { 'font-size': '18.3px' } } }
+					{ title: '14.1', model: 14.1, view: { name: 'span', styles: { 'font-size': '14.1px' }, priority: 5 } },
+					{ title: '18.3', model: 18.3, view: { name: 'span', styles: { 'font-size': '18.3px' }, priority: 5 } }
 				] );
 			} );
 		} );