Merge branch 'feat/better-placeholder-behavior' of git://github.com/h…

…uacnlee/ckeditor5 into huacnlee-feat/better-placeholder-behavior
ckeditor · Dec 10, 2020 · 6719bf0 · 6719bf0
2 parents 0ad1d6a + a75f9df
commit 6719bf0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 17 deletions.
diff --git a/packages/ckeditor5-engine/src/view/placeholder.js b/packages/ckeditor5-engine/src/view/placeholder.js
@@ -152,18 +152,8 @@ export function needsPlaceholder( element ) {
 	const isEmptyish = !Array.from( element.getChildren() )
 		.some( element => !element.is( 'uiElement' ) );
 
-	const doc = element.document;
-
-	// If the element is empty and the document is blurred.
-	if ( !doc.isFocused && isEmptyish ) {
-		return true;
-	}
-
-	const viewSelection = doc.selection;
-	const selectionAnchor = viewSelection.anchor;
-
-	// If document is focused and the element is empty but the selection is not anchored inside it.
-	if ( isEmptyish && selectionAnchor && selectionAnchor.parent !== element ) {
+	// If the element, keep placeholder
+	if ( isEmptyish ) {
 		return true;
 	}
 

diff --git a/packages/ckeditor5-engine/tests/view/placeholder.js b/packages/ckeditor5-engine/tests/view/placeholder.js
@@ -95,7 +95,7 @@ describe( 'placeholder', () => {
 			} );
 
 			expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
-			expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
+			expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
 		} );
 
 		it( 'if element has selection inside but document is blurred should contain placeholder CSS class', () => {
@@ -132,7 +132,7 @@ describe( 'placeholder', () => {
 				writer.setSelection( ViewRange._createIn( element ) );
 			} );
 
-			expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
+			expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
 		} );
 
 		it( 'should change placeholder settings when called twice', () => {
@@ -208,10 +208,10 @@ describe( 'placeholder', () => {
 			} );
 
 			expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'first placeholder' );
-			expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
+			expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
 
 			expect( secondElement.getAttribute( 'data-placeholder' ) ).to.equal( 'second placeholder' );
-			expect( secondElement.hasClass( 'ck-placeholder' ) ).to.be.false;
+			expect( secondElement.hasClass( 'ck-placeholder' ) ).to.be.true;
 		} );
 
 		it( 'should update placeholder before rendering', () => {
@@ -233,7 +233,7 @@ describe( 'placeholder', () => {
 			} );
 
 			// After rendering - placeholder should be invisible since selection is moved there.
-			expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
+			expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
 		} );
 
 		it( 'should not set attributes/class when multiple children (isDirectHost=false)', () => {

diff --git a/packages/ckeditor5-engine/theme/placeholder.css b/packages/ckeditor5-engine/theme/placeholder.css
@@ -7,6 +7,7 @@
 .ck.ck-placeholder,
 .ck .ck-placeholder {
 	&::before {
+		position: absolute;
 		content: attr(data-placeholder);
 
 		/* See ckeditor/ckeditor5#469. */