From f9992a1fc685cb325d5560f5a2cb9998579bd21b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 6 Aug 2019 17:52:47 +0200
Subject: [PATCH] implement editor placeholder

---
 res/css/views/rooms/_BasicMessageComposer.scss     | 11 +++++++++++
 src/components/views/rooms/BasicMessageComposer.js | 10 ++++++++++
 src/components/views/rooms/SendMessageComposer.js  |  1 +
 src/editor/model.js                                |  4 ++++
 4 files changed, 26 insertions(+)

diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index a4f2afd795..acec4de952 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/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;
diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js
index e498ff88ad..ca8681bf4d 100644
--- a/src/components/views/rooms/BasicMessageComposer.js
+++ b/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);
     }
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 7f17ceba6e..8cc988f6a1 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/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>
         );
diff --git a/src/editor/model.js b/src/editor/model.js
index 580085975f..64986cdaf2 100644
--- a/src/editor/model.js
+++ b/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);
     }