Add suggestions in CW field
This commit is contained in:
parent
0541e4ad21
commit
b35b38f4ea
4 changed files with 260 additions and 21 deletions
227
app/javascript/flavours/glitch/components/autosuggest_input.js
Normal file
227
app/javascript/flavours/glitch/components/autosuggest_input.js
Normal file
|
@ -0,0 +1,227 @@
|
||||||
|
import React from 'react';
|
||||||
|
import AutosuggestAccountContainer from 'flavours/glitch/features/compose/containers/autosuggest_account_container';
|
||||||
|
import AutosuggestEmoji from './autosuggest_emoji';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { isRtl } from 'flavours/glitch/util/rtl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { List as ImmutableList } from 'immutable';
|
||||||
|
|
||||||
|
const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
|
||||||
|
let word;
|
||||||
|
|
||||||
|
let left = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
|
||||||
|
let right = str.slice(caretPosition).search(/[\s\u200B]/);
|
||||||
|
|
||||||
|
if (right < 0) {
|
||||||
|
word = str.slice(left);
|
||||||
|
} else {
|
||||||
|
word = str.slice(left, right + caretPosition);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!word || word.trim().length < 3 || searchTokens.indexOf(word[0]) === -1) {
|
||||||
|
return [null, null];
|
||||||
|
}
|
||||||
|
|
||||||
|
word = word.trim().toLowerCase();
|
||||||
|
|
||||||
|
if (word.length > 0) {
|
||||||
|
return [left, word];
|
||||||
|
} else {
|
||||||
|
return [null, null];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class AutosuggestInput extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
value: PropTypes.string,
|
||||||
|
suggestions: ImmutablePropTypes.list,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
placeholder: PropTypes.string,
|
||||||
|
onSuggestionSelected: PropTypes.func.isRequired,
|
||||||
|
onSuggestionsClearRequested: PropTypes.func.isRequired,
|
||||||
|
onSuggestionsFetchRequested: PropTypes.func.isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
onKeyUp: PropTypes.func,
|
||||||
|
onKeyDown: PropTypes.func,
|
||||||
|
autoFocus: PropTypes.bool,
|
||||||
|
className: PropTypes.string,
|
||||||
|
id: PropTypes.string,
|
||||||
|
searchTokens: PropTypes.list,
|
||||||
|
};
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
autoFocus: true,
|
||||||
|
searchTokens: ImmutableList(['@', ':', '#']),
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
suggestionsHidden: false,
|
||||||
|
focused: false,
|
||||||
|
selectedSuggestion: 0,
|
||||||
|
lastToken: null,
|
||||||
|
tokenStart: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
onChange = (e) => {
|
||||||
|
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
|
||||||
|
|
||||||
|
if (token !== null && this.state.lastToken !== token) {
|
||||||
|
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
|
||||||
|
this.props.onSuggestionsFetchRequested(token);
|
||||||
|
} else if (token === null) {
|
||||||
|
this.setState({ lastToken: null });
|
||||||
|
this.props.onSuggestionsClearRequested();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.onChange(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyDown = (e) => {
|
||||||
|
const { suggestions, disabled } = this.props;
|
||||||
|
const { selectedSuggestion, suggestionsHidden } = this.state;
|
||||||
|
|
||||||
|
if (disabled) {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.which === 229 || e.isComposing) {
|
||||||
|
// Ignore key events during text composition
|
||||||
|
// e.key may be a name of the physical key even in this case (e.x. Safari / Chrome on Mac)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch(e.key) {
|
||||||
|
case 'Escape':
|
||||||
|
if (suggestions.size === 0 || suggestionsHidden) {
|
||||||
|
document.querySelector('.ui').parentElement.focus();
|
||||||
|
} else {
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState({ suggestionsHidden: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
if (suggestions.size > 0 && !suggestionsHidden) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'ArrowUp':
|
||||||
|
if (suggestions.size > 0 && !suggestionsHidden) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'Enter':
|
||||||
|
case 'Tab':
|
||||||
|
// Select suggestion
|
||||||
|
if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.defaultPrevented || !this.props.onKeyDown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.onKeyDown(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBlur = () => {
|
||||||
|
this.setState({ suggestionsHidden: true, focused: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocus = () => {
|
||||||
|
this.setState({ focused: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuggestionClick = (e) => {
|
||||||
|
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index'));
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
||||||
|
this.input.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps (nextProps) {
|
||||||
|
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
|
||||||
|
this.setState({ suggestionsHidden: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInput = (c) => {
|
||||||
|
this.input = c;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSuggestion = (suggestion, i) => {
|
||||||
|
const { selectedSuggestion } = this.state;
|
||||||
|
let inner, key;
|
||||||
|
|
||||||
|
if (typeof suggestion === 'object') {
|
||||||
|
inner = <AutosuggestEmoji emoji={suggestion} />;
|
||||||
|
key = suggestion.id;
|
||||||
|
} else if (suggestion[0] === '#') {
|
||||||
|
inner = suggestion;
|
||||||
|
key = suggestion;
|
||||||
|
} else {
|
||||||
|
inner = <AutosuggestAccountContainer id={suggestion} />;
|
||||||
|
key = suggestion;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div role='button' tabIndex='0' key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
|
||||||
|
{inner}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id } = this.props;
|
||||||
|
const { suggestionsHidden } = this.state;
|
||||||
|
const style = { direction: 'ltr' };
|
||||||
|
|
||||||
|
if (isRtl(value)) {
|
||||||
|
style.direction = 'rtl';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='autosuggest-input'>
|
||||||
|
<label>
|
||||||
|
<span style={{ display: 'none' }}>{placeholder}</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
ref={this.setInput}
|
||||||
|
disabled={disabled}
|
||||||
|
placeholder={placeholder}
|
||||||
|
autoFocus={autoFocus}
|
||||||
|
value={value}
|
||||||
|
onChange={this.onChange}
|
||||||
|
onKeyDown={this.onKeyDown}
|
||||||
|
onKeyUp={onKeyUp}
|
||||||
|
onFocus={this.onFocus}
|
||||||
|
onBlur={this.onBlur}
|
||||||
|
style={style}
|
||||||
|
aria-autocomplete='list'
|
||||||
|
id={id}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
|
||||||
|
{suggestions.map(this.renderSuggestion)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -56,6 +56,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
suggestionsHidden: false,
|
suggestionsHidden: false,
|
||||||
|
focused: false,
|
||||||
selectedSuggestion: 0,
|
selectedSuggestion: 0,
|
||||||
lastToken: null,
|
lastToken: null,
|
||||||
tokenStart: 0,
|
tokenStart: 0,
|
||||||
|
@ -134,7 +135,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
onBlur = () => {
|
onBlur = () => {
|
||||||
this.setState({ suggestionsHidden: true });
|
this.setState({ suggestionsHidden: true, focused: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocus = () => {
|
||||||
|
this.setState({ focused: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
onSuggestionClick = (e) => {
|
onSuggestionClick = (e) => {
|
||||||
|
@ -145,7 +150,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps (nextProps) {
|
componentWillReceiveProps (nextProps) {
|
||||||
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) {
|
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
|
||||||
this.setState({ suggestionsHidden: false });
|
this.setState({ suggestionsHidden: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -207,6 +212,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
onChange={this.onChange}
|
onChange={this.onChange}
|
||||||
onKeyDown={this.onKeyDown}
|
onKeyDown={this.onKeyDown}
|
||||||
onKeyUp={onKeyUp}
|
onKeyUp={onKeyUp}
|
||||||
|
onFocus={this.onFocus}
|
||||||
onBlur={this.onBlur}
|
onBlur={this.onBlur}
|
||||||
onPaste={this.onPaste}
|
onPaste={this.onPaste}
|
||||||
style={style}
|
style={style}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
|
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
|
||||||
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
|
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
|
||||||
|
import AutosuggestInput from '../../../components/autosuggest_input';
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
import EmojiPicker from 'flavours/glitch/features/emoji_picker';
|
import EmojiPicker from 'flavours/glitch/features/emoji_picker';
|
||||||
import PollFormContainer from '../containers/poll_form_container';
|
import PollFormContainer from '../containers/poll_form_container';
|
||||||
|
@ -163,7 +164,11 @@ class ComposeForm extends ImmutablePureComponent {
|
||||||
|
|
||||||
// Selects a suggestion from the autofill.
|
// Selects a suggestion from the autofill.
|
||||||
onSuggestionSelected = (tokenStart, token, value) => {
|
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.
|
// 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.
|
// Sets a reference to the CW field.
|
||||||
handleRefSpoilerText = (spoilerComponent) => {
|
handleRefSpoilerText = (spoilerComponent) => {
|
||||||
if (spoilerComponent) {
|
if (spoilerComponent) {
|
||||||
this.spoilerText = spoilerComponent;
|
this.spoilerText = spoilerComponent.input;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -303,21 +308,22 @@ class ComposeForm extends ImmutablePureComponent {
|
||||||
<ReplyIndicatorContainer />
|
<ReplyIndicatorContainer />
|
||||||
|
|
||||||
<div className={`composer--spoiler ${spoiler ? 'composer--spoiler--visible' : ''}`}>
|
<div className={`composer--spoiler ${spoiler ? 'composer--spoiler--visible' : ''}`}>
|
||||||
<label>
|
<AutosuggestInput
|
||||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
|
|
||||||
<input
|
|
||||||
id='glitch.composer.spoiler.input'
|
|
||||||
placeholder={intl.formatMessage(messages.spoiler_placeholder)}
|
placeholder={intl.formatMessage(messages.spoiler_placeholder)}
|
||||||
value={spoilerText}
|
value={spoilerText}
|
||||||
onChange={this.handleChangeSpoiler}
|
onChange={this.handleChangeSpoiler}
|
||||||
onKeyDown={this.handleKeyDown}
|
onKeyDown={this.handleKeyDown}
|
||||||
onKeyUp={this.handleKeyUp}
|
onKeyUp={this.handleKeyUp}
|
||||||
disabled={!spoiler}
|
disabled={!spoiler}
|
||||||
type='text'
|
|
||||||
className='spoiler-input__input'
|
|
||||||
ref={this.handleRefSpoilerText}
|
ref={this.handleRefSpoilerText}
|
||||||
|
suggestions={this.props.suggestions}
|
||||||
|
onSuggestionsFetchRequested={onFetchSuggestions}
|
||||||
|
onSuggestionsClearRequested={onClearSuggestions}
|
||||||
|
onSuggestionSelected={this.onSpoilerSuggestionSelected}
|
||||||
|
searchTokens={[':']}
|
||||||
|
id='glitch.composer.spoiler.input'
|
||||||
|
className='spoiler-input__input'
|
||||||
/>
|
/>
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='composer--textarea'>
|
<div className='composer--textarea'>
|
||||||
|
|
|
@ -90,8 +90,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||||
dispatch(fetchComposeSuggestions(token));
|
dispatch(fetchComposeSuggestions(token));
|
||||||
},
|
},
|
||||||
|
|
||||||
onSuggestionSelected(position, token, suggestion) {
|
onSuggestionSelected(position, token, suggestion, path) {
|
||||||
dispatch(selectComposeSuggestion(position, token, suggestion, ['text']));
|
dispatch(selectComposeSuggestion(position, token, suggestion, path));
|
||||||
},
|
},
|
||||||
|
|
||||||
onChangeSpoilerText(text) {
|
onChangeSpoilerText(text) {
|
||||||
|
|
Loading…
Reference in a new issue