From b7768f34f2bad7cd890d32cebc41f2934575c5a2 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 30 Aug 2019 18:09:23 +0200
Subject: [PATCH 1/2] Add legend and style it

---
 res/css/views/rooms/_SendMessageComposer.scss | 30 +++++++++++++++++--
 .../views/rooms/SendMessageComposer.js        |  1 +
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index d20f7107b3..d6da1b87fa 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -30,7 +30,7 @@ limitations under the License.
         flex-direction: column;
         // min-height at this level so the mx_BasicMessageComposer_input
         // still stays vertically centered when less than 50px
-        min-height: 50px;
+        min-height: 42px;
 
         .mx_BasicMessageComposer_input {
             padding: 3px 0;
@@ -38,7 +38,7 @@ limitations under the License.
             // in it's parent vertically
             // while keeping the autocomplete at the top
             // of the composer. The parent needs to be a flex container for this to work.
-            margin: auto 0;
+            margin: auto 0 0 0;
             // max-height at this level so autocomplete doesn't get scrolled too
             max-height: 140px;
             overflow-y: auto;
@@ -49,5 +49,31 @@ limitations under the License.
         position: relative;
         height: 0;
     }
+
+    .mx_SendMessageComposer_legend {
+        height: 16px;
+        box-sizing: content-box;
+        font-size: 8px;
+        line-height: 10px;
+        padding: 0 0 2px 0;
+        color: $light-fg-color;
+        user-select: none;
+        visibility: hidden;
+
+        * {
+            display: inline-block;
+            margin: 0 10px 0 0;
+            padding: 1px;
+        }
+
+        code {
+            border-radius: 2px;
+            background-color: $focus-bg-color;
+        }
+
+        &.mx_SendMessageComposer_legend_shown {
+            visibility: visible;
+        }
+    }
 }
 
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 0e03d83467..65e6673124 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -343,6 +343,7 @@ export default class SendMessageComposer extends React.Component {
                     placeholder={this.props.placeholder}
                     onChange={this._saveStoredEditorState}
                 />
+                <div className="mx_SendMessageComposer_legend"><strong>**bold**</strong><em>_italic_</em><span>~strikethrough~</span><code>`code`</code><span>&gt; quote</span></div>
             </div>
         );
     }

From f200327ef21ff494de737553ca4ded1bd4e4fad7 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 2 Sep 2019 15:59:17 +0200
Subject: [PATCH 2/2] show/hide legend when focusing/blurring

---
 .../views/rooms/BasicMessageComposer.js       | 10 ++++++--
 .../views/rooms/SendMessageComposer.js        | 23 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js
index d55e9acc86..ef6fda6595 100644
--- a/src/components/views/rooms/BasicMessageComposer.js
+++ b/src/components/views/rooms/BasicMessageComposer.js
@@ -222,15 +222,21 @@ export default class BasicMessageEditor extends React.Component {
         return this.getCaret().offset === this._lastTextLength;
     }
 
-    _onBlur = () => {
+    _onBlur = (event) => {
         document.removeEventListener("selectionchange", this._onSelectionChange);
+        if (this.props.onBlur) {
+            this.props.onBlur(event);
+        }
     }
 
-    _onFocus = () => {
+    _onFocus = (event) => {
         document.addEventListener("selectionchange", this._onSelectionChange);
         // force to recalculate
         this._lastSelection = null;
         this._refreshLastCaretIfNeeded();
+        if (this.props.onFocus) {
+            this.props.onFocus(event);
+        }
     }
 
     _onSelectionChange = () => {
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 65e6673124..8772bf3b66 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -33,6 +33,7 @@ import sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
+import classNames from "classnames";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -87,6 +88,7 @@ export default class SendMessageComposer extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+        this.state = {};
         this.model = null;
         this._editorRef = null;
         this.currentlyComposedEditorState = null;
@@ -329,7 +331,18 @@ export default class SendMessageComposer extends React.Component {
         }
     }
 
+    _onFocus = () => {
+        this.setState({focused: true});
+    }
+
+    _onBlur = () => {
+        this.setState({focused: false});
+    }
+
     render() {
+        const legendClasses = classNames("mx_SendMessageComposer_legend", {
+            "mx_SendMessageComposer_legend_shown": this.state.focused,
+        });
         return (
             <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
                 <div className="mx_SendMessageComposer_overlayWrapper">
@@ -342,8 +355,16 @@ export default class SendMessageComposer extends React.Component {
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onChange={this._saveStoredEditorState}
+                    onFocus={this._onFocus}
+                    onBlur={this._onBlur}
                 />
-                <div className="mx_SendMessageComposer_legend"><strong>**bold**</strong><em>_italic_</em><span>~strikethrough~</span><code>`code`</code><span>&gt; quote</span></div>
+                <div className={legendClasses}>
+                    <strong>**bold**</strong>
+                    <em>_italic_</em>
+                    <span>&lt;del&gt;strikethrough&lt;/del&gt;</span>
+                    <code>`code`</code>
+                    <span>&gt; quote</span>
+                </div>
             </div>
         );
     }