Slate Placeholder

const wrapperStyle = {
  position: 'relative'
}

const PlaceHolder = React.createClass({

  renderPlaceholder(){
    const { node, state, parent } = this.props;
    const placeholderText = node.data.get('placeholderText');
    return (
      <Placeholder
        firstOnly={false}
        parent={parent}
        node={node}
        state={state}
      >
        { placeholderText }
      </Placeholder>
    )
  },

  render(){
    const { node, attributes, children } = this.props;
    const wrapperNodeType = node.data.get('wrapperNodeType');

    switch (wrapperNodeType) {
      case 'p':
        return (
          <p {...attributes} style={wrapperStyle} >
            { this.renderPlaceholder() }
            {children}
          </p>
        )
      case 'h1':
        return (
          <h1 {...attributes} style={wrapperStyle} >
            { this.renderPlaceholder() }
            {children}
          </h1>
        )
      case 'h2':
        return (
          <h2 {...attributes} style={wrapperStyle} >
            { this.renderPlaceholder() }
            {children}
          </h2>
        )
      default:
        return (
          <p {...attributes} style={wrapperStyle} >
            { this.renderPlaceholder() }
            {children}
          </p>
        )
    }
  }
});