import api from '../api';
-import emojione from 'emojione';
import {
updateTimeline,
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';
};
};
-let allShortcodes = null; // cached list of all shortcodes for suggestions
-
export function fetchComposeSuggestions(token) {
- 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}`)));
- });
- };
- }
+ return (dispatch, getState) => {
+ api(getState).get('/api/v1/accounts/search', {
+ params: {
+ q: token,
+ resolve: false,
+ limit: 4,
+ },
+ }).then(response => {
+ dispatch(readyComposeSuggestions(token, response.data));
+ });
+ };
};
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 = (typeof accountId === 'string') ?
- accountId.slice(1) : // text suggestion: discard the leading : or # - the replacing code replaces only what follows
- getState().getIn(['accounts', accountId, 'acct']);
+ const completion = getState().getIn(['accounts', accountId, 'acct']);
dispatch({
type: COMPOSE_SUGGESTION_SELECT,
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';
word = str.slice(left, right + caretPosition);
}
- if (!word || word.trim().length < 2 || ['@', ':', '#'].indexOf(word[0]) === -1) {
+ if (!word || word.trim().length < 2 || word[0] !== '@') {
return [null, null];
}
- word = word.trim().toLowerCase();
- // was: .slice(1); - we leave the leading char there, handler can decide what to do based on it
+ word = word.trim().toLowerCase().slice(1);
if (word.length > 0) {
return [left + 1, word];
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,
if (token !== null && this.state.lastToken !== token) {
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
- 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);
- }
+ this.props.onSuggestionsFetchRequested(token);
} else if (token === null) {
this.setState({ lastToken: null });
this.props.onSuggestionsClearRequested();
}
onSuggestionClick = (e) => {
- // 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);
+ const suggestion = Number(e.currentTarget.getAttribute('data-index'));
e.preventDefault();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
this.textarea.focus();
style.direction = 'rtl';
}
- let makeItem = (suggestion) => {
- if (suggestion[0] === ':') return <AutosuggestShortcode shortcode={suggestion} />;
- if (suggestion[0] === '#') return suggestion; // hashtag
-
- // else - accounts are always returned as IDs with no prefix
- return <AutosuggestAccountContainer id={suggestion} />;
- };
-
return (
<div className='autosuggest-textarea'>
<label>
className={`autosuggest-textarea__suggestions__item ${i === selectedSuggestion ? 'selected' : ''}`}
onMouseDown={this.onSuggestionClick}
>
- {makeItem(suggestion)}
+ <AutosuggestAccountContainer id={suggestion} />
</div>
))}
</div>
+++ /dev/null
-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 `<img draggable="false" class="emojione" alt="${alt}" src="/emoji/${unicode}.svg" />`;
-});
-
-export default class AutosuggestShortcode extends ImmutablePureComponent {
-
- static propTypes = {
- shortcode: PropTypes.string.isRequired,
- };
-
- render () {
- const { shortcode } = this.props;
-
- let emoji = shortnameToImage(shortcode);
-
- return (
- <div className='autosuggest-account'>
- <div className='autosuggest-account-icon' dangerouslySetInnerHTML={{ __html: emoji }} />
- {shortcode}
- </div>
- );
- }
-
-}
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);
suggestions={this.props.suggestions}
onKeyDown={this.handleKeyDown}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
- onLocalSuggestionsFetchRequested={this.onLocalSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
onSuggestionSelected={this.onSuggestionSelected}
onPaste={onPaste}
COMPOSE_UPLOAD_PROGRESS,
COMPOSE_SUGGESTIONS_CLEAR,
COMPOSE_SUGGESTIONS_READY,
- COMPOSE_SUGGESTIONS_READY_TXT,
COMPOSE_SUGGESTION_SELECT,
COMPOSE_ADVANCED_OPTIONS_CHANGE,
COMPOSE_SENSITIVITY_CHANGE,
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:
.autosuggest-textarea__suggestions {
display: none;
position: absolute;
- max-height: 300px;
- overflow-y: auto;
top: 100%;
width: 100%;
z-index: 99;
cat aescling's git repositories / mastodon.git / commitdiff