From 3783062450b1f6b6635bea5e75a4f0942e2f0b4b 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 1/6] 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 5f265a75011..95336cea2e0 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 35b37600fe5..d73491ec067 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 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/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: From 8c0733a14e0480f40b8f39933bccf4de94b11aa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Wed, 20 Sep 2017 21:28:44 +0200 Subject: [PATCH 2/6] typo in comment --- app/javascript/mastodon/actions/compose.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 95336cea2e0..b47fbc8ba27 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -230,9 +230,9 @@ export function fetchComposeSuggestions(token) { }); }; } else if (leading === ':') { - // mojos + // shortcode let allShortcodes = Object.keys(emojione.emojioneList); - // TODO when we have custom emojons merged, add theme to this shortcode list + // TODO when we have custom emojons merged, add them to this shortcode list return (dispatch) => { dispatch(readyComposeSuggestionsTxt(token, allShortcodes.filter((sc) => { return sc.indexOf(token) === 0; From 4f9a493d9d0bb6d502dded619f7ac9d4064452ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Wed, 20 Sep 2017 21:39:22 +0200 Subject: [PATCH 3/6] cache allShortcodes --- app/javascript/mastodon/actions/compose.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index b47fbc8ba27..fc154f90ab4 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -213,6 +213,8 @@ export function clearComposeSuggestions() { }; }; +let allShortcodes = null; // cached list of all shortcodes for suggestions + export function fetchComposeSuggestions(token) { let leading = token[0]; @@ -231,8 +233,10 @@ export function fetchComposeSuggestions(token) { }; } else if (leading === ':') { // shortcode - let allShortcodes = Object.keys(emojione.emojioneList); - // TODO when we have custom emojons merged, add them to this shortcode list + if (!allShortcodes) { + allShortcodes = Object.keys(emojione.emojioneList); + // TODO when we have custom emojons merged, add them to this shortcode list + } return (dispatch) => { dispatch(readyComposeSuggestionsTxt(token, allShortcodes.filter((sc) => { return sc.indexOf(token) === 0; From cbf00168f1c07b93816ae1268a104b3cc00f7589 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Wed, 20 Sep 2017 21:53:08 +0200 Subject: [PATCH 4/6] add scrollbar to mojon suggestions list when too long --- app/javascript/styles/components.scss | 2 ++ 1 file changed, 2 insertions(+) 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; From a3760b7729f9a6ad93591d9c0cdfa39e3b36d483 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Wed, 20 Sep 2017 21:57:33 +0200 Subject: [PATCH 5/6] TURBO shortcode search --- .../mastodon/components/autosuggest_textarea.js | 9 ++++++++- .../mastodon/features/compose/components/compose_form.js | 5 +++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index d73491ec067..e94900c828b 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -43,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, @@ -66,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(); 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} From 514edd3c23b9a563aae6a670a7862f6475fd218c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Wed, 20 Sep 2017 22:13:09 +0200 Subject: [PATCH 6/6] fulltext mojo suggestions --- app/javascript/mastodon/actions/compose.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index fc154f90ab4..c86184046e5 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -238,9 +238,17 @@ export function fetchComposeSuggestions(token) { // TODO when we have custom emojons merged, add them to this shortcode list } return (dispatch) => { - dispatch(readyComposeSuggestionsTxt(token, allShortcodes.filter((sc) => { - return sc.indexOf(token) === 0; - }))); + 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