fix(placeholder): Use '__has-no-content' class name to display placeh…

…older text (#461)

This causes the placeholder to appear even when the editor div is not
wholly devoid of elements.

Possible BREAKING CHANGE: The placeholder text is now absolutely
positioned (at `top: 0`) of the editor div. If a user has applied their
own padding to the editor div the placeholder may not show up in the
correct location. The solution is to add a CSS rule that overrides the
`top` to match the value of the `padding-top`:
```
.__mobiledoc-editor.__has-no-content:after {
  top: <value of padding-top>;
}
```

Also: The editor now has a `min-height: 1em;`
to ensure that the placeholder has a space in which to be displayed.

Fixes #407 #171

src/css/editor.less

@@ -10,24 +10,23 @@
   font-family: 'Lora', Georgia, serif;
   margin: 1em 0;
   color: #454545;
-  /*
-    Chrome bug adds inline styles when backspacing to join 2 blocks.
-    Fix: Apply font styles to parent element, or use % for font-size, line-height.
-    http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span
-  */
-  font-size: 120%;
-  line-height: 160%;
+  font-size: 1.2em;
+  line-height: 1.6em;
+  position: relative;
+  min-height: 1em;
 }
 .__mobiledoc-editor:focus {
   outline: none;
 }
-.__mobiledoc-editor:empty:before {
+.__mobiledoc-editor > * {
+  position: relative;
+}
+.__mobiledoc-editor.__has-no-content:after {
   content: attr(data-placeholder);
   color: #bbb;
   cursor: text;
-}
-.__mobiledoc-editor > * {
-  position: relative;
+  position: absolute;
+  top: 0;
 }
 .__mobiledoc-editor a {
   color: @themeColorText;