Placeholder doesn't re-appear

[lessless]

Hello,

Everybody loves placeholders! They help to recognize typing area and get work started.

Unfortunately, Mobiledoc-kit's placeholder is rather shy or lazy: after it showed up he will never come back, or as @mixonic said:

they don't detect empty doc

How to reproduce:

1. Go to https://bustlelabs.github.io/mobiledoc-kit/demo/
2. Change example to "Empty mobiledoc"
3. Observe "Write here" placeholder
4. Type something
5. Erase all the text

Expected behavior: placeholder should re-appear
Actual behavior: placeholder doesn't re-appear

Let's make placeholder great again! ✌️

UPDATE: actually, on my machine placeholder doesn't appear even in this minimalist setup https://github.com/lessless/mobiledoc-placeholder

[spovich]

I'm having same issue. I can't get the placeholder to display under any conditions. I can verify that the data-placeholder="foo" attribute is present on the editor <div> and regardless of whether I pass null or an empty mobiledoc in as mobiledoc, I can't get a placeholder to display.

In my ember app this will not show a placeholder: {{mobiledoc-editor mobiledoc=null placeholder="foo"}}.

I'm using mobiledoc-kit v 0.9.6 and ember-mobiledoc-editor 0.4.2

[cknific]

This is problematic when two editors are on the same page (which is the case for our client).

[rlivsey]

This is because the placeholder is applied with css with :empty.

This works when there's absolutely nothing rendered in the editor at all, but once the user has interacted with it then there's always a blank <p><br></p> which isn't :empty.

I can think of two workarounds to this when the mobiledoc is blank:

1. the editor could render no DOM so the CSS as present works.
2. set a .__mobiledoc_editor--is-blank class when the content changes and have the CSS use that instead of :empty

[bantic]

I just made the change @rlivsey suggested (see #461), and released in v0.10.8-beta.1. If you are able to easily test it out @rlivsey or @lessless, please let me know if that works for you. Note that it changes the CSS slightly to position the placeholder using :after and absolute positioning, so if you have applied css padding to your editor you may need to modify your CSS to have it show up correctly.
thanks!

[rlivsey]

@bantic Just tested and works a charm 👍

[bantic]

@rlivsey Thanks for giving it a test drive! This is now part of the v0.10.8 release