Add support for placeholder text

README.md

@@ -139,6 +139,10 @@ pell.init({
   // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
   styleWithCSS: false,
 
+  // <string>, optional, default = ''
+  // Adds a placeholder text to the input area
+  placeholder: "",
+
   // <Array[string | Object]>, string if overwriting, object if customizing/creating
   // action.name<string> (only required if overwriting)
   // action.icon<string> (optional if overwriting, required if custom action)

demo.html

@@ -47,6 +47,7 @@ <h3>HTML output:</h3>
       var editor = window.pell.init({
         element: document.getElementById('editor'),
         defaultParagraphSeparator: 'p',
+        placeholder: "Type something..."
         onChange: function (html) {
           document.getElementById('text-output').innerHTML = html
           document.getElementById('html-output').textContent = html

dist/pell.css

@@ -7,7 +7,14 @@
   height: 300px;
   outline: 0;
   overflow-y: auto;
-  padding: 10px; }
+  padding: 10px;
+  position: relative; }
+  .pell-content:empty:before {
+    content: attr(data-placeholder);
+    position: absolute;
+    color: rgba(10, 10, 10, 0.4); }
+  .pell-content:empty:focus:before {
+    color: rgba(10, 10, 10, 0.1); }
 
 .pell-actionbar {
   background-color: #FFF;

dist/pell.js

@@ -170,6 +170,9 @@ var init = function init(settings) {
   var content = settings.element.content = createElement('div');
   content.contentEditable = true;
   content.className = classes.content;
+  if (settings.placeholder) {
+    content.dataset.placeholder = settings.placeholder;
+  }
   content.oninput = function (_ref) {
     var firstChild = _ref.target.firstChild;