diff --git a/app/helpers/emoji_helper.rb b/app/helpers/emoji_helper.rb
deleted file mode 100644
index 848c03fce7..0000000000
--- a/app/helpers/emoji_helper.rb
+++ /dev/null
@@ -1,24 +0,0 @@
-# frozen_string_literal: true
-
-module EmojiHelper
- def emojify(text)
- return text if text.blank?
-
- text.gsub(emoji_pattern) do |match|
- emoji = Emoji.instance.unicode($1) # rubocop:disable Style/PerlBackrefs
-
- if emoji
- emoji
- else
- match
- end
- end
- end
-
- def emoji_pattern
- @emoji_pattern ||=
- /(?<=[^[:alnum:]:]|\n|^)
- (#{Emoji.instance.names.map { |name| Regexp.escape(name) }.join('|')})
- (?=[^[:alnum:]:]|$)/x
- end
-end
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
index 1f26907f24..9f10a8c150 100644
--- a/app/javascript/mastodon/actions/compose.js
+++ b/app/javascript/mastodon/actions/compose.js
@@ -1,4 +1,5 @@
import api from '../api';
+import { emojiIndex } from 'emoji-mart';
import {
updateTimeline,
@@ -210,19 +211,33 @@ export function clearComposeSuggestions() {
export function fetchComposeSuggestions(token) {
return (dispatch, getState) => {
+ if (token[0] === ':') {
+ const results = emojiIndex.search(token.replace(':', ''), { maxResults: 3 });
+ dispatch(readyComposeSuggestionsEmojis(token, results));
+ return;
+ }
+
api(getState).get('/api/v1/accounts/search', {
params: {
- q: token,
+ q: token.slice(1),
resolve: false,
limit: 4,
},
}).then(response => {
- dispatch(readyComposeSuggestions(token, response.data));
+ dispatch(readyComposeSuggestionsAccounts(token, response.data));
});
};
};
-export function readyComposeSuggestions(token, accounts) {
+export function readyComposeSuggestionsEmojis(token, emojis) {
+ return {
+ type: COMPOSE_SUGGESTIONS_READY,
+ token,
+ emojis,
+ };
+};
+
+export function readyComposeSuggestionsAccounts(token, accounts) {
return {
type: COMPOSE_SUGGESTIONS_READY,
token,
@@ -230,13 +245,21 @@ export function readyComposeSuggestions(token, accounts) {
};
};
-export function selectComposeSuggestion(position, token, accountId) {
+export function selectComposeSuggestion(position, token, suggestion) {
return (dispatch, getState) => {
- const completion = getState().getIn(['accounts', accountId, 'acct']);
+ let completion, startPosition;
+
+ if (typeof suggestion === 'object' && suggestion.id) {
+ completion = suggestion.native || suggestion.colons;
+ startPosition = position - 1;
+ } else {
+ completion = getState().getIn(['accounts', suggestion, 'acct']);
+ startPosition = position;
+ }
dispatch({
type: COMPOSE_SUGGESTION_SELECT,
- position,
+ position: startPosition,
token,
completion,
});
diff --git a/app/javascript/mastodon/components/autosuggest_emoji.js b/app/javascript/mastodon/components/autosuggest_emoji.js
new file mode 100644
index 0000000000..e2866e8e47
--- /dev/null
+++ b/app/javascript/mastodon/components/autosuggest_emoji.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { unicodeMapping } from '../emojione_light';
+
+const assetHost = process.env.CDN_HOST || '';
+
+export default class AutosuggestEmoji extends React.PureComponent {
+
+ static propTypes = {
+ emoji: PropTypes.object.isRequired,
+ };
+
+ render () {
+ const { emoji } = this.props;
+ let url;
+
+ if (emoji.custom) {
+ url = emoji.imageUrl;
+ } else {
+ const [ filename ] = unicodeMapping[emoji.native];
+ url = `${assetHost}/emoji/${filename}.svg`;
+ }
+
+ return (
+
+
+
+ {emoji.colons}
+
+ {inner}
+
+ );
+ }
+
render () {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
- const { suggestionsHidden, selectedSuggestion } = this.state;
+ const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' };
if (isRtl(value)) {
@@ -164,6 +185,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {