From 764347cef0bdf1fd91e1e88d6b2407e0fb7e7472 Mon Sep 17 00:00:00 2001
From: Cory <cory.forsyth@gmail.com>
Date: Tue, 23 Aug 2016 18:21:13 -0400
Subject: [PATCH] Use '__has-no-content' class name to display placeholder text

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 | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/css/editor.less b/src/css/editor.less
index 108236953..28e384d26 100644
--- a/src/css/editor.less
+++ b/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;