From 720a728278a3eeac27f8732ad3a510dcfd832e9b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 17 Jul 2018 16:13:33 +0100
Subject: [PATCH] workaround for placeholder being shown when empty text but
 block. Fixes vector-im/riot-web#7042

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/MessageComposerInput.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 5885ae4e6a..1850601d8a 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -1533,6 +1533,14 @@ export default class MessageComposerInput extends React.Component {
             mx_MessageComposer_input_error: this.state.someCompletions === false,
         });
 
+        const isEmpty = this.state.editorState.document.isEmpty;
+
+        let {placeholder} = this.props;
+        // XXX: workaround for placeholder being shown when there is a formatting block e.g blockquote but no text
+        if (isEmpty && this.state.editorState.startBlock.type !== DEFAULT_NODE) {
+            placeholder = undefined;
+        }
+
         return (
             <div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
                 <div className="mx_MessageComposer_autocomplete_wrapper">
@@ -1554,7 +1562,7 @@ export default class MessageComposerInput extends React.Component {
                     <Editor ref="editor"
                             dir="auto"
                             className="mx_MessageComposer_editor"
-                            placeholder={this.props.placeholder}
+                            placeholder={placeholder}
                             value={this.state.editorState}
                             onChange={this.onChange}
                             onKeyDown={this.onKeyDown}
@@ -1564,7 +1572,7 @@ export default class MessageComposerInput extends React.Component {
                             renderNode={this.renderNode}
                             renderMark={this.renderMark}
                             // disable spell check for the placeholder because browsers don't like "unencrypted"
-                            spellCheck={!this.state.editorState.document.isEmpty}
+                            spellCheck={!isEmpty}
                             />
                 </div>
             </div>