diff --git a/packages/ckeditor5-engine/src/view/placeholder.ts b/packages/ckeditor5-engine/src/view/placeholder.ts index 0e374d08f48..fbad1525bd5 100644 --- a/packages/ckeditor5-engine/src/view/placeholder.ts +++ b/packages/ckeditor5-engine/src/view/placeholder.ts @@ -15,11 +15,13 @@ import type EditableElement from './editableelement'; import type Element from './element'; import type View from './view'; -import type { ObservableChangeEvent } from '@ckeditor/ckeditor5-utils'; +import { logWarning, type ObservableChangeEvent } from '@ckeditor/ckeditor5-utils'; // Each document stores information about its placeholder elements and check functions. const documentPlaceholders = new WeakMap>(); +let hasDisplayedPlaceholderDeprecationWarning = false; + /** * A helper that enables a placeholder on the provided view element (also updates its visibility). * The placeholder is a CSS pseudo–element (with a text content) attached to the element. @@ -35,12 +37,15 @@ const documentPlaceholders = new WeakMap { enablePlaceholder( { view, - element: viewRoot, - text: 'foo bar baz' + element: viewRoot } ); viewRoot.placeholder = 'new placeholder'; @@ -632,12 +633,60 @@ describe( 'placeholder', () => { enablePlaceholder( { view, element: viewRoot, - text: 'foo bar baz', isDirectHost: false } ); viewRoot.placeholder = 'new placeholder'; expect( viewRoot.getChild( 0 ).getAttribute( 'data-placeholder' ) ).to.equal( 'new placeholder' ); } ); + + it( 'should through warning once if "text" is used as argument', () => { + sinon.stub( console, 'warn' ); + + setData( view, '
{another div}
' ); + + enablePlaceholder( { + view, + element: viewRoot, + isDirectHost: false, + text: 'foo bar' + } ); + + enablePlaceholder( { + view, + element: viewRoot, + isDirectHost: false, + text: 'foo bar baz' + } ); + + sinon.assert.calledOnce( console.warn ); + expect( console.warn.calledWith( sinon.match( /^enableplaceholder-deprecated-text-option/ ) ) ).to.be.true; + } ); + + it( 'should set placeholder using "text" argument', () => { + setData( view, '
{another div}
' ); + + enablePlaceholder( { + view, + element: viewRoot, + text: 'placeholder' + } ); + + expect( viewRoot.getAttribute( 'data-placeholder' ) ).to.equal( 'placeholder' ); + } ); + + it( 'should prefer element\'s placeholder value over text parameter', () => { + setData( view, '
{another div}
' ); + + enablePlaceholder( { + view, + element: viewRoot, + text: 'foo' + } ); + + viewRoot.placeholder = 'bar'; + + expect( viewRoot.getAttribute( 'data-placeholder' ) ).to.equal( 'bar' ); + } ); } ); } );