Merge pull request #1025 from ckeditor/t/1008

Highlight colors in color panel

CHANGES.md

@@ -25,6 +25,7 @@ Fixed Issues:
 * [#1014](https://github.com/ckeditor/ckeditor-dev/issues/1014): Fixed: [Table Tools](https://ckeditor.com/addon/tabletools) cell properties dialog is now [ACF](http://docs.ckeditor.com/#!/guide/dev_acf) aware - it not possible to change cell width/height if corresponding styles are disabled.
 * [#877](https://github.com/ckeditor/ckeditor-dev/issues/877): Fixed: Lists with custom bullets with exotic characters crashes editor when [pasted from Word](http://ckeditor.com/addon/pastefromword).
 * [#605](https://github.com/ckeditor/ckeditor-dev/issues/605): Fixed: Inline widgets do not preserve trailing spaces.
+* [#1008](https://github.com/ckeditor/ckeditor-dev/issues/1008): Fixed: Shorthand hex colors from [colorButton_colors](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-colorButton_colors) are not correctly highlighted in [Color Button](http://ckeditor.com/addon/colorbutton) _text color_ / _background color_ panel.
 
 Other Changes:
 

plugins/colorbutton/plugin.js

@@ -335,7 +335,8 @@ CKEDITOR.plugins.add( 'colorbutton', {
 		 * @returns {String}
 		 */
 		function normalizeColor( color ) {
-			return CKEDITOR.tools.convertRgbToHex( color || '' ).replace( /#/, '' ).toLowerCase();
+			// Replace 3-character hexadecimal notation with a 6-character hexadecimal notation (#1008).
+			return CKEDITOR.tools.normalizeHex( '#' + CKEDITOR.tools.convertRgbToHex( color || '' ) ).replace( /#/g, '' );
 		}
 	}
 } );

tests/plugins/colorbutton/highlightedcolor.js

@@ -0,0 +1,87 @@
+/* bender-tags: editor, colorbutton, 1008 */
+/* bender-ckeditor-plugins: colorbutton,toolbar,wysiwygarea */
+
+( function() {
+	'use strict';
+
+	bender.editor = true;
+
+	bender.editor = {
+		config: {
+			colorButton_colors: '999,000,DDD,FFF,A1a1A1,00F',
+			language: 'en'
+		}
+	};
+
+	function assertSelectedColor( colorButton, colorName, colorValue, colorIndex ) {
+		assert.areSame( 'true', colorButton._.panel.getBlock( colorButton._.id ).element.find( 'a.cke_colorbox' ).getItem( colorIndex ).getAttribute( 'aria-selected' ) );
+		assert.areSame( colorName, colorButton._.panel.getBlock( colorButton._.id ).element.find( 'a.cke_colorbox' ).getItem( colorIndex ).$.title );
+		assert.areSame( colorValue, colorButton._.panel.getBlock( colorButton._.id ).element.find( 'a.cke_colorbox' ).getItem( colorIndex ).getAttribute( 'data-value' ) );
+	}
+
+	bender.test( {
+		'test highlighted color with background color button': function() {
+			var editor = this.editor,
+				bgColorBtn = editor.ui.get( 'BGColor' );
+
+			resume( function() {
+				assertSelectedColor( bgColorBtn, 'Dark Gray', '999', 0 );
+			} );
+
+			bender.tools.selection.setWithHtml( editor, '<h1 style="background: #999999">{Moo}</h1>' );
+			bgColorBtn.click( editor );
+
+			wait();
+		},
+
+		'test highlighted color with text color button': function() {
+			var editor = this.editor,
+				txtColorBtn = editor.ui.get( 'TextColor' );
+
+			resume( function() {
+				assertSelectedColor( txtColorBtn, 'Black', '000', 1 );
+			} );
+
+			bender.tools.selection.setWithHtml( editor, '<h1 style="color: #000000;">{Moo}</h1>' );
+			txtColorBtn.click( editor );
+
+			wait();
+		},
+
+		'test highlighted color with background and text color button': function() {
+			var editor = this.editor,
+				txtColorBtn = editor.ui.get( 'TextColor' ),
+				bgColorBtn = editor.ui.get( 'BGColor' );
+
+			resume( function() {
+				assertSelectedColor( bgColorBtn, 'Light Gray', 'DDD', 2 );
+
+				txtColorBtn.click( editor );
+				assertSelectedColor( txtColorBtn, 'White', 'FFF', 3 );
+			} );
+
+			bender.tools.selection.setWithHtml( editor, '<h1 style="color: #ffffff; background: #dddddd">{Moo}</h1>' );
+			bgColorBtn.click( editor );
+
+			wait();
+		},
+
+		'test highlighted various color with background and text color button': function() {
+			var editor = this.editor,
+				txtColorBtn = editor.ui.get( 'TextColor' ),
+				bgColorBtn = editor.ui.get( 'BGColor' );
+
+			resume( function() {
+				assertSelectedColor( bgColorBtn, 'A1a1A1', 'A1a1A1', 4 );
+
+				txtColorBtn.click( editor );
+				assertSelectedColor( txtColorBtn, 'Blue', '00F', 5 );
+			} );
+
+			bender.tools.selection.setWithHtml( editor, '<h1 style="color: #0000FF; background: #a1a1a1">{Moo}</h1>' );
+			bgColorBtn.click( editor );
+
+			wait();
+		}
+	} );
+} )();

tests/plugins/colorbutton/manual/highlightedcolor.html

@@ -0,0 +1,26 @@
+<p>Editor 1</p>
+<textarea cols="80" id="editor1" name="editor1" rows="10">
+	<p>
+		<span style="color:#dddddd"><span style="background-color:#000000">Lorem</span></span>
+		<span style="color:#ffffff"><span style="background-color:#999999">ipsum</span></span>
+		<span style="color:#999999"><span style="background-color:#ffffff">dolor</span></span>
+		<span style="color:#000000"><span style="background-color:#dddddd">sit.</span></span>
+	</p>
+</textarea>
+
+<p>Editor 2</p>
+<textarea cols="80" id="editor2" name="editor2" rows="10">
+	<p>
+		<span style="color:#dDdDdd"><span style="background-color:#000">Lorem</span></span>
+		<span style="color:#ffFFff"><span style="background-color:#999999">ipsum</span></span>
+		<span style="color:#999"><span style="background-color:#FFFFFF">dolor</span></span>
+		<span style="color:#000000"><span style="background-color:#ddd">sit.</span></span>
+	</p>
+</textarea>
+
+<script>
+	CKEDITOR.addCss( 'p { font-size: 24px; }' );
+	CKEDITOR.replace( 'editor1' );
+
+	CKEDITOR.replace( 'editor2', { allowedContent: true }  );
+</script>

tests/plugins/colorbutton/manual/highlightedcolor.md

@@ -0,0 +1,15 @@
+@bender-tags: 4.8.0, bug, 1008
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, colorbutton
+
+** Scenario (both editors): **
+
+1. Select each word or put caret in each word and click `Text Color`/`Background Color` button.
+
+### Expected result:
+
+Proper text/background color should be highlighted in color panel.
+
+### Unexpected result:
+
+Text/background color in color panel is not highlighted.