Merge pull request #3383 from matrix-org/revert-3378-bwindels/cider-md-legend

Revert "New composer: show markdown legend on focus"

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: 42px;
+        min-height: 50px;
 
         .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 0 0;
+            margin: auto 0;
             // max-height at this level so autocomplete doesn't get scrolled too
             max-height: 140px;
             overflow-y: auto;
@@ -49,31 +49,5 @@ 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;
-        }
-    }
 }
 

src/components/views/rooms/BasicMessageComposer.js

@@ -226,21 +226,15 @@ export default class BasicMessageEditor extends React.Component {
         return this.getCaret().offset === this._lastTextLength;
     }
 
-    _onBlur = (event) => {
+    _onBlur = () => {
         document.removeEventListener("selectionchange", this._onSelectionChange);
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
     }
 
-    _onFocus = (event) => {
+    _onFocus = () => {
         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,7 +33,6 @@ 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);
@@ -88,7 +87,6 @@ export default class SendMessageComposer extends React.Component {
 
     constructor(props, context) {
         super(props, context);
-        this.state = {};
         this.model = null;
         this._editorRef = null;
         this.currentlyComposedEditorState = null;
@@ -332,18 +330,7 @@ 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">
@@ -356,16 +343,7 @@ 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={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>
         );
     }