From 4ac158f1d30c2e42abb76efa0b7253e96d4fc4d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Wed, 20 Sep 2017 20:21:09 +0200 Subject: [PATCH] Emoji and Hashtag autocomplete --- app/javascript/mastodon/actions/compose.js | 62 +++++++++++++++---- .../components/autosuggest_textarea.js | 20 ++++-- .../components/autosuggest_shortcode.js | 38 ++++++++++++ app/javascript/mastodon/reducers/compose.js | 4 ++ 4 files changed, 108 insertions(+), 16 deletions(-) create mode 100644 app/javascript/mastodon/features/compose/components/autosuggest_shortcode.js diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 5f265a7501..95336cea2e 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'; @@ -212,17 +214,43 @@ export function clearComposeSuggestions() { }; 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 === ':') { + // mojos + let allShortcodes = Object.keys(emojione.emojioneList); + // TODO when we have custom emojons merged, add theme to this shortcode list + return (dispatch) => { + dispatch(readyComposeSuggestionsTxt(token, allShortcodes.filter((sc) => { + return sc.indexOf(token) === 0; + }))); + }; + } 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 +261,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..d73491ec06 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]; @@ -128,7 +130,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 +164,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 `${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/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index e7a3567b49..d2b29721f4 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: