Disable toot button when above 500 characters (#2088)

* Disable toot button when above 500 characters

* Consider multibyte characters

* Consider spoiler_text

diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
index c7df22765bfdb701aa04db359ffa82b3bce2a79d..fad77c8e9d69522106f2a455f2b3da0a177b22d7 100644 (file)
--- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -131,6 +131,7 @@ const ComposeForm = React.createClass({
   render () {
     const { intl, needsPrivacyWarning, mentionedDomains, onPaste } = this.props;
     const disabled = this.props.is_submitting;
+    const text = [this.props.spoiler_text, this.props.text].join('');
 
     let publishText    = '';
     let privacyWarning = '';
@@ -197,8 +198,8 @@ const ComposeForm = React.createClass({
           </div>
 
           <div style={{ display: 'flex' }}>
-            <div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div>
-            <div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div>
+            <div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={text} /></div>
+            <div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} /></div>
           </div>
         </div>
       </div>