Merge pull request #1019 from ckeditor/t/1018

Fix: Placeholder text now will not be hidden if the element has only ui elements. Closes #1018.

Author: Piotr Jasiun

src/view/placeholder.js

@@ -110,15 +110,19 @@ function updateSinglePlaceholder( element, checkFunction ) {
 		return;
 	}
 
+	// Element is empty for placeholder purposes when it has no children or only ui elements.
+	// This check is taken from `view.ContainerElement#getFillerOffset`.
+	const isEmptyish = !Array.from( element.getChildren() ).some( element => !element.is( 'uiElement' ) );
+
 	// If element is empty and editor is blurred.
-	if ( !document.isFocused && !element.childCount ) {
+	if ( !document.isFocused && isEmptyish ) {
 		element.addClass( 'ck-placeholder' );
 
 		return;
 	}
 
 	// It there are no child elements and selection is not placed inside element.
-	if ( !element.childCount && anchor && anchor.parent !== element ) {
+	if ( isEmptyish && anchor && anchor.parent !== element ) {
 		element.addClass( 'ck-placeholder' );
 	} else {
 		element.removeClass( 'ck-placeholder' );

tests/view/placeholder.js

@@ -47,6 +47,16 @@ describe( 'placeholder', () => {
 			expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
 		} );
 
+		it( 'if element has only ui elements, set CSS class and data attribute', () => {
+			setData( viewDocument, '<div><ui:span></ui:span><ui:span></ui:span></div><div>{another div}</div>' );
+			const element = viewRoot.getChild( 0 );
+
+			attachPlaceholder( element, 'foo bar baz' );
+
+			expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
+			expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
+		} );
+
 		it( 'if element has selection inside set only data attribute', () => {
 			setData( viewDocument, '<div>[]</div><div>another div</div>' );
 			const element = viewRoot.getChild( 0 );