const buildSuggestions = () => {
const suggestions = [];
let similarEmoji = [];
const fuzzyRegexp = function(str) {
const reEscape = new RegExp('\\(([' + ('+.*?[]{}()^$|\\'.replace(/(.)/g, '\\$1')) + '])\\)', 'g');
return new RegExp('(.*)' + (str.toLowerCase().replace(/(.)/g, '($1)(.*?)')).replace(reEscape, '(\\$1)') + '$', 'i');
};
const regTyped = fuzzyRegexp(typed);
for (var i=0, maxSuggestions = 7; i < emojiKeys.length && maxSuggestions > 0; i++) {
if(regTyped.test(emojiKeys[i])) {
--maxSuggestions;
similarEmoji.push(emojiKeys[i]);
}
}
similarEmoji = similarEmoji.sort((a,b) => {
return a.length - b.length
});
for (let key of similarEmoji) {
suggestions.push(makeSuggestion(key));
}
if (suggestions.length) {
dropdown.props.items = suggestions;
m.render($container[0], dropdown.render());
dropdown.show();
const coordinates = getCaretCoordinates(this, emojiStart);
const width = dropdown.$().outerWidth();
const height = dropdown.$().outerHeight();
const parent = dropdown.$().offsetParent();
let left = coordinates.left;
let top = coordinates.top + 15;
if (top + height > parent.height()) {
top = coordinates.top - height - 15;
}
if (left + width > parent.width()) {
left = parent.width() - width;
}
dropdown.show(left, top);
}
};
.on('click keyup', function(e) {
// Up, down, enter, tab, escape, left, right.
if ([9, 13, 27, 40, 38, 37, 39].indexOf(e.which) !== -1) return;
const cursor = this.selectionStart;
if (this.selectionEnd - cursor > 0) return;
// Search backwards from the cursor for an ':' symbol. If we find
// one and followed by a whitespace, we will want to show the
// autocomplete dropdown!
const value = this.value;
emojiStart = 0;
for (let i = cursor - 1; i >= 0; i--) {
const character = value.substr(i, 1);
// check what user typed, emoji names only contains alphanumeric,
// underline, '+' and '-'
if (!/[a-z0-9]|\+|\-|_|\:/.test(character)) break;
// make sure ':' followed by a whitespace or newline
if (character === ':' && (i == 0 || /\s/.test(value.substr(i - 1, 1)))) {
emojiStart = i + 1;
break;
}
}
dropdown.hide();
dropdown.active = false;
if (emojiStart) {
typed = value.substring(emojiStart, cursor).toLowerCase();
const makeSuggestion = function(key) {
const code = ':' + key + ':';
const imageName = (emojiMap[key].indexOf('-20e3') != -1 || emojiMap[key] == 'a9' || emojiMap[key] == 'ae' ? '00' : '') + emojiMap[key];
return (
<button
key={key}
onclick={() => applySuggestion(code)}
onmouseenter={function() {
dropdown.setIndex($(this).parent().index());
}}>
<img alt={code} class="emoji" draggable="false" src={'//cdn.jsdelivr.net/emojione/assets/png/' + imageName + '.png'}/>
{key}
</button>
);
};
const buildSuggestions = () => {
const suggestions = [];
let similarEmoji = [];
const fuzzyRegexp = function(str) {
const reEscape = new RegExp('\\(([' + ('+.*?[]{}()^$|\\'.replace(/(.)/g, '\\$1')) + '])\\)', 'g');
return new RegExp('(.*)' + (str.toLowerCase().replace(/(.)/g, '($1)(.*?)')).replace(reEscape, '(\\$1)') + '$', 'i');
};
const regTyped = fuzzyRegexp(typed);
for (var i=0, maxSuggestions = 7; i < emojiKeys.length && maxSuggestions > 0; i++) {
if(regTyped.test(emojiKeys[i])) {
--maxSuggestions;
similarEmoji.push(emojiKeys[i]);
}
}
similarEmoji = similarEmoji.sort((a,b) => {
return a.length - b.length
});
for (let key of similarEmoji) {
suggestions.push(makeSuggestion(key));
}
if (suggestions.length) {
dropdown.props.items = suggestions;
m.render($container[0], dropdown.render());
dropdown.show();
const coordinates = getCaretCoordinates(this, emojiStart);
const width = dropdown.$().outerWidth();
const height = dropdown.$().outerHeight();
const parent = dropdown.$().offsetParent();
let left = coordinates.left;
let top = coordinates.top + 15;
if (top + height > parent.height()) {
top = coordinates.top - height - 15;
}
if (left + width > parent.width()) {
left = parent.width() - width;
}
dropdown.show(left, top);
}
};
buildSuggestions();
dropdown.setIndex(0);
dropdown.$().scrollTop(0);
dropdown.active = true;
}
});