diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
index 5f265a7501..c86184046e 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 35b37600fe..e94900c828 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 0000000000..4a0ef96b34
--- /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 ``;
+});
+
+export default class AutosuggestShortcode extends ImmutablePureComponent {
+
+ static propTypes = {
+ shortcode: PropTypes.string.isRequired,
+ };
+
+ render () {
+ const { shortcode } = this.props;
+
+ let emoji = shortnameToImage(shortcode);
+
+ return (
+
`;
+});
+
+export default class AutosuggestShortcode extends ImmutablePureComponent {
+
+ static propTypes = {
+ shortcode: PropTypes.string.isRequired,
+ };
+
+ render () {
+ const { shortcode } = this.props;
+
+ let emoji = shortnameToImage(shortcode);
+
+ return (
+