Add "markdown help" and a preview option to "Edit Channel Header" modal (#6342)

webapp/components/edit_channel_header_modal.jsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import Textbox from './textbox.jsx';
+
 import ReactDOM from 'react-dom';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -8,6 +10,9 @@ import PreferenceStore from 'stores/preference_store.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 import {updateChannelHeader} from 'actions/channel_actions.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
+
+const KeyCodes = Constants.KeyCodes;
 
 import {Modal} from 'react-bootstrap';
 
@@ -27,8 +32,11 @@ class EditChannelHeaderModal extends React.Component {
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
         this.onShow = this.onShow.bind(this);
         this.onHide = this.onHide.bind(this);
+        this.handlePostError = this.handlePostError.bind(this);
+        this.focusTextbox = this.focusTextbox.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
 
         this.ctrlSend = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter');
@@ -44,6 +52,7 @@ class EditChannelHeaderModal extends React.Component {
     componentDidMount() {
         PreferenceStore.addChangeListener(this.onPreferenceChange);
         this.onShow();
+        this.focusTextbox();
     }
 
     componentWillUnmount() {
@@ -81,8 +90,6 @@ class EditChannelHeaderModal extends React.Component {
     }
 
     onShow() {
-        const textarea = ReactDOM.findDOMNode(this.refs.textarea);
-        Utils.placeCaretAtEnd(textarea);
         this.submitted = false;
     }
 
@@ -90,6 +97,12 @@ class EditChannelHeaderModal extends React.Component {
         this.setState({show: false});
     }
 
+    focusTextbox() {
+        if (!Utils.isMobile()) {
+            this.refs.textbox.focus();
+        }
+    }
+
     handleKeyDown(e) {
         if (this.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && e.ctrlKey) {
             e.preventDefault();
@@ -100,6 +113,22 @@ class EditChannelHeaderModal extends React.Component {
         }
     }
 
+    handleEditKeyPress(e) {
+        if (!UserAgent.isMobile() && !this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
+            e.preventDefault();
+            ReactDOM.findDOMNode(this.refs.editbox).blur();
+            this.handleEdit();
+        } else if (this.state.ctrlSend && e.ctrlKey && e.which === KeyCodes.ENTER) {
+            e.preventDefault();
+            ReactDOM.findDOMNode(this.refs.editbox).blur();
+            this.handleEdit();
+        }
+    }
+
+    handlePostError(postError) {
+        this.setState({serverError: postError});
+    }
+
     render() {
         var serverError = null;
         if (this.state.serverError) {
@@ -138,23 +167,29 @@ class EditChannelHeaderModal extends React.Component {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <p>
+                    <div className='edit-modal-body'>
-                        <FormattedMessage
+                        <p>
-                            id='edit_channel_header_modal.description'
+                            <FormattedMessage
-                            defaultMessage='Edit the text appearing next to the channel name in the channel header.'
+                                id='edit_channel_header_modal.description'
+                                defaultMessage='Edit the text appearing next to the channel name in the channel header.'
+                            />
+                        </p>
+                        <Textbox
+                            value={this.state.header}
+                            onChange={this.handleChange}
+                            onKeyPress={this.handleEditKeyPress}
+                            onKeyDown={this.handleKeyDown}
+                            supportsCommands={false}
+                            suggestionListStyle='bottom'
+                            createMessage={Utils.localizeMessage('edit_channel_header.editHeader', 'Edit the Channel Header...')}
+                            previewMessageLink={Utils.localizeMessage('edit_channel_header.previewHeader', 'Edit Header')}
+                            handlePostError={this.handlePostError}
+                            id='edit_textbox'
+                            ref='textbox'
                         />
-                    </p>
+                        <br/>
-                    <textarea
+                        {serverError}
-                        ref='textarea'
+                    </div>
-                        className='form-control no-resize'
-                        rows='6'
-                        id='edit_header'
-                        maxLength='1024'
-                        value={this.state.header}
-                        onChange={this.handleChange}
-                        onKeyDown={this.handleKeyDown}
-                    />
-                    {serverError}
                 </Modal.Body>
                 <Modal.Footer>
                     <button

webapp/components/textbox.jsx

@@ -28,6 +28,7 @@ export default class Textbox extends React.Component {
         onChange: React.PropTypes.func.isRequired,
         onKeyPress: React.PropTypes.func.isRequired,
         createMessage: React.PropTypes.string.isRequired,
+        previewMessageLink: React.PropTypes.string,
         onKeyDown: React.PropTypes.func,
         onBlur: React.PropTypes.func,
         supportsCommands: React.PropTypes.bool.isRequired,
@@ -176,6 +177,22 @@ export default class Textbox extends React.Component {
     render() {
         const hasText = this.props.value && this.props.value.length > 0;
 
+        let editHeader;
+        if (this.props.previewMessageLink) {
+            editHeader = (
+                <span>
+                    {this.props.previewMessageLink}
+                </span>
+            );
+        } else {
+            editHeader = (
+                <FormattedMessage
+                    id='textbox.edit'
+                    defaultMessage='Edit message'
+                />
+            );
+        }
+
         let previewLink = null;
         if (Utils.isFeatureEnabled(PreReleaseFeatures.MARKDOWN_PREVIEW)) {
             previewLink = (
@@ -184,10 +201,7 @@ export default class Textbox extends React.Component {
                     className='textbox-preview-link'
                 >
                     {this.state.preview ? (
-                        <FormattedMessage
+                       editHeader
-                            id='textbox.edit'
-                            defaultMessage='Edit message'
-                        />
                     ) : (
                         <FormattedMessage
                             id='textbox.preview'

webapp/i18n/en.json

@@ -1270,6 +1270,8 @@
   "edit_post.edit": "Edit {title}",
   "edit_post.editPost": "Edit the post...",
   "edit_post.save": "Save",
+  "edit_channel_header.editHeader": "Edit the Channel Header...",
+  "edit_channel_header.previewHeader": "Edit header",
   "email_signup.address": "Email Address",
   "email_signup.createTeam": "Create Team",
   "email_signup.emailError": "Please enter a valid email address.",