Create placeholder for demo

Author: ngs

demo/client/components/DemoEditor/index.js

@@ -27,15 +27,24 @@ export default class DemoEditor extends Component {
     editorState: EditorState.createWithContent(contentState)
   };
 
+  componentDidMount = () => {
+    if (this.editor) {
+      this.editor.focus();
+    }
+  }
+
   onChange = (editorState) => {
     this.setState({
       editorState,
     });
   };
 
   render() {
+    const { editorState } = this.state;
+    const placeholder = editorState.getCurrentContent().hasText() ? null : <div className={styles.placeholder}>Write something here...</div>;
     return (
       <div className={styles.root}>
+        {placeholder}
         <div className={styles.editor} onClick={this.focus}>
           <Editor
             editorState={this.state.editorState}

demo/client/components/DemoEditor/styles.css

@@ -1,10 +1,20 @@
 .root {
   background: #FFF;
   height: 100%;
+  position: relative;
 }
 
 .editor {
   margin: 2.5% auto 0 auto;
   height: 95%;
   width: 95%;
 }
+
+.placeholder {
+  color: #ccc;
+  font-size: 1em;
+  position: absolute;
+  width: 95%;
+  top: 0;
+  left: 2.5%;
+}