Improve placeholder behaviour when ui element is present

[scofalik]

At the moment, placeholder is removed when there is a view.UIElement present in the element that has the placeholder. This is not really correct, as UIElement is not data. Most of time it will be some tiny graphical indicator like a dot, arrow, line, etc. Placeholder should be preserved in such situation.

[Reinmar]

Should it? Where will be those UIElements rendered then? My guess is on the right hand side of the placeholder because it's rendered with ::before style.

Couldn't you hide your UIElements using CSS when content has the .ck-placeholder class?

[scofalik]

Yes, of course, we have to change ::before to ::after.

Couldn't you hide you UIElements using CSS when content has the .ck-placeholder class?

No, because it is not correct.

[Reinmar]

OK, I get it now. You wouldn't be able to hide those markers anyway because the .ck-placeholder class is removed in the first place.

But once it will stop being removed if there are any markers in the view I'd propose to hide them anyway. Then, you won't need to change ::before to ::after

[scofalik]

This is more difficult than I initially thought.

Things to consider:

1. If we want to correctly display UIElements, placeholder has to be applied on ::after.
2. But then, bogus br cannot be used as a filler element, because it moves the placeholder to the next line.
3. We can set view.ContainerElement#getFillerOffset() to return null if it has data-placeholder attribute.
4. Then, inline filler is created instead of bogus br.
5. Then, after clicking a placeholder, inline filler is created and then selection is moved to the beginning of element, that is before an inline filler (which is an error).
6. This means that we need to dig deeper, in selection rendering mechanism. We have this whole "similar selection" mechanism which prevents re-rendering selection when DOM and view selections are similar. Unfortunately this causes a bug in this case, cause we would like to reposition selection after the inline filler. I changed view.Renderer#_updateDomSelection to do it, but then new bugs appeared. And also tests started to fail.

I also tried another route with:

.ck-placeholder [data-cke-filler] {
	display: none;
}

But it also didn't seem like a good solution. UI element was rendered after bogus br and was moved to the next line. If I changed getFillerOffset() to render bogus br after UI element new errors appeared.

[scofalik]

We can take easy path with what you suggested, @Reinmar, but it is not really correct. I can imagine a need to use (and display) UI element in an empty element (for example some kind of button).

[jodator]

Most of time it will be some tiny graphical indicator like a dot, arrow, line, etc. Placeholder should be preserved in such situation.

@scofalik & @Reinmar: and the first non-empty element with UI-only child is the Media Embed widget.

I'll work on this more as @oleq has pointed me this issue.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).