Improve the Placeholder behavior to keep shown when focused.

[huacnlee]

[oleq]

Hi @huacnlee!

Thanks for this contribution. It makes perfect sense that the editor placeholder should act the same as the <input> placeholder (it should disappear as you type, not when you focus). I checked your PR (editor root placeholder, the title plugin, RTL language support) and it all works fine. 

There's one problem, though: the image caption placeholder looks off:

I think we can correct it by using transform: translateX(-50%) for the .image figcaption.ck-placeholder::before:

which corresponds to what an <input> with a centered placeholder would look like (you can play with it live):

The question remains: do we want this @Reinmar @magda-chrzescian? This still looks off to me.

Other options

We could have something like below instead (.image figcaption.ck-placeholder::before { position: static }) but then:

• 👎 it's incorrect that the caret appears right after the placeholder text instead of before it,
• 👎 the caret would need to go back to the center of the <figcaption> when the user starts typing and that looks ugly (the caret jumping around like this)

Finally, the last way would be a perfectly centered placeholder text (like above) but a caret at the beginning of it:

• 👍 this would at least look like the same as the editor placeholder,
• ❓ I'm not sure this possible using CSS (I tried but failed),
• 👎  the caret would need to go back to the center of the <figcaption> when the user starts typing and that looks ugly (the caret jumping around like this).

[huacnlee]

😂 That looks like too complex for me, I'm afraid that to have enough capacity to fix that.
I make this PR just wants fix the Placeholder behavior in editor initialization.

[magda-chrzescian]

I would vote for center-center position. It's not perfect but I like that it seems consistent with the native input behavior and clear about the text alignment.

However, maybe the caption placeholder should be invisible on focus by default? I think that the main use case of focus-visible placeholder is when you want to prompt the user to fill the input (so it should be focused and should inform of the need to be filled) - it can be common regarding the content of editor, but rather rare in the case of image caption.

I really don't like the idea of caret jumping around right after the user starts to write. It would make an impression that something crashed and the user may stop writing for a second to check what happened. Besides, the initial position of caret can be confusing about how the text will be aligned.

[oleq]

However, maybe the caption placeholder should be invisible on focus by default?

I forked this PR in https://github.com/ckeditor/ckeditor5/compare/i/8689-smarter-editor-placeholder?expand=1 and I came up with a configuration for enablePlaceholder() that allows that.

I also checked the Title plugin and it also looks fine.

@ckeditor/qa-team, can you take a look at https://github.com/ckeditor/ckeditor5/compare/i/8689-smarter-editor-placeholder?expand=1 and see if nothing else got broken (CF?) because of this? 🙏

[FilipTokarski]

CKE 5

It seems to work fine, I didn't find any new bugs.

CF

I had errors at the beginning, but after locally merging latest master into the branch, everything works ok.
I see that apart from editor placeholder and Title plugin, this affects the behavior of annotations inputs too:

0_comment1.mp4

I'm not sure whether this was intended, but so far I didn't find any bugs related to this too.

[oleq]

Thanks @huacnlee for this contribution!