implement editor placeholder

res/css/views/rooms/_BasicMessageComposer.scss

@@ -16,6 +16,17 @@ limitations under the License.
 */
 
 .mx_BasicMessageComposer {
+    .mx_BasicMessageComposer_inputEmpty > :first-child:before {
+        content: var(--placeholder);
+        opacity: 0.333;
+        width: 0;
+        height: 0;
+        overflow: visible;
+        display: inline-block;
+        pointer-events: none;
+        white-space: nowrap;
+    }
+
     .mx_BasicMessageComposer_input {
         white-space: pre-wrap;
         word-wrap: break-word;

src/components/views/rooms/BasicMessageComposer.js

@@ -54,6 +54,16 @@ export default class BasicMessageEditor extends React.Component {
                 console.error(err);
             }
         }
+        if (this.props.placeholder) {
+            const {isEmpty} = this.props.model;
+            if (isEmpty) {
+                this._editorRef.style.setProperty("--placeholder", `'${this.props.placeholder}'`);
+                this._editorRef.classList.add("mx_BasicMessageComposer_inputEmpty");
+            } else {
+                this._editorRef.classList.remove("mx_BasicMessageComposer_inputEmpty");
+                this._editorRef.style.removeProperty("--placeholder");
+            }
+        }
         this.setState({autoComplete: this.props.model.autoComplete});
         this.historyManager.tryPush(this.props.model, caret, inputType, diff);
     }

src/components/views/rooms/SendMessageComposer.js

@@ -100,6 +100,7 @@ export default class SendMessageComposer extends React.Component {
                     model={this.model}
                     room={this.props.room}
                     label={_t("Send message")}
+                    placeholder={this.props.placeholder}
                 />
             </div>
         );

src/editor/model.js

@@ -35,6 +35,10 @@ export default class EditorModel {
         return this._partCreator;
     }
 
+    get isEmpty() {
+        return this._parts.reduce((len, part) => len + part.text.length, 0) === 0;
+    }
+
     clone() {
         return new EditorModel(this._parts, this._partCreator, this._updateCallback);
     }