From fa3633b29a24f0c0f53f2b4c4aa9616931149582 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 17:15:57 +0100
Subject: [PATCH] Add placeholder to Coral RTE :-)

---
 .../client/components/Editor.css                     |  5 +++++
 .../client/components/Editor.js                      | 12 ++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.css b/plugins/talk-plugin-rich-text/client/components/Editor.css
index f102067a5..09614f5be 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.css
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.css
@@ -10,3 +10,8 @@
   font-style: unset;
 }
 
+.placeholder {
+  position: absolute;
+  margin: 12px 0 0 12px;
+  color: #bbb;
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js
index 8d78da3c4..3d70a639d 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.js
@@ -86,8 +86,16 @@ class Editor extends React.Component {
   };
 
   render() {
+    const inputId = `${this.props.id}-rte`;
     return (
       <div className={cn(styles.root, `${PLUGIN_NAME}-container`)}>
+        <label
+          htmlFor={inputId}
+          className="screen-reader-text"
+          aria-hidden={true}
+        >
+          {this.props.label}
+        </label>
         <Toolbar>
           <Button icon="format_bold" title="bold" onClick={this.formatBold} />
           <Button
@@ -101,7 +109,11 @@ class Editor extends React.Component {
             onClick={this.formatBlockquote}
           />
         </Toolbar>
+        {!this.props.input.body && (
+          <div className={styles.placeholder}>{this.props.placeholder}</div>
+        )}
         <ContentEditable
+          id={inputId}
           onKeyPress={this.outdentOnEnter}
           className={styles.contentEditable}
           ref={this.handleRef}