Merge pull request #1176 from matrix-org/luke/feature-enable-RTE

Take RTE out of labs! 🎉

src/UserSettingsStore.js

@@ -25,11 +25,6 @@ import { _t } from './languageHandler';
 
 export default {
     LABS_FEATURES: [
-        {
-            name: "-",
-            id: 'rich_text_editor',
-            default: false,
-        },
         {
             name: "-",
             id: 'matrix_apps',
@@ -39,8 +34,7 @@ export default {
 
     // horrible but it works. The locality makes this somewhat more palatable.
     doTranslations: function() {
-        this.LABS_FEATURES[0].name = _t("New Composer & Autocomplete");
+        this.LABS_FEATURES[0].name = _t("Matrix Apps");
-        this.LABS_FEATURES[1].name = _t("Matrix Apps");
     },
 
     loadProfileInfo: function() {

src/components/views/rooms/MessageComposer.js

@@ -226,21 +226,6 @@ export default class MessageComposer extends React.Component {
         this.setState({inputState});
     }
 
-    onUpArrow() {
-        return this.refs.autocomplete.onUpArrow();
-    }
-
-    onDownArrow() {
-        return this.refs.autocomplete.onDownArrow();
-    }
-
-    _tryComplete(): boolean {
-        if (this.refs.autocomplete) {
-            return this.refs.autocomplete.onCompletionClicked();
-        }
-        return false;
-    }
-
     _onAutocompleteConfirm(range, completion) {
         if (this.messageComposerInput) {
             this.messageComposerInput.setDisplayedCompletion(range, completion);
@@ -267,8 +252,7 @@ export default class MessageComposer extends React.Component {
         const uploadInputStyle = {display: 'none'};
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
-        const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput" +
+        const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
-            (UserSettingsStore.isFeatureEnabled('rich_text_editor') ? "" : "Old"));
 
         const controls = [];
 
@@ -351,8 +335,7 @@ export default class MessageComposer extends React.Component {
                      title={_t("Show Text Formatting Toolbar")}
                      src="img/button-text-formatting.svg"
                      onClick={this.onToggleFormattingClicked}
-                     style={{visibility: this.state.showFormatting ||
+                     style={{visibility: this.state.showFormatting ? 'hidden' : 'visible'}}
-                       !UserSettingsStore.isFeatureEnabled('rich_text_editor') ? 'hidden' : 'visible'}}
                      key="controls_formatting" />
             );
 
@@ -367,10 +350,7 @@ export default class MessageComposer extends React.Component {
                     room={this.props.room}
                     placeholder={placeholderText}
                     tryComplete={this._tryComplete}
-                    onUpArrow={this.onUpArrow}
-                    onDownArrow={this.onDownArrow}
                     onFilesPasted={this.uploadFiles}
-                    tabComplete={this.props.tabComplete} // used for old messagecomposerinput/tabcomplete
                     onContentChanged={this.onInputContentChanged}
                     onInputStateChanged={this.onInputStateChanged} />,
                 formattingButton,
@@ -389,18 +369,6 @@ export default class MessageComposer extends React.Component {
             );
         }
 
-        let autoComplete;
-        if (UserSettingsStore.isFeatureEnabled('rich_text_editor')) {
-            autoComplete = <div className="mx_MessageComposer_autocomplete_wrapper">
-                <Autocomplete
-                    ref="autocomplete"
-                    onConfirm={this._onAutocompleteConfirm}
-                    query={this.state.autocompleteQuery}
-                    selection={this.state.selection} />
-            </div>;
-        }
-
-
         const {style, blockType} = this.state.inputState;
         const formatButtons = ["bold", "italic", "strike", "underline", "code", "quote", "bullet", "numbullet"].map(
             (name) => {
@@ -424,22 +392,20 @@ export default class MessageComposer extends React.Component {
                         {controls}
                     </div>
                 </div>
-                {UserSettingsStore.isFeatureEnabled('rich_text_editor') ?
+                <div className="mx_MessageComposer_formatbar_wrapper">
-                    <div className="mx_MessageComposer_formatbar_wrapper">
+                    <div className="mx_MessageComposer_formatbar" style={this.state.showFormatting ? {} : {display: 'none'}}>
-                        <div className="mx_MessageComposer_formatbar" style={this.state.showFormatting ? {} : {display: 'none'}}>
+                        {formatButtons}
-                            {formatButtons}
+                        <div style={{flex: 1}}></div>
-                            <div style={{flex: 1}}></div>
+                        <img title={ this.state.inputState.isRichtextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off") }
-                            <img title={ this.state.inputState.isRichtextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off") }
+                             onMouseDown={this.onToggleMarkdownClicked}
-                                 onMouseDown={this.onToggleMarkdownClicked}
+                            className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
-                                className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
+                            src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
-                                src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
+                        <img title={ _t("Hide Text Formatting Toolbar") }
-                            <img title={ _t("Hide Text Formatting Toolbar") }
+                             onClick={this.onToggleFormattingClicked}
-                                 onClick={this.onToggleFormattingClicked}
+                             className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
-                                 className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
+                             src="img/icon-text-cancel.svg" />
-                                 src="img/icon-text-cancel.svg" />
+                    </div>
-                        </div>
+                </div>
-                    </div>: null
-                }
             </div>
         );
     }

src/components/views/rooms/MessageComposerInput.js

@@ -908,14 +908,7 @@ MessageComposerInput.propTypes = {
     // called with current plaintext content (as a string) whenever it changes
     onContentChanged: React.PropTypes.func,
 
-    onUpArrow: React.PropTypes.func,
-
-    onDownArrow: React.PropTypes.func,
-
     onFilesPasted: React.PropTypes.func,
 
-    // attempts to confirm currently selected completion, returns whether actually confirmed
-    tryComplete: React.PropTypes.func,
-
     onInputStateChanged: React.PropTypes.func,
 };

test/components/views/rooms/MessageComposerInput-test.js

@@ -27,14 +27,10 @@ describe('MessageComposerInput', () => {
         mci = null,
         room = testUtils.mkStubRoom('!DdJkzRliezrwpNebLk:matrix.org');
 
-    // TODO Remove when RTE is out of labs.
-
     beforeEach(function() {
         testUtils.beforeEach(this);
         sandbox = testUtils.stubClient(sandbox);
         client = MatrixClientPeg.get();
-        UserSettingsStore.isFeatureEnabled = sinon.stub()
-            .withArgs('rich_text_editor').returns(true);
 
         parentDiv = document.createElement('div');
         document.body.appendChild(parentDiv);