Merge pull request #659 from ckeditor/t/646

Bug fix for throwing error in console where style combo was open

CHANGES.md

@@ -12,6 +12,7 @@ Fixed Issues:
 * [#545](https://github.com/ckeditor/ckeditor-dev/issues/545): [Edge] Fixed: Error thrown when pressing the Select All button in a [Source Mode](http://ckeditor.com/addon/sourcearea).
 * [#582](https://github.com/ckeditor/ckeditor-dev/issues/582): Fixed: Double slash in path to stylesheet needed by [Table Selection](http://ckeditor.com/addon/tableselection) plugin. Thanks to [Marius Dumitru Florea](https://github.com/mflorea)!
 * [#491](https://github.com/ckeditor/ckeditor-dev/issues/491): Fixed: Unnecessary dependency on [Editor Toolbar](http://ckeditor.com/addon/toolbar) plugin inside [Notification](http://ckeditor.com/addon/notification) plugin.
+* [#646](https://github.com/ckeditor/ckeditor-dev/issues/646): Fixed: Error thrown into browser's console after opening [Styles Combo](http://ckeditor.com/addon/stylescombo) plugin menu in the editor without selection.
 * [#501](https://github.com/ckeditor/ckeditor-dev/issues/501): Fixed: Double click does not open dialog for modifying anchors inserted via [Link](http://ckeditor.com/addon/link) plugin.
 * [#9780](https://dev.ckeditor.com/ticket/9780): [IE8-9] Fixed: Clicking inside empty [read-only](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) editor throws an error.
 * [#16820](https://dev.ckeditor.com/ticket/16820): [IE10] Fixed: Clicking below single horizontal rule throws an error.

plugins/stylescombo/plugin.js

@@ -141,7 +141,8 @@
 
 				onOpen: function() {
 					var selection = editor.getSelection(),
-						element = selection.getSelectedElement(),
+						// When editor is focused but is returned `null` as selected element, then return editable (#646);
+						element = selection.getSelectedElement() || editor.editable(),
 						elementPath = editor.elementPath( element ),
 						counter = [ 0, 0, 0, 0 ];
 

tests/plugins/stylescombo/manual/stylewithnoselection.html

@@ -0,0 +1,28 @@
+<textare id="editor">
+	Hello World
+</textare>
+
+<script>
+	if ( bender.tools.env.mobile ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.replace( 'editor', {
+		on: {
+			'pluginsLoaded': function( evt ) {
+				var editor = evt.editor;
+
+				editor.addCommand( 'removeSelection', {
+					exec: function( editor ) {
+						editor.getSelection().removeAllRanges();
+					}
+				} );
+
+				editor.ui.addButton( 'removeSelection', {
+					label: 'Remove Selection',
+					command: 'removeSelection'
+				} );
+			}
+		}
+	} );
+</script>

tests/plugins/stylescombo/manual/stylewithnoselection.md

@@ -0,0 +1,11 @@
+@bender-ui: collapsed
+@bender-tags: bug, 4.7.2, 646
+@bender-ckeditor-plugins: wysiwygarea, toolbar, stylescombo
+
+1. Open browser console.
+1. Press empty button in toolbar. It's located on the right next to the styles' list.
+1. Open styles' list and check if there anyting appear in the console.
+
+**Expected:** There is no error in the console.
+
+**Unexpected:** Error is logged in console.

tests/plugins/stylescombo/stylescombo.js

@@ -60,6 +60,42 @@
 				assert.areSame( '<h2 style="font-style:italic">A</h2><p>X<big>Y</big>Z</p>',
 					bot.editor.dataProcessor.toHtml( '<h2 style="font-style:italic">A</h2><p>X<big>Y</big>Z</p>' ) );
 			} );
+		},
+
+		// #646
+		'test for applying style without selection': function() {
+			bender.editorBot.create( {
+				name: 'style_error',
+				config: {
+					removePlugins: 'format,font'
+				}
+			}, function( bot ) {
+				var editor = bot.editor;
+				var selection = editor.getSelection();
+
+				// During opening combo selection is modified, what force selection to be at the beginning of editable.
+				// Stub resets native selection before every execution of `getNative`, to properly simulate error case.
+				var stub = sinon.stub( CKEDITOR.dom.selection.prototype, 'getNative', function() {
+					if ( typeof window.getSelection != 'function' ) {
+						this.document.$.selection.empty();
+						return this.document.$.selection;
+					}
+					this.document.getWindow().$.getSelection().removeAllRanges();
+					return this.document.getWindow().$.getSelection();
+
+				} );
+
+				selection.removeAllRanges();
+				selection.reset();
+				try {
+					bot.combo( 'Styles', function() {
+						assert.pass();
+					} );
+				} finally {
+					stub.restore();
+				}
+
+			} );
 		}
 	} );
-} )();
+} )();