show/hide legend when focusing/blurring

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 = () => {

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>
         );
     }