Merge pull request #32 from ckeditor/i/5886

Other: Added font color and font background color features and removed the highlight feature. Closes ckeditor/ckeditor5#5886.

MAJOR BREAKING CHANGE: The document editor build does not contain the highlight feature anymore. It was replaced with the font color and font background color features. You should install the highlight feature back in case you expect that the highlight feature was already used by the users of the editor. Otherwise, the markup created in the past by that feature will be filtered out the next time it is loaded to the editor.

sample/index.html

@@ -5,7 +5,7 @@
 	<title>CKEditor 5 – document editor build – development sample</title>
 	<style>
 		body {
-			max-width: 900px;
+			max-width: 1000px;
 			margin: 20px auto;
 		}
 	</style>

src/ckeditor.js

@@ -10,7 +10,8 @@ import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
 import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
 import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
 import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
-import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
+import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
 import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
 import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
@@ -44,7 +45,8 @@ DecoupledEditor.builtinPlugins = [
 	Alignment,
 	FontSize,
 	FontFamily,
-	Highlight,
+	FontColor,
+	FontBackgroundColor,
 	UploadAdapter,
 	Autoformat,
 	Bold,
@@ -77,14 +79,15 @@ DecoupledEditor.defaultConfig = {
 		items: [
 			'heading',
 			'|',
-			'fontsize',
 			'fontfamily',
+			'fontsize',
+			'fontColor',
+			'fontBackgroundColor',
 			'|',
 			'bold',
 			'italic',
 			'underline',
 			'strikethrough',
-			'highlight',
 			'|',
 			'alignment',
 			'|',

tests/ckeditor.js

@@ -192,6 +192,7 @@ describe( 'DecoupledEditor build', () => {
 
 				editor.setData( data );
 				expect( editor.getData() ).to.equal( data );
+				expect( editor.model.document.selection.getAttribute( 'fontSize' ) ).to.equal( 'big' );
 			} );
 
 			it( 'font family works', () => {
@@ -199,13 +200,23 @@ describe( 'DecoupledEditor build', () => {
 
 				editor.setData( data );
 				expect( editor.getData() ).to.equal( data );
+				expect( editor.model.document.selection.getAttribute( 'fontFamily' ) ).to.equal( 'Georgia' );
 			} );
 
-			it( 'highlight works', () => {
-				const data = '<p><mark class="marker-green">foo</mark></p>';
+			it( 'font background color works', () => {
+				const data = '<p><span style="background-color:hsl(60,75%,60%);">foo</span></p>';
 
 				editor.setData( data );
 				expect( editor.getData() ).to.equal( data );
+				expect( editor.model.document.selection.getAttribute( 'fontBackgroundColor' ) ).to.equal( 'hsl(60,75%,60%)' );
+			} );
+
+			it( 'font color works', () => {
+				const data = '<p><span style="color:hsl(0,75%,60%);">foo</span></p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+				expect( editor.model.document.selection.getAttribute( 'fontColor' ) ).to.equal( 'hsl(0,75%,60%)' );
 			} );
 
 			it( 'alignment works', () => {