Ckeditor5: Introduce a placeholder feature

[Reinmar]

Every editable element (either the main editable or the image caption or whatever else) should have its placeholder label. In the case of the editor's root editable elements, the placeholder should also be configurable.

This feature is meant to improve the UX, but a11y could be our consideration as well.

Some questions which came to my mind already:

• The placeholder text should not be selectable. Can we do that?
• How should the placeholder text be styled by default? Should it be dimmed, italic, of a paragraph's font size?
• When should the placeholder text disappear? When the user focuses the input or starts typing?
• When should the placeholder text reappear? When user deleted all the text or blurred editor?

[Reinmar]

As for the implementation – I see this as engine's view feature which you can easily apply to any view element.

[scofalik]

If a11y is a concern, what is the best way to make it from a11y POV?

[fredck]

The placeholder text should not be selectable. Can we do that?

Maybe if done with CSS?

How should the placeholder text be styled by default? Should it be dimmed, italic, of a paragraph's font size?

I would start with dimmed only.

When should the placeholder text disappear? When the user focuses the input or starts typing?

Focus, as the user may get confused and not get it that this is just a placeholder.

When should the placeholder text reappear? When user deleted all the text or blurred editor?

Blurred.

[oleq]

I suppose placeholders should mimic <input> placeholder attribute as close as it is possible, both in appearance and behavior. Being a part of form ecosystems, CKEditor should not stand out too much, if possible. It's about consistent experience and discoverability for the users.

[fredck]

Good point @oleq, so maybe part of my proposal is wrong.

[pjasiun]

We could make it even more generic: it could be attached to any element, not only editable element, since the editable area may have multiple elements which need placeholders, for instance:

<h1>[header placeholder]</h1>
<p>[body placeholder]</p>

Also, note that there might be additional conditions when the placeholder sould appear or not. In the example above we may want to hide the placeholder if there is more than one paragraph:

<h1>[header placeholder]</h1>
<p></p>
<p></p>

[pjasiun]

Closed via https://github.com/ckeditor/ckeditor5-engine/issues/857.