about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/compose
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2019-04-11 17:18:55 +0200
committerThibG <thib@sitedethib.com>2019-04-26 22:38:03 +0200
commitdf52004fe6de0a8f21e97967f9d9d8a5fc945465 (patch)
treeeaca2b1d84fa267bba5df7336d473331a567f0ac /app/javascript/flavours/glitch/features/compose
parent3a671470ec53edad206d9022e8796a1f6d3e92fd (diff)
Add suggestions in CW field
Diffstat (limited to 'app/javascript/flavours/glitch/features/compose')
-rw-r--r--app/javascript/flavours/glitch/features/compose/components/compose_form.js40
-rw-r--r--app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js4
2 files changed, 25 insertions, 19 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index a5e34e3a2..bd6d5b1fa 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
+import AutosuggestInput from '../../../components/autosuggest_input';
 import { defineMessages, injectIntl } from 'react-intl';
 import EmojiPicker from 'flavours/glitch/features/emoji_picker';
 import PollFormContainer from '../containers/poll_form_container';
@@ -163,7 +164,11 @@ class ComposeForm extends ImmutablePureComponent {
 
   //  Selects a suggestion from the autofill.
   onSuggestionSelected = (tokenStart, token, value) => {
-    this.props.onSuggestionSelected(tokenStart, token, value);
+    this.props.onSuggestionSelected(tokenStart, token, value, ['text']);
+  }
+
+  onSpoilerSuggestionSelected = (tokenStart, token, value) => {
+    this.props.onSuggestionSelected(tokenStart, token, value, ['spoiler_text']);
   }
 
   //  When the escape key is released, we focus the UI.
@@ -183,7 +188,7 @@ class ComposeForm extends ImmutablePureComponent {
   //  Sets a reference to the CW field.
   handleRefSpoilerText = (spoilerComponent) => {
     if (spoilerComponent) {
-      this.spoilerText = spoilerComponent;
+      this.spoilerText = spoilerComponent.input;
     }
   }
 
@@ -303,21 +308,22 @@ class ComposeForm extends ImmutablePureComponent {
         <ReplyIndicatorContainer />
 
         <div className={`composer--spoiler ${spoiler ? 'composer--spoiler--visible' : ''}`}>
-          <label>
-            <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
-            <input
-              id='glitch.composer.spoiler.input'
-              placeholder={intl.formatMessage(messages.spoiler_placeholder)}
-              value={spoilerText}
-              onChange={this.handleChangeSpoiler}
-              onKeyDown={this.handleKeyDown}
-              onKeyUp={this.handleKeyUp}
-              disabled={!spoiler}
-              type='text'
-              className='spoiler-input__input'
-              ref={this.handleRefSpoilerText}
-            />
-          </label>
+          <AutosuggestInput
+            placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+            value={spoilerText}
+            onChange={this.handleChangeSpoiler}
+            onKeyDown={this.handleKeyDown}
+            onKeyUp={this.handleKeyUp}
+            disabled={!spoiler}
+            ref={this.handleRefSpoilerText}
+            suggestions={this.props.suggestions}
+            onSuggestionsFetchRequested={onFetchSuggestions}
+            onSuggestionsClearRequested={onClearSuggestions}
+            onSuggestionSelected={this.onSpoilerSuggestionSelected}
+            searchTokens={[':']}
+             id='glitch.composer.spoiler.input'
+             className='spoiler-input__input'
+          />
         </div>
 
         <div className='composer--textarea'>
diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
index 780a10f81..2da0770d3 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@@ -90,8 +90,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(fetchComposeSuggestions(token));
   },
 
-  onSuggestionSelected(position, token, suggestion) {
-    dispatch(selectComposeSuggestion(position, token, suggestion, ['text']));
+  onSuggestionSelected(position, token, suggestion, path) {
+    dispatch(selectComposeSuggestion(position, token, suggestion, path));
   },
 
   onChangeSpoilerText(text) {