From a75f9dfd01ac238b3cf88e69d23be0899b523fd0 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Thu, 19 Nov 2020 11:10:58 +0800
Subject: [PATCH] Improve the Placeholder behavior to keep shown when focused.

---
 packages/ckeditor5-engine/src/view/placeholder.js  | 14 ++------------
 .../ckeditor5-engine/tests/view/placeholder.js     | 10 +++++-----
 packages/ckeditor5-engine/theme/placeholder.css    |  1 +
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/ckeditor5-engine/src/view/placeholder.js b/packages/ckeditor5-engine/src/view/placeholder.js
index b8fc3c9a400..7e820cac280 100644
--- 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
index f02781999f4..0691b99514a 100644
--- 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
index 9d65cc4c25b..c2e999a7390 100644
--- 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. */