add editor placeholder styles properties

docs/reference/components/editor.md

@@ -10,6 +10,8 @@ The top-level React component that renders the Slate editor itself.
 - [Properties](#properties)
   - [`onChange`](#onchange-function)
   - [`placeholder`](#placeholder-text-or-element)
+  - [`placeholderClassName`](#placeholderclassname-string)
+  - [`placeholderStyle`](#placeholderstyle-string)
   - [`plugins`](#plugins-array)
   - [`state`](#state-state)
 - [Plugin-like Properties](#plugin-like-properties)
@@ -42,6 +44,14 @@ A change handler that will be called with the newly-changed editor `state`. You
 
 A placeholder string (or React element) that will be rendered as the default block type's placeholder.
 
+#### `placeholderClassName: String`
+
+An optional class name to apply to the default block type's placeholder.
+
+#### `placeholderStyle: Object`
+
+An optional dictionary of styles to apply to the default block type's placeholder. If `placeholder` is a string, and no class name or style dictionary is passed, this property will default to `{ opacity: '0.333' }`.
+
 #### `plugins: Array`
 
 An array of [`Plugins`](../plugins) that define the editor's behavior.

lib/components/editor.js

@@ -19,6 +19,9 @@ class Editor extends React.Component {
     onChange: React.PropTypes.func.isRequired,
     onKeyDown: React.PropTypes.func,
     onPaste: React.PropTypes.func,
+    placeholder: React.PropTypes.any,
+    placeholderClassName: React.PropTypes.string,
+    placeholderStyle: React.PropTypes.object,
     plugins: React.PropTypes.array,
     renderDecorations: React.PropTypes.func,
     renderMark: React.PropTypes.func,

lib/components/placeholder.js

@@ -22,12 +22,6 @@ class Placeholder extends React.Component {
     style: React.PropTypes.object
   };
 
-  static defaultProps = {
-    style: {
-      opacity: '0.333'
-    }
-  };
-
   /**
    * Should the component update?
    *
@@ -85,12 +79,21 @@ class Placeholder extends React.Component {
   /**
    * Render.
    *
+   * If the placeholder is a string, and no `className` or `style` has been
+   * passed, give it a default style of lowered opacity.
+   *
    * @return {Element} element
    */
 
   render = () => {
-    const { children, className, style } = this.props
     const isOpen = this.isVisible()
+    const { children, className } = this.props
+    let { style } = this.props
+
+    if (typeof children === 'string' && style == null && className == null) {
+      style = { opacity: '0.333'}
+    }
+
     return (
       <Portal isOpened={isOpen} onOpen={this.onOpen}>
         <span className={className} style={style}>{children}</span>

lib/plugins/core.js

@@ -9,11 +9,18 @@ import { IS_WINDOWS, IS_MAC } from '../utils/environment'
  * The default plugin.
  *
  * @param {Object} options
+ *   @property {Element} placeholder
+ *   @property {String} placeholderClassName
+ *   @property {Object} placeholderStyle
  * @return {Object}
  */
 
 function Plugin(options = {}) {
-  const { placeholder } = options
+  const {
+    placeholder,
+    placeholderClassName,
+    placeholderStyle
+  } = options
 
   /**
    * Define a default block renderer.
@@ -45,7 +52,13 @@ function Plugin(options = {}) {
       const { node, state } = this.props
 
       return (
-        <Placeholder parent={state.document} node={node} state={state}>
+        <Placeholder
+          className={placeholderClassName}
+          node={node}
+          parent={state.document}
+          state={state}
+          style={placeholderStyle}
+        >
           {placeholder}
         </Placeholder>
       )