ソースを参照

Placeholder is removing ck CSS class only if it was added by that placeholder.

Szymon Kupś 7 年 前
コミット
953dbd3153

+ 24 - 8
packages/ckeditor5-engine/src/view/placeholder.js

@@ -34,7 +34,14 @@ export function attachPlaceholder( view, element, placeholderText, checkFunction
 	}
 
 	// Store information about element with placeholder.
-	documentPlaceholders.get( document ).set( element, { placeholderText, checkFunction } );
+	documentPlaceholders.get( document ).set( element, {
+		placeholderText,
+		checkFunction,
+
+		// Store information if 'ck' class is already present and don't remove it when detaching placeholder.
+		// https://github.com/ckeditor/ckeditor5-image/issues/198#issuecomment-377542222
+		removeCkClass: !element.hasClass( 'ck' )
+	} );
 
 	// Update view right away.
 	view.render();
@@ -48,13 +55,22 @@ export function attachPlaceholder( view, element, placeholderText, checkFunction
  */
 export function detachPlaceholder( view, element ) {
 	const document = element.document;
+	let removeCkClass = false;
 
 	if ( documentPlaceholders.has( document ) ) {
+		const info = documentPlaceholders.get( document ).get( element );
+		removeCkClass = info.removeCkClass;
+
 		documentPlaceholders.get( document ).delete( element );
 	}
 
 	view.change( writer => {
-		writer.removeClass( [ 'ck', 'ck-placeholder' ], element );
+		writer.removeClass( 'ck-placeholder', element );
+
+		if ( removeCkClass ) {
+			writer.removeClass( 'ck', element );
+		}
+
 		writer.removeAttribute( 'data-placeholder', element );
 	} );
 }
@@ -105,8 +121,8 @@ function updateSinglePlaceholder( writer, element, info ) {
 
 	// If checkFunction is provided and returns false - remove placeholder.
 	if ( checkFunction && !checkFunction() ) {
-		if ( element.hasClass( 'ck', 'ck-placeholder' ) ) {
-			writer.removeClass( [ 'ck', 'ck-placeholder' ], element );
+		if ( element.hasClass( 'ck-placeholder' ) ) {
+			writer.removeClass( 'ck-placeholder', element );
 			changed = true;
 		}
 
@@ -119,7 +135,7 @@ function updateSinglePlaceholder( writer, element, info ) {
 
 	// If element is empty and editor is blurred.
 	if ( !document.isFocused && isEmptyish ) {
-		if ( !element.hasClass( 'ck', 'ck-placeholder' ) ) {
+		if ( !element.hasClass( 'ck-placeholder' ) ) {
 			writer.addClass( [ 'ck', 'ck-placeholder' ], element );
 			changed = true;
 		}
@@ -129,13 +145,13 @@ function updateSinglePlaceholder( writer, element, info ) {
 
 	// It there are no child elements and selection is not placed inside element.
 	if ( isEmptyish && anchor && anchor.parent !== element ) {
-		if ( !element.hasClass( 'ck', 'ck-placeholder' ) ) {
+		if ( !element.hasClass( 'ck-placeholder' ) ) {
 			writer.addClass( [ 'ck', 'ck-placeholder' ], element );
 			changed = true;
 		}
 	} else {
-		if ( element.hasClass( 'ck', 'ck-placeholder' ) ) {
-			writer.removeClass( [ 'ck', 'ck-placeholder' ], element );
+		if ( element.hasClass( 'ck-placeholder' ) ) {
+			writer.removeClass( 'ck-placeholder', element );
 			changed = true;
 		}
 	}

+ 26 - 0
packages/ckeditor5-engine/tests/view/placeholder.js

@@ -206,4 +206,30 @@ describe( 'placeholder', () => {
 			expect( element.hasClass( 'ck', 'ck-placeholder' ) ).to.be.false;
 		} );
 	} );
+
+	it( 'should remove ck class when it was added by placeholder', () => {
+		setData( view, '<div></div><div>{another div}</div>' );
+		const element = viewRoot.getChild( 0 );
+
+		attachPlaceholder( view, element, 'foo bar baz' );
+
+		expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
+		expect( element.hasClass( 'ck', 'ck-placeholder' ) ).to.be.true;
+
+		detachPlaceholder( view, element );
+		expect( !element.hasClass( 'ck' ) ).to.be.true;
+	} );
+
+	it( 'should not remove ck class when it was applied already', () => {
+		setData( view, '<div class="ck"></div><div>{another div}</div>' );
+		const element = viewRoot.getChild( 0 );
+
+		attachPlaceholder( view, element, 'foo bar baz' );
+
+		expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
+		expect( element.hasClass( 'ck', 'ck-placeholder' ) ).to.be.true;
+
+		detachPlaceholder( view, element );
+		expect( element.hasClass( 'ck' ) ).to.be.true;
+	} );
 } );