diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 5f265a75011..c86184046e5 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -1,4 +1,5 @@ import api from '../api'; +import emojione from 'emojione'; import { updateTimeline, @@ -22,6 +23,7 @@ export const COMPOSE_UPLOAD_UNDO = 'COMPOSE_UPLOAD_UNDO'; export const COMPOSE_SUGGESTIONS_CLEAR = 'COMPOSE_SUGGESTIONS_CLEAR'; export const COMPOSE_SUGGESTIONS_READY = 'COMPOSE_SUGGESTIONS_READY'; +export const COMPOSE_SUGGESTIONS_READY_TXT = 'COMPOSE_SUGGESTIONS_READY_TXT'; export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT'; export const COMPOSE_MOUNT = 'COMPOSE_MOUNT'; @@ -211,18 +213,56 @@ export function clearComposeSuggestions() { }; }; +let allShortcodes = null; // cached list of all shortcodes for suggestions + export function fetchComposeSuggestions(token) { - return (dispatch, getState) => { - api(getState).get('/api/v1/accounts/search', { - params: { - q: token, - resolve: false, - limit: 4, - }, - }).then(response => { - dispatch(readyComposeSuggestions(token, response.data)); - }); - }; + let leading = token[0]; + + if (leading === '@') { + // handle search + return (dispatch, getState) => { + api(getState).get('/api/v1/accounts/search', { + params: { + q: token.slice(1), // remove the '@' + resolve: false, + limit: 4, + }, + }).then(response => { + dispatch(readyComposeSuggestions(token, response.data)); + }); + }; + } else if (leading === ':') { + // shortcode + if (!allShortcodes) { + allShortcodes = Object.keys(emojione.emojioneList); + // TODO when we have custom emojons merged, add them to this shortcode list + } + return (dispatch) => { + const innertxt = token.slice(1); + if (innertxt.length > 1) { // prevent searching single letter, causes lag + dispatch(readyComposeSuggestionsTxt(token, allShortcodes.filter((sc) => { + return sc.indexOf(innertxt) !== -1; + }).sort((a, b) => { + if (a.indexOf(token) === 0 && b.indexOf(token) === 0) return a.localeCompare(b); + if (a.indexOf(token) === 0) return -1; + if (b.indexOf(token) === 0) return 1; + return a.localeCompare(b); + }))); + } + }; + } else { + // hashtag + return (dispatch, getState) => { + api(getState).get('/api/v1/search', { + params: { + q: token, + resolve: true, + }, + }).then(response => { + dispatch(readyComposeSuggestionsTxt(token, response.data.hashtags.map((ht) => `#${ht}`))); + }); + }; + } }; export function readyComposeSuggestions(token, accounts) { @@ -233,9 +273,19 @@ export function readyComposeSuggestions(token, accounts) { }; }; +export function readyComposeSuggestionsTxt(token, items) { + return { + type: COMPOSE_SUGGESTIONS_READY_TXT, + token, + items, + }; +}; + export function selectComposeSuggestion(position, token, accountId) { return (dispatch, getState) => { - const completion = getState().getIn(['accounts', accountId, 'acct']); + const completion = (typeof accountId === 'string') ? + accountId.slice(1) : // text suggestion: discard the leading : or # - the replacing code replaces only what follows + getState().getIn(['accounts', accountId, 'acct']); dispatch({ type: COMPOSE_SUGGESTION_SELECT, diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index 35b37600fe5..e94900c828b 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -1,5 +1,6 @@ import React from 'react'; import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container'; +import AutosuggestShortcode from '../features/compose/components/autosuggest_shortcode'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { isRtl } from '../rtl'; @@ -18,11 +19,12 @@ const textAtCursorMatchesToken = (str, caretPosition) => { word = str.slice(left, right + caretPosition); } - if (!word || word.trim().length < 2 || word[0] !== '@') { + if (!word || word.trim().length < 2 || ['@', ':', '#'].indexOf(word[0]) === -1) { return [null, null]; } - word = word.trim().toLowerCase().slice(1); + word = word.trim().toLowerCase(); + // was: .slice(1); - we leave the leading char there, handler can decide what to do based on it if (word.length > 0) { return [left + 1, word]; @@ -41,6 +43,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { onSuggestionSelected: PropTypes.func.isRequired, onSuggestionsClearRequested: PropTypes.func.isRequired, onSuggestionsFetchRequested: PropTypes.func.isRequired, + onLocalSuggestionsFetchRequested: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, onKeyUp: PropTypes.func, onKeyDown: PropTypes.func, @@ -64,7 +67,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { if (token !== null && this.state.lastToken !== token) { this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart }); - this.props.onSuggestionsFetchRequested(token); + if (token[0] === ':') { + // faster debounce for shortcodes. + // hashtags have long debounce because they're fetched from server. + this.props.onLocalSuggestionsFetchRequested(token); + } else { + this.props.onSuggestionsFetchRequested(token); + } } else if (token === null) { this.setState({ lastToken: null }); this.props.onSuggestionsClearRequested(); @@ -128,7 +137,9 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { } onSuggestionClick = (e) => { - const suggestion = Number(e.currentTarget.getAttribute('data-index')); + // leave suggestion string unchanged if it's a hash / shortcode suggestion. convert account number to int. + const suggestionStr = e.currentTarget.getAttribute('data-index'); + const suggestion = [':', '#'].indexOf(suggestionStr[0]) !== -1 ? suggestionStr : Number(suggestionStr); e.preventDefault(); this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion); this.textarea.focus(); @@ -160,6 +171,14 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { style.direction = 'rtl'; } + let makeItem = (suggestion) => { + if (suggestion[0] === ':') return ; + if (suggestion[0] === '#') return suggestion; // hashtag + + // else - accounts are always returned as IDs with no prefix + return ; + }; + return (
))} diff --git a/app/javascript/mastodon/features/compose/components/autosuggest_shortcode.js b/app/javascript/mastodon/features/compose/components/autosuggest_shortcode.js new file mode 100644 index 00000000000..4a0ef96b342 --- /dev/null +++ b/app/javascript/mastodon/features/compose/components/autosuggest_shortcode.js @@ -0,0 +1,38 @@ +import React from 'react'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; +import emojione from 'emojione'; + +// This is bad, but I don't know how to make it work without importing the entirety of emojione. +// taken from some old version of mastodon before they gutted emojione to "emojione_light" +const shortnameToImage = str => str.replace(emojione.regShortNames, shortname => { + if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emojione.emojioneList)) { + return shortname; + } + + const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1]; + const alt = emojione.convert(unicode.toUpperCase()); + + return `${alt}`; +}); + +export default class AutosuggestShortcode extends ImmutablePureComponent { + + static propTypes = { + shortcode: PropTypes.string.isRequired, + }; + + render () { + const { shortcode } = this.props; + + let emoji = shortnameToImage(shortcode); + + return ( +
+
+ {shortcode} +
+ ); + } + +} diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 000e414feff..f6b5cf0be58 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -90,6 +90,10 @@ export default class ComposeForm extends ImmutablePureComponent { this.props.onFetchSuggestions(token); }, 500, { trailing: true }) + onLocalSuggestionsFetchRequested = debounce((token) => { + this.props.onFetchSuggestions(token); + }, 100, { trailing: true }) + onSuggestionSelected = (tokenStart, token, value) => { this._restoreCaret = null; this.props.onSuggestionSelected(tokenStart, token, value); @@ -186,6 +190,7 @@ export default class ComposeForm extends ImmutablePureComponent { suggestions={this.props.suggestions} onKeyDown={this.handleKeyDown} onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} + onLocalSuggestionsFetchRequested={this.onLocalSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionSelected={this.onSuggestionSelected} onPaste={onPaste} diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index e7a3567b499..d2b29721f4e 100644 --- a/app/javascript/mastodon/reducers/compose.js +++ b/app/javascript/mastodon/reducers/compose.js @@ -15,6 +15,7 @@ import { COMPOSE_UPLOAD_PROGRESS, COMPOSE_SUGGESTIONS_CLEAR, COMPOSE_SUGGESTIONS_READY, + COMPOSE_SUGGESTIONS_READY_TXT, COMPOSE_SUGGESTION_SELECT, COMPOSE_ADVANCED_OPTIONS_CHANGE, COMPOSE_SENSITIVITY_CHANGE, @@ -263,6 +264,9 @@ export default function compose(state = initialState, action) { return state.update('suggestions', ImmutableList(), list => list.clear()).set('suggestion_token', null); case COMPOSE_SUGGESTIONS_READY: return state.set('suggestions', ImmutableList(action.accounts.map(item => item.id))).set('suggestion_token', action.token); + case COMPOSE_SUGGESTIONS_READY_TXT: + // suggestion received that is not an account - hashtag or emojo + return state.set('suggestions', ImmutableList(action.items.map(item => item))).set('suggestion_token', action.token); case COMPOSE_SUGGESTION_SELECT: return insertSuggestion(state, action.position, action.token, action.completion); case TIMELINE_DELETE: diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 2437d5a910a..03f4f0800f0 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -2096,6 +2096,8 @@ .autosuggest-textarea__suggestions { display: none; position: absolute; + max-height: 300px; + overflow-y: auto; top: 100%; width: 100%; z-index: 99;