Font feature should use lower priorities for their elements

[Reinmar]

The common conflict is underline + font color. Underline must be used inside font color because otherwise, the underline will not match the font color:

Right now it works in the editor just fine:

<u> is rendered inside <span color>. But this is just a coincident because u is sorted alphabetically after span.

We should set font color's priority to a value between 6-9 (higher than link, lower than normal styles)... 7? :D

I'm not sure about background color. I think it should have the same priority so both spans are nicely merged (<span style=color:xxx; background-color: xxx>). The remaining question is – do we change the priority for font-size and font-family?

I guess we must do that because of this:

[Reinmar]

cc @oleq

[Reinmar]

Actually, FontSizeEditing and FontFamilyEditing use priority 5 already. Which, I think, is wrong, because it should not collide with links. Links should be always outside all other elements.

[oleq]

Checked and it looks like in the screenshot below.

<u> is rendered inside <span color>. But this is just a coincident because u is sorted alphabetically after span.

If that's true, let's have fixed priorities for both.

Actually, FontSizeEditing and FontFamilyEditing use priority 5 already. Which, I think, is wrong, because it should not collide with links. Links should be always outside all other elements.

It looks like it's OK now but maybe I'm missing something?

<div id="editor">
	<p>
		<u>
			<span style="color:white;background-color:red;">
				underline
			</span>
		</u>
		<a href="ckeditor.com">
			<span style="color:white;background-color:red;">
				a link
			</span>
		</a>
		<span style="color:white;background-color:red;font-family: 'Courier New', Courier, monospace;">
			font family
		</span>
		<span style="color:white;background-color:red;font-size: 32px;">
			font size
		</span>
		<span style="color:white;background-color:red;font-family: 'Courier New', Courier, monospace;font-size: 32px;">
			font family and size
		</span>
		<a href="ckeditor.com">
			<span style="color:white;background-color:red;font-family: 'Courier New', Courier, monospace;font-size: 32px;">
					font family, size in link
			</span>
		</a>
	</p>
</div>

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md.
 */

/* globals console, window, document */

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import FontColor from '../../src/fontcolor';
import FontBackgroundColor from '../../src/fontbackgroundcolor';
import FontSize from '../../src/fontsize';
import FontFamily from '../../src/fontfamily';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [
			ArticlePluginSet,
			Underline,
			FontColor,
			FontFamily,
			FontSize,
			FontBackgroundColor
		],
		toolbar: [
			'heading',
			'|',
			'fontColor',
			'fontBackgroundColor',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'blockQuote',
			'undo',
			'redo'
		],
		fontSize: { options: [ 10, 12, 14, 'default', 18, 20, 22, 32 ] }
	} )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );

[jodator]

We should have some manual / automatic test for all attributes elements priorities. There are handful of them and I'm worried that we might loose track of all of them.

Custom priorities are used by:

• font color: 5
• font family: 5
• font size: 5
• link: 5
• bold, itellic, underline, etc default: 10
• mention: 20