Merge pull request #1383 from ckeditor/t/1274

Balloon toolbar cssSelector should also consider selected element (if any)

CHANGES.md

@@ -9,6 +9,7 @@ New Features:
 
 Fixed Issues:
 
+* [#1274](https://github.com/ckeditor/ckeditor-dev/issues/1274): Fixed: [Balloon Toolbar](https://ckeditor.com/cke4/addon/balloontoolbar) does not match a single selected image using [`contextDefinition.cssSelector`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.balloontoolbar.contextDefinition-property-cssSelector) matcher.
 * [#1232](https://github.com/ckeditor/ckeditor-dev/issues/1232): Fixed: [Balloon Toolbar](https://ckeditor.com/cke4/addon/balloontoolbar) buttons should be registered as focusable elements.
 * [#1342](https://github.com/ckeditor/ckeditor-dev/issues/1342): Fixed: [Balloon Toolbar](https://ckeditor.com/cke4/addon/balloontoolbar) should be re-positioned after a [change](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.editor-event-change) event.
 * [#1048](https://github.com/ckeditor/ckeditor-dev/issues/1048): Fixed: [Balloon Panel](https://ckeditor.com/cke4/addon/balloonpanel) is not properly positioned when margin added to its non-static parent.

plugins/balloontoolbar/plugin.js

@@ -420,7 +420,8 @@
 			if ( !selection ) {
 				selection = this.editor.getSelection();
 
-				// Shrink the selection so that we're ensured innermost elements are available.
+				// Shrink the selection so that we're ensured innermost elements are available, so that path for
+				// selection like `foo [<em>bar</em>] baz` also contains `em` element.
 				CKEDITOR.tools.array.forEach( selection.getRanges(), function( range ) {
 					range.shrink( CKEDITOR.SHRINK_ELEMENT, true );
 				} );
@@ -468,6 +469,14 @@
 
 			// Match element selectors.
 			if ( path ) {
+				// First check the outermost element (if any was selected), since the selection got shrinked
+				// it would be otherwise skipped (#1274).
+				var selectedElem = selection.getSelectedElement();
+
+				if ( selectedElem && !selectedElem.isReadOnly() ) {
+					matchEachContext( this._contexts, elementsMatcher, selectedElem );
+				}
+
 				for ( var i = 0; i < path.elements.length; i++ ) {
 					var curElement = path.elements[ i ];
 					// Skip non-editable elements (e.g. widget internal structure).

tests/plugins/balloontoolbar/context/cssselector.js

@@ -88,6 +88,23 @@
 			contextTools._assertToolbarVisible( false, context );
 		},
 
+		// #1274
+		'test matching images': function() {
+			var context = this._getContextStub( 'img' );
+
+			this.editorBot.setHtmlWithSelection( '<p>foo [<img src="%BASE_PATH%_assets/lena.jpg" alt="">] bar</p>' );
+
+			contextTools._assertToolbarVisible( true, context );
+		},
+
+		'test matching link': function() {
+			var context = this._getContextStub( 'a' );
+
+			this.editorBot.setHtmlWithSelection( '<p>foo [<a href="#">bar</a>] baz</p>' );
+
+			contextTools._assertToolbarVisible( true, context );
+		},
+
 		/*
 		 * @param {String} selector A selector to be used as `options.elements`.
 		 * @returns {CKEDITOR.plugins.balloontoolbar.context} Context instance with `selector` used as a CSS selector.

tests/plugins/balloontoolbar/context/manual/imgselect.html

@@ -0,0 +1,35 @@
+<textarea id="editor1" cols="10" rows="10">
+	<p>Sample image:</p>
+
+	<img src="%BASE_PATH%_assets/lena.jpg" alt="Sample image">
+</textarea>
+
+<div id="editor2" contenteditable="true" style="width: 500px">
+	<p>Sample image:</p>
+
+	<img src="%BASE_PATH%_assets/lena.jpg" alt="Sample image">
+</div>
+
+<script>
+	if ( CKEDITOR.env.ie && CKEDITOR.env.version === 8 ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.disableAutoInline = true;
+
+	var config = {
+		height: 300,
+		width: 500,
+		on: {
+			instanceReady: function( evt ) {
+				evt.editor.balloonToolbars.create( {
+					buttons: 'Link,Unlink',
+					cssSelector: 'img'
+				} );
+			}
+		}
+	};
+
+	CKEDITOR.replace( 'editor1', config );
+	CKEDITOR.inline( 'editor2', config );
+</script>

tests/plugins/balloontoolbar/context/manual/imgselect.md

@@ -0,0 +1,15 @@
+@bender-ui: collapsed
+@bender-tags: 4.8.1, bug, 1274, balloontoolbar
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, floatingspace, balloontoolbar, sourcearea, link, elementspath, image
+
+# Image Selection
+
+1. Select an image.
+
+## Expected
+
+Toolbar is shown.
+
+## Unexpected
+
+No toolbar is not visible.